mirror of
https://github.com/Crosstalk-Solutions/project-nomad.git
synced 2026-04-05 00:06:17 +02:00
dc94e7cdaf
Add distance scale bar and user-placed location pins to the offline maps viewer. - Scale bar (bottom-left) shows distance reference that updates with zoom level - Click anywhere on map to place a named pin with color selection (6 colors) - Collapsible "Saved Locations" panel lists all pins with fly-to navigation - Pins persist in localStorage across page loads - Full dark mode support for popups and panel via CSS overrides New files: useMapMarkers hook, MarkerPin component, MarkerPanel component No backend changes, no new dependencies. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
18 lines
430 B
TypeScript
18 lines
430 B
TypeScript
import { IconMapPinFilled } from '@tabler/icons-react'
|
|
|
|
interface MarkerPinProps {
|
|
color?: string
|
|
active?: boolean
|
|
}
|
|
|
|
export default function MarkerPin({ color = '#a84a12', active = false }: MarkerPinProps) {
|
|
return (
|
|
<div className="cursor-pointer" style={{ filter: 'drop-shadow(0 1px 2px rgba(0,0,0,0.4))' }}>
|
|
<IconMapPinFilled
|
|
size={active ? 36 : 32}
|
|
style={{ color }}
|
|
/>
|
|
</div>
|
|
)
|
|
}
|