Merge branch 'overpass-layer'

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

@@ -34,24 +34,22 @@
 					{/if}
 				</div>
 				{#if $currentPopupWaypoint[0].desc}
-					<span>{$currentPopupWaypoint[0].desc}</span>
+					<span class="whitespace-pre-wrap">{$currentPopupWaypoint[0].desc}</span>
 				{/if}
 				{#if $currentPopupWaypoint[0].cmt && $currentPopupWaypoint[0].cmt !== $currentPopupWaypoint[0].desc}
-					<span>{$currentPopupWaypoint[0].cmt}</span>
+					<span class="whitespace-pre-wrap">{$currentPopupWaypoint[0].cmt}</span>
 				{/if}
 				{#if $currentTool === Tool.WAYPOINT}
-					<div class="mt-2">
-						<Button
-							class="w-full px-2 py-1 h-6 justify-start"
-							variant="ghost"
-							on:click={() =>
-								deleteWaypoint($currentPopupWaypoint[1], $currentPopupWaypoint[0]._data.index)}
-						>
-							<Trash2 size="16" class="mr-1" />
-							{$_('menu.delete')}
-							<Shortcut key="" shift={true} click={true} />
-						</Button>
-					</div>
+					<Button
+						class="mt-2 w-full px-2 py-1 h-8 justify-start"
+						variant="outline"
+						on:click={() =>
+							deleteWaypoint($currentPopupWaypoint[1], $currentPopupWaypoint[0]._data.index)}
+					>
+						<Trash2 size="16" class="mr-1" />
+						{$_('menu.delete')}
+						<Shortcut key="" shift={true} click={true} />
+					</Button>
 				{/if}
 			</Card.Content>
 		</Card.Root>

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

@@ -12,15 +12,20 @@
 	import { map } from '$lib/stores';
 	import { get, writable } from 'svelte/store';
 	import { getLayers } from './utils';
+	import { OverpassLayer } from './OverpassLayer';
+	import OverpassPopup from './OverpassPopup.svelte';
 
 	let container: HTMLDivElement;
+	let overpassLayer: OverpassLayer;
 
 	const {
 		currentBasemap,
 		previousBasemap,
 		currentOverlays,
+		currentOverpassQueries,
 		selectedBasemapTree,
 		selectedOverlayTree,
+		selectedOverpassTree,
 		customLayers,
 		opacities
 	} = settings;
@@ -54,6 +59,14 @@
 		});
 	}
 
