Cómo obtener las 4 coordenadas que representan los 4 extremos visibles en el mapa usando react-leaflet .
Me gustaría usar la función contains() para devolver verdadero o falso para una coordenada que se pasa, si es verdadero significa que está dentro de los límites establecidos en getBounds() , si es falso está fuera.
Solo con un leaflet en JavaScript puro, sé cómo usar esta función. Pero estoy desarrollando una aplicación web React, y estoy usando la biblioteca react-leaflet y necesito usar esta función.
Gracias de antemano por cualquier ayuda.
Aquí está mi código que puse en codesandbox
import React from "react"; import { Map, TileLayer } from "react-leaflet"; import "./styles.css"; const App = () => { const center = [51.505, -0.09]; const [map, setMap] = React.useState(null); React.useEffect(() => { if (map) { const contains = map.getBounds().contains(center); console.log("contains:: ", contains); } }, [center, map]); return ( <Map ref={setMap} style={{ width: "100%", height: "100vh" }} center={center} zoom={13} > <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" attribution='© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' /> </Map> ); }; export default App;Necesita obtener una referencia al mapa. Luego puede acceder a la propiedad .leafletElement de la referencia, que es la instancia del mapa:
const App = ({ center }) => { const mapRef = useRef(); React.useEffect(() => { if (mapRef) { const contains = mapRef.leafletElement.getBounds().contains(center); } }, [center]); return ( <Map ref={mapRef} {...otherProps} > <TileLayer {...props} /> </Map> ); }; Necesita una referencia al mapa, para que pueda llamar cosas como L.map.getBounds() . react-leaflet ya no usa la propiedad .leafletElement desde react-leaflet v3. Aquí hay una respuesta v4:
const App = ({ center }) => { const [map, setMap] = useState(null) React.useEffect(() => { if (map) { const contains = map.getBounds().contains(center); } }, [center]); return ( <Map ref={setMap} {...otherProps} > <TileLayer {...props} /> </Map> ); };Los documentos tienen algunos ejemplos de cómo tomar la instancia de L.map subyacente como referencia y usarla, aquí: https://react-leaflet.js.org/docs/example-external-state/ .