adds height to route drawing

web/src/routes/api/v1/valhalla/height/+server.ts

@@ -0,0 +1,20 @@
+import { env } from '$env/dynamic/public';
+import { error, json, type NumericRange, type RequestEvent } from "@sveltejs/kit";
+
+
+export async function POST(event: RequestEvent) {
+    const data = await event.request.json()
+    if (!env.PUBLIC_VALHALLA_URL) {
+        return error(400, "PUBLIC_VALHALLA_URL not set")
+    }
+    try {
+        const r = await event.fetch(env.PUBLIC_VALHALLA_URL + '/height', { method: "POST", body: JSON.stringify(data) });        
+        const response = await r.json();
+        if (!r.ok) {
+            throw error(r.status as NumericRange<400,500>, response);
+        }
+        return json(response);
+    } catch (e: any) {
+        throw error(e.status || 500, e)
+    }
+}

web/src/routes/trail/edit/[id]/+page.svelte

@@ -182,9 +182,8 @@
             return;
         }
 
-        $form.expand.waypoints = [];
-        $form.waypoints = [];
-
+        clearWaypoints();
+        clearRoute();
         var reader = new FileReader();
 
         reader.readAsText(selectedFile);
@@ -205,6 +204,10 @@
             try {
                 $form = await gpx2trail(gpxData);
                 $form.expand.gpx_data = gpxData;
+
+                for (const waypoint of $form.expand.waypoints) {
+                    saveWaypoint(waypoint);
+                }
             } catch (e) {
                 console.log(e);
 
@@ -234,6 +237,14 @@
         };
     }
 
+    function clearWaypoints() {
+        for (const waypoint of $form.expand.waypoints) {
+            waypoint.marker?.remove();
+        }
+        $form.expand.waypoints = [];
+        $form.waypoints = [];
+    }
+
     function openMarkerPopup(waypoint: Waypoint) {
         waypoint.marker?.openPopup();
     }
@@ -266,13 +277,13 @@
         if (drawingActive) {
             if (index == 0) {
                 deleteFromRoute(index);
-                $form.expand.gpx_data = route.toString();
+                updateTrailWithRouteData();
                 const nextWaypoint = $form.expand.waypoints[index];
                 nextWaypoint.icon = "circle-half-stroke";
                 saveWaypoint(nextWaypoint);
             } else if (index == $form.expand.waypoints.length) {
                 deleteFromRoute(index - 1);
-                $form.expand.gpx_data = route.toString();
+                updateTrailWithRouteData();
 
                 if ($form.expand.waypoints.length > 1) {
                     const previousWaypoint = $form.expand.waypoints[index - 1];
@@ -296,7 +307,6 @@
             $form.expand.waypoints[editedWaypointIndex] = savedWaypoint;
         } else {
             savedWaypoint.id = cryptoRandomString({ length: 15 });
-
             $form.expand.waypoints = [...$form.expand.waypoints, savedWaypoint];
         }
         const marker = createMarkerFromWaypoint(L, savedWaypoint, (event) => {
@@ -374,9 +384,11 @@
     }
 
     function startDrawing() {
-        $form.expand.gpx_data = "";
-        clearRoute();
         drawingActive = true;
+        if (!route.trk?.at(0)?.trkseg?.at(0)?.trkpt?.length) {
+            $form.expand.gpx_data = "";
+            clearWaypoints();
+        }
     }
 
     function stopDrawing() {
@@ -410,7 +422,7 @@
                     previousWaypoint.icon = "circle";
                     saveWaypoint(previousWaypoint);
                 }
-                $form.expand.gpx_data = route.toString();
+                updateTrailWithRouteData();
             } catch (e) {
                 console.error(e);
                 show_toast({
@@ -451,6 +463,14 @@
         if (previousWaypoints) {
             editRoute(waypointIndex - 1, previousWaypoints);
         }
+        updateTrailWithRouteData();
+    }
+
+    function updateTrailWithRouteData() {
+        const totals = route.getTotals();
+        $form.distance = totals.distance;
+        $form.duration = totals.duration;
+        $form.elevation_gain = totals.elevationGain;
         $form.expand.gpx_data = route.toString();
     }
 </script>
@@ -475,12 +495,19 @@
             on:click={openFileBrowser}>{$_("upload-file")}</Button
         >
         {#if PUBLIC_VALHALLA_URL}
+            <div class="flex gap-4 items-center w-full">
+                <hr class="basis-full border-input-border" />
+                <span class="text-gray-500 uppercase">{$_("or")}</span>
+                <hr class="basis-full border-input-border" />
+            </div>
             <button
                 class="btn-primary"
                 type="button"
                 on:click={drawingActive ? stopDrawing : startDrawing}
             >
-                {drawingActive ? $_("stop-drawing") : $_("draw-on-map")}</button
+                {drawingActive
+                    ? $_("stop-drawing")
+                    : $_("draw-a-route")}</button
             >
         {/if}
         <input
@@ -693,10 +720,11 @@
         trail={$form}
         crosshair={drawingActive}
         options={{
-            hotline: false,
+            hotline: true,
             autofitBounds: false,
             trkStart: false,
             trkEnd: false,
+            speed: false,
         }}
         bind:map
         on:click={(e) => handleMapClick(e.detail)}