handle waypoint symbols

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

@@ -7,6 +7,7 @@
 	import { Dot, Trash2 } from 'lucide-svelte';
 	import { onMount } from 'svelte';
 	import { Tool, currentTool } from '$lib/stores';
+	import { symbols } from '$lib/assets/symbols';
 	import { _ } from 'svelte-i18n';
 
 	let popupElement: HTMLDivElement;
@@ -15,6 +16,11 @@
 		waypointPopup.setDOMContent(popupElement);
 		popupElement.classList.remove('hidden');
 	});
+
+	$: symbolKey =
+		$currentPopupWaypoint && $currentPopupWaypoint[0].sym
+			? Object.keys(symbols).find((key) => symbols[key].value === $currentPopupWaypoint[0].sym)
+			: undefined;
 </script>
 
 <div bind:this={popupElement} class="hidden">
@@ -24,7 +30,22 @@
 				<Card.Title class="text-md">{$currentPopupWaypoint[0].name}</Card.Title>
 			</Card.Header>
 			<Card.Content class="flex flex-col p-0 text-sm">
-				<div class="flex flex-row items-center text-muted-foreground">
+				<div class="flex flex-row items-center text-muted-foreground text-xs">
+					{#if symbolKey && symbols.hasOwnProperty(symbolKey)}
+						<span>
+							{#if symbols[symbolKey].icon}
+								<svelte:component
+									this={symbols[symbolKey].icon}
+									size="12"
+									class="inline-block mb-0.5"
+								/>
+							{:else}
+								<span class="w-4 inline-block" />
+							{/if}
+							{$_(`gpx.symbol.${symbolKey}`)}
+						</span>
+						<Dot size="16" />
+					{/if}
 					{$currentPopupWaypoint[0].getLatitude().toFixed(6)}&deg; {$currentPopupWaypoint[0]
 						.getLongitude()
 						.toFixed(6)}&deg;

website/src/lib/components/layer-control/OverpassLayer.ts

@@ -120,7 +120,10 @@ export class OverpassLayer {
     }
 
     onHover(e: any) {
-        overpassPopupPOI.set(e.features[0].properties);
+        overpassPopupPOI.set({
+            ...e.features[0].properties,
+            sym: overpassQueryData[e.features[0].properties.query].symbol ?? ''
+        });
         overpassPopup.setLngLat(e.features[0].geometry.coordinates);
         overpassPopup.addTo(this.map);
         this.map.on('mousemove', this.maybeHidePopupBinded);

website/src/lib/components/layer-control/OverpassPopup.svelte

@@ -7,7 +7,6 @@
 	import { onMount } from 'svelte';
 	import { _ } from 'svelte-i18n';
 	import { dbUtils } from '$lib/db';
-	import { get } from 'svelte/store';
 
 	let popupElement: HTMLDivElement;
 
@@ -89,7 +88,8 @@
 							},
 							name: name,
 							desc: desc,
-							cmt: desc
+							cmt: desc,
+							sym: $overpassPopupPOI.sym
 						});
 					}}
 				>

website/src/lib/components/toolbar/tools/Waypoint.svelte

@@ -9,6 +9,7 @@
 	import { Textarea } from '$lib/components/ui/textarea';
 	import { Label } from '$lib/components/ui/label/index.js';
 	import { Button } from '$lib/components/ui/button';
+	import * as Select from '$lib/components/ui/select';
 	import { selection } from '$lib/components/file-list/Selection';
 	import { Waypoint } from 'gpx';
 	import { _ } from 'svelte-i18n';
@@ -20,12 +21,18 @@
 	import { map } from '$lib/stores';
 	import { resetCursor, setCrosshairCursor } from '$lib/utils';
 	import { CirclePlus, CircleX, Save } from 'lucide-svelte';
+	import { symbols } from '$lib/assets/symbols';
 
 	let name: string;
 	let description: string;
 	let longitude: number;
 	let latitude: number;
 
+	let selectedSymbol = {
+		value: '',
+		label: ''
+	};
+
 	const { verticalFileView } = settings;
 
 	$: canCreate = $selection.size > 0;
@@ -60,6 +67,19 @@
 					) {
 						description += '\n\n' + $selectedWaypoint[0].cmt;
 					}
+					let symbol = $selectedWaypoint[0].sym ?? '';
+					let symbolKey = Object.keys(symbols).find((key) => symbols[key].value === symbol);
+					if (symbolKey) {
+						selectedSymbol = {
+							value: symbol,
+							label: $_(`gpx.symbol.${symbolKey}`)
+						};
+					} else {
+						selectedSymbol = {
+							value: symbol,
+							label: ''
+						};
+					}
 					longitude = parseFloat($selectedWaypoint[0].getLongitude().toFixed(6));
 					latitude = parseFloat($selectedWaypoint[0].getLatitude().toFixed(6));
 				} else {
@@ -74,6 +94,10 @@
 	function resetWaypointData() {
 		name = '';
 		description = '';
+		selectedSymbol = {
+			value: '',
+			label: ''
+		};
 		longitude = 0;
 		latitude = 0;
 	}
@@ -111,7 +135,8 @@
 				},
 				name,
 				desc: description,
-				cmt: description
+				cmt: description,
+				sym: selectedSymbol.value
 			},
 			$selectedWaypoint
 				? new ListWaypointItem($selectedWaypoint[1], $selectedWaypoint[0]._data.index)
@@ -151,6 +176,30 @@
 		<Input bind:value={name} id="name" class="font-semibold h-8" />
 		<Label for="description">{$_('menu.metadata.description')}</Label>
 		<Textarea bind:value={description} id="description" />
+		<Label for="symbol">{$_('toolbar.waypoint.icon')}</Label>
+		<Select.Root bind:selected={selectedSymbol}>
+			<Select.Trigger id="symbol" class="w-full h-8">
+				<Select.Value />
+			</Select.Trigger>
+			<Select.Content class="max-h-60 overflow-y-scroll">
+				{#each Object.entries(symbols) as [key, symbol]}
+					<Select.Item value={symbol.value}>
+						<span>
+							{#if symbol.icon}
+								<svelte:component
+									this={symbol.icon}
+									size="14"
+									class="inline-block align-sub mr-0.5"
+								/>
+							{:else}
+								<span class="w-4 inline-block" />
+							{/if}
+							{$_(`gpx.symbol.${key}`)}
+						</span>
+					</Select.Item>
+				{/each}
+			</Select.Content>
+		</Select.Root>
 		<div class="flex flex-row gap-2">
 			<div>
 				<Label for="latitude">{$_('toolbar.waypoint.latitude')}</Label>