Estoy tratando de mantener el estado del mapa, para no volver a renderizar/inicializar el mapa cada vez que el usuario regresa a la página del mapa.
Probé con el contexto donde omito la inicialización del mapa cuando el objeto del mapa no está vacío, pero luego obtengo un mapa en blanco.
useEffect(() => { const initializeMap = () => { const map = new mapboxgl.Map({ container: mapContainerRef.current, style: "", center: [lng, lat], pitch: 59.49999999999986, // pitch in degrees bearing: -136.86837902659892, // bearing in degrees zoom: zoom, }); map.on("load", () => { setMap(map); map.resize(); }); console.log("init"); }; if (!map) initializeMap(); }, [map]);es posible? ayuda muy apreciada
EDITAR:
Encontré a alguien haciendo la misma pregunta: https://github.com/mapbox/mapbox-gl-js/issues/8687
Todavía tengo problemas con la referencia del contenedor, si alguien sabe cómo puedo actualizar el contenedor con el contenedor del mapa anterior, sería útil. Puedo obtener el contenedor anterior llamando a map.getContainer() pero no tengo idea de cómo configurarlo.
reemplazar div anterior con mapa de contexto resuelve esto para mí:
map ? document.getElementById("map").replaceWith(map.getContainer()) : ""; // in return <div id={"map-container"}> <div id={"map"} className="map-container" ref={(el) => (mapContainerRef.current = el)} />Ahora el mapa no se recarga al navegar entre páginas
Ejemplo de implementación de contexto de otra persona: https://codesandbox.io/s/mapbox-react-popups-fd4d4?file=/src/components/Map.js