diff --git a/frontend/src/components/Maps/PropertyMap.js b/frontend/src/components/Maps/PropertyMap.js
index 8fbb233..6711346 100644
--- a/frontend/src/components/Maps/PropertyMap.js
+++ b/frontend/src/components/Maps/PropertyMap.js
@@ -1,5 +1,5 @@
import React, { useState, useCallback, useRef } from 'react';
-import { MapContainer, TileLayer, Polygon, Marker, Polyline, useMapEvents } from 'react-leaflet';
+import { MapContainer, TileLayer, Polygon, Marker, Polyline, useMapEvents, useMap } from 'react-leaflet';
import { Icon } from 'leaflet';
import 'leaflet/dist/leaflet.css';
@@ -50,6 +50,27 @@ const DrawingHandler = ({ isDrawing, onPointAdd, onDrawingComplete }) => {
return null;
};
+// Keep map centered when props change
+const MapViewUpdater = ({ center, zoom }) => {
+ const map = useMap();
+ const prev = useRef({ center: null, zoom: null });
+ React.useEffect(() => {
+ const [lat, lng] = center || [];
+ const isValid = typeof lat === 'number' && typeof lng === 'number';
+ const zoomToUse = typeof zoom === 'number' ? zoom : map.getZoom();
+ const changed =
+ !prev.current.center ||
+ prev.current.center[0] !== lat ||
+ prev.current.center[1] !== lng ||
+ prev.current.zoom !== zoomToUse;
+ if (isValid && changed) {
+ map.setView(center, zoomToUse, { animate: true });
+ prev.current = { center, zoom: zoomToUse };
+ }
+ }, [center, zoom, map]);
+ return null;
+};
+
// Calculate polygon area in square feet
const calculatePolygonArea = (coordinates) => {
if (!coordinates || coordinates.length < 3) return 0;
@@ -371,6 +392,9 @@ const PropertyMap = ({
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
+ {/* Sync map view with props */}
+
+
{/* Drawing handler */}
{
{propertyId ? (