mowing

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;
+export default PropertyMap;

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)}