"use client";
import { useEffect, useMemo } from "react";
import { Circle, MapContainer, Marker, TileLayer, useMap, useMapEvents } from "react-leaflet";
import L from "leaflet";
import "leaflet/dist/leaflet.css";
import { DEFAULT_MAP_CENTER } from "@/lib/geocoding";
const warehouseIcon = L.divIcon({
className: "",
html: `W
`,
iconSize: [32, 32],
iconAnchor: [16, 16],
});
function MapClickHandler({ onSelect }: { onSelect: (lat: number, lng: number) => void }) {
useMapEvents({
click(e) {
onSelect(e.latlng.lat, e.latlng.lng);
},
});
return null;
}
function MapViewSync({
lat,
lng,
zoom,
focusKey,
}: {
lat: number;
lng: number;
zoom?: number;
focusKey?: number;
}) {
const map = useMap();
useEffect(() => {
map.setView([lat, lng], zoom ?? Math.max(map.getZoom(), 14));
}, [lat, lng, zoom, map, focusKey]);
return null;
}
export interface MapLocationPickerProps {
lat?: number | null;
lng?: number | null;
onChange: (lat: number, lng: number) => void;
/** Attendance / geofence radius shown on map */
radiusMeters?: number;
height?: string;
className?: string;
/** Increment to pan map after geocoding */
focusKey?: number;
}
export function MapLocationPicker({
lat,
lng,
onChange,
radiusMeters,
height = "280px",
className,
focusKey,
}: MapLocationPickerProps) {
const hasPin = lat != null && lng != null && !Number.isNaN(lat) && !Number.isNaN(lng);
const center = useMemo(
() => (hasPin ? { lat: lat!, lng: lng! } : DEFAULT_MAP_CENTER),
[hasPin, lat, lng]
);
return (
{hasPin ? (
<>
{
const pos = e.target.getLatLng();
onChange(pos.lat, pos.lng);
},
}}
/>
{radiusMeters && radiusMeters > 0 ? (
) : null}
) : null}
);
}