An example of using the 'react-leaflet' new useLeaflet() hook?
First of all, you can only use the hook in a component that's inside the Map element:
<Map>
<YourComponent />
</Map
And then inside your component you can do something like:
const YourComponent = () => {
const { map } = useLeaflet();
const [bounds, setBounds] = React.useState({});
React.useEffect(() => {
const eventHandler = event => {
setBounds(event.target.getBounds());
doSomethingElse();
}
map.on("moveend", eventHandler);
return () => {
map.off("moveend", eventHandler); // Remove event handler to avoid creating multiple handlers
}
}, [setBounds, map]);
return {
// Use bounds for whatever you need
<div>Lat: {bounds.lat}; long: {bounds.lng}</div>
}
}