From ca2b341f01868fe955b2cc5810fb26ed3338b4ae Mon Sep 17 00:00:00 2001 From: kyle Date: Tue, 3 Feb 2026 22:16:03 +0100 Subject: [PATCH] fix: prevent GPS map from resetting zoom/position on data refresh The MapFitBounds component was calling fitBounds on every 30-second location refresh, overriding the user's current view. Now only fits bounds on the initial load so users can pan and zoom freely without interruption. Co-Authored-By: Claude Opus 4.5 --- frontend/src/pages/GpsTracking.tsx | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/frontend/src/pages/GpsTracking.tsx b/frontend/src/pages/GpsTracking.tsx index 3ea503e..1a9f96c 100644 --- a/frontend/src/pages/GpsTracking.tsx +++ b/frontend/src/pages/GpsTracking.tsx @@ -1,4 +1,4 @@ -import { useState, useEffect, useMemo } from 'react'; +import { useState, useEffect, useRef, useMemo } from 'react'; import { MapContainer, TileLayer, Marker, Popup, useMap } from 'react-leaflet'; import L from 'leaflet'; import 'leaflet/dist/leaflet.css'; @@ -85,17 +85,21 @@ const createDriverIcon = (isActive: boolean) => { }); }; -// Map auto-fit component +// Map auto-fit component — only fits bounds on initial load, not on every refresh function MapFitBounds({ locations }: { locations: DriverLocation[] }) { const map = useMap(); + const hasFitted = useRef(false); useEffect(() => { + if (hasFitted.current) return; + const validLocations = locations.filter(d => d.location); if (validLocations.length > 0) { const bounds = L.latLngBounds( validLocations.map(loc => [loc.location!.latitude, loc.location!.longitude]) ); map.fitBounds(bounds, { padding: [50, 50], maxZoom: 14 }); + hasFitted.current = true; } }, [locations, map]);