diff --git a/client/src/pages/MapView.jsx b/client/src/pages/MapView.jsx
index a6d2f87..8326886 100644
--- a/client/src/pages/MapView.jsx
+++ b/client/src/pages/MapView.jsx
@@ -25,15 +25,15 @@ Icon.Default.mergeOptions({
shadowUrl,
});
-// Component to handle dynamic map bounds
-const FitBounds = ({ bounds }) => {
+// Component to handle dynamic map bounds - only on initial load
+const FitBounds = ({ bounds, shouldFit }) => {
const map = useMap();
useEffect(() => {
- if (bounds && bounds.length === 2) {
+ if (bounds && bounds.length === 2 && shouldFit) {
map.fitBounds(bounds, { padding: [20, 20] });
}
- }, [bounds, map]);
+ }, [bounds, map, shouldFit]);
return null;
};
@@ -109,6 +109,7 @@ const MapView = () => {
const [mapCenter, setMapCenter] = useState([59.3293, 18.0686]); // Default to Stockholm center
const [mapZoom, setMapZoom] = useState(10); // Default zoom level
const [mapBounds, setMapBounds] = useState(null);
+ const [shouldFitBounds, setShouldFitBounds] = useState(false);
const [isInitialLoad, setIsInitialLoad] = useState(true); // Track if this is the first load
const [showDroneDetections, setShowDroneDetections] = useState(true);
const [droneDetectionHistory, setDroneDetectionHistory] = useState([]);
@@ -198,10 +199,16 @@ const MapView = () => {
// Only set bounds and center on initial load, not on periodic refreshes
if (isInitialLoad) {
setMapBounds(bounds);
+ setShouldFitBounds(true);
const centerLat = (minLat + maxLat) / 2;
const centerLon = (minLon + maxLon) / 2;
setMapCenter([centerLat, centerLon]);
setIsInitialLoad(false); // Mark that initial load is complete
+
+ // Disable bounds fitting after a short delay to allow initial fit
+ setTimeout(() => {
+ setShouldFitBounds(false);
+ }, 1000);
}
}
} catch (error) {
@@ -284,7 +291,7 @@ const MapView = () => {
zoom={mapZoom}
className="h-full w-full"
>
-
+ {shouldFitBounds && }