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 <noreply@anthropic.com>
This commit is contained in:
@@ -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]);
|
||||
|
||||
|
||||
Reference in New Issue
Block a user