feat: enhance map functionality by adding URL state management and event handling for view changes

src/components/ui/LeafletMap.js

@@ -6,6 +6,7 @@ import {
 	Marker,
 	Popup,
 	LayersControl,
+	useMapEvents,
 } from "react-leaflet";
 import "leaflet/dist/leaflet.css";
 import { useEffect } from "react";
@@ -43,23 +44,44 @@ const createColoredMarkerIcon = (color) => {
 			popupAnchor: [1, -34],
 			shadowSize: [41, 41],
 		});
-	}
-	return null;
+	}	return null;
 };
 
+// Component to handle map events
+function MapEventHandler({ onViewChange }) {
+	const map = useMapEvents({
+		moveend: () => {
+			if (onViewChange) {
+				const center = map.getCenter();
+				const zoom = map.getZoom();
+				onViewChange([center.lat, center.lng], zoom);
+			}
+		},
+		zoomend: () => {
+			if (onViewChange) {
+				const center = map.getCenter();
+				const zoom = map.getZoom();
+				onViewChange([center.lat, center.lng], zoom);
+			}
+		},
+	});
+
+	return null;
+}
+
 export default function EnhancedLeafletMap({
 	center,
 	zoom = 13,
 	markers = [],
 	showLayerControl = true,
 	defaultLayer = "OpenStreetMap",
+	onViewChange,
 }) {
 	useEffect(() => {
 		fixLeafletIcons();
 	}, []);
 
 	const { BaseLayer } = LayersControl;
-
 	return (
 		<MapContainer
 			center={center}
@@ -67,6 +89,9 @@ export default function EnhancedLeafletMap({
 			style={{ height: "100%", width: "100%" }}
 			scrollWheelZoom={true}
 		>
+			{/* Handle map view changes */}
+			{onViewChange && <MapEventHandler onViewChange={onViewChange} />}
+			
 			{showLayerControl ? (
 				<LayersControl position="topright">
 					{mapLayers.base.map((layer, index) => (