merged show map coordinates

admin/inertia/components/maps/CoordinateOverlay.tsx

@@ -0,0 +1,25 @@
+type CoordinateOverlayProps = {
+  latitude: number
+  longitude: number
+  x: number
+  y: number
+}
+
+export default function CoordinateOverlay({
+  latitude,
+  longitude,
+  x,
+  y,
+}: CoordinateOverlayProps) {
+  return (
+    <div
+      className="pointer-events-none absolute z-[9999] -translate-x-1/2 whitespace-nowrap rounded bg-black/75 px-2 py-1 font-mono text-[11px] text-white"
+      style={{
+        left: x,
+        top: y - 36,
+      }}
+    >
+      {latitude.toFixed(6)}, {longitude.toFixed(6)}
+    </div>
+  )
+}

admin/inertia/components/maps/MapComponent.tsx

@@ -9,13 +9,17 @@ import Map, {
 import type { MapRef, MapLayerMouseEvent } from 'react-map-gl/maplibre'
 import maplibregl from 'maplibre-gl'
 import 'maplibre-gl/dist/maplibre-gl.css'
+
 import { Protocol } from 'pmtiles'
 import { useEffect, useRef, useState, useCallback } from 'react'
 
 import { useMapMarkers, PIN_COLORS } from '~/hooks/useMapMarkers'
 import type { PinColorId } from '~/hooks/useMapMarkers'
+
 import MarkerPin from './MarkerPin'
 import MarkerPanel from './MarkerPanel'
+import CoordinateOverlay from './CoordinateOverlay'
+import ScaleUnitToggle from './ScaleUnitToggle'
 
 type ScaleUnit = 'imperial' | 'metric'
 
@@ -65,9 +69,22 @@ const getMapLocationParams = (): MapLocationParams | null => {
 }
 
 export default function MapComponent() {
+type MapComponentProps = {
+  isHoveringUI: boolean
+  showCoordinatesEnabled: boolean
+}
+
+export default function MapComponent({
+  isHoveringUI,
+  showCoordinatesEnabled,
+}: MapComponentProps) {
   const mapRef = useRef<MapRef>(null)
+  const animationFrameRef = useRef<number | null>(null)
+
   const { markers, addMarker, deleteMarker } = useMapMarkers()
 
+  const [isDraggingMap, setIsDraggingMap] = useState(false)
+
   const [placingMarker, setPlacingMarker] = useState<{ lng: number; lat: number } | null>(null)
   const [markerName, setMarkerName] = useState('')
   const [markerColor, setMarkerColor] = useState<PinColorId>('orange')
@@ -77,6 +94,13 @@ export default function MapComponent() {
     () => (localStorage.getItem('nomad:map-scale-unit') as ScaleUnit) || 'metric'
   )
 
+  const [cursorLngLat, setCursorLngLat] = useState<{
+    lng: number
+    lat: number
+    x: number
+    y: number
+  } | null>(null)
+
   const flyToLocationParams = useCallback(() => {
     const location = getMapLocationParams()
     if (!location) return
@@ -96,6 +120,8 @@ export default function MapComponent() {
     })
   }, [])
 
+  const [showCoordinates, setShowCoordinates] = useState(false)
+
   useEffect(() => {
     const protocol = new Protocol()
     maplibregl.addProtocol('pmtiles', protocol.tile)
@@ -105,6 +131,55 @@ export default function MapComponent() {
     }
   }, [])
 
+  useEffect(() => {
+    return () => {
+      if (animationFrameRef.current) {
+        cancelAnimationFrame(animationFrameRef.current)
+      }
+    }
+  }, [])
+
+  const hideCoordinates = useCallback(() => {
+    setShowCoordinates(false)
+    setCursorLngLat(null)
+  }, [])
+
+  const handleScaleUnitChange = useCallback((unit: ScaleUnit) => {
+    setScaleUnit(unit)
+    localStorage.setItem('nomad:map-scale-unit', unit)
+  }, [])
+
+  const handleMouseMove = useCallback(
+    (e: MapLayerMouseEvent) => {
+      const target = e.originalEvent.target as HTMLElement | null
+
+      if (
+        !showCoordinatesEnabled ||
+        isHoveringUI ||
+        isDraggingMap ||
+        target?.closest('.maplibregl-control-container, .maplibregl-ctrl')
+      ) {
+        hideCoordinates()
+        return
+      }
+
+      if (animationFrameRef.current) {
+        cancelAnimationFrame(animationFrameRef.current)
+      }
+
+      animationFrameRef.current = requestAnimationFrame(() => {
+        setShowCoordinates(true)
+        setCursorLngLat({
+          lng: e.lngLat.lng,
+          lat: e.lngLat.lat,
+          x: e.point.x,
+          y: e.point.y,
+        })
+      })
+    },
+    [hideCoordinates, isHoveringUI, isDraggingMap, showCoordinatesEnabled]
+  )
+
   const handleMapLoad = useCallback(() => {
     flyToLocationParams()
   }, [flyToLocationParams])
@@ -141,176 +216,181 @@ export default function MapComponent() {
 
   return (
     <MapProvider>
-      <Map
-        ref={mapRef}
-        reuseMaps
-        style={{
-          width: '100%',
-          height: '100vh',
+      <div
+        style={{ position: 'relative', width: '100%', height: '100vh' }}
+        onMouseLeave={() => {
+          setIsDraggingMap(false)
+          hideCoordinates()
         }}
-        mapStyle={`${window.location.protocol}//${window.location.hostname}:${window.location.port}/api/maps/styles`}
-        mapLib={maplibregl}
-        initialViewState={{
-          longitude: -101,
-          latitude: 40,
-          zoom: 3.5,
+        onMouseMoveCapture={(e) => {
+          const target = e.target as HTMLElement | null
+
+          if (
+            target?.closest(
+              '.maplibregl-control-container, .maplibregl-ctrl, .maplibregl-ctrl-group, .maplibregl-ctrl-scale'
+            )
+          ) {
+            hideCoordinates()
+          }
         }}
-        onLoad={handleMapLoad}
-        onClick={handleMapClick}
       >
-        <NavigationControl style={{ marginTop: '110px', marginRight: '36px' }} />
-        <FullscreenControl style={{ marginTop: '30px', marginRight: '36px' }} />
-        <ScaleControl position="bottom-left" maxWidth={150} unit={scaleUnit} />
+        <Map
+          ref={mapRef}
+          reuseMaps
+          style={{ width: '100%', height: '100vh' }}
+          cursor={isDraggingMap ? 'grabbing' : 'crosshair'}
+          mapStyle={`${window.location.protocol}//${window.location.hostname}:${window.location.port}/api/maps/styles`}
+          mapLib={maplibregl}
+          initialViewState={{
+            longitude: -101,
+            latitude: 40,
+            zoom: 3.5,
+          }}
+          onLoad={handleMapLoad}
+          onMouseDown={() => {
+            setIsDraggingMap(true)
+            hideCoordinates()
+          }}
+          onMouseUp={() => {
+            setIsDraggingMap(false)
+          }}
+          onDragStart={() => {
+            setIsDraggingMap(true)
+            hideCoordinates()
+          }}
+          onDragEnd={() => {
+            setIsDraggingMap(false)
+            hideCoordinates()
+          }}
+          onClick={handleMapClick}
+          onMouseMove={handleMouseMove}
+          onMouseLeave={hideCoordinates}
+        >
+          <NavigationControl style={{ marginTop: '110px', marginRight: '36px' }} />
+          <FullscreenControl style={{ marginTop: '30px', marginRight: '36px' }} />
+          <ScaleControl position="bottom-left" maxWidth={150} unit={scaleUnit} />
 
-        <div style={{ position: 'absolute', bottom: '30px', left: '10px', zIndex: 2 }}>
-          <div
-            style={{
-              display: 'inline-flex',
-              borderRadius: '4px',
-              boxShadow: '0 0 0 2px rgba(0,0,0,0.1)',
-              overflow: 'hidden',
-              fontSize: '11px',
-              fontWeight: 600,
-              lineHeight: 1,
-            }}
-          >
-            <button
-              type="button"
-              onClick={() => {
-                if (scaleUnit !== 'metric') toggleScaleUnit()
-              }}
-              style={{
-                background: scaleUnit === 'metric' ? '#424420' : 'white',
-                color: scaleUnit === 'metric' ? 'white' : '#666',
-                border: 'none',
-                padding: '4px 8px',
-                cursor: 'pointer',
-              }}
-            >
-              Metric
-            </button>
-
-            <button
-              type="button"
-              onClick={() => {
-                if (scaleUnit !== 'imperial') toggleScaleUnit()
-              }}
-              style={{
-                background: scaleUnit === 'imperial' ? '#424420' : 'white',
-                color: scaleUnit === 'imperial' ? 'white' : '#666',
-                border: 'none',
-                padding: '4px 8px',
-                cursor: 'pointer',
-              }}
-            >
-              Imperial
-            </button>
-          </div>
-        </div>
-
-        {markers.map((marker) => (
-          <Marker
-            key={marker.id}
-            longitude={marker.longitude}
-            latitude={marker.latitude}
-            anchor="bottom"
-            onClick={(e) => {
-              e.originalEvent.stopPropagation()
-              setSelectedMarkerId(marker.id === selectedMarkerId ? null : marker.id)
-              setPlacingMarker(null)
-            }}
-          >
-            <MarkerPin
-              color={PIN_COLORS.find((color) => color.id === marker.color)?.hex}
-              active={marker.id === selectedMarkerId}
+          {showCoordinates && cursorLngLat && (
+            <CoordinateOverlay
+              latitude={cursorLngLat.lat}
+              longitude={cursorLngLat.lng}
+              x={cursorLngLat.x}
+              y={cursorLngLat.y}
             />
-          </Marker>
-        ))}
+          )}
 
-        {selectedMarker && (
-          <Popup
-            longitude={selectedMarker.longitude}
-            latitude={selectedMarker.latitude}
-            anchor="bottom"
-            offset={[0, -36] as [number, number]}
-            onClose={() => setSelectedMarkerId(null)}
-            closeOnClick={false}
-          >
-            <div className="text-sm font-medium">{selectedMarker.name}</div>
-          </Popup>
-        )}
+          <ScaleUnitToggle
+            scaleUnit={scaleUnit}
+            onChange={handleScaleUnitChange}
+            onMouseEnter={hideCoordinates}
+          />
 
-        {placingMarker && (
-          <Popup
-            longitude={placingMarker.lng}
-            latitude={placingMarker.lat}
-            anchor="bottom"
-            onClose={() => setPlacingMarker(null)}
-            closeOnClick={false}
-          >
-            <div className="p-1">
-              <input
-                autoFocus
-                type="text"
-                placeholder="Name this location"
-                value={markerName}
-                onChange={(e) => setMarkerName(e.target.value)}
-                onKeyDown={(e) => {
-                  if (e.key === 'Enter') handleSaveMarker()
-                  if (e.key === 'Escape') setPlacingMarker(null)
-                }}
-                className="block w-full rounded border border-gray-300 px-2 py-1 text-sm placeholder:text-gray-400 focus:outline-none focus:border-gray-500"
+          {markers.map((marker) => (
+            <Marker
+              key={marker.id}
+              longitude={marker.longitude}
+              latitude={marker.latitude}
+              anchor="bottom"
+              onClick={(e) => {
+                e.originalEvent.stopPropagation()
+                setSelectedMarkerId(marker.id === selectedMarkerId ? null : marker.id)
+                setPlacingMarker(null)
+              }}
+            >
+              <MarkerPin
+                color={PIN_COLORS.find((c) => c.id === marker.color)?.hex}
+                active={marker.id === selectedMarkerId}
               />
+            </Marker>
+          ))}
 
-              <div className="mt-1.5 flex gap-1 items-center">
-                {PIN_COLORS.map((color) => (
+          {selectedMarker && (
+            <Popup
+              longitude={selectedMarker.longitude}
+              latitude={selectedMarker.latitude}
+              anchor="bottom"
+              offset={[0, -36]}
+              onClose={() => setSelectedMarkerId(null)}
+              closeOnClick={false}
+            >
+              <div className="text-sm font-medium">{selectedMarker.name}</div>
+            </Popup>
+          )}
+
+          {placingMarker && (
+            <Popup
+              longitude={placingMarker.lng}
+              latitude={placingMarker.lat}
+              anchor="bottom"
+              onClose={() => setPlacingMarker(null)}
+              closeOnClick={false}
+            >
+              <div onMouseEnter={hideCoordinates} className="p-1">
+                <input
+                  autoFocus
+                  type="text"
+                  placeholder="Name this location"
+                  value={markerName}
+                  onChange={(e) => setMarkerName(e.target.value)}
+                  onKeyDown={(e) => {
+                    if (e.key === 'Enter') handleSaveMarker()
+                    if (e.key === 'Escape') setPlacingMarker(null)
+                  }}
+                  className="block w-full rounded border border-gray-300 px-2 py-1 text-sm placeholder:text-gray-400 focus:outline-none focus:border-gray-500"
+                />
+
+                <div className="mt-1.5 flex gap-1 items-center">
+                  {PIN_COLORS.map((c) => (
+                    <button
+                      key={c.id}
+                      type="button"
+                      onClick={() => setMarkerColor(c.id)}
+                      title={c.label}
+                      className="rounded-full p-0.5 transition-transform"
+                      style={{
+                        outline:
+                          markerColor === c.id ? `2px solid ${c.hex}` : '2px solid transparent',
+                        outlineOffset: '1px',
+                      }}
+                    >
+                      <div className="w-4 h-4 rounded-full" style={{ backgroundColor: c.hex }} />
+                    </button>
+                  ))}
+                </div>
+
+                <div className="mt-1.5 flex gap-1.5 justify-end">
                   <button
-                    key={color.id}
                     type="button"
-                    onClick={() => setMarkerColor(color.id)}
-                    title={color.label}
-                    className="rounded-full p-0.5 transition-transform"
-                    style={{
-                      outline:
-                        markerColor === color.id ? `2px solid ${color.hex}` : '2px solid transparent',
-                      outlineOffset: '1px',
-                    }}
+                    onClick={() => setPlacingMarker(null)}
+                    className="text-xs text-gray-500 hover:text-gray-700 px-2 py-1 rounded transition-colors"
                   >
-                    <div className="w-4 h-4 rounded-full" style={{ backgroundColor: color.hex }} />
+                    Cancel
                   </button>
-                ))}
+
+                  <button
+                    type="button"
+                    onClick={handleSaveMarker}
+                    disabled={!markerName.trim()}
+                    className="text-xs bg-[#424420] text-white rounded px-2.5 py-1 hover:bg-[#525530] disabled:opacity-40 transition-colors"
+                  >
+                    Save
+                  </button>
+                </div>
               </div>
+            </Popup>
+          )}
+        </Map>
+      </div>
 
-              <div className="mt-1.5 flex gap-1.5 justify-end">
-                <button
-                  type="button"
-                  onClick={() => setPlacingMarker(null)}
-                  className="text-xs text-gray-500 hover:text-gray-700 px-2 py-1 rounded transition-colors"
-                >
-                  Cancel
-                </button>
-
-                <button
-                  type="button"
-                  onClick={handleSaveMarker}
-                  disabled={!markerName.trim()}
-                  className="text-xs bg-[#424420] text-white rounded px-2.5 py-1 hover:bg-[#525530] disabled:opacity-40 transition-colors"
-                >
-                  Save
-                </button>
-              </div>
-            </div>
-          </Popup>
-        )}
-      </Map>
-
-      <MarkerPanel
-        markers={markers}
-        onDelete={handleDeleteMarker}
-        onFlyTo={handleFlyTo}
-        onSelect={setSelectedMarkerId}
-        selectedMarkerId={selectedMarkerId}
-      />
+      <div onMouseEnter={hideCoordinates}>
+        <MarkerPanel
+          markers={markers}
+          onDelete={handleDeleteMarker}
+          onFlyTo={handleFlyTo}
+          onSelect={setSelectedMarkerId}
+          selectedMarkerId={selectedMarkerId}
+        />
+      </div>
     </MapProvider>
   )
 }

admin/inertia/components/maps/ScaleUnitToggle.tsx

@@ -0,0 +1,46 @@
+type ScaleUnit = 'imperial' | 'metric'
+
+type ScaleUnitToggleProps = {
+  scaleUnit: ScaleUnit
+  onChange: (unit: ScaleUnit) => void
+  onMouseEnter?: () => void
+}
+
+export default function ScaleUnitToggle({
+  scaleUnit,
+  onChange,
+  onMouseEnter,
+}: ScaleUnitToggleProps) {
+  return (
+    <div
+      className="absolute bottom-[30px] left-[10px] z-[2]"
+      onMouseEnter={onMouseEnter}
+    >
+      <div className="inline-flex overflow-hidden rounded text-[11px] font-semibold leading-none shadow-[0_0_0_2px_rgba(0,0,0,0.1)]">
+        <button
+          type="button"
+          onClick={() => onChange('metric')}
+          className="border-0 px-2 py-1"
+          style={{
+            background: scaleUnit === 'metric' ? '#424420' : 'white',
+            color: scaleUnit === 'metric' ? 'white' : '#666',
+          }}
+        >
+          Metric
+        </button>
+
+        <button
+          type="button"
+          onClick={() => onChange('imperial')}
+          className="border-0 px-2 py-1"
+          style={{
+            background: scaleUnit === 'imperial' ? '#424420' : 'white',
+            color: scaleUnit === 'imperial' ? 'white' : '#666',
+          }}
+        >
+          Imperial
+        </button>
+      </div>
+    </div>
+  )
+}

admin/inertia/pages/maps.tsx

@@ -1,38 +1,66 @@
-import MapsLayout from '~/layouts/MapsLayout'
+import { useState } from 'react'
 import { Head, Link, router } from '@inertiajs/react'
+import { IconArrowLeft } from '@tabler/icons-react'
+
+import MapsLayout from '~/layouts/MapsLayout'
 import MapComponent from '~/components/maps/MapComponent'
 import StyledButton from '~/components/StyledButton'
-import { IconArrowLeft } from '@tabler/icons-react'
-import { FileEntry } from '../../types/files'
 import Alert from '~/components/Alert'
 
+import { FileEntry } from '../../types/files'
+
 export default function Maps(props: {
   maps: { baseAssetsExist: boolean; regionFiles: FileEntry[] }
 }) {
+  const [isHoveringUI, setIsHoveringUI] = useState(false)
+  const [showMapCoordinates, setShowMapCoordinates] = useState(true)
+
   const alertMessage = !props.maps.baseAssetsExist
     ? 'The base map assets have not been installed. Please download them first to enable map functionality.'
     : props.maps.regionFiles.length === 0
-      ? 'No map regions have been downloaded yet. Please download some regions to enable map functionality.'
-      : null
+    ? 'No map regions have been downloaded yet. Please download some regions to enable map functionality.'
+    : null
 
   return (
     <MapsLayout>
       <Head title="Maps" />
+
       <div className="relative w-full h-screen overflow-hidden">
-        {/* Nav and alerts are overlayed */}
-        <div className="absolute top-0 left-0 right-0 z-50 flex justify-between p-4 bg-surface-secondary backdrop-blur-sm shadow-sm">
+        {/* Navbar */}
+        <div
+          className="absolute top-0 left-0 right-0 z-50 flex justify-between p-4 bg-surface-secondary backdrop-blur-sm shadow-sm"
+          onMouseEnter={() => setIsHoveringUI(true)}
+          onMouseLeave={() => setIsHoveringUI(false)}
+        >
           <Link href="/home" className="flex items-center">
             <IconArrowLeft className="mr-2" size={24} />
             <p className="text-lg text-text-secondary">Back to Home</p>
           </Link>
-          <Link href="/settings/maps" className='mr-4'>
-            <StyledButton variant="primary" icon="IconSettings">
-              Manage Map Regions
-            </StyledButton>
-          </Link>
+
+          <div className="flex items-center gap-3 mr-4">
+            <button
+              type="button"
+              onClick={() => setShowMapCoordinates((prev) => !prev)}
+              className="rounded px-3 py-2 text-sm bg-surface-primary text-text-secondary hover:opacity-80 transition"
+            >
+              {showMapCoordinates ? 'Hide Coordinates' : 'Show Coordinates'}
+            </button>
+
+            <Link href="/settings/maps">
+              <StyledButton variant="primary" icon="IconSettings">
+                Manage Map Regions
+              </StyledButton>
+            </Link>
+          </div>
         </div>
+
+        {/* Alert */}
         {alertMessage && (
-          <div className="absolute top-20 left-4 right-4 z-50">
+          <div
+            className="absolute top-20 left-4 right-4 z-50"
+            onMouseEnter={() => setIsHoveringUI(true)}
+            onMouseLeave={() => setIsHoveringUI(false)}
+          >
             <Alert
               title={alertMessage}
               type="warning"
@@ -47,8 +75,13 @@ export default function Maps(props: {
             />
           </div>
         )}
+
+        {/* Map */}
         <div className="absolute inset-0">
-          <MapComponent />
+          <MapComponent
+            isHoveringUI={isHoveringUI}
+            showCoordinatesEnabled={showMapCoordinates}
+          />
         </div>
       </div>
     </MapsLayout>