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 { MapContainer, TileLayer, Marker, Popup, useMap } from 'react-leaflet';
|
||||||
import L from 'leaflet';
|
import L from 'leaflet';
|
||||||
import 'leaflet/dist/leaflet.css';
|
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[] }) {
|
function MapFitBounds({ locations }: { locations: DriverLocation[] }) {
|
||||||
const map = useMap();
|
const map = useMap();
|
||||||
|
const hasFitted = useRef(false);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
if (hasFitted.current) return;
|
||||||
|
|
||||||
const validLocations = locations.filter(d => d.location);
|
const validLocations = locations.filter(d => d.location);
|
||||||
if (validLocations.length > 0) {
|
if (validLocations.length > 0) {
|
||||||
const bounds = L.latLngBounds(
|
const bounds = L.latLngBounds(
|
||||||
validLocations.map(loc => [loc.location!.latitude, loc.location!.longitude])
|
validLocations.map(loc => [loc.location!.latitude, loc.location!.longitude])
|
||||||
);
|
);
|
||||||
map.fitBounds(bounds, { padding: [50, 50], maxZoom: 14 });
|
map.fitBounds(bounds, { padding: [50, 50], maxZoom: 14 });
|
||||||
|
hasFitted.current = true;
|
||||||
}
|
}
|
||||||
}, [locations, map]);
|
}, [locations, map]);
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user