Mapbox Render Issue in Bootstrap Modal Reactjs

Question

I have been trying to add mapbox in a bootstrap modal in Reactjs. I have a component which calls a child component of Map having all elements required by MapBox.

import React, { useRef, useEffect, useState } from 'react';
import mapboxgl from 'mapbox-gl';
import url from '../shared/url';

mapboxgl.accessToken =url.mapbox_api;

const Map = (props) => {
    const mapContainerRef = useRef(null);
    const [lng, setLng] = useState(5);
    const [lat, setLat] = useState(34);
    const [zoom, setZoom] = useState(6);

    // Initialize map when component mounts
    useEffect(() => {
        const map = new mapboxgl.Map({
            container: mapContainerRef.current,
            style: 'mapbox://styles/mapbox/streets-v11',
            center: [lng, lat],
            zoom: zoom
        });
        // Add navigation control (the +/- zoom buttons)
        map.addControl(new mapboxgl.NavigationControl(), 'top-right');
        map.on('move', () => {
            setLng(map.getCenter().lng.toFixed(4));
            setLat(map.getCenter().lat.toFixed(4));
            setZoom(map.getZoom().toFixed(2));
        });
        map.resize();
        // Clean up on unmount
        return () => map.remove();
    },[props.ModalOpen]); // eslint-disable-line react-hooks/exhaustive-deps

    return (
        <div>
            <div className='sidebarStyle'>
                <div>
                    Longitude: {lng} | Latitude: {lat} | Zoom: {zoom}
                </div>
            </div>
            <div className='map-container' ref={mapContainerRef} />
        </div>
    );
};

export default Map;

This is Map Child Component. It has been called in another parent component AddPropertyForm.js

const [ModalOpen, setModalOpen] = useState(false);

const handleModal=()=>{
    setTimeout(setModalOpen(true),1000);
  }

// Button Component That Opens Modal
<div className='col-xl-12'>
            <div className='my_profile_setting_input'>
              <a className='btn btn1 float-left'
                 href='#'
                 onClick={handleModal}
                 data-toggle='modal'
                 data-target='.maps'>Open Google Maps</a>
            </div>
          </div>
//Modal Code
 <div
              className='modal fade maps'
              tabIndex={-1}
              role='dialog'
              aria-hidden='true'
          >
            <div className='modal-dialog modal-lg modal-dialog-centered' role='document'>
              <div className='modal-content'>
                <div className='modal-header'>
                  <h4>Select Location in Map</h4>
                  <button
                      type='button'
                      className='close'
                      data-dismiss='modal'
                      aria-label='Close'
                  >
                    <span aria-hidden='true'>×</span>
                  </button>
                </div>
                <div className='modal-body container pb20' id="locationSelector">
                  <Map ModalOpen={ModalOpen}/>

                </div>
              </div>
            </div>
          </div>

This is the Screenshot of the Modal when opened. enter image description here

Mapbox Render Issue in Bootstrap Modal Reactjs

0 Answers0