diff --git a/src/app/projects/map/page.js b/src/app/projects/map/page.js
index 4fc5a46..bb5f0ed 100644
--- a/src/app/projects/map/page.js
+++ b/src/app/projects/map/page.js
@@ -94,22 +94,8 @@ function ProjectsMapPageContent() {
setMeasurementLine(null);
};
- // Wrapper component for the map with proper loading state
- const MapWrapper = React.useMemo(() => {
- return function MapWrapperComponent(props) {
- return (
- }>
-
-
- );
- };
- }, [t, isMeasuring, measurementPoints, addMeasurementPoint]);
- const statusConfig = {
+ // Status configuration with colors and labels - memoized
+ const statusConfig = React.useMemo(() => ({
registered: {
color: "#6B7280",
label: formatProjectStatus("registered"),
@@ -135,7 +121,7 @@ function ProjectsMapPageContent() {
label: formatProjectStatus("cancelled"),
shortLabel: "Wycofany",
},
- };
+ }), []);
// Toggle all status filters
const toggleAllFilters = () => {
@@ -160,12 +146,12 @@ function ProjectsMapPageContent() {
}));
};
- // Layer control functions
- const handleBaseLayerChange = (layerName) => {
+ // Layer control functions - memoized to prevent re-renders
+ const handleBaseLayerChange = React.useCallback((layerName) => {
setActiveBaseLayer(layerName);
- };
+ }, []);
- const toggleOverlay = (layerName) => {
+ const toggleOverlay = React.useCallback((layerName) => {
setActiveOverlays((prev) => {
if (prev.includes(layerName)) {
return prev.filter((name) => name !== layerName);
@@ -173,14 +159,14 @@ function ProjectsMapPageContent() {
return [...prev, layerName];
}
});
- };
+ }, []);
- const toggleLayerPanel = () => {
+ const toggleLayerPanel = React.useCallback(() => {
setShowLayerPanel(!showLayerPanel);
- };
+ }, [showLayerPanel]);
// Update URL with current map state (debounced to avoid too many updates)
- const updateURL = (center, zoom) => {
+ const updateURL = React.useCallback((center, zoom) => {
const params = new URLSearchParams();
params.set("lat", center[0].toFixed(6));
params.set("lng", center[1].toFixed(6));
@@ -188,10 +174,10 @@ function ProjectsMapPageContent() {
// Use replace to avoid cluttering browser history
router.replace(`/projects/map?${params.toString()}`, { scroll: false });
- };
+ }, [router]);
- // Handle map view changes with debouncing
- const handleMapViewChange = (center, zoom) => {
+ // Handle map view changes with debouncing - memoized
+ const handleMapViewChange = React.useCallback((center, zoom) => {
setMapCenter(center);
setMapZoom(zoom);
@@ -200,7 +186,7 @@ function ProjectsMapPageContent() {
window.mapUpdateTimeout = setTimeout(() => {
updateURL(center, zoom);
}, 500); // Wait 500ms after the last move to update URL
- };
+ }, [updateURL]);
// Hide navigation and ensure full-screen layout
useEffect(() => {
@@ -298,38 +284,39 @@ function ProjectsMapPageContent() {
}
}, [currentTool, isMeasuring]);
- // Convert projects to map markers with filtering
- const markers = projects
- .filter((project) => project.coordinates)
- .filter((project) => statusFilters[project.project_status] !== false)
- .map((project) => {
- const [lat, lng] = project.coordinates
- .split(",")
- .map((coord) => parseFloat(coord.trim()));
- if (isNaN(lat) || isNaN(lng)) {
- return null;
- }
+ // Convert projects to map markers with filtering - memoized to prevent re-renders
+ const markers = React.useMemo(() => {
+ return projects
+ .filter((project) => project.coordinates)
+ .filter((project) => statusFilters[project.project_status] !== false)
+ .map((project) => {
+ const [lat, lng] = project.coordinates
+ .split(",")
+ .map((coord) => parseFloat(coord.trim()));
+ if (isNaN(lat) || isNaN(lng)) {
+ return null;
+ }
- const statusInfo =
- statusConfig[project.project_status] || statusConfig.registered;
+ const statusInfo =
+ statusConfig[project.project_status] || statusConfig.registered;
- return {
- position: [lat, lng],
- color: statusInfo.color,
- popup: (
-
-
-
- {project.project_name}
-
- {project.project_number && (
-
- {project.project_number}
-
- )}
-
+ return {
+ position: [lat, lng],
+ color: statusInfo.color,
+ popup: (
+
+
+
+ {project.project_name}
+
+ {project.project_number && (
+
+ {project.project_number}
+
+ )}
+
-
+
{project.address && (
) : (
-