+	$: if ($map) {
+		if (overpassLayer) {
+			overpassLayer.remove();
+		}
+		overpassLayer = new OverpassLayer($map);
+		overpassLayer.add();
+	}
+
 	let selectedBasemap = writable(get(currentBasemap));
 	selectedBasemap.subscribe((value) => {
 		// Updates coming from radio buttons
@@ -157,12 +170,25 @@
 							/>
 						{/if}
 					</div>
+					<Separator class="w-full" />
+					<div class="p-2">
+						{#if $currentOverpassQueries}
+							<LayerTree
+								layerTree={$selectedOverpassTree}
+								name="overpass"
+								multiple={true}
+								bind:checked={$currentOverpassQueries}
+							/>
+						{/if}
+					</div>
 				</div>
 			</ScrollArea>
 		</div>
 	</div>
 </CustomControl>
 
+<OverpassPopup />
+
 <svelte:window
 	on:click={(e) => {
 		if (open && !cancelEvents && !container.contains(e.target)) {

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

@@ -9,7 +9,7 @@
 	import * as Select from '$lib/components/ui/select';
 	import { Slider } from '$lib/components/ui/slider';
 
-	import { basemapTree, overlays, overlayTree } from '$lib/assets/layers';
+	import { basemapTree, overlays, overlayTree, overpassTree } from '$lib/assets/layers';
 	import { isSelected } from '$lib/components/layer-control/utils';
 	import { settings } from '$lib/db';
 
@@ -22,6 +22,7 @@
 	const {
 		selectedBasemapTree,
 		selectedOverlayTree,
+		selectedOverpassTree,
 		stravaHeatmapColor,
 		currentOverlays,
 		customLayers,
@@ -29,6 +30,7 @@
 	} = settings;
 
 	export let open: boolean;
+	let accordionValue = 'layer-selection';
 
 	let selectedOverlay = writable(undefined);
 	let overlayOpacity = writable([1]);
@@ -113,115 +115,122 @@
 	<Sheet.Content>
 		<Sheet.Header class="h-full">
 			<Sheet.Title>{$_('layers.settings')}</Sheet.Title>
-			<Sheet.Description>
-				{$_('layers.settings_help')}
-			</Sheet.Description>
-			<Accordion.Root class="flex flex-col overflow-hidden" value="layer-selection">
-				<Accordion.Item value="layer-selection" class="flex flex-col overflow-hidden">
-					<Accordion.Trigger>{$_('layers.selection')}</Accordion.Trigger>
-					<Accordion.Content class="grow flex flex-col border rounded">
-						<ScrollArea class="py-2 pl-1 pr-2 min-h-9">
-							<LayerTree
-								layerTree={basemapTree}
-								name="basemapSettings"
-								multiple={true}
-								bind:checked={$selectedBasemapTree}
-							/>
-						</ScrollArea>
-						<Separator />
-						<ScrollArea class="py-2 pl-1 pr-2 min-h-9">
-							<LayerTree
-								layerTree={overlayTree}
-								name="overlaySettings"
-								multiple={true}
-								bind:checked={$selectedOverlayTree}
-							/>
-						</ScrollArea>
-					</Accordion.Content>
-				</Accordion.Item>
-				<Accordion.Item value="overlay-opacity">
-					<Accordion.Trigger>{$_('layers.opacity')}</Accordion.Trigger>
-					<Accordion.Content class="flex flex-col gap-3 overflow-visible">
-						<div class="flex flex-row gap-6 items-center">
-							<Label>
-								{$_('layers.custom_layers.overlay')}
-							</Label>
-							<Select.Root bind:selected={$selectedOverlay}>
-								<Select.Trigger class="h-8 mr-1">
-									<Select.Value />
-								</Select.Trigger>
-								<Select.Content>
-									{#each Object.keys(overlays) as id}
-										{#if isSelected($selectedOverlayTree, id)}
-											<Select.Item value={id}>{$_(`layers.label.${id}`)}</Select.Item>
-										{/if}
-									{/each}
-									{#each Object.entries($customLayers) as [id, layer]}
-										{#if layer.layerType === 'overlay'}
-											<Select.Item value={id}>{layer.name}</Select.Item>
-										{/if}
-									{/each}
-								</Select.Content>
-							</Select.Root>
-						</div>
-						<Label class="flex flex-row gap-6 items-center">
-							{$_('menu.style.opacity')}
-							<div class="p-2 pr-3 grow">
-								<Slider
-									bind:value={$overlayOpacity}
-									min={0.1}
-									max={1}
-									step={0.1}
-									disabled={$selectedOverlay === undefined}
-									onValueChange={() => {
-										if ($selectedOverlay) {
-											$opacities[$selectedOverlay.value] = $overlayOpacity[0];
-											if ($map) {
-												if ($map.getLayer($selectedOverlay.value)) {
-													$map.removeLayer($selectedOverlay.value);
-													$currentOverlays = $currentOverlays;
-												}
-											}
-										}
-									}}
+			<ScrollArea class="w-[105%] pr-4">
+				<Sheet.Description>
+					{$_('layers.settings_help')}
+				</Sheet.Description>
+				<Accordion.Root class="flex flex-col" bind:value={accordionValue}>
+					<Accordion.Item value="layer-selection" class="flex flex-col">
+						<Accordion.Trigger>{$_('layers.selection')}</Accordion.Trigger>
+						<Accordion.Content class="grow flex flex-col border rounded">
+							<div class="py-2 pl-1 pr-2">
+								<LayerTree
+									layerTree={basemapTree}
+									name="basemapSettings"
+									multiple={true}
+									bind:checked={$selectedBasemapTree}
 								/>
 							</div>
-						</Label>
-					</Accordion.Content>
-				</Accordion.Item>
-				<Accordion.Item value="custom-layers">
-					<Accordion.Trigger>{$_('layers.custom_layers.title')}</Accordion.Trigger>
-					<Accordion.Content>
-						<ScrollArea>
-							<CustomLayers />
-						</ScrollArea>
-					</Accordion.Content>
-				</Accordion.Item>
-				<Accordion.Item value="pois" class="hidden">
-					<Accordion.Trigger>{$_('layers.pois')}</Accordion.Trigger>
-					<Accordion.Content></Accordion.Content>
-				</Accordion.Item>
-				<Accordion.Item value="heatmap-color" class="hidden">
-					<Accordion.Trigger>{$_('layers.heatmap')}</Accordion.Trigger>
-					<Accordion.Content class="overflow-visible">
-						<div class="flex flex-row items-center justify-between gap-6">
-							<Label>
-								{$_('menu.style.color')}
+							<Separator />
+							<div class="py-2 pl-1 pr-2">
+								<LayerTree
+									layerTree={overlayTree}
+									name="overlaySettings"
+									multiple={true}
+									bind:checked={$selectedOverlayTree}
+								/>
+							</div>
+							<Separator />
+							<div class="py-2 pl-1 pr-2">
+								<LayerTree
+									layerTree={overpassTree}
+									name="overpassSettings"
+									multiple={true}
+									bind:checked={$selectedOverpassTree}
+								/>
+							</div>
+						</Accordion.Content>
+					</Accordion.Item>
+					<Accordion.Item value="overlay-opacity">
+						<Accordion.Trigger>{$_('layers.opacity')}</Accordion.Trigger>
+						<Accordion.Content class="flex flex-col gap-3 overflow-visible">
+							<div class="flex flex-row gap-6 items-center">
+								<Label>
+									{$_('layers.custom_layers.overlay')}
+								</Label>
+								<Select.Root bind:selected={$selectedOverlay}>
+									<Select.Trigger class="h-8 mr-1">
+										<Select.Value />
+									</Select.Trigger>
+									<Select.Content>
+										{#each Object.keys(overlays) as id}
+											{#if isSelected($selectedOverlayTree, id)}
+												<Select.Item value={id}>{$_(`layers.label.${id}`)}</Select.Item>
+											{/if}
+										{/each}
+										{#each Object.entries($customLayers) as [id, layer]}
+											{#if layer.layerType === 'overlay'}
+												<Select.Item value={id}>{layer.name}</Select.Item>
+											{/if}
+										{/each}
+									</Select.Content>
+								</Select.Root>
+							</div>
+							<Label class="flex flex-row gap-6 items-center">
+								{$_('menu.style.opacity')}
+								<div class="p-2 pr-3 grow">
+									<Slider
+										bind:value={$overlayOpacity}
+										min={0.1}
+										max={1}
+										step={0.1}
+										disabled={$selectedOverlay === undefined}
+										onValueChange={() => {
+											if ($selectedOverlay) {
+												$opacities[$selectedOverlay.value] = $overlayOpacity[0];
+												if ($map) {
+													if ($map.getLayer($selectedOverlay.value)) {
+														$map.removeLayer($selectedOverlay.value);
+														$currentOverlays = $currentOverlays;
+													}
+												}
+											}
+										}}
+									/>
+								</div>
 							</Label>
-							<Select.Root bind:selected={$selectedHeatmapColor}>
-								<Select.Trigger class="h-8 mr-1">
-									<Select.Value />
-								</Select.Trigger>
-								<Select.Content>
-									{#each heatmapColors as { value, label }}
-										<Select.Item {value}>{label}</Select.Item>
-									{/each}
-								</Select.Content>
-							</Select.Root>
-						</div>
-					</Accordion.Content>
-				</Accordion.Item>
-			</Accordion.Root>
+						</Accordion.Content>
+					</Accordion.Item>
+					<Accordion.Item value="custom-layers">
+						<Accordion.Trigger>{$_('layers.custom_layers.title')}</Accordion.Trigger>
+						<Accordion.Content>
+							<ScrollArea>
+								<CustomLayers />
+							</ScrollArea>
+						</Accordion.Content>
+					</Accordion.Item>
+					<Accordion.Item value="heatmap-color" class="hidden">
+						<Accordion.Trigger>{$_('layers.heatmap')}</Accordion.Trigger>
+						<Accordion.Content class="overflow-visible">
+							<div class="flex flex-row items-center justify-between gap-6">
+								<Label>
+									{$_('menu.style.color')}
+								</Label>
+								<Select.Root bind:selected={$selectedHeatmapColor}>
+									<Select.Trigger class="h-8 mr-1">
+										<Select.Value />
+									</Select.Trigger>
+									<Select.Content>
+										{#each heatmapColors as { value, label }}
+											<Select.Item {value}>{label}</Select.Item>
+										{/each}
+									</Select.Content>
+								</Select.Root>
+							</div>
+						</Accordion.Content>
+					</Accordion.Item>
+				</Accordion.Root>
+			</ScrollArea>
 		</Sheet.Header>
 	</Sheet.Content>
 </Sheet.Root>

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

@@ -0,0 +1,287 @@
+import SphericalMercator from "@mapbox/sphericalmercator";
+import { getLayers } from "./utils";
+import mapboxgl from "mapbox-gl";
+import { get, writable } from "svelte/store";
+import { liveQuery } from "dexie";
+import { db, settings } from "$lib/db";
+import { overpassQueryData } from "$lib/assets/layers";
+
+const {
+    currentOverpassQueries
+} = settings;
+
+const mercator = new SphericalMercator({
+    size: 256,
+});
+
+export const overpassPopupPOI = writable<Record<string, any> | null>(null);
+
+export const overpassPopup = new mapboxgl.Popup({
+    closeButton: false,
+    maxWidth: undefined,
+    offset: 15,
+});
+
+let data = writable<GeoJSON.FeatureCollection>({ type: 'FeatureCollection', features: [] });
+
+liveQuery(() => db.overpassdata.toArray()).subscribe((pois) => {
+    data.set({ type: 'FeatureCollection', features: pois.map((poi) => poi.poi) });
+});
+
+export class OverpassLayer {
+    overpassUrl = 'https://overpass.private.coffee/api/interpreter';
+    minZoom = 12;
+    queryZoom = 12;
+    map: mapboxgl.Map;
+
+    currentQueries: Set<string> = new Set();
+    nextQueries: Map<string, { x: number, y: number, queries: string[] }> = new Map();
+
+    unsubscribes: (() => void)[] = [];
+    queryIfNeededBinded = this.queryIfNeeded.bind(this);
+    updateBinded = this.update.bind(this);
+    onHoverBinded = this.onHover.bind(this);
+    maybeHidePopupBinded = this.maybeHidePopup.bind(this);
+
+    constructor(map: mapboxgl.Map) {
+        this.map = map;
+    }
+
+    add() {
+        this.map.on('moveend', this.queryIfNeededBinded);
+        this.map.on('style.load', this.updateBinded);
+        this.unsubscribes.push(data.subscribe(this.updateBinded));
+        this.unsubscribes.push(currentOverpassQueries.subscribe(() => {
+            this.updateBinded();
+            this.queryIfNeededBinded();
+        }));
+
+        this.update();
+    }
+
+    queryIfNeeded() {
+        if (this.map.getZoom() >= this.minZoom) {
+            const bounds = this.map.getBounds().toArray();
+            this.query([bounds[0][0], bounds[0][1], bounds[1][0], bounds[1][1]]);
+        }
+    }
+
+    update() {
+        this.loadIcons();
+
+        let d = get(data);
+
+        try {
+            let source = this.map.getSource('overpass');
+            if (source) {
+                source.setData(d);
+            } else {
+                this.map.addSource('overpass', {
+                    type: 'geojson',
+                    data: d,
+                });
+            }
+
+            if (!this.map.getLayer('overpass')) {
+                this.map.addLayer({
+                    id: 'overpass',
+                    type: 'symbol',
+                    source: 'overpass',
+                    layout: {
+                        'icon-image': ['get', 'icon'],
+                        'icon-size': 0.25,
+                        'icon-padding': 0,
+                    },
+                });
+
+                this.map.on('mouseenter', 'overpass', this.onHoverBinded);
+                this.map.on('click', 'overpass', this.onHoverBinded);
+            }
+
+            this.map.setFilter('overpass', ['in', 'query', ...getCurrentQueries()]);
+        } catch (e) {
+            // No reliable way to check if the map is ready to add sources and layers
+        }
+    }
+
+    remove() {
+        this.map.off('moveend', this.queryIfNeededBinded);
+        this.map.off('style.load', this.updateBinded);
+        this.unsubscribes.forEach((unsubscribe) => unsubscribe());
+
+        if (this.map.getLayer('overpass')) {
+            this.map.removeLayer('overpass');
+        }
+
+        if (this.map.getSource('overpass')) {
+            this.map.removeSource('overpass');
+        }
+    }
+
+    onHover(e: any) {
+        overpassPopupPOI.set(e.features[0].properties);
+        overpassPopup.setLngLat(e.features[0].geometry.coordinates);
+        overpassPopup.addTo(this.map);
+        this.map.on('mousemove', this.maybeHidePopupBinded);
+    }
+
+    maybeHidePopup(e: any) {
+        let poi = get(overpassPopupPOI);
+        if (poi && this.map.project([poi.lon, poi.lat]).dist(this.map.project(e.lngLat)) > 100) {
+            this.hideWaypointPopup();
+        }
+    }
+
+    hideWaypointPopup() {
+        overpassPopupPOI.set(null);
+        overpassPopup.remove();
+
+        this.map.off('mousemove', this.maybeHidePopupBinded);
+    }
+
+    query(bbox: [number, number, number, number]) {
+        let queries = getCurrentQueries();
+        if (queries.length === 0) {
+            return;
+        }
+
+        let tileLimits = mercator.xyz(bbox, this.queryZoom);
+
+        for (let x = tileLimits.minX; x <= tileLimits.maxX; x++) {
+            for (let y = tileLimits.minY; y <= tileLimits.maxY; y++) {
+                if (this.currentQueries.has(`${x},${y}`)) {
+                    continue;
+                }
+
+                db.overpassquerytiles.where('[x+y]').equals([x, y]).toArray().then((querytiles) => {
+                    let missingQueries = queries.filter((query) => !querytiles.some((querytile) => querytile.query === query));
+                    if (missingQueries.length > 0) {
+                        this.queryTile(x, y, missingQueries);
+                    }
+                });
+            }
+        }
+    }
+
+    queryTile(x: number, y: number, queries: string[]) {
+        if (this.currentQueries.size > 5) {
+            return;
+        }
+
+        this.currentQueries.add(`${x},${y}`);
+
+        const bounds = mercator.bbox(x, y, this.queryZoom);
+        fetch(`${this.overpassUrl}?data=${getQueryForBounds(bounds, queries)}`)
+            .then((response) => {
+                if (response.ok) {
+                    return response.json();
+                }
+                this.currentQueries.delete(`${x},${y}`);
+                return Promise.reject();
+            }, () => (this.currentQueries.delete(`${x},${y}`)))
+            .then((data) => this.storeOverpassData(x, y, queries, data))
+            .catch(() => this.currentQueries.delete(`${x},${y}`));
+    }
+
+    storeOverpassData(x: number, y: number, queries: string[], data: any) {
+        let queryTiles = queries.map((query) => ({ x, y, query }));
+        let pois: { query: string, id: number, poi: GeoJSON.Feature }[] = [];
+
+        if (data.elements === undefined) {
+            return;
+        }
+
+        for (let element of data.elements) {
+            for (let query of queries) {
+                if (belongsToQuery(element, query)) {
+                    pois.push({
+                        query,
+                        id: element.id,
+                        poi: {
+                            type: 'Feature',
+                            geometry: {
+                                type: 'Point',
+                                coordinates: element.center ? [element.center.lon, element.center.lat] : [element.lon, element.lat],
+                            },
+                            properties: {
+                                id: element.id,
+                                lat: element.center ? element.center.lat : element.lat,
+                                lon: element.center ? element.center.lon : element.lon,
+                                query: query,
+                                icon: `overpass-${query}`,
+                                tags: element.tags
+                            },
+                        }
+                    });
+                }
+            }
+        }
+
+        db.transaction('rw', db.overpassquerytiles, db.overpassdata, async () => {
+            await db.overpassquerytiles.bulkPut(queryTiles);
+            await db.overpassdata.bulkPut(pois);
+        });
+
+        this.currentQueries.delete(`${x},${y}`);
+    }
+
+    loadIcons() {
+        let currentQueries = getCurrentQueries();
+        currentQueries.forEach((query) => {
+            if (!this.map.hasImage(`overpass-${query}`)) {
+                let icon = new Image(100, 100);
+                icon.onload = () => {
+                    if (!this.map.hasImage(`overpass-${query}`)) {
+                        this.map.addImage(`overpass-${query}`, icon);
+                    }
+                }
+
+                // Lucide icons are SVG files with a 24x24 viewBox
+                // Create a new SVG with a 32x32 viewBox and center the icon in a circle
+                icon.src = 'data:image/svg+xml,' + encodeURIComponent(`
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40">
+                    <circle cx="20" cy="20" r="20" fill="${overpassQueryData[query].icon.color}" />
+                    <g transform="translate(8 8)">
+                    ${overpassQueryData[query].icon.svg.replace('stroke="currentColor"', 'stroke="white"')}
+                    </g>
+                </svg>
+            `);
+            }
+        });
+    }
+}
+
+function getQueryForBounds(bounds: [number, number, number, number], queries: string[]) {
+    return `[bbox:${bounds[1]},${bounds[0]},${bounds[3]},${bounds[2]}][out:json];(${getQueries(queries)});out center;`;
+}
+
+function getQueries(queries: string[]) {
+    return queries.map((query) => getQuery(query)).join('');
+}
+
+function getQuery(query: string) {
+    let arrayEntry = Object.entries(overpassQueryData[query].tags).find(([_, value]) => Array.isArray(value));
+    if (arrayEntry !== undefined) {
+        return arrayEntry[1].map((val) => `nwr${Object.entries(overpassQueryData[query].tags)
+            .map(([tag, value]) => `[${tag}=${tag === arrayEntry[0] ? val : value}]`)
+            .join('')};`).join('');
+    } else {
+        return `nwr${Object.entries(overpassQueryData[query].tags)
+            .map(([tag, value]) => `[${tag}=${value}]`)
+            .join('')};`;
+    }
+}
+
+function belongsToQuery(element: any, query: string) {
+    return Object.entries(overpassQueryData[query].tags)
+        .every(([tag, value]) => Array.isArray(value) ? value.includes(element.tags[tag]) : element.tags[tag] === value);
+}
+
+function getCurrentQueries() {
+    let currentQueries = get(currentOverpassQueries);
+    if (currentQueries === undefined) {
+        return [];
+    }
+
+    return Object.entries(getLayers(currentQueries)).filter(([_, selected]) => selected).map(([query, _]) => query);
+}

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

@@ -0,0 +1,94 @@
+<script lang="ts">
+	import * as Card from '$lib/components/ui/card';
+	import { Button } from '$lib/components/ui/button';
+	import { overpassPopup, overpassPopupPOI } from './OverpassLayer';
+	import { selection } from '$lib/components/file-list/Selection';
+	import { PencilLine, MapPin } from 'lucide-svelte';
+	import { onMount } from 'svelte';
+	import { _ } from 'svelte-i18n';
+	import { dbUtils } from '$lib/db';
+
+	let popupElement: HTMLDivElement;
+
+	onMount(() => {
+		overpassPopup.setDOMContent(popupElement);
+		popupElement.classList.remove('hidden');
+	});
+
+	let tags = {};
+	$: if ($overpassPopupPOI) {
+		tags = JSON.parse($overpassPopupPOI.tags);
+	}
+</script>
+
+<div bind:this={popupElement} class="hidden">
+	{#if $overpassPopupPOI}
+		<Card.Root class="border-none shadow-md text-base p-2 max-w-[50dvw]">
+			<Card.Header class="p-0">
+				<Card.Title class="text-md">
+					<div class="flex flex-row gap-3">
+						<div class="flex flex-col">
+							{tags.name ?? ''}
+							<div class="text-muted-foreground text-sm font-normal">
+								{$overpassPopupPOI.lat.toFixed(6)}&deg; {$overpassPopupPOI.lon.toFixed(6)}&deg;
+							</div>
+						</div>
+						<Button
+							class="ml-auto p-1.5 h-8"
+							variant="outline"
+							href="https://www.openstreetmap.org/edit?editor=id&node={$overpassPopupPOI.id}"
+							target="_blank"
+						>
+							<PencilLine size="16" />
+						</Button>
+					</div>
+				</Card.Title>
+			</Card.Header>
+			{#if tags.image || tags['image:0']}
+				<div class="w-full rounded-md overflow-clip my-2 max-w-96 mx-auto">
+					<img src={tags.image ?? tags['image:0']} />
+				</div>
+			{/if}
+			<Card.Content class="flex flex-col p-0 text-sm mt-1 whitespace-normal break-all">
+				<div class="grid grid-cols-[auto_auto] gap-x-3">
+					{#each Object.entries(tags) as [key, value]}
+						{#if key !== 'name' && !key.includes('image')}
+							<span class="font-mono">{key}</span>
+							{#if key === 'website' || key === 'contact:website' || key === 'contact:facebook' || key === 'contact:instagram' || key === 'contact:twitter'}
+								<a href={value} target="_blank" class="text-blue-500 underline">{value}</a>
+							{:else if key === 'phone' || key === 'contact:phone'}
+								<a href={'tel:' + value} class="text-blue-500 underline">{value}</a>
+							{:else if key === 'email' || key === 'contact:email'}
+								<a href={'mailto:' + value} class="text-blue-500 underline">{value}</a>
+							{:else}
+								<span>{value}</span>
+							{/if}
+						{/if}
+					{/each}
+				</div>
+				<Button
+					class="mt-2"
+					variant="outline"
+					disabled={$selection.size === 0}
+					on:click={() => {
+						let desc = Object.entries(tags)
+							.map(([key, value]) => `${key}: ${value}`)
+							.join('\n');
+						dbUtils.addOrUpdateWaypoint({
+							attributes: {
+								lat: $overpassPopupPOI.lat,
+								lon: $overpassPopupPOI.lon
+							},
+							name: tags.name ?? '',
+							desc: desc,
+							cmt: desc
+						});
+					}}
+				>
+					<MapPin size="16" class="mr-1" />
+					{$_('toolbar.waypoint.add')}
+				</Button>
+			</Card.Content>
+		</Card.Root>
+	{/if}
+</div>

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

@@ -102,39 +102,22 @@
 		}
 		latitude = parseFloat(latitude.toFixed(6));
 		longitude = parseFloat(longitude.toFixed(6));
-		if ($selectedWaypoint) {
-			dbUtils.applyToFile($selectedWaypoint[1], (file) => {
-				let wpt = file.wpt[$selectedWaypoint[0]._data.index];
-				wpt.name = name;
-				wpt.desc = description;
-				wpt.cmt = description;
-				wpt.setCoordinates({
-					lat: latitude,
-					lon: longitude
-				});
-				wpt.ele =
-					get(map)?.queryTerrainElevation([longitude, latitude], { exaggerated: false }) ?? 0;
-			});
-		} else {
-			let fileIds = new Set<string>();
-			$selection.getSelected().forEach((item) => {
-				fileIds.add(item.getFileId());
-			});
-			let waypoint = new Waypoint({
-				name,
-				desc: description,
-				cmt: description,
+
+		dbUtils.addOrUpdateWaypoint(
+			{
 				attributes: {
 					lat: latitude,
 					lon: longitude
-				}
-			});
-			waypoint.ele =
-				get(map)?.queryTerrainElevation([longitude, latitude], { exaggerated: false }) ?? 0;
-			dbUtils.applyToFiles(Array.from(fileIds), (file) =>
-				file.replaceWaypoints(file.wpt.length, file.wpt.length, [waypoint])
-			);
-		}
+				},
+				name,
+				desc: description,
+				cmt: description
+			},
+			$selectedWaypoint
+				? new ListWaypointItem($selectedWaypoint[1], $selectedWaypoint[0]._data.index)
+				: undefined
+		);
+
 		selectedWaypoint.set(undefined);
 		resetWaypointData();
 	}