adds direction carets to map

web/src/lib/assets/svgs/caret-right-solid.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512">
+    <path fill="#ffffff" stroke="#000" stroke-width="30" 
+        d="M246.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-128-128c-9.2-9.2-22.9-11.9-34.9-6.9s-19.8 16.6-19.8 29.6l0 256c0 12.9 7.8 24.6 19.8 29.6s25.7 2.2 34.9-6.9l128-128z" />
+</svg>

web/src/lib/components/trail/map_with_elevation_maplibre.svelte

@@ -18,6 +18,7 @@
     import MaplibreGraticule from "$lib/vendor/maplibre-graticule/maplibre-graticule";
     import { FullscreenControl } from "$lib/vendor/maplibre-fullscreen/fullscreen-control";
     import type { Settings } from "$lib/models/settings";
+    import directionCaret from "$lib/assets/svgs/caret-right-solid.svg";
 
     export let trails: Trail[] = [];
     export let markers: M.Marker[] = [];
@@ -338,6 +339,46 @@
         }
     }
 
+    function addCaretLayer(id?: string) {        
+        if (!map || !id) {
+            return;
+        }
+        map.addLayer({
+            id: "direction-carets",
+            type: "symbol",
+            source: id,
+            layout: {
+                "symbol-placement": "line",
+                "symbol-spacing": [
+                    "interpolate",
+                    ["exponential", 1.5],
+                    ["zoom"],
+                    minZoom,
+                    80,
+                    18,
+                    200,
+                ],
+                "icon-image": "direction-caret",
+                "icon-size": [
+                    "interpolate",
+                    ["exponential", 1.5],
+                    ["zoom"],
+                    minZoom,
+                    0.5,
+                    18,
+                    0.8,
+                ],
+            },
+        });
+    }
+
+    function removeCaretLayer() {
+        if (!map || !map.getLayer("direction-carets")) {
+            return;
+        }
+        map.removeLayer("direction-carets");
+    }
+
     export function highlightTrail(id: string) {
         map?.setPaintProperty(id, "line-width", 7);
         // map?.setPaintProperty(id, "line-color", "#2766e3");
@@ -370,6 +411,7 @@
             epc?.showProfile();
         }
         showWaypoints();
+        addCaretLayer(trail.id!);
         flyToBounds();
     }
 
@@ -383,6 +425,7 @@
             epc?.hideProfile();
         }
         hideWaypoints();
+        removeCaretLayer();
     }
 
     function addStartEndMarkers(
@@ -430,7 +473,13 @@
         }
     }
 
-    export function togglePopup(id: string) {
+    export function togglePopup(id: string, currentState?: boolean) {
+        if (
+            currentState !== undefined &&
+            layers[id]?.startMarker?.getPopup().isOpen() != currentState
+        ) {
+            return;
+        }
         layers[id]?.startMarker?.togglePopup();
     }
 
@@ -532,6 +581,10 @@
         elevationMarker.setLngLat([0, 0]).addTo(map);
         elevationMarker.setOpacity("0");
 
+        let img = new Image(20, 20);
+        img.onload = () => map!.addImage("direction-caret", img);
+        img.src = directionCaret;
+
         const switcherControl = new StyleSwitcherControl({
             styles: mapStyles,
             onSwitch: (style) => {
@@ -608,10 +661,12 @@
                 $page.data.settings?.terrain &&
                 !map?.getSource("terrain")
             ) {
-                map!.addSource("terrain", {
-                    type: "raster-dem",
-                    url: $page.data.settings.terrain,
-                });
+                try {
+                    map!.addSource("terrain", {
+                        type: "raster-dem",
+                        url: $page.data.settings.terrain,
+                    });
+                } catch (e) {}
             }
         });
 
@@ -637,6 +692,7 @@
         });
 
         map.on("load", () => {
+            addCaretLayer(trails[activeTrail]?.id);
             dispatch("init", map);
         });
 
@@ -659,4 +715,9 @@
     :global(.maplibregl-popup-content) {
         @apply bg-background rounded-md;
     }
+
+    :global(.maplibregl-popup-close-button) {
+        top: 4px;
+        right: 8px;
+    }
 </style>

web/src/lib/components/trail/trail_info_panel.svelte

@@ -68,10 +68,16 @@
     onMount(async () => {});
 
     function openMarkerPopup(i: number) {
+        if((markers[i] as M.Marker).getPopup().isOpen()) {
+            return;
+        }
         (markers[i] as M.Marker).togglePopup();
     }
 
     function closeMarkerPopup(i: number) {
+        if(!(markers[i] as M.Marker).getPopup().isOpen()) {
+            return;
+        }
         (markers[i] as M.Marker).togglePopup();
     }
 

web/src/lib/util/maplibre_util.ts

@@ -86,7 +86,7 @@ export function createPopupFromTrail(trail: Trail) {
     const popup = new M.Popup({maxWidth: "320px"});
     popup.setHTML(
         `<a href="/map/trail/${trail.id}" data-sveltekit-preload-data="off">
-    <li class="flex items-center gap-4 cursor-pointer text-black max-w-80">
+    <li class="flex items-center gap-4 cursor-pointer text-content max-w-80">
         <div class="shrink-0"><img class="h-14 w-14 object-cover rounded-xl" src="${thumbnail}" alt="">
         </div>
         <div>

web/src/routes/map/+page.svelte

@@ -106,11 +106,11 @@
     }
 
     function handleTrailCardMouseEnter(trail: Trail) {
-        mapWithElevation.togglePopup(trail.id!);
+        mapWithElevation.togglePopup(trail.id!, false);
     }
 
     function handleTrailCardMouseLeave(trail: Trail) {
-        mapWithElevation.togglePopup(trail.id!);
+        mapWithElevation.togglePopup(trail.id!, true);
     }
 
     async function handleFilterUpdate(filter: TrailFilter) {