fix popups

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

@@ -4,10 +4,10 @@
     import { PencilLine, MapPin } from '@lucide/svelte';
     import { i18n } from '$lib/i18n.svelte';
     import { ScrollArea } from '$lib/components/ui/scroll-area/index.js';
-    import type { WaypointType } from 'gpx';
     import type { PopupItem } from '$lib/components/map/map-popup';
-    import { fileActions } from '$lib/logic/file-actions';
-    import { selection } from '$lib/logic/selection';
+    import { engine } from '$lib/engine';
+    import { selectionSize } from '$lib/selection-helpers';
+    import { getElevation } from '$lib/utils';
 
     let {
         poi,
@@ -27,28 +27,22 @@
         return '';
     });
 
-    function addToFile() {
+    const { selection } = engine;
+
+    async function addToFile() {
         const desc = Object.entries(tags)
             .map(([key, value]) => `${key}: ${value}`)
             .join('\n');
-        let wpt: WaypointType = {
-            attributes: {
-                lat: poi.item.lat,
-                lon: poi.item.lon,
-            },
-            name: name,
-            desc: desc,
-            cmt: desc,
-            sym: poi.item.sym,
-        };
-        if (tags.website) {
-            wpt.link = {
-                attributes: {
-                    href: tags.website,
-                },
-            };
-        }
-        fileActions.addOrUpdateWaypoint(wpt);
+        const [ele] = await getElevation([{ lat: poi.item.lat, lon: poi.item.lng }]);
+        await engine.newWaypoint({
+            lng: poi.item.lng,
+            lat: poi.item.lat,
+            ele,
+            name,
+            desc,
+            icon: poi.item.sym ?? '',
+            link: tags.website ?? '',
+        });
     }
 </script>
 
@@ -58,7 +52,7 @@
             <div class="flex flex-col">
                 <p>{name}</p>
                 <div class="text-muted-foreground text-xs font-normal">
-                    {poi.item.lat.toFixed(6)}&deg; {poi.item.lon.toFixed(6)}&deg;
+                    {poi.item.lat.toFixed(6)}&deg; {poi.item.lng.toFixed(6)}&deg;
                 </div>
             </div>
 
@@ -111,7 +105,7 @@
             size="sm"
             class="mt-1 justify-start"
             variant="outline"
-            disabled={$selection.size === 0}
+            disabled={selectionSize($selection) === 0}
             onclick={addToFile}
         >
             <MapPin size="14" />

website/src/lib/components/map/layer-control/overpass-layer.ts

@@ -143,6 +143,7 @@ export class OverpassLayer {
 
     onHover(e: any) {
         this.popup.setItem({
+            kind: 'overpass',
             item: {
                 ...e.features[0].properties,
                 sym: overpassQueryData[e.features[0].properties.query].symbol ?? '',
@@ -235,7 +236,7 @@ export class OverpassLayer {
                             properties: {
                                 id: element.id,
                                 lat: element.center ? element.center.lat : element.lat,
-                                lon: element.center ? element.center.lon : element.lon,
+                                lng: element.center ? element.center.lon : element.lon,
                                 query: query,
                                 icon: `overpass-${query}`,
                                 tags: element.tags,