From 35f12f18166bdf13e2e1ad67a88d01dfb0aa0278 Mon Sep 17 00:00:00 2001
From: Christian Beutel <>
Date: Sat, 11 Jan 2025 22:43:09 +0100
Subject: [PATCH] adds route editing capabilities

---
 .../trail/map_with_elevation_maplibre.svelte  | 296 ++++++++++++------
 .../components/trail/trail_info_panel.svelte  |   2 +
 web/src/lib/stores/valhalla_store.ts          |  11 +-
 web/src/lib/util/geojson_util.ts              |  41 ++-
 web/src/lib/util/gpx_util.ts                  |   7 +-
 web/src/lib/util/maplibre_util.ts             |  63 ++--
 .../elevationprofile.ts                       |   6 +-
 web/src/routes/lists/+page.svelte             |  13 +-
 web/src/routes/map/trail/[id]/+page.svelte    |   2 +
 .../routes/map/trail/[id]/print/+page.svelte  |   2 +
 web/src/routes/settings/export/+page.svelte   |  11 +-
 web/src/routes/trail/edit/[id]/+page.svelte   | 196 +++++++++---
 12 files changed, 469 insertions(+), 181 deletions(-)

diff --git a/web/src/lib/components/trail/map_with_elevation_maplibre.svelte b/web/src/lib/components/trail/map_with_elevation_maplibre.svelte
index e58063cb..430265a8 100644
--- a/web/src/lib/components/trail/map_with_elevation_maplibre.svelte
+++ b/web/src/lib/components/trail/map_with_elevation_maplibre.svelte
@@ -1,6 +1,9 @@
 <script lang="ts">
     import { page } from "$app/stores";
+    import directionCaret from "$lib/assets/svgs/caret-right-solid.svg";
+    import type { Settings } from "$lib/models/settings";
     import type { Trail } from "$lib/models/trail";
+    import type { Waypoint } from "$lib/models/waypoint";
     import { theme } from "$lib/stores/theme_store";
     import { findStartAndEndPoints } from "$lib/util/geojson_util";
     import { toGeoJson } from "$lib/util/gpx_util";
@@ -10,17 +13,16 @@
         FontawesomeMarker,
     } from "$lib/util/maplibre_util";
     import type { ElevationProfileControl } from "$lib/vendor/maplibre-elevation-profile/elevationprofile-control";
+    import { FullscreenControl } from "$lib/vendor/maplibre-fullscreen/fullscreen-control";
+    import MaplibreGraticule from "$lib/vendor/maplibre-graticule/maplibre-graticule";
     import { StyleSwitcherControl } from "$lib/vendor/maplibre-style-switcher/style-switcher-control";
     import type { GeoJSON } from "geojson";
     import * as M from "maplibre-gl";
     import "maplibre-gl/dist/maplibre-gl.css";
     import { createEventDispatcher, onDestroy, onMount } from "svelte";
-    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 waypoints: Waypoint[] = [];
     export let markers: M.Marker[] = [];
     export let map: M.Map | null = null;
     export let drawing: boolean = false;
@@ -39,7 +41,7 @@
         undefined;
     export let mapOptions: Partial<M.MapOptions> | undefined = undefined;
 
-    export let activeTrail: number = 0;
+    export let activeTrail: number | null = null;
     export let minZoom: number = 0;
 
     let mapContainer: HTMLDivElement;
@@ -56,11 +58,19 @@
             listener: {
                 onEnter: ((e: M.MapMouseEvent) => void) | null;
                 onLeave: ((e: M.MapMouseEvent) => void) | null;
-                onClick: ((e: M.MapMouseEvent) => void) | null;
+                onMouseUp: ((e: M.MapMouseEvent) => void) | null;
+                onMouseDown: ((e: M.MapMouseEvent) => void) | null;
+                onMouseMove: ((e: M.MapMouseEvent) => void) | null;
             };
         }
     > = {};
 
+    let elevationMarker: FontawesomeMarker;
+
+    let draggingSegment: number | null = null;
+
+    let hoveringTrail: boolean = false;
+
     const dispatch = createEventDispatcher();
 
     const trailColors = [
@@ -79,7 +89,19 @@
     $: data = getData(trails);
 
     $: if (data && map) {
-        initMap();
+        initMap(map.loaded());
+    }
+
+    $: if (activeTrail !== null && trails[activeTrail] !== undefined) {
+        if (
+            !drawing &&
+            fitBounds !== "off" &&
+            data.some((d) => d.bbox !== undefined)
+        ) {            
+            focusTrail(trails[activeTrail]);
+        }
+    } else if (activeTrail === null && trails.length) {
+        unFocusTrail();
     }
 
     $: if ($theme == "dark") {
@@ -99,14 +121,9 @@
     }
 
     $: if (drawing && map) {
-        map.getCanvas().style.cursor = "crosshair";
+        startDrawing();
     } else if (!drawing && map) {
-        map.getCanvas().style.cursor = "inherit";
-        addStartEndMarkers(
-            trails[activeTrail],
-            trails[activeTrail]?.id ?? activeTrail.toString(),
-            data?.at(activeTrail),
-        );
+        stopDrawing();
     }
 
     $: if (showGrid) {
@@ -133,6 +150,11 @@
         }
     }
 
