diff --git a/apps/lrauv-dash2/components/DeploymentMap.tsx b/apps/lrauv-dash2/components/DeploymentMap.tsx
index 25ea7796..137b3978 100644
--- a/apps/lrauv-dash2/components/DeploymentMap.tsx
+++ b/apps/lrauv-dash2/components/DeploymentMap.tsx
@@ -1,4 +1,5 @@
 import dynamic from 'next/dynamic'
+import { useRouter } from 'next/router'
 import React, { useCallback, useState, useRef, useEffect, useMemo } from 'react'
 import { useManagedWaypoints } from '@mbari/react-ui'
 import useGoogleElevator from '../lib/useGoogleElevator'
@@ -11,14 +12,20 @@ import toast from 'react-hot-toast'
 import { createLogger } from '@mbari/utils'
 import VehicleColorsModal from './VehicleColorsModal'
 import useTrackedVehicles from '../lib/useTrackedVehicles'
-import { useDepthRequest } from '@mbari/utils/useDepthRequest'
-
 // This is a tricky workaround to prevent leaflet from crashing next.js
 // SSR. If we don't do this, the leaflet map will be loaded server side
 // and throw a window error.
 const Map = dynamic(() => import('@mbari/react-ui/dist/Map/Map'), {
   ssr: false,
 })
+
+const MapDepthDisplay = dynamic(
+  () =>
+    import('@mbari/react-ui/dist/Map/Map').then((m) => ({
+      default: m.MapDepthDisplay,
+    })),
+  { ssr: false }
+)
 const DraggableMarker = dynamic(() => import('./DraggableMarker'), {
   ssr: false,
 })
