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

admin管理员组

文章数量:1332339

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

Share Improve this question Follow edited Jan 11, 2022 at 7:50 AdriSolid 2,82511 gold badge1010 silver badges1818 bronze badges asked Mar 5, 2021 at 18:15 Ankit ShahAnkit Shah 1,34522 gold badges1818 silver badges3434 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

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

本文标签： javascriptHow to change center Latitude and Longitude of a mapboxgl in react jsStack Overflow