show popup after content has been rendered, fixes popup placement, see #124

website/src/lib/components/gpx-layer/GPXLayer.ts

@@ -10,6 +10,7 @@ import { getElevation, resetCursor, setGrabbingCursor, setPointerCursor, setScis
 import { selectedWaypoint } from "$lib/components/toolbar/tools/Waypoint.svelte";
 import { MapPin, Square } from "lucide-static";
 import { getSymbolKey, symbols } from "$lib/assets/symbols";
+import { tick } from "svelte";
 
 const colors = [
     '#ff0000',
@@ -394,13 +395,18 @@ export class GPXLayer {
     showWaypointPopup(waypoint: Waypoint) {
         if (get(currentPopupWaypoint) !== null) {
             this.hideWaypointPopup();
+        } else if (waypoint === get(currentPopupWaypoint)?.[0]) {
+            return;
         }
         let marker = this.markers[waypoint._data.index];
         if (marker) {
             currentPopupWaypoint.set([waypoint, this.fileId]);
-            marker.setPopup(waypointPopup);
-            marker.togglePopup();
-            this.map.on('mousemove', this.maybeHideWaypointPopupBinded);
+            tick().then(() => {
+                // Show popup once the content component has been rendered
+                marker.setPopup(waypointPopup);
+                marker.togglePopup();
+                this.map.on('mousemove', this.maybeHideWaypointPopupBinded);
+            });
         }
     }
 

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

@@ -7,6 +7,7 @@ export const currentPopupWaypoint = writable<[Waypoint, string] | null>(null);
 
 export const waypointPopup = new mapboxgl.Popup({
     closeButton: false,
+    focusAfterOpen: false,
     maxWidth: undefined,
     offset: {
         'top': [0, 0],
@@ -15,8 +16,8 @@ export const waypointPopup = new mapboxgl.Popup({
         'bottom': [0, -30],
         'bottom-left': [0, -30],
         'bottom-right': [0, -30],
-        'left': [0, 0],
-        'right': [0, 0]
+        'left': [10, -15],
+        'right': [-10, -15],
     },
 });
 

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

@@ -5,6 +5,7 @@ import { get, writable } from "svelte/store";
 import { liveQuery } from "dexie";
 import { db, settings } from "$lib/db";
 import { overpassQueryData } from "$lib/assets/layers";
+import { tick } from "svelte";
 
 const {
     currentOverpassQueries
@@ -18,6 +19,7 @@ export const overpassPopupPOI = writable<Record<string, any> | null>(null);
 
 export const overpassPopup = new mapboxgl.Popup({
     closeButton: false,
+    focusAfterOpen: false,
     maxWidth: undefined,
     offset: 15,
 });
@@ -129,9 +131,12 @@ export class OverpassLayer {
             ...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);
+        tick().then(() => {
+            // Show the popup once the content component has been rendered
+            overpassPopup.setLngLat(e.features[0].geometry.coordinates);
+            overpassPopup.addTo(this.map);
+            this.map.on('mousemove', this.maybeHidePopupBinded);
+        });
     }
 
     maybeHidePopup(e: any) {