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]);