Add Leaflet and react-leaflet dependencies for interactive map functionality Extend DDDepot type with optional latitude/longitude fields for map markers Update site metadata and admin settings page text Add client-side DepotMap component to render depot locations Update PocketBase admin token in environment configuration
34 lines
848 B
JavaScript
34 lines
848 B
JavaScript
import { useLeafletContext } from '@react-leaflet/core';
|
|
import { useEffect } from 'react';
|
|
export function useMap() {
|
|
return useLeafletContext().map;
|
|
}
|
|
export function useMapEvent(type, handler) {
|
|
const map = useMap();
|
|
useEffect(function addMapEventHandler() {
|
|
// @ts-ignore event type
|
|
map.on(type, handler);
|
|
return function removeMapEventHandler() {
|
|
// @ts-ignore event type
|
|
map.off(type, handler);
|
|
};
|
|
}, [
|
|
map,
|
|
type,
|
|
handler
|
|
]);
|
|
return map;
|
|
}
|
|
export function useMapEvents(handlers) {
|
|
const map = useMap();
|
|
useEffect(function addMapEventHandlers() {
|
|
map.on(handlers);
|
|
return function removeMapEventHandlers() {
|
|
map.off(handlers);
|
|
};
|
|
}, [
|
|
map,
|
|
handlers
|
|
]);
|
|
return map;
|
|
}
|