diff --git a/client/src/pages/MapView.jsx b/client/src/pages/MapView.jsx index 286f4c2..6752a95 100644 --- a/client/src/pages/MapView.jsx +++ b/client/src/pages/MapView.jsx @@ -233,37 +233,44 @@ const MapView = () => { // Set initial bounds and center ONLY on first load if (deviceData.length > 0 && isInitialLoad) { - const lats = deviceData.map(device => device.geo_lat); - const lons = deviceData.map(device => device.geo_lon); + // Filter devices that have coordinates + const devicesWithCoords = deviceData.filter(device => + device.geo_lat !== null && device.geo_lon !== null + ); - const minLat = Math.min(...lats); - const maxLat = Math.max(...lats); - const minLon = Math.min(...lons); - const maxLon = Math.max(...lons); - - // Add padding around the bounds (15% on each side for better visibility) - const latPadding = (maxLat - minLat) * 0.15; - const lonPadding = (maxLon - minLon) * 0.15; - - const bounds = [ - [minLat - latPadding, minLon - lonPadding], // Southwest - [maxLat + latPadding, maxLon + lonPadding] // Northeast - ]; - - console.log('MapView: Setting initial bounds and center for devices'); - setMapBounds(bounds); - setShouldFitBounds(true); - - // Calculate center - const centerLat = (minLat + maxLat) / 2; - const centerLon = (minLon + maxLon) / 2; - setMapCenter([centerLat, centerLon]); - - // Disable automatic fitting after initial setup (with longer delay) - setTimeout(() => { - console.log('MapView: Disabling automatic bounds fitting - manual navigation now preserved'); - setShouldFitBounds(false); - }, 2000); + if (devicesWithCoords.length > 0) { + const lats = devicesWithCoords.map(device => device.geo_lat); + const lons = devicesWithCoords.map(device => device.geo_lon); + + const minLat = Math.min(...lats); + const maxLat = Math.max(...lats); + const minLon = Math.min(...lons); + const maxLon = Math.max(...lons); + + // Add padding around the bounds (15% on each side for better visibility) + const latPadding = (maxLat - minLat) * 0.15; + const lonPadding = (maxLon - minLon) * 0.15; + + const bounds = [ + [minLat - latPadding, minLon - lonPadding], // Southwest + [maxLat + latPadding, maxLon + lonPadding] // Northeast + ]; + + console.log('MapView: Setting initial bounds and center for devices with coordinates'); + setMapBounds(bounds); + setShouldFitBounds(true); + + // Calculate center + const centerLat = (minLat + maxLat) / 2; + const centerLon = (minLon + maxLon) / 2; + setMapCenter([centerLat, centerLon]); + + // Disable automatic fitting after initial setup (with longer delay) + setTimeout(() => { + console.log('MapView: Disabling automatic bounds fitting - manual navigation now preserved'); + setShouldFitBounds(false); + }, 2000); + } } // Always mark initial load as complete after first fetch @@ -999,46 +1006,64 @@ const DroneDetectionPopup = ({ detection, age, droneTypes, droneDetectionHistory ); }; -const DeviceListItem = ({ device, status, detections, onClick }) => ( -