I am using Mapbox-gl package for Mapbox. I am rendering the map inside the useEffect and what I want to do is change the centre of Mapbox without pletely rerendering the map. for example

const mapContainerRef = useRef(null);

const [markerLngLat, setMarkerLngLat] = useState([85.324, 27.7172]);

useEffect(() => {
  const map = new mapboxgl.Map({
    container: mapContainerRef.current,
    style: 'mapbox://styles/lmaps/ckl6t1boq578819qod5v7ynby',
    center: markerLngLat,
    zoom: 13,
  });
}, []);

return (
  <div>
    <a onClick={setMarkerLngLat([65.468754, 44.57875])} />
    <div className='listing-map-container' ref={mapContainerRef} />
  </div>
);

With the click of the button, I want to move the centre of the map from the previous lat long to the newly set Latlong without re-rendering the entire map. Passing markerLngLat in the [] in useEffect works but it pletely re-rerenders the map and all other 1000's markers on it, so can't prefer that way. The actual code is much longer and many markers are being marked on the map so I don't want to re-render the map entirely.

I am using Mapbox-gl package for Mapbox. I am rendering the map inside the useEffect and what I want to do is change the centre of Mapbox without pletely rerendering the map. for example

const mapContainerRef = useRef(null);

const [markerLngLat, setMarkerLngLat] = useState([85.324, 27.7172]);

useEffect(() => {
  const map = new mapboxgl.Map({
    container: mapContainerRef.current,
    style: 'mapbox://styles/lmaps/ckl6t1boq578819qod5v7ynby',
    center: markerLngLat,
    zoom: 13,
  });
}, []);

return (
  <div>
    <a onClick={setMarkerLngLat([65.468754, 44.57875])} />
    <div className='listing-map-container' ref={mapContainerRef} />
  </div>
);

With the click of the button, I want to move the centre of the map from the previous lat long to the newly set Latlong without re-rendering the entire map. Passing markerLngLat in the [] in useEffect works but it pletely re-rerenders the map and all other 1000's markers on it, so can't prefer that way. The actual code is much longer and many markers are being marked on the map so I don't want to re-render the map entirely.

• javascript
• reactjs
• mapbox
• mapbox-gl-js
• mapbox-gl

1 Answer 1

Your are re-creating the Mapbox instance each time you set a new state, try using some method like setCenter or flyTo, directly to the instance, something like:

const mapRef = useRef();
const [mapObject, setMap] = useState();

useEffect(() => {
  const map = new mapboxgl.Map({
    container: mapContainerRef.current,
    style: 'mapbox://styles/lmaps/ckl6t1boq578819qod5v7ynby',
    center: markerLngLat,
    zoom: 13,
  });

  setMap(map);
},[]);

function setMapCenter(coords) {
  if (mapObject) {
    mapObject.setCenter(coords);
  }
}

return (
  <div>
    <a onClick={() => setMapCenter([65.468754, 44.57875])} />
    <div className='listing-map-container' ref={mapRef}></div>
  </div>
);