waypoint editing while drawing a route (#1060)

* waypoint editing while drawing a route

* fix waypoint click while drawing

---------

Co-authored-by: Christian Beutel <>

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

@@ -37,6 +37,7 @@
         markers?: M.Marker[];
         map?: M.Map | null;
         drawing?: boolean;
+        displayWaypoints?: boolean;
         showElevation?: boolean;
         showInfoPopup?: boolean;
         showGrid?: boolean;
@@ -65,6 +66,7 @@
         onmoveend?: (map: M.Map) => void;
         onzoom?: (map: M.Map) => void;
         onclick?: (event: M.MapMouseEvent & Object) => void;
+        oncontextmenu?: (event: M.MapMouseEvent & Object) => void;
         onUnclusteredClick?: (
             event: M.MapMouseEvent & Object,
             trail: Trail,
@@ -81,6 +83,7 @@
         markers = $bindable([]),
         map = $bindable(),
         drawing = false,
+        displayWaypoints = true,
         showElevation = true,
         showInfoPopup = false,
         showGrid = false,
@@ -101,6 +104,7 @@
         onmoveend,
         onzoom,
         onclick,
+        oncontextmenu,
         onUnclusteredClick,
         oninit,
         autoGeolocateOnDrawing = false,
@@ -190,8 +194,9 @@
     });
     $effect(() => {
         waypoints;
+        displayWaypoints;
         untrack(() => {
-            showWaypoints();
+            syncWaypointMarkers();
             refreshElevationProfile();
         });
     });
@@ -668,7 +673,7 @@
             if (showElevation) {
                 epc?.showProfile();
             }
-            showWaypoints();
+            syncWaypointMarkers();
             if (trail.id && gpxDataMap[trail.id]) {
                 addCaretLayer(gpxDataMap[trail.id]);
             }
@@ -698,7 +703,6 @@
         if (!map) {
             return;
         }
-        hideWaypoints();
         activeTrail ??= 0;
         map.getCanvas().style.cursor = "crosshair";
         if (trails[activeTrail]) {
@@ -714,7 +718,7 @@
         if (!map) {
             return;
         }
-        showWaypoints();
+        syncWaypointMarkers();
         map.getCanvas().style.cursor = "inherit";
 
         if (activeTrail !== null && trails[activeTrail] && !clusterTrails) {
@@ -792,7 +796,7 @@
     }
 
     function showWaypoints() {
-        if (!map || drawing) {
+        if (!map) {
             return;
         }
 
@@ -816,6 +820,14 @@
         });
     }
 
+    function syncWaypointMarkers() {
+        if (displayWaypoints) {
+            showWaypoints();
+        } else {
+            hideWaypoints();
+        }
+    }
+
     function hideWaypoints() {
         if (!map) {
             return;
@@ -1015,6 +1027,10 @@
             onclick?.(e);
         });
 
+        map.on("contextmenu", (e) => {
+            oncontextmenu?.(e);
+        });
+
         map.on("load", () => {
             layerManager.init();
             initMap(true);
@@ -1022,7 +1038,7 @@
             mapLoaded = true;
         });
 
-        showWaypoints();
+        syncWaypointMarkers();
     });
 
     function geolocate() {

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

@@ -23,6 +23,7 @@
         onRecalculateElevationData: () => void;
         onUndo: () => void;
         onRedo: () => void;
+        showWaypoints?: boolean;
         resetLabel?: string;
         resetAriaLabel?: string;
     }
@@ -37,6 +38,7 @@
         onRecalculateElevationData,
         onUndo,
         onRedo,
+        showWaypoints = $bindable(true),
         resetLabel = "reset",
         resetAriaLabel = "reset-route",
     }: Props = $props();
@@ -149,6 +151,15 @@
             aria-label="recalculate elevation data"
             onclick={async () => await togglePanels(false, false, !recalculateElevationData)}><i class="fa fa-mountain text-sm"></i></button
         >
+        <button
+            class="btn-icon tooltip"
+            class:bg-secondary-hover={showWaypoints}
+            type="button"
+            aria-label={$_("waypoints", { values: { n: 2 } })}
+            data-title={$_("waypoints", { values: { n: 2 } })}
+            onclick={() => (showWaypoints = !showWaypoints)}
+            ><i class="fa fa-location-dot text-sm"></i></button
+        >
         <button
             class="btn-icon tooltip hover:text-red-500"
             type="button"