+    $: if (waypoints) {
+        showWaypoints();
+        refreshElevationProfile();
+    }
+
     function getData(trails: Trail[]) {
         if (!trails.length) {
             return [];
@@ -157,27 +179,25 @@
         return r;
     }
 
-    function initMap() {
+    function initMap(mapLoaded: boolean) {        
         if (!map) {
             return;
         }
 
-        if (data[activeTrail] && showElevation) {
-            epc?.setData(
-                data[activeTrail]!,
-                trails.at(activeTrail)!.expand?.waypoints,
-            );
+        refreshElevationProfile();
+        if (showElevation) {
             epc?.showProfile();
         }
 
         trails.forEach((t, i) => {
-            const layerId = t.id ?? i.toString();
+            const layerId = t.id!;
             addTrailLayer(t, layerId, i, data[i]);
         });
 
         Object.keys(layers).forEach((layerId) => {
             const isStillVisible = trails.some((t) => t.id === layerId);
             if (!isStillVisible) {
+                removeCaretLayer();
                 removeTrailLayer(layerId);
             }
         });
@@ -186,8 +206,18 @@
             !drawing &&
             fitBounds !== "off" &&
             data.some((d) => d.bbox !== undefined)
-        ) {
-            flyToBounds(fitBounds == "animate");
+        ) {            
+            if (activeTrail !== null && mapLoaded) {
+                focusTrail(trails[activeTrail]);
+            } else {
+                flyToBounds();
+            }
+        }
+    }
+
+    export function refreshElevationProfile() {
+        if (activeTrail !== null && data[activeTrail]) {
+            epc?.setData(data[activeTrail]!, waypoints);
         }
     }
 
@@ -209,17 +239,18 @@
         return new M.LngLatBounds([minX, minY, maxX, maxY]);
     }
 
-    function flyToBounds(animate: boolean = true) {
-        const bounds = data[activeTrail]
-            ? (data[activeTrail].bbox as M.LngLatBoundsLike)
-            : getBounds();
+    function flyToBounds() {
+        const bounds =
+            activeTrail !== null && data[activeTrail]
+                ? (data[activeTrail].bbox as M.LngLatBoundsLike)
+                : getBounds();
 
-        if (!bounds) {
+        if (!bounds || !map) {
             return;
         }
 
         map!.fitBounds(bounds, {
-            animate: animate,
+            animate: fitBounds == "animate",
             padding: {
                 top: 16,
                 left: 16,
@@ -250,7 +281,8 @@
 
         map?.off("mouseenter", id, layers[id].listener.onEnter!);
         map?.off("mouseleave", id, layers[id].listener.onLeave!);
-        map?.off("click", id, layers[id].listener.onClick!);
+        map?.off("mouseup", id, layers[id].listener.onMouseUp!);
+        map?.off("mousemove", id, layers[id].listener.onMouseMove!);
 
         delete layers[id];
     }
@@ -263,9 +295,11 @@
                 source: null,
                 layer: null,
                 listener: {
-                    onClick: null,
+                    onMouseUp: null,
+                    onMouseDown: null,
                     onEnter: null,
                     onLeave: null,
+                    onMouseMove: null,
                 },
             };
         }
@@ -290,10 +324,6 @@
                     data: geojson,
                 });
                 layers[id].source = map.getSource(id) as M.GeoJSONSource;
-                // map.addSource("trail-source", {
-                //     type: "vector",
-                //     url: `http://localhost:8080/data/out.json`,
-                // });
             } catch (e) {
                 return;
             }
@@ -313,28 +343,21 @@
                 },
             });
             layers[id].layer = map.getLayer(id) as M.LineLayerSpecification;
-            layers[id].listener.onEnter = (e) => highlightTrail(id);
+            layers[id].listener.onEnter = (e) =>
+                highlightTrail(id, trails[activeTrail ?? -1]?.id == id);
             layers[id].listener.onLeave = (e) => unHighlightTrail(id);
-            layers[id].listener.onClick = (e) => focusTrail(trail, e);
+            layers[id].listener.onMouseUp = (e) => {
+                activeTrail = trails.indexOf(trail);
+            };
+            layers[id].listener.onMouseMove =
+                moveElevationMarkerToCursorPosition;
+            layers[id].listener.onMouseDown = (e) => handDragStart(e, id);
 
             map.on("mouseenter", id, layers[id].listener.onEnter);
             map.on("mouseleave", id, layers[id].listener.onLeave);
-            map.on("click", id, layers[id].listener.onClick);
-
-            // map.addLayer({
-            //     id: "trail-layer",
-            //     type: "line",
-            //     source: "trail-source",
-            //     "source-layer": "Herzogstand", // Replace with the actual layer name in the .mbtiles file
-            //     layout: {
-            //         "line-join": "round",
-            //         "line-cap": "round",
-            //     },
-            //     paint: {
-            //         "line-color": "#648ad5",
-            //         "line-width": 5,
-            //     },
-            // });
+            map.on("mouseup", id, layers[id].listener.onMouseUp);
+            map.on("mousemove", id, layers[id].listener.onMouseMove);
+            map.on("mousedown", id, layers[id].listener.onMouseDown);
         }
 
         if (!drawing) {
@@ -342,10 +365,47 @@
         }
     }
 
