mirror of
https://github.com/Crosstalk-Solutions/project-nomad.git
synced 2026-05-27 14:48:26 +02:00
08838b1944
* feat: Updated the map to show the coordinates as the user moves the cursor over the map. Changed the cursor to a crosshairs to make it easier to place map markers. * Moved the scale unit control to its own component file for easier maintenance. Enhanced the behavior of the coordinate display on the map to not display when over the on screen controls, and the navigation bar. Added a toggle to turn off the coordinate display if the user doesn't wish to see it. Intentionally left the coordinate display when over a map marker so that the coordinates of the map marker can be estimated. In the future I intend to add the coordinates of a map marker when the map marker is clicked so that behavior may change in the future. --------- Co-authored-by: Kenneth Brewer <kennethbrewer3@protonmail.com>
47 lines
1.2 KiB
TypeScript
47 lines
1.2 KiB
TypeScript
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>
|
|
)
|
|
}
|