From 45a974377524c144ab2eacd6e4db83857ae7583e Mon Sep 17 00:00:00 2001
From: Jake Kasper <jake.kasper@hpe.com>
Date: Tue, 2 Sep 2025 12:20:07 -0500
Subject: [PATCH] mowing

---
 frontend/src/components/Maps/PropertyMap.js   | 28 +++++++++++++++++--
 .../src/components/Mowing/MowingPlanModal.js  |  1 +
 2 files changed, 27 insertions(+), 2 deletions(-)

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 */}
+        <MapViewUpdater center={center} zoom={zoom} />
+
         {/* Drawing handler */}
         <DrawingHandler
           isDrawing={isDrawing}
@@ -545,4 +569,4 @@ const PropertyMap = ({
   );
 };
 
-export default PropertyMap;
\ No newline at end of file
+export default PropertyMap;
diff --git a/frontend/src/components/Mowing/MowingPlanModal.js b/frontend/src/components/Mowing/MowingPlanModal.js
index b65fb69..593098a 100644
--- a/frontend/src/components/Mowing/MowingPlanModal.js
+++ b/frontend/src/components/Mowing/MowingPlanModal.js
@@ -222,6 +222,7 @@ const MowingPlanModal = ({ onClose, onCreated }) => {
                 {propertyId ? (
                   <PropertyMap
                     center={mapCenter}
+                    zoom={16}
                     property={selectedPropertyDetails}
                     sections={selectedPropertyDetails?.sections || []}
                     selectedSections={lawnSectionIds.map(Number)}