adds modes of transportation to routing

web/src/lib/components/base/select.svelte

@@ -12,13 +12,13 @@
     export let value: any;
     export let items: SelectItem[] = [];
     export let label: string = "";
+    export let disabled: boolean = false;
 
     const dispatch = createEventDispatcher();
 
     function onChange(target: any) {
-        dispatch("change", target?.value)
+        dispatch("change", target?.value);
     }
-
 </script>
 
 <div>
@@ -30,6 +30,8 @@
     <select
         {name}
         class="bg-input-background h-10 w-full px-4 border-r-8 border-transparent outline outline-1 outline-input-border rounded-md focus:outline-input-border-focus transition-colors"
+        class:text-gray-500={disabled}
+        {disabled}
         bind:value
         on:change={(e) => onChange(e.target)}
     >

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

@@ -139,7 +139,7 @@
     });
 </script>
 
-<div id="map-container" class="flex flex-col">
+<div id="map-container" class="flex flex-col h-full">
     <div
         id="map"
         class="rounded-xl z-0 basis-full"

web/src/lib/stores/valhalla_store.ts

@@ -3,6 +3,7 @@ import type Track from "$lib/models/gpx/track";
 import TrackSegment from "$lib/models/gpx/track-segment";
 import Waypoint from "$lib/models/gpx/waypoint";
 import { type ValhallaAnchor, type ValhallaHeightResponse, type ValhallaRouteResponse } from "$lib/models/valhalla";
+import { decodePolyline, encodePolyline } from "$lib/util/polyline_util";
 import { ClientResponseError } from "pocketbase";
 
 
@@ -19,26 +20,45 @@ export function setRoute(newRoute: GPX) {
     route = newRoute
 }
 
