google map as default and auto zoom

public/src/components/map/MapView.tsx

@@ -6,6 +6,7 @@ import { DrawingHandler } from './DrawingHandler';
 import { MapItemsLayer } from './MapItemsLayer';
 import { ShareDialog } from './ShareDialog';
 import { useMapWebSocket } from '../../hooks/useMapWebSocket';
+import { mapItemService } from '../../services/mapItemService';
 
 // Fix Leaflet's default icon paths for production builds
 // Since we use custom DivIcons, we just need to prevent 404s
@@ -38,6 +39,49 @@ function MapController() {
   return null;
 }
 
+function AutoZoom({ mapId, refreshTrigger }: { mapId: string; refreshTrigger: number }) {
+  const map = useMap();
+
+  useEffect(() => {
+    const zoomToDevices = async () => {
+      try {
+        const items = await mapItemService.getMapItems(mapId);
+
+        // Filter only devices (exclude cables, wireless mesh, and info markers)
+        const devices = items.filter(item =>
+          ['switch', 'indoor_ap', 'outdoor_ap', 'other_device'].includes(item.type) &&
+          item.geometry.type === 'Point'
+        );
+
+        if (devices.length === 0) {
+          // No devices, keep default view
+          return;
+        }
+
+        // Create bounds from all device coordinates
+        const bounds = L.latLngBounds(
+          devices.map(device => {
+            const [lng, lat] = device.geometry.coordinates;
+            return [lat, lng] as [number, number];
+          })
+        );
+
+        // Fit map to bounds with padding
+        map.fitBounds(bounds, {
+          padding: [50, 50],
+          maxZoom: 18,
+        });
+      } catch (error) {
+        console.error('Failed to auto-zoom to devices:', error);
+      }
+    };
+
+    zoomToDevices();
+  }, [mapId, refreshTrigger, map]);
+
+  return null;
+}
+
 export function MapView({ mapId, activeLayer, mapLayers, showShareDialog = false, shareMapId, onCloseShareDialog }: MapViewProps) {
   const [refreshTrigger, setRefreshTrigger] = useState(0);
 
@@ -89,6 +133,7 @@ export function MapView({ mapId, activeLayer, mapLayers, showShareDialog = false
           style={{ background: '#f0f0f0' }}
         >
           <MapController />
+          <AutoZoom mapId={mapId} refreshTrigger={refreshTrigger} />
           <TileLayer
             key={activeLayer}
             url={layer.url}