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>