How to change center Latitude and Longitude of a mapbox-gl in react js?

user_9350240 0
Viewed 2750

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 completely 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 completely 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.

mapbox-gl mapbox-gl-js mapbox reactjs javascript
1 Answers

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>
);
user_149545030
Related