@@ -64,6 +71,7 @@ const DeploymentMap: React.FC<DeploymentMapProps> = ({
   startTime,
   endTime,
 }) => {
+  const router = useRouter()
   const mapRef = useRef<any>(null)
   const {
     updatedWaypoints,
@@ -80,18 +88,7 @@ const DeploymentMap: React.FC<DeploymentMapProps> = ({
       ),
     [updatedWaypoints, handleWaypointsUpdate]
   )
-  const { handleDepthRequest, elevationAvailable } = useGoogleElevator()
-  // Depth request hook
-  const { handleDepthRequestWithFeedback } = useDepthRequest(
-    handleDepthRequest,
-    {
-      warningToastId: 'depth-unavailable',
-      errorToastId: 'depth-result',
-      loadingToastId: 'depth-loading',
-      warningToastClass: 'blue-toast',
-      toastDuration: 5000,
-    }
-  )
+  const { handleDepthRequest } = useGoogleElevator()
 
   // Filter out waypoints with NaN lat/lon
   const plottedWaypoints = updatedWaypoints.filter(
@@ -477,20 +474,17 @@ const DeploymentMap: React.FC<DeploymentMapProps> = ({
     setShowLayersModal(false)
   }, [])
 
-  const handleVehicleColorRequest = useCallback(() => {
-    // Add debugging to verify values
-    logger.debug('Opening color modal with:', {
-      vehicleName,
-      trackedVehicles,
-      modalTrackedVehicles: vehicleName ? [vehicleName] : [],
-    })
-
-    setColorModalPosition({
-      top: 100,
-      left: 100,
-    })
-    setColorModalOpen(true)
-  }, [vehicleName, trackedVehicles])
+  const handleVehicleColorRequest = useCallback(
+    (anchor?: { top: number; left: number }) => {
+      if (anchor) {
+        setColorModalPosition(anchor)
+      } else {
+        setColorModalPosition({ top: 100, left: 100 })
+      }
+      setColorModalOpen(true)
+    },
+    []
+  )
 
   const handleCloseVehicleColors = useCallback((vehicleName?: string) => {
     setShowVehicleColors(false)
@@ -551,16 +545,22 @@ const DeploymentMap: React.FC<DeploymentMapProps> = ({
         <PlatformsListModal onClose={handleClosePlatforms} />
       ) : null}
       <Map
+        key={`deployment-map-${router.asPath}-${vehicleName ?? 'unknown'}`}
         ref={mapRef}
         className="h-full min-h-0 w-full"
         maxZoom={17}
         onMapReady={(map) => {
           logger.debug('Map is ready!')
           mapRef.current = map
-        }}
-        onRequestDepth={async (lat, lng) => {
-          const result = await handleDepthRequestWithFeedback(lat, lng)
-          return result.depth ?? 0
+          ;[200, 800].forEach((delay) => {
+            setTimeout(() => {
+              try {
+                map.invalidateSize()
+              } catch (e) {
+                logger.warn('Could not invalidate map size:', e)
+              }
+            }, delay)
+          })
         }}
         center={center}
         centerZoom={centerZoom}
@@ -624,6 +624,16 @@ const DeploymentMap: React.FC<DeploymentMapProps> = ({
           )
         }
       >
+        <MapDepthDisplay
+          depthRequest={handleDepthRequest}
+          options={{
+            warningToastId: 'depth-unavailable',
+            errorToastId: 'depth-result',
+            loadingToastId: 'depth-loading',
+            warningToastClass: 'blue-toast',
+            toastDuration: 5000,
+          }}
+        />
         {selectedStations.map((station) => {
           const lng = station.geojson.geometry.coordinates[0]
           const lat = station.geojson.geometry.coordinates[1]
@@ -675,15 +685,15 @@ const DeploymentMap: React.FC<DeploymentMapProps> = ({
             disableAutoFit={isTimelineScrubbing}
           />
         )}
-        <VehicleColorsModal
-          isOpen={colorModalOpen}
-          onClose={() => setColorModalOpen(false)}
-          anchorPosition={colorModalPosition}
-          trackedVehicles={vehicleName ? [vehicleName] : []}
-          activeVehicle={vehicleName || undefined}
-          forceShowAll={true}
-        />
       </Map>
+      <VehicleColorsModal
+        isOpen={colorModalOpen}
+        onClose={() => setColorModalOpen(false)}
+        anchorPosition={colorModalPosition}
+        trackedVehicles={vehicleName ? [vehicleName] : []}
+        activeVehicle={vehicleName || undefined}
+        forceShowAll={true}
+      />
     </div>
   )
 }
diff --git a/apps/lrauv-dash2/components/GoogleMapsProvider.tsx b/apps/lrauv-dash2/components/GoogleMapsProvider.tsx
index d04cee7b..6e572bc8 100644
--- a/apps/lrauv-dash2/components/GoogleMapsProvider.tsx
+++ b/apps/lrauv-dash2/components/GoogleMapsProvider.tsx
@@ -2,12 +2,10 @@ import React, { useState, useEffect } from 'react'
 import { useGoogleMapsApiKey } from './useGoogleMapsApiKey'
 import toast from 'react-hot-toast'
 import { createLogger } from '@mbari/utils'
+import { initLeafletGoogle } from '../lib/leafletPlugins'
 
 const logger = createLogger('GoogleMapsProvider')
 
-// Global variable to track if script has been loaded
-let googleMapsScriptAdded = false
-
 interface GoogleMapsProviderProps {
   children: React.ReactNode
 }
@@ -15,10 +13,9 @@ interface GoogleMapsProviderProps {
 export const GoogleMapsProvider: React.FC<GoogleMapsProviderProps> = ({
   children,
 }) => {
-  const { apiKey, isLoading, error, keySource } = useGoogleMapsApiKey()
+  const { apiKey, isLoading, keySource } = useGoogleMapsApiKey()
   const [isLoaded, setIsLoaded] = useState(false)
 
-  // Check if Maps API is already available on mount
   useEffect(() => {
     if (typeof window !== 'undefined' && window.google?.maps) {
       setIsLoaded(true)
@@ -26,17 +23,14 @@ export const GoogleMapsProvider: React.FC<GoogleMapsProviderProps> = ({
     }
   }, [])
 
-  // Handle script loading based on API key
   useEffect(() => {
     if (isLoading) return
 
-    // Log the source of the API key
     if (keySource === 'server') {
       logger.debug('Using Google Maps from Tethys API')
     } else if (keySource === 'local') {
       logger.debug('Using Google Maps from local .env')
     } else if (keySource === 'none' && !apiKey) {
-      // Notify but don't block interface
       toast.error(
         'Google Maps API unavailable - Google Hybrid map and elevation data unavailable‼️ ',
         {
@@ -48,62 +42,32 @@ export const GoogleMapsProvider: React.FC<GoogleMapsProviderProps> = ({
       return
     }
 
-    // If Maps already loaded, nothing more to do
     if (window.google?.maps) {
       logger.debug('Google Maps already loaded via window.google')
       setIsLoaded(true)
       return
     }
 
-    // If we already started loading the script, don't add it again
-    if (googleMapsScriptAdded) {
-      logger.debug('Google Maps script tag already added')
-      return
-    }
-
-    // Load the script if we have an API key
-    if (apiKey) {
-      logger.debug('Loading Google Maps API script')
-
-      // Check if script already exists
-      const existingScript = document.getElementById('google-maps-script')
-      if (existingScript) {
-        logger.debug('Found existing Google Maps script tag')
-        return
-      }
+    if (!apiKey) return
 
-      const script = document.createElement('script')
-      script.src = `https://maps.googleapis.com/maps/api/js?key=${apiKey}&libraries=places`
-      script.async = true
-      script.defer = true
-      script.id = 'google-maps-script'
-
-      script.onload = () => {
-        logger.debug('✅ Google Maps API script loaded successfully')
+    logger.debug('Loading Google Maps API via initializer')
+    initLeafletGoogle(apiKey)
+      .then(() => {
+        logger.debug('✅ Google Maps API and Leaflet plugins ready')
         setIsLoaded(true)
-      }
-
-      script.onerror = (e) => {
-        logger.error('❌ Google Maps script failed to load:', e)
+      })
+      .catch((e) => {
+        logger.error('❌ Google Maps initializer failed:', e)
         toast.error('Google Hybrid map unavailable', {
           duration: 3000,
           id: 'maps-loading-error',
         })
-      }
-
-      document.head.appendChild(script)
-
-      // Mark as added to prevent duplicate loading
-      googleMapsScriptAdded = true
-    }
+      })
   }, [isLoading, keySource, apiKey])
 
-  // Just a minimal loading indicator that doesn't take much space
   if (isLoading) {
     return <div className="opacity-0">Loading maps...</div>
   }
 
-  // Always render children - maps will be available when loaded
-  // This avoids the flash of content and UI blocking
   return <>{children}</>
 }
diff --git a/apps/lrauv-dash2/components/VehicleColorsModal.tsx b/apps/lrauv-dash2/components/VehicleColorsModal.tsx
index 4ddbbb57..37de75a3 100644
--- a/apps/lrauv-dash2/components/VehicleColorsModal.tsx
+++ b/apps/lrauv-dash2/components/VehicleColorsModal.tsx
@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useRef, useCallback } from 'react'
 import { useVehicleColors } from './VehicleColorsContext'
-import { Modal } from '@mbari/react-ui/src/Modal/Modal'
+import { Modal } from '@mbari/react-ui'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faTimes, faEyeDropper } from '@fortawesome/free-solid-svg-icons'
 import { SketchPicker } from 'react-color'
diff --git a/apps/lrauv-dash2/components/VehiclePath.tsx b/apps/lrauv-dash2/components/VehiclePath.tsx
index 9d46b7dd..13ee5020 100644
--- a/apps/lrauv-dash2/components/VehiclePath.tsx
+++ b/apps/lrauv-dash2/components/VehiclePath.tsx
@@ -7,6 +7,7 @@ import {
 } from '@mbari/api-client'
 import { Polyline, useMap, Circle, Tooltip } from 'react-leaflet'
 import { LatLng, LeafletMouseEventHandlerFn } from 'leaflet'
+import { useRouter } from 'next/router'
 import { useSharedPath } from './SharedPathContextProvider'
 import { distance } from '@turf/turf'
 import { parseISO, getTime } from 'date-fns'
@@ -69,6 +70,7 @@ const VehiclePath: React.FC<VehiclePathProps> = ({
   disableAutoFit = false,
 }) => {
   const map = useMap()
+  const router = useRouter()
   const { sharedPath, dispatch } = useSharedPath()
 
   const { data: lastDeployment } = useLastDeployment(
@@ -282,13 +284,26 @@ const VehiclePath: React.FC<VehiclePathProps> = ({
   ])
 
   // OVERVIEW MAP
-  // Fit bounds for OverViewMap
+  // Re-run grouped fitBounds on route/tab switches after layout settles.
   useEffect(() => {
+    if (!grouped) return
+
     const coords = Object.values(sharedPath).flat()
-    if (grouped && coords.length > 1) {
-      map.fitBounds(coords)
+    if (coords.length <= 1) return
+
+    const applyFit = () => {
+      try {
+        map.invalidateSize()
+        map.fitBounds(coords)
+      } catch {
+        // noop; next delayed retry may succeed after layout settles
+      }
     }
-  }, [sharedPath, grouped, map])
+
+    applyFit()
+    const timers = [250, 800].map((delay) => setTimeout(applyFit, delay))
+    return () => timers.forEach((t) => clearTimeout(t))
+  }, [sharedPath, grouped, map, router.asPath])
 
   // Determine Time Difference since last gpsFix
   const latest =
diff --git a/apps/lrauv-dash2/lib/elevationService.ts b/apps/lrauv-dash2/lib/elevationService.ts
index 15785aaa..e70b50c0 100644
--- a/apps/lrauv-dash2/lib/elevationService.ts
+++ b/apps/lrauv-dash2/lib/elevationService.ts
@@ -1,10 +1,9 @@
 import { createLogger } from '@mbari/utils'
 
-// Extend the Window interface
+// Extend the Window interface (google is declared in types/global.d.ts)
 declare global {
   interface Window {
     [GOOGLE_MAPS_LOADED_FLAG]?: boolean
-    google?: any
   }
 }
 
diff --git a/apps/lrauv-dash2/lib/leafletPlugins.ts b/apps/lrauv-dash2/lib/leafletPlugins.ts
new file mode 100644
index 00000000..b4ef1492
--- /dev/null
+++ b/apps/lrauv-dash2/lib/leafletPlugins.ts
@@ -0,0 +1,94 @@
+/**
+ * Single initializer for Google Maps JS + Leaflet googlemutant plugin.
+ * Run only in the browser. Call from GoogleMapsProvider; do not load Google elsewhere.
+ */
+
+let initPromise: Promise<void> | null = null
+
+/**
+ * Ensures Google Maps JS is loaded (with places,elevation) then loads
+ * leaflet.gridlayer.googlemutant (registers L.gridLayer.googleMutant).
+ * Idempotent: repeated calls reuse the same promise.
+ */
+export function initLeafletGoogle(apiKey: string): Promise<void> {
+  if (typeof window === 'undefined') {
+    return Promise.reject(
+      new Error('initLeafletGoogle must run in the browser')
+    )
+  }
+
+  if (window.google?.maps) {
+    return initPromise ?? (initPromise = loadGoogleMutantOnly())
+  }
+
+  if (!initPromise) {
+    initPromise = (async () => {
+      const existing = document.getElementById('google-maps-script')
+      if (existing) {
+        await waitForGoogle(10000)
+        await loadGoogleMutantOnly()
+        return
+      }
+
+      const script = document.createElement('script')
+      script.id = 'google-maps-script'
+      script.src = `https://maps.googleapis.com/maps/api/js?key=${apiKey}&libraries=places,elevation`
+      script.async = true
+      script.defer = true
+
+      await new Promise<void>((resolve, reject) => {
+        script.onload = () => resolve()
+        script.onerror = (e) => reject(e)
+        document.head.appendChild(script)
+      })
+
+      await waitForGoogle(10000)
+      await loadGoogleMutantOnly()
+    })().catch((err) => {
+      initPromise = null
+      throw err
+    })
+  }
+
+  return initPromise
+}
+
+function waitForGoogle(timeoutMs = 10000): Promise<void> {
+  if (window.google?.maps) return Promise.resolve()
+
+  return new Promise((resolve, reject) => {
+    const start = Date.now()
+    let rafId = 0
+
+    const check = () => {
+      if (window.google?.maps) {
+        cancelAnimationFrame(rafId)
+        resolve()
+        return
+      }
+
+      if (Date.now() - start >= timeoutMs) {
+        cancelAnimationFrame(rafId)
+        reject(new Error('Timed out waiting for Google Maps API'))
+        return
+      }
+
+      rafId = requestAnimationFrame(check)
+    }
+
+    rafId = requestAnimationFrame(check)
+  })
+}
+
+async function loadLeafletAndExposeGlobal(): Promise<void> {
+  if (typeof window === 'undefined') return
+  if ((window as any).L) return
+
+  const leaflet = await import('leaflet')
+  ;(window as any).L = leaflet.default ?? leaflet
+}
+
+async function loadGoogleMutantOnly(): Promise<void> {
+  await loadLeafletAndExposeGlobal()
+  await import('leaflet.gridlayer.googlemutant/dist/Leaflet.GoogleMutant.js')
+}
diff --git a/apps/lrauv-dash2/lib/useGoogleMaps.ts b/apps/lrauv-dash2/lib/useGoogleMaps.ts
index 93163dc4..87612098 100644
--- a/apps/lrauv-dash2/lib/useGoogleMaps.ts
+++ b/apps/lrauv-dash2/lib/useGoogleMaps.ts
@@ -1,30 +1,31 @@
-import { useTethysApiContext } from '@mbari/api-client'
 import { useState, useEffect } from 'react'
-import { Loader } from '@googlemaps/js-api-loader'
 
+/**
+ * Simple "is Google Maps available" hook. Does not load or inject Google;
+ * the provider/initializer is the only loader.
+ */
 export const useGoogleMaps = () => {
-  const { siteConfig } = useTethysApiContext()
-  const googleMapsApiKey = siteConfig?.appConfig.googleApiKey
+  const [mapsLoaded, setMapsLoaded] = useState(
+    typeof window !== 'undefined' && !!window.google?.maps
+  )
 
-  const [mapsLoaded, setMapsLoaded] = useState(false)
   useEffect(() => {
-    if (typeof google !== 'undefined' && !mapsLoaded) {
+    if (typeof window === 'undefined') return
+
+    if (window.google?.maps) {
       setMapsLoaded(true)
+      return
     }
-    if (!googleMapsApiKey || mapsLoaded || typeof google !== 'undefined') return
-    new Loader({
-      apiKey: googleMapsApiKey,
-      version: 'weekly',
-      libraries: ['elevation'],
-    })
-      .importLibrary('elevation')
-      .then(() => {
+
+    const id = setInterval(() => {
+      if (window.google?.maps) {
+        clearInterval(id)
         setMapsLoaded(true)
-      })
-      .catch((e) => {
-        console.warn('Error loading Google Maps API', e)
-      })
-  }, [googleMapsApiKey, mapsLoaded, setMapsLoaded])
+      }
+    }, 200)
+
+    return () => clearInterval(id)
+  }, [])
 
   return { mapsLoaded }
 }
diff --git a/apps/lrauv-dash2/next.config.js b/apps/lrauv-dash2/next.config.js
index f88860ca..0e39deb4 100644
--- a/apps/lrauv-dash2/next.config.js
+++ b/apps/lrauv-dash2/next.config.js
@@ -9,32 +9,6 @@ const nextConfig = {
 
   // Next.js 13+ uses transpilePackages
   transpilePackages: ['@mbari/react-ui', '@mbari/utils', '@mbari/api-client'],
-
-  // Make sure webpack can handle workspace TypeScript files
-  webpack: (config, { isServer }) => {
-    // Add TypeScript loader for workspace dependencies
-    config.module.rules.push({
-      test: /\.(tsx|ts)$/,
-      include: [
-        /node_modules\/@mbari\/react-ui/,
-        /node_modules\/@mbari\/utils/,
-        /node_modules\/@mbari\/api-client/,
-        /packages\/react-ui/,
-        /packages\/utils/,
-        /packages\/api-client/,
-      ],
-      use: [
-        {
-          loader: 'babel-loader',
-          options: {
-            presets: ['next/babel'],
-          },
-        },
-      ],
-    })
-
-    return config
-  },
 }
 
 module.exports = nextConfig
diff --git a/apps/lrauv-dash2/pages/index.tsx b/apps/lrauv-dash2/pages/index.tsx
index 2bcdd6bf..04f3b190 100644
--- a/apps/lrauv-dash2/pages/index.tsx
+++ b/apps/lrauv-dash2/pages/index.tsx
@@ -20,20 +20,25 @@ import { StationsListModal } from '../components/StationsListModal'
 import { MapLayersListModal } from '../components/MapLayersListModal'
 import { useSelectedStations } from '../components/SelectedStationContext'
 import { useMarkers } from '../components/MarkerContext'
-import { useDepthRequest } from '@mbari/utils/useDepthRequest'
 import toast from 'react-hot-toast'
-import type { MapProps } from '@mbari/react-ui/dist/Map/Map'
 import { createLogger } from '@mbari/utils'
 import { PlatformsListModal } from '../components/PlatformsListModal'
+import VehicleColorsModal from '../components/VehicleColorsModal'
 
 // This is a tricky workaround to prevent leaflet from crashing next.js
 // SSR. If we don't do this, the leaflet map will be loaded server side
 // and throw a window error.
-const Map = dynamic<CustomMapProps>(
-  () => import('@mbari/react-ui/dist/Map/Map'),
-  {
-    ssr: false,
-  }
+// Map types are not imported from @mbari/react-ui to avoid module resolution issues.
+const Map = dynamic(() => import('@mbari/react-ui/dist/Map/Map'), {
+  ssr: false,
+})
+
+const MapDepthDisplay = dynamic(
+  () =>
+    import('@mbari/react-ui/dist/Map/Map').then((m) => ({
+      default: m.MapDepthDisplay,
+    })),
+  { ssr: false }
 )
 
 const VehiclePath = dynamic(() => import('../components/VehiclePath'), {
@@ -73,14 +78,6 @@ const styles = {
     'flex w-full flex-shrink-0 flex-col bg-white border-t-2 border-secondary-300/60',
 }
 
-// Interface CustomMarkerProps
-type CustomMapProps = MapProps &
-  React.RefAttributes<L.Map> & {
-    isAddingMarkers?: boolean
-    onToggleMarkerMode?: () => void
-    trackedVehicles?: { name: string; id?: string }[] // Match the actual type being used
-  }
-
 // Interface MarkerData
 interface MarkerData {
   id: number
@@ -97,6 +94,7 @@ const OverViewMap: React.FC<{
 }> = ({ trackedVehicles }) => {
   // Add mapRef to store the Leaflet map instance
   const mapRef = useRef<L.Map | null>(null)
+  const router = useRouter()
   const { handleDepthRequest, elevationAvailable } = useGoogleElevator()
   const [center, setCenter] = useState<undefined | [number, number]>()
   const [centerZoom, setCenterZoom] = useState<number | undefined>(undefined)
@@ -111,20 +109,14 @@ const OverViewMap: React.FC<{
   const [selectedMarkerId, setSelectedMarkerId] = useState<string | null>(null)
   const [defaultMarkerColor, setDefaultMarkerColor] = useState<string>('red')
   const { selectedStations } = useSelectedStations()
-  const { handleDepthRequestWithFeedback } = useDepthRequest(
-    handleDepthRequest,
-    {
-      warningToastId: 'depth-unavailable',
-      errorToastId: 'depth-result',
-      loadingToastId: 'depth-loading',
-      warningToastClass: 'blue-toast',
-      toastDuration: 5000,
-    }
-  )
   const [layersModalPosition, setLayersModalPosition] = useState({
     top: 0,
     left: 0,
   })
+  const [colorModalPosition, setColorModalPosition] = useState({
+    top: 100,
+    left: 100,
+  })
 
   // Marker state
   const {
@@ -218,9 +210,6 @@ const OverViewMap: React.FC<{
     (gps: VPosDetail) => {
       if ((latestGPS?.isoTime ?? 0) > gps.isoTime || !latestGPS) {
         setLatestGPS(gps)
-        const coords: [number, number] = [gps.latitude, gps.longitude]
-        setCenter(coords)
-        setViewMode('center')
       }
       // Store position for bounds calculation
       vehiclePositions.current.push([gps.latitude, gps.longitude])
@@ -531,10 +520,14 @@ const OverViewMap: React.FC<{
     setShowPlatformsModal(false)
   }, [])
 
-  // handleVehicleColorRequest- Show vehicle colors
-  const handleVehicleColorRequest = useCallback((vehicleName?: string) => {
-    setShowVehicleColors(true)
-  }, [])
+  // handleVehicleColorRequest - Show vehicle colors at anchor (from Map button)
+  const handleVehicleColorRequest = useCallback(
+    (anchor?: { top: number; left: number }) => {
+      setColorModalPosition(anchor ?? { top: 100, left: 100 })
+      setShowVehicleColors(true)
+    },
+    []
+  )
 
   // handleCloseVehicleColors - vehicle colors modal is closed
   const handleCloseVehicleColors = useCallback((vehicleName?: string) => {
@@ -594,42 +587,26 @@ const OverViewMap: React.FC<{
         <PlatformsListModal onClose={handleClosePlatforms} />
       ) : null}
       <Map
+        key={`overview-map-${router.asPath}`}
         ref={mapRef}
         className="h-full w-full"
         onMapReady={(map) => {
           logger.debug('🌍 Map ready callback triggered in OverViewMap')
-          // Store the Leaflet instance
           mapRef.current = map
-
-          // Force redraw - after map is ready
-          setTimeout(() => {
-            try {
-              map.invalidateSize()
-            } catch (e) {
-              logger.warn('Could not invalidate map size:', e)
-            }
-          }, 200)
+          ;[200, 800].forEach((delay) => {
+            setTimeout(() => {
+              try {
+                map.invalidateSize()
+              } catch (e) {
+                logger.warn('Could not invalidate map size:', e)
+              }
+            }, delay)
+          })
         }}
         trackedVehicles={trackedVehicles?.map((vehicle) => ({
           ...vehicle,
           id: vehicle.id || vehicle.name, // Ensure id is always present
         }))}
-        onRequestDepth={async (lat, lng) => {
-          try {
-            // Try to remove any leading zeros
-            const formattedLat = parseFloat(String(lat).replace(/^0+/, ''))
-            // Then use in depth request
-            const result = await handleDepthRequestWithFeedback(
-              formattedLat,
-              lng
-            )
-            return result.depth !== null ? result.depth : 0
-          } catch (error) {
-            logger.warn('❌ Error in depth request:', error)
-            toast.error('Depth data unavailable', { id: 'depth-error' })
-            return 0
-          }
-        }}
         center={center}
         centerZoom={centerZoom}
         fitBounds={bounds}
@@ -692,6 +669,16 @@ const OverViewMap: React.FC<{
           )
         }
       >
+        <MapDepthDisplay
+          depthRequest={handleDepthRequest}
+          options={{
+            warningToastId: 'depth-unavailable',
+            errorToastId: 'depth-result',
+            loadingToastId: 'depth-loading',
+            warningToastClass: 'blue-toast',
+            toastDuration: 5000,
+          }}
+        />
         {uniqueTrackedVehicles?.map((name, index) => (
           <VehiclePath
             name={name.name}
@@ -719,6 +706,15 @@ const OverViewMap: React.FC<{
           )
         })}
       </Map>
+      {showVehicleColors ? (
+        <VehicleColorsModal
+          isOpen={showVehicleColors}
+          onClose={handleCloseVehicleColors}
+          anchorPosition={colorModalPosition}
+          trackedVehicles={trackedVehicles?.map((v) => v.name) ?? []}
+          forceShowAll={true}
+        />
+      ) : null}
     </>
   )
 }
diff --git a/apps/lrauv-dash2/pages/vehicle/[...deployment].tsx b/apps/lrauv-dash2/pages/vehicle/[...deployment].tsx
index 03e753a1..e034cabd 100644
--- a/apps/lrauv-dash2/pages/vehicle/[...deployment].tsx
+++ b/apps/lrauv-dash2/pages/vehicle/[...deployment].tsx
@@ -467,7 +467,7 @@ const Vehicle: NextPage = () => {
 
             {/* Single map instance: render one layout to avoid duplicate controls */}
             {isDesktop ? (
-              <div className="min-h-0 flex-1 flex">
+              <div className="flex min-h-0 flex-1">
                 <div className={styles.content}>
                   <Allotment
                     separator
diff --git a/apps/lrauv-dash2/styles/globals.css b/apps/lrauv-dash2/styles/globals.css
index cde44e14..d2a5932f 100644
--- a/apps/lrauv-dash2/styles/globals.css
+++ b/apps/lrauv-dash2/styles/globals.css
@@ -15,9 +15,11 @@ a {
   box-sizing: border-box;
 }
 
-/*  This is a workaround to make sure that every parent element of the map has a min height on load to prevent Leaflet from showing gray tiles */
-
+/*  Min-height 0 on flex parents so the map can shrink and Leaflet doesn't show gray tiles.
+    Needed for: legacy split-view classes, Allotment panes, and the Leaflet container. */
 .split-view-container,
-.split-view-view {
+.split-view-view,
+.leaflet-container,
+[class*='splitViewView'] {
   min-height: 0 !important;
 }
diff --git a/apps/lrauv-dash2/types/global.d.ts b/apps/lrauv-dash2/types/global.d.ts
new file mode 100644
index 00000000..21bdc972
--- /dev/null
+++ b/apps/lrauv-dash2/types/global.d.ts
@@ -0,0 +1,7 @@
+export {}
+
+declare global {
+  interface Window {
+    google?: any
+  }
+}
diff --git a/apps/lrauv-dash2/types/leaflet-googlemutant-shim.d.ts b/apps/lrauv-dash2/types/leaflet-googlemutant-shim.d.ts
new file mode 100644
index 00000000..38dc7f7b
--- /dev/null
+++ b/apps/lrauv-dash2/types/leaflet-googlemutant-shim.d.ts
@@ -0,0 +1 @@
+declare module 'leaflet.gridlayer.googlemutant/dist/Leaflet.GoogleMutant.js'
diff --git a/docs/map-dependency-flow.md b/docs/map-dependency-flow.md
new file mode 100644
index 00000000..cb20bafb
--- /dev/null
+++ b/docs/map-dependency-flow.md
@@ -0,0 +1,161 @@
+# Map-related dependency flow
+
+Mermaid diagram of Map, DeploymentMap, VehiclePath, elevationService, MapDepthDisplay, and related modules. Highlights **data/control flow** and **import dependencies**; callouts mark possible circular or fragile patterns.
+
+```mermaid
+flowchart TB
+  subgraph app["apps/lrauv-dash2"]
+    _app["_app.tsx"]
+    index["pages/index.tsx\n(OverViewMap)"]
+    deploymentPage["pages/vehicle/[...deployment].tsx"]
+    DeploymentMap["DeploymentMap.tsx"]
+    VehiclePath["VehiclePath.tsx"]
+    MapClickHandler["MapClickHandler.tsx"]
+    ClickableMapPoint["ClickableMapPoint.tsx"]
+    GoogleMapsProvider["GoogleMapsProvider.tsx"]
+    MapLayersListModal["MapLayersListModal.tsx"]
+    DraggableMarker["DraggableMarker.tsx"]
+    CustomMarkerSet["CustomMarkerSet.tsx"]
+    WaypointPreviewPath["WaypointPreviewPath.tsx"]
+    PlatformPaths["PlatformPaths.tsx"]
+    StationMarker["StationMarker.tsx"]
+  end
+
+  subgraph lib["apps/lrauv-dash2/lib"]
+    useGoogleElevator["useGoogleElevator.ts"]
+    elevationService["elevationService.ts"]
+    leafletPlugins["leafletPlugins.ts"]
+    useGoogleMaps["useGoogleMaps.ts"]
+  end
+
+  useGoogleMapsApiKey["useGoogleMapsApiKey.ts"]
+  useTrackedVehicles["useTrackedVehicles.ts"]
+
+  subgraph reactui["packages/react-ui"]
+    Map["Map/Map.tsx"]
+    MapDepthDisplay["Map/MapDepthDisplay.tsx"]
+    MouseCoordinates["Map/MouseCoordinates.tsx"]
+    MapViews["Map/MapViews.tsx"]
+    MapTypes["Map/Map.types.ts"]
+    Measurement["Map/Measurement.tsx"]
+    MovingDot["Map/MovingDot.tsx"]
+    useMapBaseLayer["Map/useMapBaseLayer.ts"]
+    useManagedWaypoints["Modals/.../useManagedWaypoints.ts"]
+  end
+
+  subgraph external["external"]
+    react-leaflet["react-leaflet"]
+    leaflet["leaflet"]
+    utils["@mbari/utils"]
+    apiClient["@mbari/api-client"]
+  end
+
+  %% === App entry & provider ===
+  _app --> GoogleMapsProvider
+  GoogleMapsProvider --> leafletPlugins
+  GoogleMapsProvider --> useGoogleMapsApiKey
+  leafletPlugins -.->|"loads script\n(no TS import)"| leaflet
+
+  %% === Pages use map components ===
+  index --> useGoogleElevator
+  index --> useGoogleMaps
+  index -->|dynamic| Map
+  index -->|dynamic| MapDepthDisplay
+  index -->|dynamic| VehiclePath
+  index --> MapLayersListModal
+  deploymentPage -->|dynamic| DeploymentMap
+  deploymentPage --> useGoogleMaps
+
+  %% === DeploymentMap is the main map host ===
+  DeploymentMap -->|dynamic import| Map
+  DeploymentMap -->|dynamic import| MapDepthDisplay
+  DeploymentMap --> useGoogleElevator
+  DeploymentMap --> useManagedWaypoints
+  DeploymentMap --> useTrackedVehicles
+  DeploymentMap -->|dynamic| VehiclePath
+  DeploymentMap -->|dynamic| ClickableMapPoint
+  DeploymentMap -->|dynamic| MapClickHandler
+  DeploymentMap -->|dynamic| DraggableMarker
+  DeploymentMap -->|dynamic| CustomMarkerSet
+  DeploymentMap -->|dynamic| WaypointPreviewPath
+  DeploymentMap -->|dynamic| PlatformPaths
+  DeploymentMap -->|dynamic| StationMarker
+  DeploymentMap --> MapLayersListModal
+  DeploymentMap --> SelectedStations["SelectedStationContext"]
+  DeploymentMap --> MarkerCtx["MarkerContext"]
+
+  %% === Elevation chain (one-way, no cycle) ===
+  useGoogleElevator --> elevationService
+  elevationService --> utils
+  DeploymentMap -->|"handleDepthRequest"| MapDepthDisplay
+  index -->|"handleDepthRequest"| MapDepthDisplay
+
+  %% === react-ui Map internal ===
+  Map --> useMapBaseLayer
+  Map --> MapTypes
+  Map --> Measurement
+  Map --> MovingDot
+  Map --> MapViews
+  Map -->|re-export| MapDepthDisplay
+  MapDepthDisplay --> MouseCoordinates
+  MapDepthDisplay --> utils
+  MapDepthDisplay --> react-leaflet
+  MouseCoordinates --> react-leaflet
+  MouseCoordinates --> utils
+  MovingDot --> Measurement
+  Measurement --> react-leaflet
+  Measurement --> leaflet
+  MapViews --> react-leaflet
+  useMapBaseLayer --> recoil["recoil"]
+
+  %% === VehiclePath (no import of Map/DeploymentMap) ===
+  VehiclePath --> apiClient
+  VehiclePath --> react-leaflet
+  VehiclePath --> SharedPathContextProvider
+  VehiclePath --> VehicleColorsContext
+
+  %% === Other map children ===
+  ClickableMapPoint --> react-leaflet
+  ClickableMapPoint -.->|"⚠ from 'react-ui/dist'"| useManagedWaypoints
+  MapClickHandler --> react-leaflet
+  DraggableMarker --> react-leaflet
+  CustomMarkerSet --> react-leaflet
+  WaypointPreviewPath --> react-leaflet
+  PlatformPaths --> PlatformPath["PlatformPath"]
+  PlatformPaths --> usePlatformList["usePlatformList"]
+
+  %% Styling for notes
+  classDef warn fill:#f9f,stroke:#333,stroke-width:2px
+  classDef lib fill:#bfb,stroke:#333
+  classDef pkg fill:#bbf,stroke:#333
+  class ClickableMapPoint warn
+```
+
+## Legend
+
+- **Solid arrows**: direct or dynamic `import` / dependency.
+- **Dashed arrows**: data passed as props or runtime dependency (e.g. `handleDepthRequest`), or non-TypeScript load (e.g. script tag).
+- **Subgraphs**: app vs lib vs react-ui vs external.
+
+## Circular dependency check
+
+- **No circular imports** among Map, DeploymentMap, VehiclePath, elevationService, and MapDepthDisplay.
+- Flow is one-way: app → react-ui Map (and MapDepthDisplay); app → useGoogleElevator → elevationService; depth callback is passed from app into MapDepthDisplay as a prop.
+
+## Potential issues
+
+| Item                          | Description                                                                                                                                                                                                                |
+| ----------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **ClickableMapPoint**         | Imports `useManagedWaypoints` from `'react-ui/dist'` instead of `'@mbari/react-ui'`. Fragile (tied to build output) and inconsistent with the rest of the app.                                                             |
+| **Duplicate dynamic imports** | `pages/index.tsx` and `DeploymentMap.tsx` both dynamically import Map, MapDepthDisplay, VehiclePath, etc. Consider a small “map bundle” or shared lazy component to avoid duplication and ensure one place for SSR: false. |
+| **Cross-feature dependency**  | `DeploymentMap` depends on `useManagedWaypoints` from react-ui’s **Modals** (mission modal). Map feature is coupled to mission modal hooks; changes in Modals can affect map behavior and re-renders.                      |
+| **elevationService**          | Singleton + `window` flag; fine for one app, but ensure only one initializer (e.g. GoogleMapsProvider / leafletPlugins) loads the Google script so elevation and map stay in sync.                                         |
+
+## Depth data flow (summary)
+
+1. **GoogleMapsProvider** (in \_app) runs **leafletPlugins.initLeafletGoogle(apiKey)**, which loads Google Maps (with elevation) and the Leaflet Google layer.
+2. **useGoogleElevator** uses **elevationService** (`getElevationService`, `getCachedElevation`) and exposes **handleDepthRequest**.
+3. **DeploymentMap** (and **index** for OverViewMap) call **useGoogleElevator()** and pass **handleDepthRequest** into **MapDepthDisplay** as the **depthRequest** prop.
+4. **MapDepthDisplay** uses **useDepthRequest(depthRequest, options)** from `@mbari/utils` and **MouseCoordinates**; it renders coordinates + depth in the map’s top-right pane.
+
+No cycle in this chain; elevation is app → service → hook → prop → MapDepthDisplay.
diff --git a/docs/map-development-guide.md b/docs/map-development-guide.md
new file mode 100644
index 00000000..08d95057
--- /dev/null
+++ b/docs/map-development-guide.md
@@ -0,0 +1,249 @@
+Map development guide
+
+Goal
+
+Make map features easy to add without breaking SSR, Leaflet, Google Maps, or creating circular dependencies between the app and @mbari/react-ui.
+
+⸻
+
+The golden rules
+
+Rule 1: The library map stays “pure”
+
+packages/react-ui must never import from any app (like apps/lrauv-dash2).
+
+✅ OK in @mbari/react-ui
+• React + react-leaflet components
+• Map controls, base layers, measurement UI
+• Generic map helpers and types
+• Callback props (to ask the app to do something)
+
+❌ Not OK in @mbari/react-ui
+• Importing app modals/components
+• Loading Google Maps scripts
+• Importing Leaflet side-effect plugins (googlemutant, markercluster, etc.)
+• Reading env variables or calling app APIs directly
+
+⸻
+
+Rule 2: The app owns side effects and plugins
+
+Anything that:
+• touches window, document, navigator
+• loads a <script>
+• imports a Leaflet plugin that changes globals (side effects)
+
+…belongs in the app, in one place.
+
+Use one initializer file (example name):
+• apps/lrauv-dash2/lib/leafletPlugins.ts
+
+That file should:
+• run only in the browser
+• be idempotent (safe to call many times)
+• load in the right order (Leaflet first, then plugins)
+
+⸻
+
+Rule 3: Map “children” are either generic or app-specific
+
+When you add a new map-related feature, decide where it belongs:
+
+Put it in @mbari/react-ui if:
+• it’s reusable across apps
+• it doesn’t depend on app routes/auth/data fetching
+• it doesn’t load scripts/plugins
+• it can be controlled by props and callbacks
+
+Put it in the app if:
+• it’s app-specific UI (vehicle modals, login stuff, app state)
+• it needs API base URLs / siteConfig
+• it loads Leaflet plugins or Google Maps
+• it depends on app contexts/store
+
+⸻
+
+How to build map features (recommended patterns)
+
+Pattern A: Add a new map UI feature inside @mbari/react-ui
+
+Use props and local state.
+
+Examples:
+• a new control button
+• a measurement overlay
+• a generic marker layer
+
+Checklist:
+• No app imports
+• No plugin imports
+• No window access during module load (only inside effects)
+
+⸻
+
+Pattern B: App-owned feature triggered by the map (callbacks)
+
+If the map needs to open something app-owned (like a modal), add a callback prop.
+
+Example approach:
+• Map computes an anchor position for UI placement
+• Map calls onRequestSomething(anchor)
+• App opens its modal and uses the anchor
+
+Guidelines:
+• Callback params should be simple and serializable (like { top, left }, ids, booleans)
+• Don’t pass whole React components through the callback
+
+⸻
+
+Pattern C: App adds custom layers/markers/handlers (render props)
+
+If the app needs to render custom map content:
+• provide a render prop that receives a small “map context” (map state, handlers)
+• the app returns React nodes (markers, overlays)
+
+Guidelines:
+• Keep the render prop context stable (useMemo/useCallback)
+• Don’t pass huge app objects if you can pass ids/derived values
+
+⸻
+
+SSR and “client-only” rules
+
+Never run Leaflet or Google code on the server
+
+Anything that uses Leaflet/Google should be:
+• inside useEffect, and/or
+• in a component loaded with dynamic(..., { ssr: false })
+
+Safe checks:
+• typeof window !== 'undefined'
+• window.google?.maps exists before using Google-dependent components
+
+⸻
+
+Plugin loading checklist (Leaflet + GoogleMutant)
+
+Only load plugins in the app initializer
+
+In the app, your initializer should:
+• load Leaflet
+• ensure window.L exists
+• load the plugin after Leaflet is global
+• load Google Maps script once
+
+Common pitfall:
+• If GoogleMutant is imported before Leaflet is global you get: ReferenceError: L is not defined
+
+Rule:
+• Leaflet first, then plugin
+
+⸻
+
+TypeScript rules that prevent weird breakage
+
+Don’t use un-exported subpath imports
+
+✅ Do:
+• import { useDepthRequest } from '@mbari/utils'
+
+❌ Don’t:
+• import { useDepthRequest } from '@mbari/utils/useDepthRequest' unless exports explicitly support it
+
+⸻
+
+If a plugin requires a dist/... import, add a .d.ts shim in the app
+
+If you import:
+• leaflet.gridlayer.googlemutant/dist/Leaflet.GoogleMutant.js
+
+TypeScript may complain it has no types.
+
+Fix by adding a local declaration file like:
+• apps/lrauv-dash2/types/leaflet-googlemutant-shim.d.ts
+
+Containing:
+• declare module 'leaflet.gridlayer.googlemutant/dist/Leaflet.GoogleMutant.js'
+
+⸻
+
+Define window.google in one place only
+
+Never declare Window.google in multiple files with different types.
+
+Use one file:
+• apps/lrauv-dash2/types/global.d.ts
+
+Keep it simple:
+• google?: any
+
+If you “tighten” it in one file but another file uses any, TypeScript will fail with:
+• “Subsequent property declarations must have the same type”
+
+⸻
+
+Build and import rules (monorepo hygiene)
+
+Library output must be stable
+
+@mbari/react-ui must always emit:
+• packages/react-ui/dist/index.d.ts
+
+If it doesn’t, apps will fail with:
+• “Cannot find module ‘@mbari/react-ui’ or its corresponding type declarations”
+
+⸻
+
+Don’t import library source paths from the app
+
+✅ Do:
+• import { Map } from '@mbari/react-ui'
+
+❌ Don’t:
+• import Map from '../../packages/react-ui/src/Map/Map'
+• import 'react-ui/src/...'
+
+⸻
+
+Debugging quick checks
+
+If “map doesn’t show”
+• Check Console for first error
+• Confirm Leaflet CSS is loaded
+• Confirm the map component is client-only (dynamic ssr false or gated)
+
+If “Google layer doesn’t show”
+• Confirm Google script loaded once
+• Confirm window.google?.maps exists before rendering Google-dependent layers
+• Confirm plugin initializer ran and didn’t throw
+
+If “vehicles/login don’t load”
+• Check Network requests for /info and API base URL
+• Verify .env and siteConfig are present
+• Verify API calls are hitting the proxy/API host, not Next on port 3000
+
+⸻
+
+When adding a new map feature, ask these questions first 1. Does this feature need Leaflet plugins or scripts
+
+    •	If yes: app initializer
+    •	If no: library is fine
+
+    2.	Does this feature depend on app data/auth/routes
+
+    •	If yes: app-owned component
+    •	If no: library is fine
+
+    3.	Does the map need to trigger app UI
+
+    •	If yes: callback prop or render prop
+    •	If no: keep it inside the map
+
+⸻
+
+“Done” definition for a map PR
+• yarn workspace @mbari/react-ui build works
+• yarn build works
+• yarn workspace @mbari/lrauv-dash2 dev shows map and main app flows
+• No library → app imports
+• Plugins/scripts only loaded in app initializer
diff --git a/packages/react-ui/src/Map/Map.stories.tsx b/packages/react-ui/src/Map/Map.stories.tsx
index ed0be266..306b9af0 100644
--- a/packages/react-ui/src/Map/Map.stories.tsx
+++ b/packages/react-ui/src/Map/Map.stories.tsx
@@ -1,11 +1,16 @@
 import { Story, Meta } from '@storybook/react'
-import Map, { MapProps } from './Map'
+import Map, { MapProps, MapDepthDisplay } from './Map'
 import { useCallback, useState } from 'react'
 
 export default {
   title: 'Maps/Map',
 } as Meta
 
+const mockDepthRequest = async (_lat: number, _lng: number) => ({
+  depth: (Math.random() * 10000.0) / 100.0,
+  status: 'success',
+})
+
 const Template: Story<MapProps> = (args) => {
   const [center, setCenter] = useState(args.center)
   const onRequestCoordinate = useCallback(() => {
@@ -19,7 +24,9 @@ const Template: Story<MapProps> = (args) => {
         className="h-96 w-full"
         onRequestCoordinate={onRequestCoordinate}
         center={center}
-      />
+      >
+        <MapDepthDisplay depthRequest={mockDepthRequest} />
+      </Map>
     </div>
   )
 }
@@ -27,9 +34,6 @@ const Template: Story<MapProps> = (args) => {
 const args: MapProps = {
   center: [37.7749, -122.4194],
   zoom: 10,
-  onRequestDepth: async () => {
-    return (Math.random() * 10000.0) / 100.0
-  },
 }
 
 export const Primary = Template.bind({})
diff --git a/packages/react-ui/src/Map/Map.tsx b/packages/react-ui/src/Map/Map.tsx
index 4c939282..f5649ecd 100644
--- a/packages/react-ui/src/Map/Map.tsx
+++ b/packages/react-ui/src/Map/Map.tsx
@@ -8,15 +8,15 @@ import {
   useMapEvents,
 } from 'react-leaflet'
 import ReactLeafletGoogleLayer from 'react-leaflet-google-layer'
+const GoogleLayerAny =
+  ReactLeafletGoogleLayer as unknown as React.ComponentType<any>
 import Control from 'react-leaflet-custom-control'
 import L from 'leaflet'
 import 'leaflet/dist/leaflet.css'
 import 'leaflet-measure/dist/leaflet-measure.css'
 import '@mbari/react-ui/dist/mbari-ui.css'
-import '@mbari/react-ui/src/css/base.css'
 import Tippy from '@tippyjs/react'
 import 'tippy.js/dist/tippy.css'
-import MouseCoordinates, { MouseCoordinatesProps } from './MouseCoordinates'
 import { useMapBaseLayer, BaseLayerOption } from './useMapBaseLayer'
 import 'leaflet-mouse-position'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
@@ -33,8 +33,8 @@ import { Measurement } from './Measurement'
 import MovingDot from './MovingDot'
 import { AreaComponent, PathComponent, MeasurementProps } from './Measurement'
 import { CenterView } from './MapViews'
-import { createLogger, loadGoogleMapsOnce } from '@mbari/utils'
-import VehicleColorsModal from '@mbari/lrauv-dash2/components/VehicleColorsModal'
+import type { MapProps } from './Map.types'
+import { createLogger } from '@mbari/utils'
 
 const logger = createLogger('Map')
 
@@ -83,56 +83,7 @@ interface StoredMarker {
   savedToLayer?: boolean
 }
 
-export interface MapProps extends React.HTMLAttributes<HTMLDivElement> {
-  className?: string
-  style?: React.CSSProperties
-  center?: [number, number]
-  centerZoom?: number
-  zoom?: number
-  minZoom?: number
-  maxZoom?: number
-  maxNativeZoom?: number
-  fitBounds?: [[number, number], [number, number]]
-  viewMode?: 'center' | 'bounds' | null
-  scrollWheelZoom?: boolean
-  isAddingMarkers?: boolean
-  onToggleMarkerMode?: () => void
-  onRequestMarkers?: (position?: { top: number; left: number }) => void
-  onRequestDepth?: MouseCoordinatesProps['onRequestDepth']
-  onRequestCoordinate?: () => void
-  onRequestFitBounds?: () => void
-  onRequestPlatforms?: () => void
-  onRequestStations?: (position?: { top: number; left: number }) => void
-  onRequestVehicleColors?: (vehicleName?: string) => void
-  whenCreated?: (map: L.Map) => void
-  onMapReady?: (map: L.Map) => void
-  trackedVehicles?: Array<{ id: string; name: string }>
-  dmsCoord?: string
-  mapCoord?: string
-  children?: React.ReactNode
-  renderMapClickHandler?: (props: {
-    isAddingMarkers: boolean
-    isEditingMarker: boolean
-    onAddMarker: (lat: number, lng: number) => number
-  }) => React.ReactNode
-  renderCustomMarkerSet?: (props: {
-    isAddingMarkers: boolean
-    setIsAddingMarkers: React.Dispatch<React.SetStateAction<boolean>>
-  }) => React.ReactNode
-  renderDraggableMarkers?: (props: {
-    markers: Array<{
-      id: number
-      lat: number
-      lng: number
-      index: number
-      label: string
-    }>
-    handleMarkerDragEnd: (
-      id: number,
-      position: { lat: number; lng: number }
-    ) => void
-  }) => React.ReactNode
-}
+export type { MapProps } from './Map.types'
 
 export type MeasureMode = 'open' | 'measuring' | 'closed' | 'cancelled'
 
@@ -146,7 +97,7 @@ const Map = React.forwardRef<L.Map, MapProps>(
       zoom = 17,
       minZoom = 4,
       maxZoom = 17,
-      maxNativeZoom = 13,
+      maxNativeZoom = 19,
       fitBounds,
       viewMode,
       trackedVehicles = [],
@@ -154,7 +105,6 @@ const Map = React.forwardRef<L.Map, MapProps>(
       isAddingMarkers = false,
       onToggleMarkerMode,
       onRequestMarkers,
-      onRequestDepth,
       onRequestCoordinate,
       onRequestFitBounds,
       onRequestPlatforms,
@@ -177,9 +127,6 @@ const Map = React.forwardRef<L.Map, MapProps>(
     const layersButtonRef = useRef<HTMLButtonElement>(null)
     const [mapReady, setMapReady] = useState(false)
 
-    const [googleMapsStatus, setGoogleMapsStatus] = useState<
-      'pending' | 'loading' | 'loaded' | 'error'
-    >('pending')
     const [isMeasuring, setIsMeasuring] = useState(false)
     const [isAddingMarkersLocal, setIsAddingMarkersLocal] =
       useState(isAddingMarkers)
@@ -190,9 +137,7 @@ const Map = React.forwardRef<L.Map, MapProps>(
       },
       [setBaseLayer]
     )
-    const [showVehicleColorsModal, setShowVehicleColorsModal] = useState(false)
     const vehicleColorsButtonRef = useRef<HTMLButtonElement>(null)
-    const [modalPosition, setModalPosition] = useState({ top: 0, left: 0 })
 
     const validatedCenter: [number, number] =
       Array.isArray(center) &&
@@ -201,87 +146,6 @@ const Map = React.forwardRef<L.Map, MapProps>(
         ? center
         : DEFAULT_CENTER
 
-    // Google Maps initialization
-    useEffect(() => {
-      // Only initialize Google Maps after map is ready
-      const handleMapReady = async (event: CustomEvent) => {
-        // Extract the map instance from the event
-        const map = event.detail as L.Map
-        if (!map) {
-          logger.error('Map instance not found in mapready event')
-          setGoogleMapsStatus('error')
-          return
-        }
-
-        // Use safeLogger for non-critical logs
-        safeLogger.debug('Map ready event received, initializing Google Maps')
-        setGoogleMapsStatus('loading')
-
-        try {
-          safeLogger.debug('Loading leaflet.gridlayer.googlemutant...')
-
-          // Load Google Maps API first (this ensures custom elements are registered once)
-          await loadGoogleMapsOnce()
-
-          // Load the Leaflet plugin
-          let GoogleMutant
-          try {
-            GoogleMutant = await import('leaflet.gridlayer.googlemutant')
-          } catch (err) {
-            safeLogger.debug('Trying alternative import path...')
-            try {
-              GoogleMutant = await import('leaflet.gridlayer.googlemutant')
-            } catch (err2) {
-              logger.error('Failed to import from node_modules path:', err2)
-              throw err
-            }
-          }
-
-          if (!window.google) {
-            logger.error('Google Maps API still not available after loading')
-            setGoogleMapsStatus('error')
-            return
-          }
-
-          // Check if Google Maps is already loaded
-          safeLogger.debug('Creating Google Maps layer...')
-          const googleLayer = L.gridLayer.googleMutant({
-            type: 'hybrid',
-            maxZoom: maxZoom,
-            maxNativeZoom: maxNativeZoom,
-          })
-
-          safeLogger.debug('Adding Google Maps layer to map...')
-          googleLayer.addTo(map)
-
-          // Store the layer for future reference
-          // @ts-ignore - Adding custom property
-          map._googleLayer = googleLayer
-
-          setGoogleMapsStatus('loaded')
-          safeLogger.debug('✅ Google Maps layer added successfully!')
-        } catch (error) {
-          setGoogleMapsStatus('error')
-          logger.error('Failed to initialize Google Maps layer:', error)
-        }
-      }
-
-      // Listen for mapReady event
-      if (typeof window !== 'undefined') {
-        window.addEventListener(
-          'mapready',
-          handleMapReady as unknown as EventListener
-        )
-
-        return () => {
-          window.removeEventListener(
-            'mapready',
-            handleMapReady as unknown as EventListener
-          )
-        }
-      }
-    }, [maxZoom, maxNativeZoom])
-
     // Create measurements
     const [measurements, setMeasurements] = useState<
       {
@@ -627,14 +491,12 @@ const Map = React.forwardRef<L.Map, MapProps>(
 
     // Handle mouse over event for the Vehicle Colors button
     const handleVehicleColorsClick = () => {
+      let anchor: { top: number; left: number } | undefined
       if (vehicleColorsButtonRef.current) {
         const rect = vehicleColorsButtonRef.current.getBoundingClientRect()
-        setModalPosition({
-          top: rect.bottom + 40,
-          left: rect.left,
-        })
+        anchor = { top: rect.bottom + 40, left: rect.left }
       }
-      setShowVehicleColorsModal(!showVehicleColorsModal)
+      onRequestVehicleColors?.(anchor)
     }
 
     // Remove Measurement
@@ -799,12 +661,12 @@ const Map = React.forwardRef<L.Map, MapProps>(
           })}
         <ScaleControl position="topright" />
         <LayersControl position="topright">
-          {mapReady && (
+          {mapReady && typeof window !== 'undefined' && window.google?.maps && (
             <LayersControl.BaseLayer
               name="Google Hybrid"
               checked={baseLayer === 'Google Hybrid'}
             >
-              <ReactLeafletGoogleLayer
+              <GoogleLayerAny
                 useGoogMapsLoader={false}
                 type="hybrid"
                 eventHandlers={{
@@ -837,6 +699,7 @@ const Map = React.forwardRef<L.Map, MapProps>(
               <TileLayer
                 attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
                 url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+                maxNativeZoom={maxNativeZoom}
                 eventHandlers={{
                   add: addBaseLayerHandler('OpenStreetmaps'),
                 }}
@@ -851,6 +714,7 @@ const Map = React.forwardRef<L.Map, MapProps>(
               <TileLayer
                 attribution='&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="https://carto.com/attributions">CARTO</a>'
                 url="https://cartodb-basemaps-{s}.global.ssl.fastly.net/dark_nolabels/{z}/{x}/{y}.png"
+                maxNativeZoom={maxNativeZoom}
                 eventHandlers={{
                   add: addBaseLayerHandler('Dark Layer (CARTO)'),
                 }}
@@ -858,9 +722,6 @@ const Map = React.forwardRef<L.Map, MapProps>(
             </LayersControl.BaseLayer>
           )}
         </LayersControl>
-        <Control prepend position="topright">
-          <MouseCoordinates onRequestDepth={onRequestDepth} />
-        </Control>
         {children}
         {/* Single consolidated topleft control: TrackDB/Layers + Center/FitBounds/Markers */}
         <Control position="topleft">
@@ -1234,29 +1095,7 @@ const Map = React.forwardRef<L.Map, MapProps>(
             </Tippy>
           ) : null}
         </Control>
-        {showVehicleColorsModal && (
-          <VehicleColorsModal
-            isOpen={showVehicleColorsModal}
-            onClose={() => setShowVehicleColorsModal(false)}
-            anchorPosition={modalPosition}
-            trackedVehicles={(trackedVehicles || []).map(
-              // If trackedVehicles is array of objects with name property:
-              (vehicle) =>
-                typeof vehicle === 'string' ? vehicle : vehicle.name
-            )}
-          />
-        )}
         <MeasureEvents />
-        {/* {showVehicleColorsModal && (
-          <VehicleColorsModal
-            isOpen={showVehicleColorsModal}
-            onClose={() => setShowVehicleColorsModal(false)}
-            anchorPosition={modalPosition}
-            trackedVehicles={(trackedVehicles || []).map(
-              (vehicle) => vehicle.name
-            )}
-          />
-        )} */}
       </MapContainer>
     )
   }
@@ -1265,3 +1104,5 @@ const Map = React.forwardRef<L.Map, MapProps>(
 Map.displayName = 'Map.Map'
 
 export default Map
+export { default as MapDepthDisplay } from './MapDepthDisplay'
+export type { MapDepthDisplayProps, DepthRequestFn } from './MapDepthDisplay'
diff --git a/packages/react-ui/src/Map/Map.types.ts b/packages/react-ui/src/Map/Map.types.ts
new file mode 100644
index 00000000..8061deb1
--- /dev/null
+++ b/packages/react-ui/src/Map/Map.types.ts
@@ -0,0 +1,52 @@
+import type React from 'react'
+import type L from 'leaflet'
+
+export interface MapProps extends React.HTMLAttributes<HTMLDivElement> {
+  className?: string
+  style?: React.CSSProperties
+  center?: [number, number]
+  centerZoom?: number
+  zoom?: number
+  minZoom?: number
+  maxZoom?: number
+  maxNativeZoom?: number
+  fitBounds?: [[number, number], [number, number]]
+  viewMode?: 'center' | 'bounds' | null
+  scrollWheelZoom?: boolean
+  isAddingMarkers?: boolean
+  onToggleMarkerMode?: () => void
+  onRequestMarkers?: (position?: { top: number; left: number }) => void
+  onRequestCoordinate?: () => void
+  onRequestFitBounds?: () => void
+  onRequestPlatforms?: () => void
+  onRequestStations?: (position?: { top: number; left: number }) => void
+  onRequestVehicleColors?: (anchor?: { top: number; left: number }) => void
+  whenCreated?: (map: L.Map) => void
+  onMapReady?: (map: L.Map) => void
+  trackedVehicles?: Array<{ id: string; name: string }>
+  dmsCoord?: string
+  mapCoord?: string
+  children?: React.ReactNode
+  renderMapClickHandler?: (props: {
+    isAddingMarkers: boolean
+    isEditingMarker: boolean
+    onAddMarker: (lat: number, lng: number) => number
+  }) => React.ReactNode
+  renderCustomMarkerSet?: (props: {
+    isAddingMarkers: boolean
+    setIsAddingMarkers: React.Dispatch<React.SetStateAction<boolean>>
+  }) => React.ReactNode
+  renderDraggableMarkers?: (props: {
+    markers: Array<{
+      id: number
+      lat: number
+      lng: number
+      index: number
+      label: string
+    }>
+    handleMarkerDragEnd: (
+      id: number,
+      position: { lat: number; lng: number }
+    ) => void
+  }) => React.ReactNode
+}
diff --git a/packages/react-ui/src/Map/MapDepthDisplay.tsx b/packages/react-ui/src/Map/MapDepthDisplay.tsx
new file mode 100644
index 00000000..60ccb4be
--- /dev/null
+++ b/packages/react-ui/src/Map/MapDepthDisplay.tsx
@@ -0,0 +1,68 @@
+import React, { useCallback, useState, useLayoutEffect } from 'react'
+import { createPortal } from 'react-dom'
+import { useMap } from 'react-leaflet'
+import { useDepthRequest, type DepthRequestOptions } from '@mbari/utils'
+import MouseCoordinates from './MouseCoordinates'
+
+const TOPRIGHT_PANE_SELECTOR = '.leaflet-top.leaflet-right'
+
+export type DepthRequestFn = (
+  lat: number,
+  lng: number
+) => Promise<{ depth: number | null; status: string }>
+
+export interface MapDepthDisplayProps {
+  depthRequest: DepthRequestFn
+  options?: DepthRequestOptions
+}
+
+/**
+ * Self-contained map layer that owns depth request state and displays coordinates + depth.
+ * Renders inside Map as a child; only this component re-renders when depth data updates.
+ * Uses a React portal into the map's topright pane to avoid DOM conflicts with react-leaflet-custom-control.
+ */
+const MapDepthDisplay: React.FC<MapDepthDisplayProps> = ({
+  depthRequest,
+  options = {},
+}) => {
+  const map = useMap()
+  const [wrapper, setWrapper] = useState<HTMLElement | null>(null)
+
+  useLayoutEffect(() => {
+    const pane = map
+      .getContainer()
+      .querySelector(TOPRIGHT_PANE_SELECTOR) as HTMLElement | null
+    if (!pane) return
+    const div = document.createElement('div')
+    pane.prepend(div)
+    setWrapper(div)
+    return () => {
+      div.remove()
+      setWrapper(null)
+    }
+  }, [map])
+
+  const { handleDepthRequestWithFeedback } = useDepthRequest(
+    depthRequest,
+    options
+  )
+
+  const onRequestDepth = useCallback(
+    (lat: number, lng: number) =>
+      handleDepthRequestWithFeedback(lat, lng).then(
+        (r: { depth: number | null }) => r.depth ?? 0
+      ),
+    [handleDepthRequestWithFeedback]
+  )
+
+  if (!wrapper) return null
+
+  return createPortal(
+    <div className="leaflet-control">
+      <MouseCoordinates onRequestDepth={onRequestDepth} />
+    </div>,
+    wrapper
+  )
+}
+
+export default MapDepthDisplay
diff --git a/packages/react-ui/src/Map/MouseCoordinates.tsx b/packages/react-ui/src/Map/MouseCoordinates.tsx
index 56851da7..9520c7e4 100644
--- a/packages/react-ui/src/Map/MouseCoordinates.tsx
+++ b/packages/react-ui/src/Map/MouseCoordinates.tsx
@@ -91,7 +91,8 @@ const MouseCoordinates: React.FC<MouseCoordinatesProps> = ({
 
   return (
     <div className="leaflet-control leaflet-bar" style={divStyle}>
-      {depth?.depth && ` ${depth.depth.toPrecision(4)}m at `}
+      {typeof depth?.depth === 'number' &&
+        ` ${depth.depth.toPrecision(4)}m at `}
       {formattedCoordinates}
     </div>
   )
diff --git a/packages/react-ui/src/Modals/MissionModalSteps/MissionStep.tsx b/packages/react-ui/src/Modals/MissionModalSteps/MissionStep.tsx
index b782b901..cfe106b2 100644
--- a/packages/react-ui/src/Modals/MissionModalSteps/MissionStep.tsx
+++ b/packages/react-ui/src/Modals/MissionModalSteps/MissionStep.tsx
@@ -3,7 +3,7 @@ import { SelectOption } from '../../Fields/Select'
 import { Mission, MissionTable } from '../../Tables/MissionTable'
 import { Input, SelectField } from '../../Fields'
 import { sortByProperty } from '@mbari/utils'
-import { SortDirection } from 'react-ui/src/Data/TableHeader'
+import { SortDirection } from '../../Data/TableHeader'
 
 export interface MissionStepProps {
   vehicleName: string
diff --git a/packages/react-ui/src/index.ts b/packages/react-ui/src/index.ts
index 5bc429bc..221109c9 100644
--- a/packages/react-ui/src/index.ts
+++ b/packages/react-ui/src/index.ts
@@ -14,3 +14,8 @@ export * from './Icons'
 export * from './PopUps'
 export * from './Tables'
 export * from './Map/useMapBaseLayer'
+export type { MapProps } from './Map/Map.types'
+export type {
+  MapDepthDisplayProps,
+  DepthRequestFn,
+} from './Map/MapDepthDisplay'
diff --git a/packages/react-ui/tsconfig.json b/packages/react-ui/tsconfig.json
index db488c57..01eeb444 100644
--- a/packages/react-ui/tsconfig.json
+++ b/packages/react-ui/tsconfig.json
@@ -1,9 +1,14 @@
 {
   "extends": "tsconfig/react-library.json",
-  "include": ["."],
-  "exclude": ["dist", "build", "node_modules"],
   "compilerOptions": {
-    "outDir": "./dist"
+    "baseUrl": ".",
+    "paths": {},
+    "rootDir": "./src",
+    "outDir": "./dist",
+    "declaration": true,
+    "declarationMap": true
   },
+  "include": ["src"],
+  "exclude": ["dist", "build", "node_modules"],
   "types": ["resize-observer-browser"]
 }
diff --git a/packages/utils/src/index.ts b/packages/utils/src/index.ts
index 04c20caa..0202cb93 100644
--- a/packages/utils/src/index.ts
+++ b/packages/utils/src/index.ts
@@ -46,3 +46,4 @@ export * from './nextCommsTimeFormatting'
 export * from './calculateNextComm'
 export * from './decodeHtmlEntities'
 export * from './formatEventEntries'
+export * from './useDepthRequest'