Estoy tratando de replicar algunas funciones del mapa del folleto https://leafletjs.com/examples/choropleth/ para reaccionar/mecanografiar pero recibo un error cuando intento agregar la función para hacer zoom en una característica que se rompe, este es el codigo en el que estoy trabajando
import Leaflet from 'leaflet'; import React, { useRef, RefObject, } from 'react'; import { MapContainer, TileLayer, GeoJSON, useMap, } from 'react-leaflet'; import styled from 'styled-components'; import { statesData } from './statesData'; import './style.css'; const EmployerLocationMap = () => { const geoJson: RefObject<Leaflet.GeoJSON> = useRef(null); const map = useMap(); const highlightFeature = (e: Leaflet.LeafletMouseEvent) => { const layer = e.target; layer.setStyle({ color: '#666', dashArray: '', fillOpacity: 0.7, weight: 5, }); }; const resetHighlight = (e: Leaflet.LeafletMouseEvent) => { geoJson.current?.resetStyle(e.target); }; const zoomToFeature = (e: Leaflet.LeafletMouseEvent) => { map.fitBounds(e.target.getBounds()); }; return ( <CardContainer> <Row> <Col width='60%'> <MapContainer center={[37.8, -96]} zoom={3} > <TileLayer attribution='© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' url='https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png' /> <GeoJSON data={statesData} key='usa-states' ref={geoJson} style={() => { return { color: 'white', dashArray: '3', fillColor: '#f0f0f0', fillOpacity: 0.7, opacity: 1, weight: 2, }; }} onEachFeature={(__, layer) => { layer.on({ click: (e) => { zoomToFeature(e); }, mouseout: (e) => { resetHighlight(e); }, mouseover: (e) => { highlightFeature(e); }, }); }} /> </MapContainer> </Col> </Row> </CardContainer> ); }; export default EmployerLocationMap;y cuando inicio la interfaz me sale este error en la consola:
Error no detectado: no se proporcionó contexto: useLeafletContext() solo se puede usar en un descendiente de
<MapContainer>en useLeafletContext
No entiendo qué podría estar mal, he visto varias implementaciones en esto y se ve igual.
useMap solo se puede usar dentro de un componente que es en sí mismo un hijo/descendiente de <MapContainer> . https://react-leaflet.js.org/docs/api-map/#usemap
Enlace que proporciona la instancia de Leaflet Map en cualquier descendiente de un
MapContainer.
Aquí intenta llamar a useMap en su componente EmployerLocationMap , que contiene un <MapContainer> , pero que obviamente no es descendiente de uno.
Una solución para su caso podría ser separar la lógica del mapa en otro componente que pueda colocar dentro del <MapContainer> :
const EmployerLocationMap = () => { return ( <CardContainer> <Row> <Col width='60%'> <MapContainer center={[37.8, -96]} zoom={3} > <TileLayer attribution='© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' url='https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png' /> <MapContent /> </MapContainer> </Col> </Row> </CardContainer> ); }; const MapContent = () => { const geoJson: RefObject<Leaflet.GeoJSON> = useRef(null); const map = useMap(); const highlightFeature = (e: Leaflet.LeafletMouseEvent) => { const layer = e.target; layer.setStyle({ color: '#666', dashArray: '', fillOpacity: 0.7, weight: 5, }); }; const resetHighlight = (e: Leaflet.LeafletMouseEvent) => { geoJson.current?.resetStyle(e.target); }; const zoomToFeature = (e: Leaflet.LeafletMouseEvent) => { map.fitBounds(e.target.getBounds()); }; return ( <GeoJSON data={statesData} key='usa-states' ref={geoJson} style={() => { return { color: 'white', dashArray: '3', fillColor: '#f0f0f0', fillOpacity: 0.7, opacity: 1, weight: 2, }; }} onEachFeature={(__, layer) => { layer.on({ click: (e) => { zoomToFeature(e); }, mouseout: (e) => { resetHighlight(e); }, mouseover: (e) => { highlightFeature(e); }, }); }} /> ); };