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

src/app/projects/map/page.js

@@ -3,6 +3,7 @@
 import React, { useEffect, useState } from "react";
 import Link from "next/link";
 import dynamic from "next/dynamic";
+import { useSearchParams, useRouter } from "next/navigation";
 import Button from "@/components/ui/Button";
 
 // Dynamically import the map component to avoid SSR issues
@@ -16,9 +17,12 @@ const DynamicMap = dynamic(() => import("@/components/ui/LeafletMap"), {
 });
 
 export default function ProjectsMapPage() {
+	const searchParams = useSearchParams();
+	const router = useRouter();
 	const [projects, setProjects] = useState([]);
 	const [loading, setLoading] = useState(true);
 	const [mapCenter, setMapCenter] = useState([50.0614, 19.9366]); // Default to Krakow, Poland
+	const [mapZoom, setMapZoom] = useState(10); // Default zoom level
 	const [statusFilters, setStatusFilters] = useState({
 		registered: true,
 		in_progress_design: true,
@@ -64,7 +68,6 @@ export default function ProjectsMapPage() {
 			  );
 		setStatusFilters(newState);
 	};
-
 	// Toggle status filter
 	const toggleStatusFilter = (status) => {
 		setStatusFilters((prev) => ({
@@ -72,8 +75,49 @@ export default function ProjectsMapPage() {
 			[status]: !prev[status],
 		}));
 	};
-	// Hide navigation and ensure full-screen layout
+	// Update URL with current map state (debounced to avoid too many updates)
+	const updateURL = (center, zoom) => {
+		const params = new URLSearchParams();
+		params.set('lat', center[0].toFixed(6));
+		params.set('lng', center[1].toFixed(6));
+		params.set('zoom', zoom.toString());
+		
+		// Use replace to avoid cluttering browser history
+		router.replace(`/projects/map?${params.toString()}`, { scroll: false });
+	};
+
+	// Handle map view changes with debouncing
+	const handleMapViewChange = (center, zoom) => {
+		setMapCenter(center);
+		setMapZoom(zoom);
+		
+		// Debounce URL updates to avoid too many history entries
+		clearTimeout(window.mapUpdateTimeout);
+		window.mapUpdateTimeout = setTimeout(() => {
+			updateURL(center, zoom);
+		}, 500); // Wait 500ms after the last move to update URL
+	};// Hide navigation and ensure full-screen layout
 	useEffect(() => {
+		// Check for URL parameters for coordinates and zoom
+		const lat = searchParams.get('lat');
+		const lng = searchParams.get('lng');
+		const zoom = searchParams.get('zoom');
+
+		if (lat && lng) {
+			const latitude = parseFloat(lat);
+			const longitude = parseFloat(lng);
+			if (!isNaN(latitude) && !isNaN(longitude)) {
+				setMapCenter([latitude, longitude]);
+			}
+		}
+
+		if (zoom) {
+			const zoomLevel = parseInt(zoom);
+			if (!isNaN(zoomLevel) && zoomLevel >= 1 && zoomLevel <= 20) {
+				setMapZoom(zoomLevel);
+			}
+		}
+
 		// Hide navigation bar for full-screen experience
 		const nav = document.querySelector("nav");
 		if (nav) {
@@ -83,7 +127,6 @@ export default function ProjectsMapPage() {
 		// Prevent scrolling on body
 		document.body.style.overflow = "hidden";
 		document.documentElement.style.overflow = "hidden";
-
 		// Cleanup when leaving page
 		return () => {
 			if (nav) {
@@ -91,35 +134,45 @@ export default function ProjectsMapPage() {
 			}
 			document.body.style.overflow = "";
 			document.documentElement.style.overflow = "";
+			
+			// Clear any pending URL updates
+			if (window.mapUpdateTimeout) {
+				clearTimeout(window.mapUpdateTimeout);
+			}
 		};
-	}, []);
-
+	}, [searchParams]);
 	useEffect(() => {
 		fetch("/api/projects")
 			.then((res) => res.json())
 			.then((data) => {
 				setProjects(data);
 
-				// Calculate center based on projects with coordinates
-				const projectsWithCoords = data.filter((p) => p.coordinates);
-				if (projectsWithCoords.length > 0) {
-					const avgLat =
-						projectsWithCoords.reduce((sum, p) => {
-							const [lat] = p.coordinates
-								.split(",")
-								.map((coord) => parseFloat(coord.trim()));
-							return sum + lat;
-						}, 0) / projectsWithCoords.length;
+				// Only calculate center based on projects if no URL parameters are provided
+				const lat = searchParams.get('lat');
+				const lng = searchParams.get('lng');
+				
+				if (!lat || !lng) {
+					// Calculate center based on projects with coordinates
+					const projectsWithCoords = data.filter((p) => p.coordinates);
+					if (projectsWithCoords.length > 0) {
+						const avgLat =
+							projectsWithCoords.reduce((sum, p) => {
+								const [lat] = p.coordinates
+									.split(",")
+									.map((coord) => parseFloat(coord.trim()));
+								return sum + lat;
+							}, 0) / projectsWithCoords.length;
 
-					const avgLng =
-						projectsWithCoords.reduce((sum, p) => {
-							const [, lng] = p.coordinates
-								.split(",")
-								.map((coord) => parseFloat(coord.trim()));
-							return sum + lng;
-						}, 0) / projectsWithCoords.length;
+						const avgLng =
+							projectsWithCoords.reduce((sum, p) => {
+								const [, lng] = p.coordinates
+									.split(",")
+									.map((coord) => parseFloat(coord.trim()));
+								return sum + lng;
+							}, 0) / projectsWithCoords.length;
 
-					setMapCenter([avgLat, avgLng]);
+						setMapCenter([avgLat, avgLng]);
+					}
 				}
 
 				setLoading(false);
@@ -128,7 +181,7 @@ export default function ProjectsMapPage() {
 				console.error("Error fetching projects:", error);
 				setLoading(false);
 			});
-	}, []);
+	}, [searchParams]);
 	// Convert projects to map markers with filtering
 	const markers = projects
 		.filter((project) => project.coordinates)
@@ -506,14 +559,14 @@ export default function ProjectsMapPage() {
 						</div>
 					</div>
 				</div>
-			) : (
-				<div className="absolute inset-0">
+			) : (				<div className="absolute inset-0">
 					<DynamicMap
 						center={mapCenter}
-						zoom={10}
+						zoom={mapZoom}
 						markers={markers}
 						showLayerControl={true}
 						defaultLayer="Polish Geoportal Orthophoto"
+						onViewChange={handleMapViewChange}
 					/>
 				</div>
 			)}