57 lines
1.5 KiB
JavaScript
57 lines
1.5 KiB
JavaScript
import {useMap, useMapEvents} from "react-leaflet";
|
|
import {useEffect} from "react";
|
|
|
|
/**
|
|
* Helper component for console logging where on a map the user clicked for debugging purposes.
|
|
*
|
|
* This component renders nothing and is intended to be mounted inside a <MapContainer>
|
|
*/
|
|
export function MapClickLogger() {
|
|
|
|
const map = useMap();
|
|
useMapEvents({
|
|
click(e) {
|
|
console.log("lat:", e.latlng.lat, "lng:", e.latlng.lng);
|
|
},
|
|
});
|
|
|
|
return null;
|
|
}
|
|
|
|
/**
|
|
* Helper component that detects when a zoom change as completed and sets the callback to the updated zoom level
|
|
*
|
|
* This component renders nothing and is intended to be mounted inside a <MapContainer>
|
|
*
|
|
* @param onZoom Callback set to the current zoom level on zoomend
|
|
*/
|
|
export function ZoomWatcher({onZoom}){
|
|
const map = useMap();
|
|
useMapEvents({
|
|
zoomend(e){
|
|
onZoom(map.getZoom());
|
|
|
|
}
|
|
})
|
|
return null;
|
|
}
|
|
|
|
/**
|
|
* Helper component that take triggers a flyTo animation when a position is present
|
|
*
|
|
* This component returns nothing and is intended to be mounted inside a <MapConatiner>
|
|
*
|
|
* @param position Array of two integers representing the desired coordinates to flyTo
|
|
* @param zoom Integer representing the desired zoom level to display
|
|
|
|
*/
|
|
export function FlyTo({ position, zoom }) {
|
|
const map = useMap();
|
|
|
|
useEffect(() => {
|
|
if (!position) return;
|
|
map.flyTo(position, zoom, { animate: true });
|
|
}, [position, zoom, map]);
|
|
|
|
return null;
|
|
} |