map context menu with coordinates, closes #149

website/src/lib/components/CoordinatesPopup.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	import { map } from '$lib/stores';
+	import { trackpointPopup } from '$lib/components/gpx-layer/GPXLayerPopup';
+	import { TrackPoint } from 'gpx';
+
+	$: if ($map) {
+		$map.on('contextmenu', (e) => {
+			trackpointPopup?.setItem({
+				item: new TrackPoint({
+					attributes: {
+						lat: e.lngLat.lat,
+						lon: e.lngLat.lng
+					}
+				})
+			});
+		});
+	}
+</script>

website/src/lib/components/MapPopup.ts

@@ -7,6 +7,7 @@ import MapPopupComponent from "./MapPopup.svelte";
 export type PopupItem<T = Waypoint | TrackPoint | any> = {
     item: T;
     fileId?: string;
+    hide?: () => void;
 };
 
 export class MapPopup {
@@ -30,6 +31,8 @@ export class MapPopup {
     }
 
     setItem(item: PopupItem | null) {
+        if (item)
+            item.hide = () => this.hide();
         this.item.set(item);
         if (item === null) {
             this.hide();

website/src/lib/components/gpx-layer/TrackpointPopup.svelte

@@ -2,9 +2,11 @@
 	import type { TrackPoint } from 'gpx';
 	import type { PopupItem } from '$lib/components/MapPopup';
 	import * as Card from '$lib/components/ui/card';
+	import { Button } from '$lib/components/ui/button';
 	import WithUnits from '$lib/components/WithUnits.svelte';
-	import { Compass, Mountain, Timer } from 'lucide-svelte';
+	import { Compass, Mountain, Timer, ClipboardCopy } from 'lucide-svelte';
 	import { df } from '$lib/utils';
+	import { _ } from 'svelte-i18n';
 
 	export let trackpoint: PopupItem<TrackPoint>;
 </script>
@@ -32,5 +34,18 @@
 				{df.format(trackpoint.item.time)}
 			</div>
 		{/if}
+		<Button
+			class="w-full px-2 py-1 h-6 justify-start mt-0.5"
+			variant="secondary"
+			on:click={() => {
+				navigator.clipboard.writeText(
+					`${trackpoint.item.getLatitude().toFixed(6)}, ${trackpoint.item.getLongitude().toFixed(6)}`
+				);
+				trackpoint.hide?.();
+			}}
+		>
+			<ClipboardCopy size="16" class="mr-1" />
+			{$_('menu.copy_coordinates')}
+		</Button>
 	</Card.Content>
 </Card.Root>

website/src/locales/en.json

@@ -79,7 +79,8 @@
         "hide": "Hide",
         "unhide": "Unhide",
         "center": "Center",
-        "open_in": "Open in"
+        "open_in": "Open in",
+        "copy_coordinates": "Copy coordinates"
     },
     "toolbar": {
         "routing": {

website/src/routes/[[language]]/app/+page.svelte

@@ -8,6 +8,7 @@
 	import Toolbar from '$lib/components/toolbar/Toolbar.svelte';
 	import StreetViewControl from '$lib/components/street-view-control/StreetViewControl.svelte';
 	import LayerControl from '$lib/components/layer-control/LayerControl.svelte';
+	import CoordinatesPopup from '$lib/components/CoordinatesPopup.svelte';
 	import Resizer from '$lib/components/Resizer.svelte';
 	import { Toaster } from '$lib/components/ui/sonner';
 	import { observeFilesFromDatabase, settings } from '$lib/db';
@@ -99,6 +100,7 @@
 			<StreetViewControl />
 			<LayerControl />
 			<GPXLayers />
+			<CoordinatesPopup />
 			<Toaster richColors />
 			{#if !$treeFileView}
 				<div class="h-10 -translate-y-10 w-full pointer-events-none absolute z-30">