add overpass poi to file

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/LayerControlSettings.svelte

@@ -209,10 +209,6 @@
 							</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">

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

@@ -90,6 +90,7 @@ export class OverpassLayer {
                     layout: {
                         'icon-image': ['get', 'icon'],
                         'icon-size': 0.25,
+                        'icon-padding': 0,
                     },
                 });
 
@@ -173,14 +174,13 @@ export class OverpassLayer {
         fetch(`${this.overpassUrl}?data=${getQueryForBounds(bounds, queries)}`)
             .then((response) => {
                 if (response.ok) {
-                    try {
-                        return response.json();
-                    } catch (e) { }
+                    return response.json();
                 }
                 this.currentQueries.delete(`${x},${y}`);
                 return Promise.reject();
             }, () => (this.currentQueries.delete(`${x},${y}`)))
-            .then((data) => this.storeOverpassData(x, y, queries, data));
+            .then((data) => this.storeOverpassData(x, y, queries, data))
+            .catch(() => this.currentQueries.delete(`${x},${y}`));
     }
 
     storeOverpassData(x: number, y: number, queries: string[], data: any) {

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

@@ -2,9 +2,11 @@
 	import * as Card from '$lib/components/ui/card';
 	import { Button } from '$lib/components/ui/button';
 	import { overpassPopup, overpassPopupPOI } from './OverpassLayer';
-	import { PencilLine } from 'lucide-svelte';
+	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;
 
@@ -47,23 +49,45 @@
 					<img src={tags.image ?? tags['image:0']} />
 				</div>
 			{/if}
-			<Card.Content
-				class="grid grid-cols-[auto_auto] gap-x-3 p-0 text-sm mt-1 whitespace-normal break-all"
-			>
-				{#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>
+			<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}
-					{/if}
-				{/each}
+					{/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}

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();
 	}