+    function moveElevationMarkerToCursorPosition(e: M.MapMouseEvent) {
+        elevationMarker.setLngLat(e.lngLat);
+    }
+
+    function handDragStart(e: M.MapMouseEvent, id: string) {
+        if (
+            !drawing ||
+            (e.originalEvent.target as HTMLElement | null)?.classList.contains(
+                "route-anchor",
+            )
+        ) {
+            return;
+        }
+        e.preventDefault();
+
+        const features = map?.queryRenderedFeatures(e.point, {
+            layers: [id],
+        });
+        const segmentId = features?.at(0)?.properties.segmentId;
+        if (segmentId !== null) {
+            draggingSegment = segmentId;
+        }
+
+        map?.on("mousemove", moveElevationMarkerToCursorPosition);
+        map?.once("mouseup", handleDragEnd);
+    }
+
+    function handleDragEnd(e: M.MapMouseEvent) {
+        map?.off("mousemove", moveElevationMarkerToCursorPosition);
+        dispatch("segmentDragEnd", { segment: draggingSegment, event: e });
+        draggingSegment = null;
+    }
+
     function addCaretLayer(id?: string) {
         if (!map || !id) {
             return;
         }
+        if (map.getLayer("direction-carets")) {
+            removeCaretLayer();
+        }
+        
         map.addLayer({
             id: "direction-carets",
             type: "symbol",
@@ -382,46 +442,63 @@
         map.removeLayer("direction-carets");
     }
 
-    export function highlightTrail(id: string) {
+    export function highlightTrail(
+        id: string,
+        showElevationMarker: boolean = false,
+    ) {
+        if (showElevationMarker) {
+            elevationMarker.setOpacity("1");
+        }
         map?.setPaintProperty(id, "line-width", 7);
+        hoveringTrail = true;
         // map?.setPaintProperty(id, "line-color", "#2766e3");
     }
 
-    export function unHighlightTrail(id: string) {
+    export function unHighlightTrail(id: string | undefined) {
+        if (!id || draggingSegment !== null) {
+            return;
+        }
+        elevationMarker.setOpacity("0");
+        hoveringTrail = false;
         map?.setPaintProperty(id, "line-width", 5);
         // map?.setPaintProperty(id, "line-color", "#648ad5");
     }
 
-    export function focusTrail(trail: Trail, e?: M.MapMouseEvent) {
-        const currentlyFocussedTrail = trails[activeTrail];
-        if (currentlyFocussedTrail) {
-            unFocusTrail(currentlyFocussedTrail);
-        }
-        e?.preventDefault();
-        dispatch("select", trail);
-        const index = trails.findIndex((t) => t.id == trail.id);
-        if (index == -1) {
+    function focusTrail(trail: Trail) {
+       
+        activeTrail = trails.findIndex(t => t.id == trail.id);
+        if (activeTrail < 0) {
+            activeTrail = null;
             return;
         }
-        activeTrail = index;
-
-        highlightTrail(trail.id!);
-        if (data[activeTrail] && showElevation) {
-            epc?.setData(
-                data[activeTrail]!,
-                trails.at(activeTrail)!.expand?.waypoints,
-            );
-            epc?.showProfile();
+       
+        const currentlyFocussedTrail = trails[activeTrail];
+        if (currentlyFocussedTrail && currentlyFocussedTrail != trail) {
+            unFocusTrail(currentlyFocussedTrail);
+        }
+        dispatch("select", trail);
+        
+        try {
+            highlightTrail(trail.id!);
+            refreshElevationProfile();
+            if (showElevation) {
+                epc?.showProfile();
+            }
+            showWaypoints();
+            addCaretLayer(trail.id!);
+            flyToBounds();
+        } catch (e) {
+            console.warn(e)
         }
-        showWaypoints();
-        addCaretLayer(trail.id!);
-        flyToBounds();
     }
 
-    export function unFocusTrail(trail: Trail) {
-        dispatch("unselect", trail);
-        activeTrail = -1;
-        unHighlightTrail(trail.id!);
+    function unFocusTrail(trail?: Trail) {
+        if (trail) {
+            dispatch("unselect", trail);
+            unHighlightTrail(trail.id!);
+        }
+
+        activeTrail = null;
         flyToBounds();
 
         if (showElevation) {
@@ -431,12 +508,38 @@
         removeCaretLayer();
     }
 
+    function startDrawing() {
+        if (!map) {
+            return;
+        }
+        activeTrail ??= 0;
+        map.getCanvas().style.cursor = "crosshair";
+        if (trails[activeTrail]) {
+            removeStartEndMarkers(trails[activeTrail].id);
+        }
+    }
+
+    function stopDrawing() {
+        if (!map) {
+            return;
+        }
+        map.getCanvas().style.cursor = "inherit";
+
+        if (activeTrail !== null && trails[activeTrail]) {
+            addStartEndMarkers(
+                trails[activeTrail],
+                trails[activeTrail].id,
+                data?.at(activeTrail),
+            );
+        }
+    }
+
     function addStartEndMarkers(
         trail: Trail,
-        id: string,
+        id: string | undefined,
         geojson: GeoJSON | null | undefined,
     ) {
-        if (!map || !trail) {
+        if (!map || !trail || !id) {
             return;
         }
         createEmptyLayer(id);
@@ -470,12 +573,22 @@
             { icon: "fa fa-flag-checkered" },
             {},
         );
-        layers[id].endMarker.setLngLat(startEndPoint[1] as M.LngLatLike);
+        layers[id].endMarker.setLngLat(
+            startEndPoint[startEndPoint.length - 1] as M.LngLatLike,
+        );
         if (map.getZoom() > minZoom) {
             layers[id].endMarker.addTo(map);
         }
     }
 
+    function removeStartEndMarkers(id: string | undefined) {
+        if (!id) {
+            return;
+        }
+        layers[id].startMarker?.remove();
+        layers[id].endMarker?.remove();
+    }
+
     export function togglePopup(id: string, currentState?: boolean) {
         if (
             currentState !== undefined &&
@@ -490,7 +603,9 @@
         if (!map) {
             return;
         }
-        for (const waypoint of trails[activeTrail]?.expand?.waypoints ?? []) {
+
+        hideWaypoints();
+        for (const waypoint of waypoints) {
             const marker = createMarkerFromWaypoint(waypoint, onMarkerDragEnd);
             marker.addTo(map);
             markers.push(marker);
@@ -570,7 +685,7 @@
         };
         map = new M.Map(finalMapOptions);
 
-        const elevationMarker = new FontawesomeMarker(
+        elevationMarker = new FontawesomeMarker(
             {
                 id: "elevation-marker",
                 icon: "fa-regular fa-circle",
@@ -655,10 +770,6 @@
         }
 
         map.on("styledata", () => {
-            trails.forEach((t, i) => {
-                addTrailLayer(t, t.id ?? i.toString(), i, data?.at(i));
-            });
-
             if (showTerrain) {
                 try {
                     if (
@@ -695,7 +806,7 @@
         map.on("zoom", (e) => {
             const zoom = e.target.getZoom();
             Object.values(layers).forEach((l) => {
-                if (zoom > minZoom && map) {
+                if (zoom > minZoom && map && !drawing) {
                     l.endMarker?.addTo(map);
                 } else {
                     l.endMarker?.remove();
@@ -706,11 +817,14 @@
         });
 
         map.on("click", (e) => {
+            if (hoveringTrail && drawing) {
+                return;
+            }
             dispatch("click", e);
         });
 
         map.on("load", () => {
-            addCaretLayer(trails[activeTrail]?.id);
+            initMap(true);
             dispatch("init", map);
         });
 
diff --git a/web/src/lib/components/trail/trail_info_panel.svelte b/web/src/lib/components/trail/trail_info_panel.svelte
index 21e49711..36e5e18f 100644
--- a/web/src/lib/components/trail/trail_info_panel.svelte
+++ b/web/src/lib/components/trail/trail_info_panel.svelte
@@ -429,6 +429,8 @@
                 <div class="relative h-72 rounded-xl overflow-hidden">
                     <MapWithElevationMaplibre
                         trails={[trail]}
+                        activeTrail={0}
+                        waypoints={trail.expand?.waypoints}
                         showElevation={false}
                         showStyleSwitcher={false}
                         showFullscreen={true}
diff --git a/web/src/lib/stores/valhalla_store.ts b/web/src/lib/stores/valhalla_store.ts
index 834eb6e4..dab6c8b5 100644
--- a/web/src/lib/stores/valhalla_store.ts
+++ b/web/src/lib/stores/valhalla_store.ts
@@ -68,13 +68,14 @@ export async function calculateRouteBetween(startLat: number, startLon: number,
     return waypoints
 }
 
-export async function appendToRoute(waypoints: Waypoint[]) {
-    const segment = new TrackSegment({ trkpt: [] })
+export async function insertIntoRoute(waypoints: Waypoint[], index?: number) {
+    const segment = new TrackSegment({ trkpt: waypoints })
 
-    for (const wpt of waypoints) {
-        segment.trkpt!.push(wpt)
+    if (index) {
+        route.trk?.at(0)?.trkseg?.splice(index, 0, segment);
+    } else {
+        route.trk?.at(0)?.trkseg?.push(segment);
     }
-    route.trk?.at(0)?.trkseg?.push(segment);
 }
 
 export async function editRoute(index: number, waypoints: Waypoint[]) {
diff --git a/web/src/lib/util/geojson_util.ts b/web/src/lib/util/geojson_util.ts
index f4953f17..7d458f99 100644
--- a/web/src/lib/util/geojson_util.ts
+++ b/web/src/lib/util/geojson_util.ts
@@ -24,13 +24,13 @@ export function bbox(
             result[3] = coord[1];
         }
     });
-
+    
     return result;
 }
 
 export function findStartAndEndPoints(geojson: GeoJsonObject): Position[] {
     const startEndPoints: Position[] = [];
-    
+
     // Check if it's a FeatureCollection
     if ((geojson as any).features) {
         (geojson as any).features.forEach((feature: any) => {
@@ -50,6 +50,43 @@ export function findStartAndEndPoints(geojson: GeoJsonObject): Position[] {
     return startEndPoints;
 }
 
+export function splitMultiLineStringToLineStrings(geojson: GeoJsonObject): FeatureCollection {
+    const features: Feature[] = [];
+
+    (geojson as any).features.forEach((feature: any) => {
+        if (feature.geometry.type === "MultiLineString") {
+            feature.geometry.coordinates.forEach((lineString: any, lineIndex: number) => {
+                features.push({
+                    type: "Feature",
+                    geometry: {
+                        type: "LineString",
+                        coordinates: lineString,
+                    },
+                    properties: {
+                        ...feature.properties,
+                        featureId: features.length,
+                        segmentId: lineIndex,
+                    },
+                });
+            });
+        } else if (feature.geometry.type === "LineString") {
+            features.push({
+                ...feature,
+                properties: {
+                    ...feature.properties,
+                    featureId: features.length,
+                    segmentId: 0
+                },
+            });
+        }
+    });
+
+    return {
+        type: "FeatureCollection",
+        features: features,
+    };
+}
+
 function extractStartAndEndPointsFromGeometry(geometry: any, startEndPoints: Position[]) {
     if (geometry.type === "LineString") {
         const coords = geometry.coordinates as number[][];
diff --git a/web/src/lib/util/gpx_util.ts b/web/src/lib/util/gpx_util.ts
index 9c9220ed..9ccd03e1 100644
--- a/web/src/lib/util/gpx_util.ts
+++ b/web/src/lib/util/gpx_util.ts
@@ -13,7 +13,7 @@ import GPXWaypoint from "$lib/models/gpx/waypoint";
 import EasyFit from "$lib/vendor/easy-fit/easy-fit";
 import type { GeoJSON, Feature, FeatureCollection, GeoJsonProperties, Position } from 'geojson';
 import * as xmldom from 'xmldom';
-import { bbox } from "./geojson_util";
+import { bbox, splitMultiLineStringToLineStrings } from "./geojson_util";
 
 
 export async function gpx2trail(gpxString: string, fallbackName?: string) {
@@ -130,7 +130,7 @@ export async function fromFile(file: File | Blob) {
         });
     }
 
-    return {gpxData, gpxFile};
+    return { gpxData, gpxFile };
 }
 
 export function fromKML(kmlData: string) {
@@ -317,9 +317,10 @@ export function isFITFile(buffer: ArrayBuffer) {
 
 export function toGeoJson(gpxData: string) {
     const parser = browser ? new DOMParser() : new xmldom.DOMParser();
-    const geojson = gpx(
+    let geojson = gpx(
         parser.parseFromString(gpxData, "text/xml"),
     ) as GeoJSON;
+    geojson = splitMultiLineStringToLineStrings(geojson);
     geojson.bbox = bbox(geojson)
     return geojson
 }
\ No newline at end of file
diff --git a/web/src/lib/util/maplibre_util.ts b/web/src/lib/util/maplibre_util.ts
index 567fde5d..1fa54f25 100644
--- a/web/src/lib/util/maplibre_util.ts
+++ b/web/src/lib/util/maplibre_util.ts
@@ -1,14 +1,15 @@
-import type { Trail } from "$lib/models/trail";
-import type { Waypoint } from "$lib/models/waypoint";
-import M from "maplibre-gl";
-import { getFileURL } from "./file_util";
-import { formatDistance, formatElevation, formatTimeHHMM } from "./format_util";
-import { get } from "svelte/store";
-import { _ } from "svelte-i18n";
-import { haversineDistance } from "$lib/models/gpx/utils";
 import emptyStateTrailDark from "$lib/assets/svgs/empty_states/empty_state_trail_dark.svg";
 import emptyStateTrailLight from "$lib/assets/svgs/empty_states/empty_state_trail_light.svg";
+import { haversineDistance } from "$lib/models/gpx/utils";
+import type { Trail } from "$lib/models/trail";
+import type { Waypoint } from "$lib/models/waypoint";
 import { theme } from "$lib/stores/theme_store";
+import M from "maplibre-gl";
+import { _ } from "svelte-i18n";
+import { get } from "svelte/store";
+import { getFileURL } from "./file_util";
+import { formatDistance, formatElevation, formatTimeHHMM } from "./format_util";
+import { icons } from "./icon_util";
 
 export class FontawesomeMarker extends M.Marker {
     constructor(options: { icon: string, fontSize?: string, width?: number, backgroundColor?: string, fontColor?: string, id?: string }, markerOptions?: M.MarkerOptions) {
@@ -34,13 +35,32 @@ export function createMarkerFromWaypoint(waypoint: Waypoint, onDragEnd?: (marker
         color: "#6b7280"
 
     })
-    const popup = new M.Popup({ offset: 25, closeButton: false }).setHTML(
-        "<b>" +
-        waypoint.name +
-        "</b>" +
-        (waypoint.description && waypoint.description.length > 0
-            ? "<br>" + waypoint.description
-            : ""),
+
+    const content = document.createElement("div");
+
+    const spanElement = document.createElement("span");
+    const iconElement = document.createElement("i");
+    const iconName = icons.includes(waypoint.icon ?? "") ? waypoint.icon : "circle";
+    iconElement.classList.add("fa", `fa-${iconName}`)
+    spanElement.appendChild(iconElement);
+
+    const nameElement = document.createElement("b");
+    nameElement.textContent = waypoint.name ?? "-";
+    if(waypoint.name?.length) {
+        nameElement.classList.add("ml-2")
+    }
+    spanElement.appendChild(nameElement);
+    content.appendChild(spanElement);
+
+    if (waypoint.description && waypoint.description.length > 0) {
+        const descriptionElement = document.createElement("p");
+        descriptionElement.textContent = waypoint.description;
+        content.appendChild(descriptionElement);
+    }
+
+
+    const popup = new M.Popup({ offset: 25, closeButton: false }).setDOMContent(
+        content
     );
     marker
         .setLngLat([waypoint.lon, waypoint.lat])
@@ -53,10 +73,11 @@ export function createMarkerFromWaypoint(waypoint: Waypoint, onDragEnd?: (marker
     return marker;
 }
 
-export function createAnchorMarker(lat: number, lon: number, index: number, onDeleteClick: () => void, onDragEnd: (event: M.Marker) => void): FontawesomeMarker {
+export function createAnchorMarker(lat: number, lon: number, index: number,
+    onDeleteClick: () => void, onDragStart: (event: Event) => void, onDragEnd: (event: Event) => void): FontawesomeMarker {
 
     const anchorElement = document.createElement("span")
-    anchorElement.className = "cursor-pointer rounded-full w-6 h-6 border border-black text-center bg-background-inverse text-content-inverse"
+    anchorElement.className = "route-anchor cursor-pointer rounded-full w-6 h-6 border border-black text-center bg-background-inverse text-content-inverse"
     anchorElement.textContent = "" + index
     const marker = new M.Marker(
         {
@@ -69,12 +90,14 @@ export function createAnchorMarker(lat: number, lon: number, index: number, onDe
     const deleteButton = document.createElement("button");
     deleteButton.className = "fa fa-trash text-red-500 rounded-full aspect-square h-8 text-lg";
     deleteButton.addEventListener("click", onDeleteClick)
-    const popup = new M.Popup({})
+    const popup = new M.Popup({ closeButton: false })
     popup.setDOMContent(deleteButton)
     marker.setPopup(popup);
 
+    marker.on("dragstart", onDragStart);
     marker.on("dragend", onDragEnd);
     marker.getElement().addEventListener("click", (e) => {
+        e.preventDefault()
         e.stopPropagation();
         marker.togglePopup();
     })
@@ -86,8 +109,8 @@ export function createPopupFromTrail(trail: Trail) {
     const thumbnail = trail.photos.length
         ? getFileURL(trail, trail.photos[trail.thumbnail ?? 0])
         : get(theme) === "light"
-          ? emptyStateTrailLight
-          : emptyStateTrailDark;
+            ? emptyStateTrailLight
+            : emptyStateTrailDark;
     const popup = new M.Popup({ maxWidth: "320px" });
     popup.setHTML(
         `<a href="/map/trail/${trail.id}" data-sveltekit-preload-data="off">
diff --git a/web/src/lib/vendor/maplibre-elevation-profile/elevationprofile.ts b/web/src/lib/vendor/maplibre-elevation-profile/elevationprofile.ts
index 84d9ca8c..a003feaf 100644
--- a/web/src/lib/vendor/maplibre-elevation-profile/elevationprofile.ts
+++ b/web/src/lib/vendor/maplibre-elevation-profile/elevationprofile.ts
@@ -696,7 +696,7 @@ export class ElevationProfile {
                             wpDiv.style.top = `8px`; // Position horizontally
 
                             // Add custom HTML content (e.g., icon + label)
-                            wpDiv.innerHTML = `<div class="tooltip" data-title="${this.waypoints[index].name ?? "?"}"><i class="fa fa-${this.waypoints.at(index)?.icon ?? 'circle'}"></i></div>`;
+                            wpDiv.innerHTML = `<div class="tooltip" data-title="${this.waypoints[index]?.name ?? "?"}"><i class="fa fa-${this.waypoints.at(index)?.icon ?? 'circle'}"></i></div>`;
 
                             waypointContainer.appendChild(wpDiv); // Add to container
                         });
@@ -864,7 +864,7 @@ export class ElevationProfile {
     async setData(data: GeoJsonObject, waypoints?: Waypoint[]) {
         // Concatenates the positions that may come from multiple LineStrings or MultiLineString
         const { positions, times } = geoJsonObjectToPositionsAndTimes(data);
-
+    
         this.times = times;
 
         this.elevatedPositions = smoothElevations(positions, Math.ceil(positions.length / 100));
@@ -896,7 +896,7 @@ export class ElevationProfile {
         this.cumulatedDPlus = [];
         this.grade = [];
         this.waypoints = waypoints ?? [];
-        // this.waypointPositions = [];
+        this.waypointPositions = [];
 
         let cumulatedDPlus = 0;
         let cumulatedTime = 0;
diff --git a/web/src/routes/lists/+page.svelte b/web/src/routes/lists/+page.svelte
index 57195973..b02732dd 100644
--- a/web/src/routes/lists/+page.svelte
+++ b/web/src/routes/lists/+page.svelte
@@ -53,8 +53,6 @@
         : null;
     let selectedTrail: Trail | null = null;
 
-    let activeTrailIndex: number = -1;
-
     let loading: boolean = false;
     let loadingNextPage: boolean = false;
     let filterExpanded: boolean = false;
@@ -63,6 +61,12 @@
 
     let userQuery = "";
 
+    $: selectedTrailIndex = selectedTrail
+        ? (selectedList?.expand?.trails?.indexOf(selectedTrail) ?? null)
+        : null;
+
+    $: selectedTrailWaypoints = selectedTrail?.expand?.waypoints;
+
     onMount(() => {
         if ($page.url.searchParams.get("list") && selectedList) {
             setCurrentList(selectedList);
@@ -121,7 +125,6 @@
             loadAllListsOnNextBack = false;
         }
         if (selectedTrail) {
-            mapWithElevation.unFocusTrail(selectedTrail);
             selectedTrail = null;
         } else if (selectedList) {
             selectedList = null;
@@ -135,7 +138,6 @@
 
     function selectTrail(trail: Trail) {
         selectedTrail = trail;
-        mapWithElevation.focusTrail(trail);
         window.scrollTo({ top: 0 });
     }
 
@@ -353,14 +355,15 @@
     <div id="trail-map" class:hidden={!showMap}>
         <MapWithElevationMaplibre
             trails={selectedList?.expand?.trails ?? []}
+            waypoints={selectedTrailWaypoints}
             bind:map
             bind:this={mapWithElevation}
             bind:markers
+            activeTrail={selectedTrailIndex}
             fitBounds="animate"
             on:select={(e) => {
                 selectedTrail = e.detail;
             }}
-            bind:activeTrail={activeTrailIndex}
             showInfoPopup={true}
             showTerrain={true}
         ></MapWithElevationMaplibre>
diff --git a/web/src/routes/map/trail/[id]/+page.svelte b/web/src/routes/map/trail/[id]/+page.svelte
index 5a2901c8..2307c678 100644
--- a/web/src/routes/map/trail/[id]/+page.svelte
+++ b/web/src/routes/map/trail/[id]/+page.svelte
@@ -19,6 +19,8 @@
     <div id="trail-details" class="sticky top-[62px]">
         <MapWithElevationMaplibre
             trails={[$trail]}
+            waypoints={$trail.expand?.waypoints}
+            activeTrail={0}
             bind:markers
             showTerrain={true}
         ></MapWithElevationMaplibre>
diff --git a/web/src/routes/map/trail/[id]/print/+page.svelte b/web/src/routes/map/trail/[id]/print/+page.svelte
index b4af46da..49f6bb78 100644
--- a/web/src/routes/map/trail/[id]/print/+page.svelte
+++ b/web/src/routes/map/trail/[id]/print/+page.svelte
@@ -516,6 +516,8 @@
             <div class="basis-full">
                 <MapWithElevationMaplibre
                     trails={[$trail]}
+                    waypoints={$trail.expand?.waypoints}
+                    activeTrail={0}
                     on:zoom={(e) => updateScale(e.detail)}
                     bind:map
                     {showGrid}
diff --git a/web/src/routes/settings/export/+page.svelte b/web/src/routes/settings/export/+page.svelte
index 08762792..a829cfd9 100644
--- a/web/src/routes/settings/export/+page.svelte
+++ b/web/src/routes/settings/export/+page.svelte
@@ -80,7 +80,7 @@
             const file = files[i];
             try {
                 uploadProgress.set((progress += 100 / (files.length * 2)));
-                await trails_upload(file);
+                // await trails_upload(file);
             } catch (e) {
                 errorsThrown += 1;
                 show_toast({
@@ -98,14 +98,7 @@
             uploading = false;
             jsConfetti.addConfetti({
                 confettiRadius: 4,
-                confettiColors: [
-                    "#F4C842",
-                    "#3C9D9B",
-                    "#D1C4E9",
-                    "#FF6F61",
-                    "#A9D9C1",
-                    "#F2F2F2",
-                ],
+                emojis: ['🍃', '🍁'],
             });
         }, 500);
 
diff --git a/web/src/routes/trail/edit/[id]/+page.svelte b/web/src/routes/trail/edit/[id]/+page.svelte
index 8350a0fe..5a01753b 100644
--- a/web/src/routes/trail/edit/[id]/+page.svelte
+++ b/web/src/routes/trail/edit/[id]/+page.svelte
@@ -37,11 +37,11 @@
     } from "$lib/stores/trail_store.js";
     import {
         anchors,
-        appendToRoute,
         calculateRouteBetween,
         clearRoute,
         deleteFromRoute,
         editRoute,
+        insertIntoRoute,
         route,
         setRoute,
     } from "$lib/stores/valhalla_store";
@@ -54,6 +54,9 @@
     } from "$lib/util/format_util";
     import { fromFile, gpx2trail } from "$lib/util/gpx_util";
 
+    import emptyStateTrailDark from "$lib/assets/svgs/empty_states/empty_state_trail_dark.svg";
+    import emptyStateTrailLight from "$lib/assets/svgs/empty_states/empty_state_trail_light.svg";
+    import { theme } from "$lib/stores/theme_store.js";
     import {
         createAnchorMarker,
         createMarkerFromWaypoint,
@@ -67,9 +70,6 @@
     import { backInOut } from "svelte/easing";
     import { scale } from "svelte/transition";
     import { z } from "zod";
-    import emptyStateTrailDark from "$lib/assets/svgs/empty_states/empty_state_trail_dark.svg";
-    import emptyStateTrailLight from "$lib/assets/svgs/empty_states/empty_state_trail_light.svg";
-    import { theme } from "$lib/stores/theme_store.js";
 
     export let data;
 
@@ -94,6 +94,7 @@
 
     let drawingActive = false;
     let overwriteGPX = false;
+    let draggingMarker = false;
 
     const ClientTrailCreateSchema = TrailCreateSchema.extend({
         expand: z
@@ -171,7 +172,7 @@
                         ?.trkpt?.at(0)?.$.lon;
                 }
 
-                if (!form.id) {
+                if ($page.params.id === "new") {
                     const createdTrail = await trails_create(
                         form as Trail,
                         photoFiles,
@@ -213,6 +214,19 @@
         if ($formData.expand!.gpx_data) {
             const gpx = await GPX.parse($formData.expand!.gpx_data);
             if (!(gpx instanceof Error)) {
+                if (gpx.rte && !gpx.trk) {
+                    gpx.trk = [
+                        {
+                            trkseg: [
+                                {
+                                    trkpt: gpx.rte?.at(0)?.rtept,
+                                },
+                            ],
+                        },
+                    ];
+                    gpx.rte = undefined;
+                }
+
                 setRoute(gpx);
                 initRouteAnchors(gpx);
             }
@@ -245,7 +259,7 @@
             const prevId = $formData.id;
             const parseResult = await gpx2trail(gpxData, selectedFile.name);
             setFields(parseResult.trail);
-            $formData.id = prevId;
+            $formData.id = prevId ?? cryptoRandomString({ length: 15 });
             $formData.expand!.gpx_data = gpxData;
             setFields(
                 "category",
@@ -273,12 +287,20 @@
 
             $formData.expand!.summit_logs.push(log);
 
+            if (parseResult.gpx.rte?.length && !parseResult.gpx.trk) {
+                parseResult.gpx.trk = [
+                    {
+                        trkseg: [
+                            {
+                                trkpt: parseResult.gpx.rte?.at(0)?.rtept,
+                            },
+                        ],
+                    },
+                ];
+                parseResult.gpx.rte = undefined;
+            }
             setRoute(parseResult.gpx);
             initRouteAnchors(parseResult.gpx);
-
-            for (const waypoint of $formData.expand!.waypoints) {
-                saveWaypoint(waypoint);
-            }
         } catch (e) {
             console.error(e);
 
@@ -329,12 +351,18 @@
             const points = segment.trkpt ?? [];
 
             if (points.length > 0) {
-                addAnchor(points[0].$.lat!, points[0].$.lon!, false);
+                addAnchor(
+                    points[0].$.lat!,
+                    points[0].$.lon!,
+                    anchors.length,
+                    false,
+                );
             }
             if (i == segments.length - 1) {
                 addAnchor(
                     points[points.length - 1].$.lat!,
                     points[points.length - 1].$.lon!,
+                    anchors.length,
                     false,
                 );
             }
@@ -369,6 +397,7 @@
         $formData.expand!.waypoints.splice(index, 1);
         $formData.waypoints.splice(index, 1);
         $formData.expand!.waypoints = $formData.expand!.waypoints;
+        // updateTrailOnMap();
     }
 
     function saveWaypoint(savedWaypoint: Waypoint) {
@@ -377,7 +406,6 @@
         );
 
         if (editedWaypointIndex >= 0) {
-            $formData.expand!.waypoints[editedWaypointIndex].marker?.remove();
             $formData.expand!.waypoints[editedWaypointIndex] = savedWaypoint;
         } else {
             savedWaypoint.id = cryptoRandomString({ length: 15 });
@@ -385,11 +413,9 @@
                 ...$formData.expand!.waypoints,
                 savedWaypoint,
             ];
-        }
-        const marker = createMarkerFromWaypoint(savedWaypoint, moveMarker);
 
-        marker.addTo(map);
-        savedWaypoint.marker = marker;
+            // updateTrailOnMap();
+        }
     }
 
     function moveMarker(marker: M.Marker, wpId?: string) {
@@ -405,6 +431,7 @@
         editableWaypoint.lat = position.lat;
         editableWaypoint.lon = position.lng;
         $formData.expand!.waypoints = [...$formData.expand!.waypoints];
+        // updateTrailOnMap();
     }
 
     function beforeSummitLogModalOpen() {
@@ -493,7 +520,7 @@
         }
         const anchorCount = anchors.length;
         if (anchorCount == 0) {
-            addAnchor(e.lngLat.lat, e.lngLat.lng);
+            addAnchor(e.lngLat.lat, e.lngLat.lng, anchors.length);
         } else {
             const previousAnchor = anchors[anchorCount - 1];
             try {
@@ -505,8 +532,8 @@
                     selectedModeOfTransport,
                     autoRouting,
                 );
-                appendToRoute(routeWaypoints);
-                addAnchor(e.lngLat.lat, e.lngLat.lng);
+                insertIntoRoute(routeWaypoints);
+                addAnchor(e.lngLat.lat, e.lngLat.lng, anchors.length);
                 updateTrailWithRouteData();
             } catch (e) {
                 console.error(e);
@@ -519,7 +546,12 @@
         }
     }
 
-    function addAnchor(lat: number, lon: number, addtoMap: boolean = true) {
+    function addAnchor(
+        lat: number,
+        lon: number,
+        index: number,
+        addtoMap: boolean = true,
+    ) {
         const anchor: ValhallaAnchor = {
             id: cryptoRandomString({ length: 15 }),
             lat: lat,
@@ -528,10 +560,13 @@
         const marker = createAnchorMarker(
             lat,
             lon,
-            anchors.length + 1,
+            index + 1,
             () => {
                 removeAnchor(anchors.findIndex((a) => a.id == anchor.id));
             },
+            (e) => {
+                draggingMarker = true;
+            },
             (_) => {
                 if (!drawingActive) {
                     return;
@@ -540,13 +575,16 @@
                 anchor.lat = position.lat;
                 anchor.lon = position.lng;
                 recalculateRoute(anchors.findIndex((a) => a.id == anchor.id));
+                draggingMarker = false;
             },
         );
         if (addtoMap) {
             marker.addTo(map);
         }
         anchor.marker = marker;
-        anchors.push(anchor);
+        anchors.splice(index, 0, anchor);
+
+        return anchor;
     }
 
     function removeAnchor(anchorIndex: number) {
@@ -583,21 +621,75 @@
         }
         let nextRouteSegment;
         let previousRouteSegment;
-        if (anchorIndex < anchors.length - 1) {
-            const nextAnchor = anchors[anchorIndex + 1];
+        try {
+            if (anchorIndex < anchors.length - 1) {
+                const nextAnchor = anchors[anchorIndex + 1];
 
-            nextRouteSegment = await calculateRouteBetween(
-                anchor.lat,
-                anchor.lon,
-                nextAnchor.lat,
-                nextAnchor.lon,
-                selectedModeOfTransport,
-                autoRouting,
-            );
+                nextRouteSegment = await calculateRouteBetween(
+                    anchor.lat,
+                    anchor.lon,
+                    nextAnchor.lat,
+                    nextAnchor.lon,
+                    selectedModeOfTransport,
+                    autoRouting,
+                );
+            }
+            if (anchorIndex > 0) {
+                const previousAnchor = anchors[anchorIndex - 1];
+                previousRouteSegment = await calculateRouteBetween(
+                    previousAnchor.lat,
+                    previousAnchor.lon,
+                    anchor.lat,
+                    anchor.lon,
+                    selectedModeOfTransport,
+                    autoRouting,
+                );
+            }
+
+            if (nextRouteSegment) {
+                editRoute(anchorIndex, nextRouteSegment);
+            }
+            if (previousRouteSegment) {
+                editRoute(anchorIndex - 1, previousRouteSegment);
+            }
+
+            updateTrailWithRouteData();
+        } catch (e) {
+            console.error(e);
+            show_toast({
+                text: "Error calculating route",
+                icon: "close",
+                type: "error",
+            });
         }
-        if (anchorIndex > 0) {
-            const previousAnchor = anchors[anchorIndex - 1];
-            previousRouteSegment = await calculateRouteBetween(
+    }
+
+    async function handleSegmentDragEnd(data: {
+        segment: number;
+        event: M.MapMouseEvent;
+    }) {
+        if (draggingMarker) {
+            return;
+        }
+        const anchor = addAnchor(
+            data.event.lngLat.lat,
+            data.event.lngLat.lng,
+            data.segment + 1,
+        );
+        for (let i = data.segment + 2; i < anchors.length; i++) {
+            const anchor = anchors[i];
+            const markerIcon = anchor.marker?.getElement();
+            if (markerIcon) {
+                const markerText = markerIcon.textContent ?? "0";
+                const markerIndex = parseInt(markerText);
+                markerIcon.textContent = markerIndex + 1 + "";
+            }
+        }
+        const previousAnchor = anchors[data.segment];
+        const nextAnchor = anchors[data.segment + 2];
+
+        try {
+            const previousRouteSegment = await calculateRouteBetween(
                 previousAnchor.lat,
                 previousAnchor.lon,
                 anchor.lat,
@@ -605,14 +697,26 @@
                 selectedModeOfTransport,
                 autoRouting,
             );
+            const nextRouteSegment = await calculateRouteBetween(
+                anchor.lat,
+                anchor.lon,
+                nextAnchor.lat,
+                nextAnchor.lon,
+                selectedModeOfTransport,
+                autoRouting,
+            );
+
+            editRoute(data.segment, previousRouteSegment);
+            insertIntoRoute(nextRouteSegment, data.segment + 1);
+            updateTrailWithRouteData();
+        } catch (e) {
+            console.error(e);
+            show_toast({
+                text: "Error calculating route",
+                icon: "close",
+                type: "error",
+            });
         }
-        if (nextRouteSegment) {
-            editRoute(anchorIndex, nextRouteSegment);
-        }
-        if (previousRouteSegment) {
-            editRoute(anchorIndex - 1, previousRouteSegment);
-        }
-        updateTrailWithRouteData();
     }
 
     function updateTrailWithRouteData() {
@@ -623,10 +727,13 @@
         $formData.elevation_gain = totals.elevationGain;
         $formData.elevation_loss = totals.elevationLoss;
         $formData.expand!.gpx_data = route.toString();
+        if (!$formData.id) {
+            $formData.id = cryptoRandomString({ length: 15 });
+        }
     }
 
     function updateTrailOnMap() {
-        mapTrail = [{ ...($formData as Trail) }];
+        mapTrail = [$formData as Trail];
     }
 </script>
 
@@ -902,11 +1009,14 @@
         <div id="trail-map">
             <MapWithElevationMaplibre
                 trails={mapTrail}
+                waypoints={$formData.expand?.waypoints}
                 drawing={drawingActive}
                 showTerrain={true}
                 onMarkerDragEnd={moveMarker}
+                activeTrail={0}
                 bind:map
                 on:click={(e) => handleMapClick(e.detail)}
+                on:segmentDragEnd={(e) => handleSegmentDragEnd(e.detail)}
             ></MapWithElevationMaplibre>
         </div>
     </div>