Merge PR #813 (kennethbrewer3) - feat(maps): Several user experience improvements
Resolved 2 conflicts. PR #813 was based on dev (pre-#786/#802 merges) so it re-introduced overlapping changes: ScaleUnitToggle.tsx: - PR #813 used inline `cursor: 'pointer'`. Kept HEAD's `cursor-pointer` Tailwind class to match codebase convention. Functionally identical. MapComponent.tsx: - Took PR #813's full file as the base (it includes #786 + #802 work plus #813's new MapCommand prop, getMapLocationParams URL helper, targetIndicator state, fly-to/marker command useEffect, handleMapLoad). - Preserved one HEAD-only addition: `.maplibregl-popup` selector inclusion in both `target?.closest()` calls (handleMouseMove + onMouseMoveCapture). PR #813 takes a different approach (passing `onMouseEnter={hideCoordinates}` as a prop to ViewMapMarkerPopup and MapMarkerFormPopup), but adding the popup selector is belt-and-suspenders coverage and harmless.
This commit is contained in:
Chris Sherwood
commit
c46a673812
|
|
@ -10,7 +10,7 @@ import maplibregl from 'maplibre-gl'
|
|||
import 'maplibre-gl/dist/maplibre-gl.css'
|
||||
|
||||
import { Protocol } from 'pmtiles'
|
||||
import { useEffect, useRef, useState, useCallback } from 'react'
|
||||
import { useCallback, useEffect, useRef, useState } from 'react'
|
||||
|
||||
import { useMapMarkers, PIN_COLORS } from '~/hooks/useMapMarkers'
|
||||
|
||||
|
|
@ -23,25 +23,82 @@ import MapMarkerFormPopup from './MapMarkerFormPopup'
|
|||
|
||||
type ScaleUnit = 'imperial' | 'metric'
|
||||
|
||||
type MapCommand = {
|
||||
id: number
|
||||
lat: number
|
||||
lng: number
|
||||
action: 'fly' | 'marker'
|
||||
}
|
||||
|
||||
type MapComponentProps = {
|
||||
isHoveringUI: boolean
|
||||
showCoordinatesEnabled: boolean
|
||||
mapCommand?: MapCommand | null
|
||||
isHoveringUI?: boolean
|
||||
showCoordinatesEnabled?: boolean
|
||||
}
|
||||
|
||||
type MapLocationParams = {
|
||||
lat: number
|
||||
lng: number
|
||||
zoom: number
|
||||
}
|
||||
|
||||
const getMapLocationParams = (): MapLocationParams | null => {
|
||||
const params = new URLSearchParams(window.location.search)
|
||||
|
||||
const lat = Number(params.get('lat'))
|
||||
const lngParam = params.get('lng')
|
||||
const longParam = params.get('long')
|
||||
const lng = Number(lngParam ?? longParam)
|
||||
const zoom = Number(params.get('zoom') ?? 12)
|
||||
|
||||
if (
|
||||
!Number.isFinite(lat) ||
|
||||
!Number.isFinite(lng) ||
|
||||
lat < -90 ||
|
||||
lat > 90 ||
|
||||
lng < -180 ||
|
||||
lng > 180
|
||||
) {
|
||||
return null
|
||||
}
|
||||
|
||||
if (!lngParam && longParam) {
|
||||
params.set('lng', longParam)
|
||||
params.delete('long')
|
||||
|
||||
const query = params.toString()
|
||||
window.history.replaceState(
|
||||
null,
|
||||
'',
|
||||
`${window.location.pathname}${query ? `?${query}` : ''}${window.location.hash}`
|
||||
)
|
||||
}
|
||||
|
||||
return {
|
||||
lat,
|
||||
lng,
|
||||
zoom: Number.isFinite(zoom) ? zoom : 12,
|
||||
}
|
||||
}
|
||||
|
||||
export default function MapComponent({
|
||||
isHoveringUI,
|
||||
showCoordinatesEnabled,
|
||||
mapCommand,
|
||||
isHoveringUI = false,
|
||||
showCoordinatesEnabled = true,
|
||||
}: MapComponentProps) {
|
||||
const mapRef = useRef<MapRef>(null)
|
||||
const animationFrameRef = useRef<number | null>(null)
|
||||
const handledMapCommandIdRef = useRef<number | null>(null)
|
||||
|
||||
const { markers, addMarker, updateMarker, deleteMarker } = useMapMarkers()
|
||||
|
||||
const [targetIndicator, setTargetIndicator] = useState<{ lng: number; lat: number } | null>(null)
|
||||
const [isDraggingMap, setIsDraggingMap] = useState(false)
|
||||
const [placingMarker, setPlacingMarker] = useState<{ lng: number; lat: number } | null>(null)
|
||||
const [selectedMarkerId, setSelectedMarkerId] = useState<number | null>(null)
|
||||
const [editingMarkerId, setEditingMarkerId] = useState<number | null>(null)
|
||||
const [hasUnsavedMarkerChanges, setHasUnsavedMarkerChanges] = useState(false)
|
||||
const [showCoordinates, setShowCoordinates] = useState(false)
|
||||
|
||||
const [scaleUnit, setScaleUnit] = useState<ScaleUnit>(
|
||||
() => (localStorage.getItem('nomad:map-scale-unit') as ScaleUnit) || 'metric'
|
||||
|
|
@ -54,14 +111,27 @@ export default function MapComponent({
|
|||
y: number
|
||||
} | null>(null)
|
||||
|
||||
const [showCoordinates, setShowCoordinates] = useState(false)
|
||||
|
||||
const confirmDiscardMarkerChanges = useCallback(() => {
|
||||
if (!hasUnsavedMarkerChanges) return true
|
||||
|
||||
return window.confirm('Discard unsaved marker changes?')
|
||||
}, [hasUnsavedMarkerChanges])
|
||||
|
||||
const hideCoordinates = useCallback(() => {
|
||||
setShowCoordinates(false)
|
||||
setCursorLngLat(null)
|
||||
}, [])
|
||||
|
||||
const flyToLocationParams = useCallback(() => {
|
||||
const location = getMapLocationParams()
|
||||
if (!location) return
|
||||
|
||||
mapRef.current?.flyTo({
|
||||
center: [location.lng, location.lat],
|
||||
zoom: location.zoom,
|
||||
duration: 1500,
|
||||
})
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
const protocol = new Protocol()
|
||||
maplibregl.addProtocol('pmtiles', protocol.tile)
|
||||
|
|
@ -79,16 +149,77 @@ export default function MapComponent({
|
|||
}
|
||||
}, [])
|
||||
|
||||
const hideCoordinates = useCallback(() => {
|
||||
setShowCoordinates(false)
|
||||
setCursorLngLat(null)
|
||||
}, [])
|
||||
useEffect(() => {
|
||||
if (!mapCommand) return
|
||||
if (handledMapCommandIdRef.current === mapCommand.id) return
|
||||
|
||||
handledMapCommandIdRef.current = mapCommand.id
|
||||
|
||||
if (mapCommand.action === 'fly') {
|
||||
const currentZoom = mapRef.current?.getZoom() ?? 12
|
||||
|
||||
setTargetIndicator({
|
||||
lng: mapCommand.lng,
|
||||
lat: mapCommand.lat,
|
||||
})
|
||||
|
||||
mapRef.current?.flyTo({
|
||||
center: [mapCommand.lng, mapCommand.lat],
|
||||
zoom: currentZoom,
|
||||
duration: 1500,
|
||||
})
|
||||
|
||||
return
|
||||
}
|
||||
|
||||
if (mapCommand.action === 'marker') {
|
||||
if (!confirmDiscardMarkerChanges()) return
|
||||
|
||||
setTargetIndicator(null)
|
||||
|
||||
const currentZoom = mapRef.current?.getZoom() ?? 12
|
||||
|
||||
mapRef.current?.flyTo({
|
||||
center: [mapCommand.lng, mapCommand.lat],
|
||||
zoom: currentZoom,
|
||||
duration: 750,
|
||||
})
|
||||
|
||||
window.setTimeout(() => {
|
||||
setPlacingMarker({
|
||||
lng: mapCommand.lng,
|
||||
lat: mapCommand.lat,
|
||||
})
|
||||
|
||||
setSelectedMarkerId(null)
|
||||
setEditingMarkerId(null)
|
||||
setHasUnsavedMarkerChanges(false)
|
||||
}, 750)
|
||||
}
|
||||
}, [mapCommand, confirmDiscardMarkerChanges])
|
||||
|
||||
const handleScaleUnitChange = useCallback((unit: ScaleUnit) => {
|
||||
setScaleUnit(unit)
|
||||
localStorage.setItem('nomad:map-scale-unit', unit)
|
||||
}, [])
|
||||
|
||||
const handleMapLoad = useCallback(() => {
|
||||
flyToLocationParams()
|
||||
}, [flyToLocationParams])
|
||||
|
||||
const handleMapClick = useCallback(
|
||||
(e: MapLayerMouseEvent) => {
|
||||
if (!confirmDiscardMarkerChanges()) return
|
||||
|
||||
setPlacingMarker({ lng: e.lngLat.lng, lat: e.lngLat.lat })
|
||||
setSelectedMarkerId(null)
|
||||
setEditingMarkerId(null)
|
||||
setHasUnsavedMarkerChanges(false)
|
||||
setTargetIndicator(null)
|
||||
},
|
||||
[confirmDiscardMarkerChanges]
|
||||
)
|
||||
|
||||
const handleMouseMove = useCallback(
|
||||
(e: MapLayerMouseEvent) => {
|
||||
const target = e.originalEvent.target as HTMLElement | null
|
||||
|
|
@ -120,31 +251,15 @@ export default function MapComponent({
|
|||
[hideCoordinates, isHoveringUI, isDraggingMap, showCoordinatesEnabled]
|
||||
)
|
||||
|
||||
const handleMapClick = useCallback(
|
||||
(e: MapLayerMouseEvent) => {
|
||||
if (!confirmDiscardMarkerChanges()) return
|
||||
|
||||
setPlacingMarker({ lng: e.lngLat.lng, lat: e.lngLat.lat })
|
||||
setSelectedMarkerId(null)
|
||||
setEditingMarkerId(null)
|
||||
setHasUnsavedMarkerChanges(false)
|
||||
},
|
||||
[confirmDiscardMarkerChanges]
|
||||
)
|
||||
|
||||
const handleFlyTo = useCallback((longitude: number, latitude: number) => {
|
||||
setTargetIndicator(null)
|
||||
mapRef.current?.flyTo({ center: [longitude, latitude], zoom: 12, duration: 1500 })
|
||||
}, [])
|
||||
|
||||
const handleDeleteMarker = useCallback(
|
||||
(id: number) => {
|
||||
if (selectedMarkerId === id) {
|
||||
setSelectedMarkerId(null)
|
||||
}
|
||||
|
||||
if (editingMarkerId === id) {
|
||||
setEditingMarkerId(null)
|
||||
}
|
||||
if (selectedMarkerId === id) setSelectedMarkerId(null)
|
||||
if (editingMarkerId === id) setEditingMarkerId(null)
|
||||
|
||||
deleteMarker(id)
|
||||
},
|
||||
|
|
@ -187,6 +302,7 @@ export default function MapComponent({
|
|||
latitude: 40,
|
||||
zoom: 3.5,
|
||||
}}
|
||||
onLoad={handleMapLoad}
|
||||
onMouseDown={() => {
|
||||
setIsDraggingMap(true)
|
||||
hideCoordinates()
|
||||
|
|
@ -210,12 +326,6 @@ export default function MapComponent({
|
|||
<FullscreenControl style={{ marginTop: '30px', marginRight: '36px' }} />
|
||||
<ScaleControl position="bottom-left" maxWidth={150} unit={scaleUnit} />
|
||||
|
||||
<ScaleUnitToggle
|
||||
scaleUnit={scaleUnit}
|
||||
onChange={handleScaleUnitChange}
|
||||
onMouseEnter={hideCoordinates}
|
||||
/>
|
||||
|
||||
{showCoordinates && cursorLngLat && (
|
||||
<CoordinateOverlay
|
||||
latitude={cursorLngLat.lat}
|
||||
|
|
@ -225,6 +335,26 @@ export default function MapComponent({
|
|||
/>
|
||||
)}
|
||||
|
||||
{targetIndicator && (
|
||||
<Marker longitude={targetIndicator.lng} latitude={targetIndicator.lat} anchor="center">
|
||||
<div
|
||||
className="pointer-events-none flex h-9 w-9 items-center justify-center rounded-full border-2 border-desert-orange bg-surface-primary/70 shadow-lg"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<div className="relative h-5 w-5">
|
||||
<div className="absolute left-1/2 top-0 h-full w-[2px] -translate-x-1/2 bg-desert-orange" />
|
||||
<div className="absolute left-0 top-1/2 h-[2px] w-full -translate-y-1/2 bg-desert-orange" />
|
||||
</div>
|
||||
</div>
|
||||
</Marker>
|
||||
)}
|
||||
|
||||
<ScaleUnitToggle
|
||||
scaleUnit={scaleUnit}
|
||||
onChange={handleScaleUnitChange}
|
||||
onMouseEnter={hideCoordinates}
|
||||
/>
|
||||
|
||||
{markers.map((marker) => (
|
||||
<Marker
|
||||
key={marker.id}
|
||||
|
|
@ -240,6 +370,7 @@ export default function MapComponent({
|
|||
setPlacingMarker(null)
|
||||
setEditingMarkerId(null)
|
||||
setHasUnsavedMarkerChanges(false)
|
||||
setTargetIndicator(null)
|
||||
}}
|
||||
>
|
||||
<MarkerPin
|
||||
|
|
@ -255,15 +386,10 @@ export default function MapComponent({
|
|||
latitude={placingMarker.lat}
|
||||
onDirtyChange={setHasUnsavedMarkerChanges}
|
||||
onSave={async ({ name, notes, color }) => {
|
||||
await addMarker(
|
||||
name,
|
||||
placingMarker.lng,
|
||||
placingMarker.lat,
|
||||
color,
|
||||
notes || undefined
|
||||
)
|
||||
await addMarker(name, placingMarker.lng, placingMarker.lat, color, notes || undefined)
|
||||
setPlacingMarker(null)
|
||||
setHasUnsavedMarkerChanges(false)
|
||||
setTargetIndicator(null)
|
||||
}}
|
||||
onCancel={() => {
|
||||
if (!confirmDiscardMarkerChanges()) return
|
||||
|
|
@ -271,6 +397,7 @@ export default function MapComponent({
|
|||
setPlacingMarker(null)
|
||||
setEditingMarkerId(null)
|
||||
setHasUnsavedMarkerChanges(false)
|
||||
setTargetIndicator(null)
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
|
|
@ -280,6 +407,7 @@ export default function MapComponent({
|
|||
marker={selectedMarker}
|
||||
onClose={() => setSelectedMarkerId(null)}
|
||||
onEdit={() => setEditingMarkerId(selectedMarker.id)}
|
||||
onMouseEnter={hideCoordinates}
|
||||
/>
|
||||
)}
|
||||
|
||||
|
|
@ -289,6 +417,7 @@ export default function MapComponent({
|
|||
latitude={selectedMarker.latitude}
|
||||
initialMarker={selectedMarker}
|
||||
onDirtyChange={setHasUnsavedMarkerChanges}
|
||||
onMouseEnter={hideCoordinates}
|
||||
onSave={async ({ id, name, notes, color }) => {
|
||||
if (!id) return
|
||||
|
||||
|
|
@ -301,7 +430,12 @@ export default function MapComponent({
|
|||
setEditingMarkerId(null)
|
||||
setHasUnsavedMarkerChanges(false)
|
||||
}}
|
||||
onCancel={() => setEditingMarkerId(null)}
|
||||
onCancel={() => {
|
||||
if (!confirmDiscardMarkerChanges()) return
|
||||
|
||||
setEditingMarkerId(null)
|
||||
setHasUnsavedMarkerChanges(false)
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</Map>
|
||||
|
|
|
|||
|
|
@ -21,6 +21,7 @@ type MapMarkerFormPopupProps = {
|
|||
}) => Promise<void> | void
|
||||
onCancel: () => void
|
||||
onDirtyChange?: (dirty: boolean) => void
|
||||
onMouseEnter?: () => void
|
||||
}
|
||||
|
||||
export default function MapMarkerFormPopup({
|
||||
|
|
@ -30,6 +31,7 @@ export default function MapMarkerFormPopup({
|
|||
onSave,
|
||||
onCancel,
|
||||
onDirtyChange,
|
||||
onMouseEnter,
|
||||
}: MapMarkerFormPopupProps) {
|
||||
const [name, setName] = useState(initialMarker?.name ?? '')
|
||||
const [notes, setNotes] = useState(initialMarker?.notes ?? '')
|
||||
|
|
@ -50,6 +52,13 @@ export default function MapMarkerFormPopup({
|
|||
resizeTextarea()
|
||||
}, [resizeTextarea])
|
||||
|
||||
const nameInputRef = useRef<HTMLInputElement | null>(null)
|
||||
|
||||
useLayoutEffect(() => {
|
||||
nameInputRef.current?.focus()
|
||||
nameInputRef.current?.select()
|
||||
}, [])
|
||||
|
||||
const isDirty =
|
||||
name !== (initialMarker?.name ?? '') ||
|
||||
notes !== (initialMarker?.notes ?? '') ||
|
||||
|
|
@ -84,9 +93,17 @@ export default function MapMarkerFormPopup({
|
|||
offset={[0, -36] as [number, number]}
|
||||
onClose={onCancel}
|
||||
closeOnClick={false}
|
||||
closeButton={false}
|
||||
>
|
||||
<div className="p-1">
|
||||
<div
|
||||
className="p-1"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
onMouseDown={(e) => e.stopPropagation()}
|
||||
onPointerDown={(e) => e.stopPropagation()}
|
||||
onMouseEnter={onMouseEnter}
|
||||
>
|
||||
<input
|
||||
ref={nameInputRef}
|
||||
autoFocus
|
||||
type="text"
|
||||
placeholder="Name this location"
|
||||
|
|
@ -130,7 +147,7 @@ export default function MapMarkerFormPopup({
|
|||
outlineOffset: '1px',
|
||||
}}
|
||||
>
|
||||
<div className="w-4 h-4 rounded-full" style={{ backgroundColor: pinColor.hex }} />
|
||||
<div className="w-4 h-4 rounded-full" style={{backgroundColor: pinColor.hex}}/>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
|
@ -140,7 +157,7 @@ export default function MapMarkerFormPopup({
|
|||
type="button"
|
||||
onClick={onCancel}
|
||||
disabled={isSaving}
|
||||
className="text-xs text-gray-500 hover:text-gray-700 px-2 py-1 rounded transition-colors disabled:opacity-40"
|
||||
className="text-xs bg-[#424420] text-white rounded px-2.5 py-1 hover:bg-[#525530] disabled:opacity-40 transition-colors"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -8,59 +8,76 @@ type ViewMapMarkerPopupProps = {
|
|||
marker: MapMarker
|
||||
onClose: () => void
|
||||
onEdit: () => void
|
||||
onMouseEnter?: () => void
|
||||
}
|
||||
|
||||
export default function ViewMapMarkerPopup({
|
||||
marker,
|
||||
onClose,
|
||||
onEdit,
|
||||
onMouseEnter,
|
||||
}: ViewMapMarkerPopupProps) {
|
||||
return (
|
||||
<div className="max-w-[260px]">
|
||||
<Popup
|
||||
longitude={marker.longitude}
|
||||
latitude={marker.latitude}
|
||||
anchor="bottom"
|
||||
offset={[0, -36] as [number, number]}
|
||||
onClose={onClose}
|
||||
closeOnClick={false}
|
||||
>
|
||||
<div className="text-sm font-medium">{marker.name}</div>
|
||||
<Popup
|
||||
longitude={marker.longitude}
|
||||
latitude={marker.latitude}
|
||||
anchor="bottom"
|
||||
offset={[0, -36] as [number, number]}
|
||||
onClose={onClose}
|
||||
closeOnClick={false}
|
||||
closeButton={false}
|
||||
>
|
||||
<div
|
||||
className="max-w-[260px]"
|
||||
onMouseEnter={onMouseEnter}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
onMouseDown={(e) => e.stopPropagation()}
|
||||
onPointerDown={(e) => e.stopPropagation()}
|
||||
>
|
||||
<div className="text-sm font-medium break-words">{marker.name}</div>
|
||||
|
||||
{marker.notes && (
|
||||
<div className="mt-1 max-w-[240px] break-all whitespace-pre-wrap text-xs text-gray-500">
|
||||
{/* react-markdown is intentionally used without rehypeRaw.
|
||||
Do not enable raw HTML rendering unless notes are sanitized first. */}
|
||||
<ReactMarkdown
|
||||
remarkPlugins={[remarkGfm]}
|
||||
components={{
|
||||
a: ({href, children}) => (
|
||||
<a
|
||||
href={href}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="break-all text-blue-600 underline hover:text-blue-700"
|
||||
>
|
||||
{children}
|
||||
</a>
|
||||
),
|
||||
}}
|
||||
>
|
||||
{marker.notes}
|
||||
</ReactMarkdown>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="mt-2 flex justify-end">
|
||||
<button
|
||||
type="button"
|
||||
onClick={onEdit}
|
||||
className="rounded bg-[#424420] px-2.5 py-1 text-xs text-white hover:bg-[#525530]"
|
||||
{marker.notes && (
|
||||
<div className="mt-1 max-w-[240px] break-all whitespace-pre-wrap text-xs text-gray-500">
|
||||
{/* react-markdown is intentionally used without rehypeRaw.
|
||||
Do not enable raw HTML rendering unless notes are sanitized first. */}
|
||||
<ReactMarkdown
|
||||
remarkPlugins={[remarkGfm]}
|
||||
components={{
|
||||
a: ({ href, children }) => (
|
||||
<a
|
||||
href={href}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="break-all text-blue-600 underline hover:text-blue-700"
|
||||
>
|
||||
Edit
|
||||
</button>
|
||||
</div>
|
||||
</Popup>
|
||||
{children}
|
||||
</a>
|
||||
),
|
||||
}}
|
||||
>
|
||||
{marker.notes}
|
||||
</ReactMarkdown>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="mt-2 flex justify-end gap-1.5">
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClose}
|
||||
className="w-16 rounded bg-[#424420] px-2.5 py-1 text-xs text-white hover:bg-[#525530] border-none outline-none"
|
||||
>
|
||||
Close
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={onEdit}
|
||||
className="w-16 rounded bg-[#424420] px-2.5 py-1 text-xs text-white hover:bg-[#525530] border-none outline-none"
|
||||
>
|
||||
Edit
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
</Popup>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,52 +1,117 @@
|
|||
import { useState } from 'react'
|
||||
import { Head, Link, router } from '@inertiajs/react'
|
||||
import { IconArrowLeft } from '@tabler/icons-react'
|
||||
|
||||
import MapsLayout from '~/layouts/MapsLayout'
|
||||
import { Head, Link, router } from '@inertiajs/react'
|
||||
import MapComponent from '~/components/maps/MapComponent'
|
||||
import StyledButton from '~/components/StyledButton'
|
||||
import Alert from '~/components/Alert'
|
||||
|
||||
import { IconArrowLeft, IconMapPin, IconPlaneTilt } from '@tabler/icons-react'
|
||||
import { FileEntry } from '../../types/files'
|
||||
import Alert from '~/components/Alert'
|
||||
import { IconCrosshair } from '@tabler/icons-react'
|
||||
|
||||
type MapCommand = {
|
||||
id: number
|
||||
lat: number
|
||||
lng: number
|
||||
action: 'fly' | 'marker'
|
||||
}
|
||||
|
||||
export default function Maps(props: {
|
||||
maps: { baseAssetsExist: boolean; regionFiles: FileEntry[] }
|
||||
}) {
|
||||
const [isHoveringUI, setIsHoveringUI] = useState(false)
|
||||
const [showMapCoordinates, setShowMapCoordinates] = useState(true)
|
||||
const [coordinateSearch, setCoordinateSearch] = useState('')
|
||||
const [mapCommand, setMapCommand] = useState<MapCommand | null>(null)
|
||||
const [showCoordinatesEnabled, setShowCoordinatesEnabled] = useState(true)
|
||||
|
||||
const parseCoordinates = () => {
|
||||
const [latRaw, lngRaw] = coordinateSearch.split(',').map((value) => value.trim())
|
||||
const lat = Number(latRaw)
|
||||
const lng = Number(lngRaw)
|
||||
|
||||
if (
|
||||
!Number.isFinite(lat) ||
|
||||
!Number.isFinite(lng) ||
|
||||
lat < -90 ||
|
||||
lat > 90 ||
|
||||
lng < -180 ||
|
||||
lng > 180
|
||||
) {
|
||||
return null
|
||||
}
|
||||
|
||||
return { lat, lng }
|
||||
}
|
||||
|
||||
const handleCoordinateAction = (action: 'fly' | 'marker') => {
|
||||
const coordinates = parseCoordinates()
|
||||
if (!coordinates) return
|
||||
|
||||
setMapCommand({
|
||||
id: Date.now(),
|
||||
...coordinates,
|
||||
action,
|
||||
})
|
||||
}
|
||||
|
||||
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">
|
||||
{/* 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)}
|
||||
>
|
||||
<div className="absolute top-0 left-0 right-0 z-50 flex items-center justify-between gap-4 p-4 bg-surface-secondary backdrop-blur-sm shadow-sm">
|
||||
<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>
|
||||
|
||||
<div className="flex items-center gap-3 mr-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="lat,lng"
|
||||
value={coordinateSearch}
|
||||
onChange={(event) => setCoordinateSearch(event.target.value)}
|
||||
onKeyDown={(event) => {
|
||||
if (event.key === 'Enter') handleCoordinateAction('fly')
|
||||
}}
|
||||
className="w-52 rounded border border-border-default bg-surface-primary px-2 py-1 text-sm text-text-primary placeholder:text-text-muted focus:border-desert-green focus:outline-none"
|
||||
/>
|
||||
|
||||
<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"
|
||||
onClick={() => handleCoordinateAction('fly')}
|
||||
className="rounded border border-border-default bg-surface-primary p-2 text-text-secondary hover:bg-surface-secondary"
|
||||
title="Fly to coordinates"
|
||||
>
|
||||
{showMapCoordinates ? 'Hide Coordinates' : 'Show Coordinates'}
|
||||
<IconPlaneTilt size={18}/>
|
||||
</button>
|
||||
|
||||
<Link href="/settings/maps">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => handleCoordinateAction('marker')}
|
||||
className="rounded border border-border-default bg-surface-primary p-2 text-text-secondary hover:bg-surface-secondary"
|
||||
title="Add marker at coordinates"
|
||||
>
|
||||
<IconMapPin size={18}/>
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowCoordinatesEnabled((prev) => !prev)}
|
||||
className={`rounded border border-border-default p-2 transition-colors ${
|
||||
showCoordinatesEnabled
|
||||
? 'bg-desert-green text-white'
|
||||
: 'bg-surface-primary text-text-secondary hover:bg-surface-secondary'
|
||||
}`}
|
||||
title={showCoordinatesEnabled ? 'Hide coordinates' : 'Show coordinates'}
|
||||
>
|
||||
<IconCrosshair size={18}/>
|
||||
</button>
|
||||
|
||||
<Link href="/settings/maps" className="mr-4">
|
||||
<StyledButton variant="primary" icon="IconSettings">
|
||||
Manage Map Regions
|
||||
</StyledButton>
|
||||
|
|
@ -54,13 +119,8 @@ export default function Maps(props: {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
{/* Alert */}
|
||||
{alertMessage && (
|
||||
<div
|
||||
className="absolute top-20 left-4 right-4 z-50"
|
||||
onMouseEnter={() => setIsHoveringUI(true)}
|
||||
onMouseLeave={() => setIsHoveringUI(false)}
|
||||
>
|
||||
<div className="absolute top-20 left-4 right-4 z-50">
|
||||
<Alert
|
||||
title={alertMessage}
|
||||
type="warning"
|
||||
|
|
@ -76,11 +136,10 @@ export default function Maps(props: {
|
|||
</div>
|
||||
)}
|
||||
|
||||
{/* Map */}
|
||||
<div className="absolute inset-0">
|
||||
<MapComponent
|
||||
isHoveringUI={isHoveringUI}
|
||||
showCoordinatesEnabled={showMapCoordinates}
|
||||
mapCommand={mapCommand}
|
||||
showCoordinatesEnabled={showCoordinatesEnabled}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue