revert: remove leaflet.gridlayer.googlemutant — incompatible with Next.js 15 bundler

The package consistently throws 'L.GridLayer.GoogleMutant is not a constructor'
due to L-instance conflicts in the webpack bundle, despite multiple workaround
attempts. Removed package, transpilePackages entry, type stub, env var, and all
related component code. Traffic overlay dropped; geocoding (backend) unaffected.

drb-frontend/components/MapView.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import {
   FeatureGroup,
   LayersControl,
@@ -145,54 +145,6 @@ function computeGroups<T extends { id: string; lat: number; lng: number }>(
   return result;
 }
 
-// ── Google Maps traffic layer via leaflet-google-mutant ───────────────────────
-// Uses dynamic import so the side-effect augments the same L instance at runtime,
-// avoiding the "GoogleMutant is not a constructor" error from static top-level imports.
-function GoogleTrafficManager({ enabled }: { enabled: boolean }) {
-  const map = useMap();
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const layerRef = useRef<any>(null);
-  const scriptLoadedRef = useRef(false);
-
-  useEffect(() => {
-    if (!enabled) {
-      if (layerRef.current) { map.removeLayer(layerRef.current); layerRef.current = null; }
-      return;
-    }
-
-    const key = process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY;
-    if (!key) return;
-
-    function mountLayer() {
-      import("leaflet.gridlayer.googlemutant").then(() => {
-        if (layerRef.current) return; // already mounted
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        const layer = (L as any).gridLayer.googleMutant({ type: "roadmap" });
-        layer.addGoogleLayer("TrafficLayer");
-        map.addLayer(layer);
-        layerRef.current = layer;
-      });
-    }
-
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    if ((window as any).google?.maps) {
-      mountLayer();
-    } else if (!scriptLoadedRef.current) {
-      scriptLoadedRef.current = true;
-      const script = document.createElement("script");
-      script.src = `https://maps.googleapis.com/maps/api/js?key=${key}&loading=async`;
-      script.async = true;
-      script.onload = mountLayer;
-      document.head.appendChild(script);
-    }
-
-    return () => {
-      if (layerRef.current) { map.removeLayer(layerRef.current); layerRef.current = null; }
-    };
-  }, [enabled, map]);
-
-  return null;
-}
 
 // ── MapRefCapture — exposes L.Map instance to parent ─────────────────────────
 function MapRefCapture({ onReady }: { onReady: (m: L.Map) => void }) {
@@ -391,7 +343,6 @@ export default function MapView({ nodes, activeCalls, incidents = [], lastUpdate
     return () => clearInterval(id);
   }, []);
 
-  const [trafficEnabled, setTrafficEnabled] = useState(false);
 
   // Live clock for TOC situational awareness
   useEffect(() => {
@@ -489,9 +440,6 @@ export default function MapView({ nodes, activeCalls, incidents = [], lastUpdate
             </FeatureGroup>
           </LayersControl.Overlay>
 
-          {/* Traffic managed outside LayersControl to avoid L-instance conflicts */}
-          <GoogleTrafficManager enabled={trafficEnabled} />
-
           {/* Overlay: Weather Radar — NEXRAD via Iowa Env Mesonet; key forces remount on refresh */}
           <LayersControl.Overlay name="Weather Radar">
             <TileLayer
@@ -534,19 +482,6 @@ export default function MapView({ nodes, activeCalls, incidents = [], lastUpdate
             ⤢
           </button>
         )}
-        {process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY && (
-          <button
-            onClick={() => setTrafficEnabled((v) => !v)}
-            title="Toggle traffic layer"
-            className={`w-8 h-8 border rounded text-xs font-mono font-bold leading-none transition-colors flex items-center justify-center select-none ${
-              trafficEnabled
-                ? "bg-indigo-700 border-indigo-500 text-white"
-                : "bg-gray-950/90 border-gray-700 text-gray-400 hover:bg-gray-800"
-            }`}
-          >
-            TRF
-          </button>
-        )}
       </div>
 
       {/* ── Clock — bottom-left for TOC situational awareness ───────────────── */}

drb-frontend/next.config.mjs

@@ -1,7 +1,7 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   output: "standalone",
-  transpilePackages: ["leaflet", "react-leaflet", "leaflet.gridlayer.googlemutant"],
+  transpilePackages: ["leaflet", "react-leaflet"],
 };
 
 export default nextConfig;

drb-frontend/package.json

@@ -14,8 +14,7 @@
     "react-dom": "^18.3.0",
     "firebase": "^10.12.0",
     "leaflet": "^1.9.4",
-    "leaflet.gridlayer.googlemutant": "0.16.0",
-    "react-leaflet": "^4.2.1"
+"react-leaflet": "^4.2.1"
   },
   "devDependencies": {
     "typescript": "^5.4.0",

drb-frontend/types/leaflet.gridlayer.googlemutant.d.ts

@@ -1,4 +0,0 @@
-declare module "leaflet.gridlayer.googlemutant" {
-  // Side-effect import — augments L.gridLayer with googleMutant factory.
-  // No public API is consumed directly from this module.
-}