-export async function calculateRouteBetween(startLat: number, startLon: number, endLat: number, endLon: number) {
-    const requestBody = {
-        "directions_type": "none",
-        "locations": [{ "lat": startLat, "lon": startLon }, { "lat": endLat, "lon": endLon }],
-        "costing": "pedestrian", "costing_options": { "pedestrian": { "max_hiking_difficulty": 6, "use_ferry": 0 } }
-    }
-    let r = await fetch("/api/v1/valhalla/route", { method: "POST", body: JSON.stringify(requestBody) })
+export async function calculateRouteBetween(startLat: number, startLon: number, endLat: number, endLon: number, costing: string = "pedestrian", autoRoute: boolean = true) {
 
-    if (!r.ok) {
-        throw new ClientResponseError(await r.json())
-    }
-    const routeResponse: ValhallaRouteResponse = await r.json();
-    const shape = routeResponse.trip.legs[0].shape
-    r = await fetch("/api/v1/valhalla/height", { method: "POST", body: JSON.stringify({ encoded_polyline: shape }) })
+    let shape;
+    if (autoRoute) {
+        let costingBody;
+        switch (costing) {
+            case "bicycle":
+                costingBody = { "costing": "bicycle", "costing_options": { "bicycle": { "bicycle_type": "Hybrid", "use_roads": 0.5, "use_hills": 0.5, "avoid_bad_surfaces": 0.5, "use_ferry": 0 } } }
+                break;
+            case "auto":
+                costingBody = { "costing": "auto", "costing_options": { "auto": { "use_ferry": 0 } } }
+            default:
+                costingBody = { "costing": costing, "costing_options": { costing: { "max_hiking_difficulty": 6, "use_ferry": 0 } } }
+                break;
+        }
+        const requestBody = {
+            "directions_type": "none",
+            "locations": [{ "lat": startLat, "lon": startLon }, { "lat": endLat, "lon": endLon }],
+            ...costingBody
+        }
 
-    if (!r.ok) {
-        throw new ClientResponseError(await r.json())
+        let r = await fetch("/api/v1/valhalla/route", { method: "POST", body: JSON.stringify(requestBody) })
+
+        if (!r.ok) {
+            throw new ClientResponseError(await r.json())
+        }
+        const routeResponse: ValhallaRouteResponse = await r.json();
+        shape = routeResponse.trip.legs[0].shape
+    } else {
+        shape = encodePolyline([[startLat, startLon], [endLat, endLon]])
     }
-    const heightResponse: ValhallaHeightResponse = await r.json()
-    const points = decodeShape(shape);
+
+    const r2 = await fetch("/api/v1/valhalla/height", { method: "POST", body: JSON.stringify({ encoded_polyline: shape }) })
+
+    if (!r2.ok) {
+        throw new ClientResponseError(await r2.json())
+    }
+    const heightResponse: ValhallaHeightResponse = await r2.json()
+    const points = decodePolyline(shape);
     const waypoints = points.map((p, i) => new Waypoint({ $: { lat: p[0], lon: p[1] }, ele: heightResponse.height[i] }))
 
     return waypoints
@@ -62,49 +82,4 @@ export async function editRoute(index: number, waypoints: Waypoint[]) {
 
 export function deleteFromRoute(index: number) {
     route.trk?.at(0)?.trkseg?.splice(index, 1);
-}
-
-
-function decodeShape(shape: string, precision: number = 6) {
-    var index = 0,
-        lat = 0,
-        lng = 0,
-        coordinates = [],
-        shift = 0,
-        result = 0,
-        byte = null,
-        latitude_change,
-        longitude_change,
-        factor = Math.pow(10, precision);
-
-    while (index < shape.length) {
-        byte = null;
-        shift = 0;
-        result = 0;
-
-        do {
-            byte = shape.charCodeAt(index++) - 63;
-            result |= (byte & 0x1f) << shift;
-            shift += 5;
-        } while (byte >= 0x20);
-
-        latitude_change = ((result & 1) ? ~(result >> 1) : (result >> 1));
-
-        shift = result = 0;
-
-        do {
-            byte = shape.charCodeAt(index++) - 63;
-            result |= (byte & 0x1f) << shift;
-            shift += 5;
-        } while (byte >= 0x20);
-
-        longitude_change = ((result & 1) ? ~(result >> 1) : (result >> 1));
-
-        lat += latitude_change;
-        lng += longitude_change;
-
-        coordinates.push([lat / factor, lng / factor]);
-    }
-
-    return coordinates;
-};
+}

web/src/lib/util/gpx_util.ts

@@ -29,7 +29,7 @@ export async function gpx2trail(gpxString: string) {
     const totals = gpx.getTotals()
 
     const points = gpx.trk?.at(0)?.trkseg?.at(0)?.trkpt
-    const startPoint = points?.at(0);
+    const startPoint = points?.at(0);    
     if (startPoint) {
         trail.lat = startPoint.$.lat
         trail.lon = startPoint.$.lon

web/src/lib/util/polyline_util.ts

@@ -0,0 +1,80 @@
+function py2_round(value: number) {
+    return Math.floor(Math.abs(value) + 0.5) * (value >= 0 ? 1 : -1);
+}
+
+function encode(current: number, previous: number, factor: number) {
+    current = py2_round(current * factor);
+    previous = py2_round(previous * factor);
+    var coordinate = (current - previous) * 2;
+    if (coordinate < 0) {
+        coordinate = -coordinate - 1
+    }
+    var output = '';
+    while (coordinate >= 0x20) {
+        output += String.fromCharCode((0x20 | (coordinate & 0x1f)) + 63);
+        coordinate /= 32;
+    }
+    output += String.fromCharCode((coordinate | 0) + 63);
+    return output;
+}
+
+
+export function decodePolyline(str: string, precision: number = 6) {
+    var index = 0,
+        lat = 0,
+        lng = 0,
+        coordinates = [],
+        shift = 0,
+        result = 0,
+        byte = null,
+        latitude_change,
+        longitude_change,
+        factor = Math.pow(10, precision);
+
+    while (index < str.length) {
+        byte = null;
+        shift = 0;
+        result = 0;
+
+        do {
+            byte = str.charCodeAt(index++) - 63;
+            result |= (byte & 0x1f) << shift;
+            shift += 5;
+        } while (byte >= 0x20);
+
+        latitude_change = ((result & 1) ? ~(result >> 1) : (result >> 1));
+
+        shift = result = 0;
+
+        do {
+            byte = str.charCodeAt(index++) - 63;
+            result |= (byte & 0x1f) << shift;
+            shift += 5;
+        } while (byte >= 0x20);
+
+        longitude_change = ((result & 1) ? ~(result >> 1) : (result >> 1));
+
+        lat += latitude_change;
+        lng += longitude_change;
+
+        coordinates.push([lat / factor, lng / factor]);
+    }
+
+    return coordinates;
+};
+
+
+export function encodePolyline(coordinates: number[][], precision: number = 6) {
+    if (!coordinates.length) { return ''; }
+
+    var factor = Math.pow(10, precision),
+        output = encode(coordinates[0][0], 0, factor) + encode(coordinates[0][1], 0, factor);
+
+    for (var i = 1; i < coordinates.length; i++) {
+        var a = coordinates[i], b = coordinates[i - 1];
+        output += encode(a[0], b[0], factor);
+        output += encode(a[1], b[1], factor);
+    }
+
+    return output;
+};