From 1db9ecafef06414a82f4f838e8a7beb2f2a6a0fd Mon Sep 17 00:00:00 2001
From: vcoppe <vcoppe@hexaly.com>
Date: Thu, 23 Oct 2025 19:07:32 +0200
Subject: [PATCH] fix coordinates popup

---
 .../components/map/CoordinatesPopup.svelte    | 26 +++++++++----------
 .../components/map/gpx-layer/GPXLayers.svelte | 18 ++++++-------
 .../map/gpx-layer/TrackpointPopup.svelte      |  5 +---
 .../src/routes/[[language]]/app/+page.svelte  |  4 +--
 4 files changed, 23 insertions(+), 30 deletions(-)

diff --git a/website/src/lib/components/map/CoordinatesPopup.svelte b/website/src/lib/components/map/CoordinatesPopup.svelte
index 7d54307d..f49be578 100644
--- a/website/src/lib/components/map/CoordinatesPopup.svelte
+++ b/website/src/lib/components/map/CoordinatesPopup.svelte
@@ -1,20 +1,18 @@
 <script lang="ts">
-    import { map } from '$lib/components/map/map.svelte';
-    import { trackpointPopup } from '$lib/components/map/gpx-layer/GPXLayerPopup';
+    import { map } from '$lib/components/map/map';
+    import { trackpointPopup } from '$lib/components/map/gpx-layer/gpx-layer-popup';
     import { TrackPoint } from 'gpx';
 
-    $effect(() => {
-        if (map.current) {
-            map.current.on('contextmenu', (e) => {
-                trackpointPopup?.setItem({
-                    item: new TrackPoint({
-                        attributes: {
-                            lat: e.lngLat.lat,
-                            lon: e.lngLat.lng,
-                        },
-                    }),
-                });
+    map.onLoad((map_) => {
+        map_.on('contextmenu', (e) => {
+            trackpointPopup?.setItem({
+                item: new TrackPoint({
+                    attributes: {
+                        lat: e.lngLat.lat,
+                        lon: e.lngLat.lng,
+                    },
+                }),
             });
-        }
+        });
     });
 </script>
diff --git a/website/src/lib/components/map/gpx-layer/GPXLayers.svelte b/website/src/lib/components/map/gpx-layer/GPXLayers.svelte
index 7a088c4a..a53636c4 100644
--- a/website/src/lib/components/map/gpx-layer/GPXLayers.svelte
+++ b/website/src/lib/components/map/gpx-layer/GPXLayers.svelte
@@ -1,33 +1,31 @@
 <script lang="ts">
-    import { gpxLayers } from '$lib/components/map/gpx-layer/gpx-layers';
     import { onDestroy, onMount } from 'svelte';
-    // import { map, gpxLayers } from '$lib/stores';
-    // import { GPXLayer } from './gpx-layer';
+    import { gpxLayers } from '$lib/components/map/gpx-layer/gpx-layers';
     import { DistanceMarkers } from '$lib/components/map/gpx-layer/distance-markers';
     import { StartEndMarkers } from '$lib/components/map/gpx-layer/start-end-markers';
-    // import { onDestroy } from 'svelte';
-    // import { createPopups, removePopups } from './GPXLayerPopup';
+    import { createPopups, removePopups } from '$lib/components/map/gpx-layer/gpx-layer-popup';
+    import { map } from '$lib/components/map/map';
 
     let distanceMarkers: DistanceMarkers;
     let startEndMarkers: StartEndMarkers;
 
-    // $: if ($map) {
-    //     createPopups($map);
-    // }
-
     onMount(() => {
         gpxLayers.init();
         startEndMarkers = new StartEndMarkers();
         distanceMarkers = new DistanceMarkers();
     });
 
+    map.onLoad((map_) => {
+        createPopups(map_);
+    });
+
     onDestroy(() => {
-        // removePopups();
         if (startEndMarkers) {
             startEndMarkers.remove();
         }
         if (distanceMarkers) {
             distanceMarkers.remove();
         }
+        removePopups();
     });
 </script>
diff --git a/website/src/lib/components/map/gpx-layer/TrackpointPopup.svelte b/website/src/lib/components/map/gpx-layer/TrackpointPopup.svelte
index 9256b98b..19c5dc5f 100644
--- a/website/src/lib/components/map/gpx-layer/TrackpointPopup.svelte
+++ b/website/src/lib/components/map/gpx-layer/TrackpointPopup.svelte
@@ -5,15 +5,12 @@
     import WithUnits from '$lib/components/WithUnits.svelte';
     import { Compass, Mountain, Timer } from '@lucide/svelte';
     import { i18n } from '$lib/i18n.svelte';
-    import type { PopupItem } from '$lib/components/map/map';
+    import type { PopupItem } from '$lib/components/map/map-popup';
 
     let { trackpoint }: { trackpoint: PopupItem<TrackPoint> } = $props();
 </script>
 
 <Card.Root class="border-none shadow-md text-base p-2">
-    <Card.Header class="p-0">
-        <Card.Title class="text-md"></Card.Title>
-    </Card.Header>
     <Card.Content class="flex flex-col p-0 text-xs gap-1">
         <div class="flex flex-row items-center gap-1">
             <Compass size="14" />
diff --git a/website/src/routes/[[language]]/app/+page.svelte b/website/src/routes/[[language]]/app/+page.svelte
index 5859e47f..9e59b9d4 100644
--- a/website/src/routes/[[language]]/app/+page.svelte
+++ b/website/src/routes/[[language]]/app/+page.svelte
@@ -8,7 +8,7 @@
     import Toolbar from '$lib/components/toolbar/Toolbar.svelte';
     import StreetViewControl from '$lib/components/map/street-view-control/StreetViewControl.svelte';
     import LayerControl from '$lib/components/map/layer-control/LayerControl.svelte';
-    // import CoordinatesPopup from '$lib/components/map/CoordinatesPopup.svelte';
+    import CoordinatesPopup from '$lib/components/map/CoordinatesPopup.svelte';
     import Resizer from '$lib/components/Resizer.svelte';
     import { Toaster } from '$lib/components/ui/sonner';
     import { languages } from '$lib/languages';
@@ -102,7 +102,7 @@
             <StreetViewControl />
             <LayerControl />
             <GPXLayers />
-            <!-- <CoordinatesPopup /> -->
+            <CoordinatesPopup />
             <Toaster richColors />
             {#if !$treeFileView}
                 <div class="h-10 -translate-y-10 w-full pointer-events-none absolute z-30">