routing controls class

gpx/src/gpx.ts

@@ -22,6 +22,7 @@ abstract class GPXTreeElement<T extends GPXTreeElement<any>> {
     abstract getStatistics(): GPXStatistics;
     abstract getTrackPoints(): TrackPoint[];
     abstract getTrackPointsAndStatistics(): { points: TrackPoint[], point_statistics: TrackPointStatistics, statistics: GPXStatistics };
+    abstract getSegments(): TrackSegment[];
 
     abstract toGeoJSON(): GeoJSON.Feature | GeoJSON.Feature[] | GeoJSON.FeatureCollection | GeoJSON.FeatureCollection[];
 }
@@ -115,6 +116,10 @@ abstract class GPXTreeNode<T extends GPXTreeElement<any>> extends GPXTreeElement
 
         return { points, point_statistics, statistics };
     }
+
+    getSegments(): TrackSegment[] {
+        return this.getChildren().flatMap((child) => child.getSegments());
+    }
 }
 
 // An abstract class that TrackSegment extends to implement the GPXTreeElement interface
@@ -280,6 +285,7 @@ export class TrackSegment extends GPXTreeLeaf {
 
         const points = this.trkpt;
         for (let i = 0; i < points.length; i++) {
+            points[i]._data['index'] = i;
 
             // distance
             let dist = 0;
@@ -408,6 +414,10 @@ export class TrackSegment extends GPXTreeLeaf {
         };
     }
 
+    getSegments(): TrackSegment[] {
+        return [this];
+    }
+
     toGeoJSON(): GeoJSON.Feature {
         return {
             type: "Feature",

website/src/lib/components/gpx-layer/GPXLayer.ts

@@ -48,6 +48,9 @@ export class GPXLayer {
     layerColor: string;
     unsubscribe: () => void;
 
+    addBinded: () => void = this.add.bind(this);
+    selectOnClickBinded: (e: any) => void = this.selectOnClick.bind(this);
+
     constructor(map: mapboxgl.Map, file: Writable<GPXFile>) {
         this.map = map;
         this.file = file;
@@ -61,7 +64,7 @@ export class GPXLayer {
         };
 
         this.add();
-        this.map.on('style.load', this.add.bind(this));
+        this.map.on('style.load', this.addBinded);
     }
 
     add() {
@@ -90,7 +93,7 @@ export class GPXLayer {
                 }
             });
 
-            this.map.on('click', this.layerId, this.selectOnClick.bind(this));
+            this.map.on('click', this.layerId, this.selectOnClickBinded);
             this.map.on('mouseenter', this.layerId, toPointerCursor);
             this.map.on('mouseleave', this.layerId, toDefaultCursor);
         }
@@ -104,10 +107,10 @@ export class GPXLayer {
     }
 
     remove() {
-        this.map.off('click', this.layerId, this.selectOnClick.bind(this));
+        this.map.off('click', this.layerId, this.selectOnClickBinded);
         this.map.off('mouseenter', this.layerId, toPointerCursor);
         this.map.off('mouseleave', this.layerId, toDefaultCursor);
-        this.map.off('style.load', this.add.bind(this));
+        this.map.off('style.load', this.addBinded);
 
         this.map.removeLayer(this.layerId);
         this.map.removeSource(this.layerId);

website/src/lib/components/gpx-layer/GPXLayers.svelte

@@ -7,12 +7,14 @@
 	let gpxLayers: Map<Writable<GPXFile>, GPXLayer> = new Map();
 
 	$: if ($map) {
+		// remove layers for deleted files
 		gpxLayers.forEach((layer, file) => {
 			if (!get(files).includes(file)) {
 				layer.remove();
 				gpxLayers.delete(file);
 			}
 		});
+		// add layers for new files
 		$files.forEach((file) => {
 			if (!gpxLayers.has(file)) {
 				gpxLayers.set(file, new GPXLayer(get(map), file));

website/src/lib/components/routing/Routing.svelte

@@ -7,120 +7,65 @@
 	import * as Alert from '$lib/components/ui/alert';
 	import { CircleHelp } from 'lucide-svelte';
 
-	import { map, selectedFiles, applyToFile } from '$lib/stores';
+	import { currentTool, files, getFileStore, map, selectedFiles, Tool } from '$lib/stores';
-	import { AnchorPointHierarchy, route } from './Routing';
+	import { brouterProfiles, privateRoads, routing, routingProfile } from './Routing';
-	import { onDestroy } from 'svelte';
-	import mapboxgl from 'mapbox-gl';
-
-	import type { GPXFile } from 'gpx';
 
 	import { _ } from 'svelte-i18n';
+	import { get, type Writable } from 'svelte/store';
+	import type { GPXFile } from 'gpx';
+	import { RoutingControls } from './RoutingControls';
 
-	let brouterProfiles: { [key: string]: string } = {
+	let routingControls: Map<Writable<GPXFile>, RoutingControls> = new Map();
-		bike: 'Trekking-dry',
+	let selectedFile: Writable<GPXFile> | null = null;
-		racing_bike: 'fastbike',
+	let active = false;
-		mountain_bike: 'MTB',
-		foot: 'Hiking-Alpine-SAC6',
-		motorcycle: 'Car-FastEco',
-		water: 'river',
-		railway: 'rail'
-	};
-	let routingProfile = {
-		value: 'bike',
-		label: $_('toolbar.routing.activities.bike')
-	};
-	let routing = true;
-	let privateRoads = false;
 
-	let anchorPointHierarchy: AnchorPointHierarchy | null = null;
+	$: if ($map && $files) {
-	let markers: mapboxgl.Marker[] = [];
+		// remove controls for deleted files
-	let file: GPXFile | null = null;
+		routingControls.forEach((controls, file) => {
-
+			if (!get(files).includes(file)) {
-	function toggleMarkersForZoomLevelAndBounds() {
+				controls.remove();
-		if ($map) {
+				routingControls.delete(file);
-			let zoom = $map.getZoom();
-			markers.forEach((marker) => {
-				if (marker._simplified.zoom <= zoom && $map.getBounds().contains(marker.getLngLat())) {
-					marker.addTo($map);
-				} else {
-					marker.remove();
 			}
 		});
 	}
-	}
 
-	async function extendFile(e: mapboxgl.MapMouseEvent) {
+	$: active = $currentTool === Tool.ROUTING;
-		if (file && anchorPointHierarchy && anchorPointHierarchy.points.length > 0) {
-			let lastPoint = anchorPointHierarchy.points[anchorPointHierarchy.points.length - 1];
-			let newPoint = {
-				lon: e.lngLat.lng,
-				lat: e.lngLat.lat
-			};
-			let response = await route(
-				[lastPoint.point.getCoordinates(), newPoint],
-				brouterProfiles[routingProfile.value],
-				privateRoads,
-				routing
-			);
-			applyToFile(file, (f) => f.append(response), true);
-		}
-	}
 
-	function clean() {
+	$: if ($map && $selectedFiles) {
-		markers.forEach((marker) => {
+		// update selected file
-			marker.remove();
+		if ($selectedFiles.size == 0 || $selectedFiles.size > 1 || !active) {
-		});
+			if (selectedFile) {
-		markers = [];
+				routingControls.get(selectedFile)?.remove();
-		if ($map) {
-			$map.off('zoom', toggleMarkersForZoomLevelAndBounds);
-			$map.off('move', toggleMarkersForZoomLevelAndBounds);
-			$map.off('click', extendFile);
 			}
-	}
+			selectedFile = null;
-
-	$: if ($selectedFiles.size == 1) {
-		let selectedFile = $selectedFiles.values().next().value;
-
-		if (selectedFile !== file) {
-			clean();
-			file = selectedFile;
 		} else {
-			// update markers
+			let newSelectedFile = get(selectedFiles).values().next().value;
+			let newSelectedFileStore = getFileStore(newSelectedFile);
+			if (selectedFile !== newSelectedFileStore) {
+				if (selectedFile) {
+					routingControls.get(selectedFile)?.remove();
 				}
+				selectedFile = newSelectedFileStore;
+			}
+		}
+	}
+
+	$: if ($map && selectedFile) {
+		if (!routingControls.has(selectedFile)) {
+			routingControls.set(selectedFile, new RoutingControls(get(map), selectedFile));
 		} else {
-		clean();
+			routingControls.get(selectedFile)?.add();
-		file = null;
 		}
-
-	$: if ($map && file) {
-		// record time
-		let start = performance.now();
-		anchorPointHierarchy = AnchorPointHierarchy.create(file);
-		// record time
-		let end = performance.now();
-		console.log('Time to create anchor points: ' + (end - start) + 'ms');
-
-		markers = anchorPointHierarchy.getMarkers();
-
-		toggleMarkersForZoomLevelAndBounds();
-		$map.on('zoom', toggleMarkersForZoomLevelAndBounds);
-		$map.on('move', toggleMarkersForZoomLevelAndBounds);
-		$map.on('click', extendFile);
-
-		let points = file.getTrackPoints();
 	}
-
-	onDestroy(() => {
-		clean();
-	});
 </script>
 
+{#if active}
 	<ToolbarItemMenu>
 		<Card.Root>
 			<Card.Content class="p-4 flex flex-col gap-4">
 				<div class="w-full flex flex-row justify-between items-center gap-2">
 					<Label>{$_('toolbar.routing.activity')}</Label>
-				<Select.Root bind:selected={routingProfile}>
+					<Select.Root bind:selected={$routingProfile}>
 						<Select.Trigger class="h-8 w-40">
 							<Select.Value />
 						</Select.Trigger>
@@ -135,11 +80,11 @@
 				</div>
 				<div class="w-full flex flex-row justify-between items-center gap-2">
 					<Label for="routing">{$_('toolbar.routing.use_routing')}</Label>
-				<Switch id="routing" class="scale-90" bind:checked={routing} />
+					<Switch id="routing" class="scale-90" bind:checked={$routing} />
 				</div>
 				<div class="w-full flex flex-row justify-between items-center gap-2">
 					<Label for="private">{$_('toolbar.routing.allow_private')}</Label>
-				<Switch id="private" class="scale-90" bind:checked={privateRoads} />
+					<Switch id="private" class="scale-90" bind:checked={$privateRoads} />
 				</div>
 				<Alert.Root class="max-w-64">
 					<CircleHelp size="16" />
@@ -157,3 +102,4 @@
 			</Card.Content>
 		</Card.Root>
 	</ToolbarItemMenu>
+{/if}

website/src/lib/components/routing/Routing.ts

@@ -1,162 +1,27 @@
-import type { Coordinates, GPXFile } from "gpx";
+import type { Coordinates } from "gpx";
 import { TrackPoint } from "gpx";
-import mapboxgl from "mapbox-gl";
+import { get, writable } from "svelte/store";
+import { _ } from "svelte-i18n";
 
-export function getMarker(coordinates: Coordinates, draggable: boolean = false): mapboxgl.Marker {
+export const brouterProfiles: { [key: string]: string } = {
-    let element = document.createElement('div');
+    bike: 'Trekking-dry',
-    element.className = `h-3 w-3 rounded-full bg-background border-2 border-black cursor-pointer`;
+    racing_bike: 'fastbike',
-    return new mapboxgl.Marker({
+    mountain_bike: 'MTB',
-        draggable,
+    foot: 'Hiking-Alpine-SAC6',
-        element
+    motorcycle: 'Car-FastEco',
-    }).setLngLat(coordinates);
+    water: 'river',
-}
+    railway: 'rail'
-
-export type SimplifiedTrackPoint = { point: TrackPoint, index: number, distance?: number, segment?: number, zoom?: number };
-
-export class AnchorPointHierarchy {
-    points: SimplifiedTrackPoint[];
-
-    constructor() {
-        this.points = [];
-    }
-
-    getMarkers(): mapboxgl.Marker[] {
-        let markers = [];
-        for (let point of this.points) {
-            let marker = getMarker(point.point.getCoordinates(), true);
-            Object.defineProperty(marker, '_simplified', { value: point });
-            markers.push(marker);
-        }
-        return markers;
-    }
-
-    static create(file: GPXFile, epsilon: number = 50): AnchorPointHierarchy {
-        let hierarchy = new AnchorPointHierarchy();
-
-        let s = 0;
-        for (let track of file.getChildren()) {
-            for (let segment of track.getChildren()) {
-                let points = segment.trkpt;
-                let simplified = ramerDouglasPeucker(points, epsilon);
-                // Assign segment number to each point
-                simplified.forEach((point) => {
-                    point.segment = s;
-                    point.zoom = getZoomLevelForDistance(point.point.getLatitude(), point.distance);
-                    hierarchy.points.push(point);
-                });
-                s++;
-            }
-        }
-
-        return hierarchy;
-    }
-}
-
-function getZoomLevelForDistance(latitude: number, distance?: number): number {
-    if (distance === undefined) {
-        return 0;
-    }
-
-    const rad = Math.PI / 180;
-    const lat = latitude * rad;
-
-    return Math.min(20, Math.max(0, Math.floor(Math.log2((earthRadius * Math.cos(lat)) / distance))));
-}
-
-function ramerDouglasPeucker(points: TrackPoint[], epsilon: number, start: number = 0, end: number = points.length - 1): SimplifiedTrackPoint[] {
-    let simplified = [{
-        point: points[start],
-        index: start,
-
-    }];
-    ramerDouglasPeuckerRecursive(points, epsilon, start, end, simplified);
-    simplified.push({
-        point: points[end],
-        index: end
-    });
-    return simplified;
-}
-
-function ramerDouglasPeuckerRecursive(points: TrackPoint[], epsilon: number, start: number, end: number, simplified: SimplifiedTrackPoint[]) {
-    let largest = {
-        index: 0,
-        distance: 0
 };
+export const routingProfile = writable({
+    value: 'bike',
+    label: get(_)('toolbar.routing.activities.bike')
+});
+export const routing = writable(true);
+export const privateRoads = writable(false);
 
-    for (let i = start + 1; i < end; i++) {
+export function route(points: Coordinates[]): Promise<TrackPoint[]> {
-        let distance = crossarc(points[start].getCoordinates(), points[end].getCoordinates(), points[i].getCoordinates());
+    if (get(routing)) {
-        if (distance > largest.distance) {
+        return getRoute(points, brouterProfiles[get(routingProfile).value], get(privateRoads));
-            largest.index = i;
-            largest.distance = distance;
-        }
-    }
-
-    if (largest.distance > epsilon) {
-        ramerDouglasPeuckerRecursive(points, epsilon, start, largest.index, simplified);
-        simplified.push({ point: points[largest.index], index: largest.index, distance: largest.distance });
-        ramerDouglasPeuckerRecursive(points, epsilon, largest.index, end, simplified);
-    }
-}
-
-const earthRadius = 6371008.8;
-
-function crossarc(coord1: Coordinates, coord2: Coordinates, coord3: Coordinates): number {
-    // Calculates the shortest distance in meters 
-    // between an arc (defined by p1 and p2) and a third point, p3.
-    // Input lat1,lon1,lat2,lon2,lat3,lon3 in degrees.
-
-    const rad = Math.PI / 180;
-    const lat1 = coord1.lat * rad;
-    const lat2 = coord2.lat * rad;
-    const lat3 = coord3.lat * rad;
-
-    const lon1 = coord1.lon * rad;
-    const lon2 = coord2.lon * rad;
-    const lon3 = coord3.lon * rad;
-
-    // Prerequisites for the formulas
-    const bear12 = bearing(lat1, lon1, lat2, lon2);
-    const bear13 = bearing(lat1, lon1, lat3, lon3);
-    let dis13 = distance(lat1, lon1, lat3, lon3);
-
-    let diff = Math.abs(bear13 - bear12);
-    if (diff > Math.PI) {
-        diff = 2 * Math.PI - diff;
-    }
-
-    // Is relative bearing obtuse?
-    if (diff > (Math.PI / 2)) {
-        return dis13;
-    }
-
-    // Find the cross-track distance.
-    let dxt = Math.asin(Math.sin(dis13 / earthRadius) * Math.sin(bear13 - bear12)) * earthRadius;
-
-    // Is p4 beyond the arc?
-    let dis12 = distance(lat1, lon1, lat2, lon2);
-    let dis14 = Math.acos(Math.cos(dis13 / earthRadius) / Math.cos(dxt / earthRadius)) * earthRadius;
-    if (dis14 > dis12) {
-        return distance(lat2, lon2, lat3, lon3);
-    } else {
-        return Math.abs(dxt);
-    }
-}
-
-function distance(latA: number, lonA: number, latB: number, lonB: number): number {
-    // Finds the distance between two lat / lon points.
-    return Math.acos(Math.sin(latA) * Math.sin(latB) + Math.cos(latA) * Math.cos(latB) * Math.cos(lonB - lonA)) * earthRadius;
-}
-
-
-function bearing(latA: number, lonA: number, latB: number, lonB: number): number {
-    // Finds the bearing from one lat / lon point to another.
-    return Math.atan2(Math.sin(lonB - lonA) * Math.cos(latB),
-        Math.cos(latA) * Math.sin(latB) - Math.sin(latA) * Math.cos(latB) * Math.cos(lonB - lonA));
-}
-
-export function route(points: Coordinates[], brouterProfile: string, privateRoads: boolean, routing: boolean): Promise<TrackPoint[]> {
-    if (routing) {
-        return getRoute(points, brouterProfile, privateRoads);
     } else {
         return new Promise((resolve) => {
             resolve(points.map(point => new TrackPoint({

website/src/lib/components/routing/RoutingControls.ts

@@ -0,0 +1,100 @@
+import type { Coordinates, GPXFile } from "gpx";
+import { get, type Writable } from "svelte/store";
+import { computeAnchorPoints } from "./Simplify";
+import mapboxgl from "mapbox-gl";
+import { route } from "./Routing";
+import { applyToFileStore } from "$lib/stores";
+
+export class RoutingControls {
+    map: mapboxgl.Map;
+    file: Writable<GPXFile>;
+    markers: mapboxgl.Marker[] = [];
+    unsubscribe: () => void = () => { };
+
+    toggleMarkersForZoomLevelAndBoundsBinded: () => void = this.toggleMarkersForZoomLevelAndBounds.bind(this);
+    extendFileBinded: (e: mapboxgl.MapMouseEvent) => void = this.extendFile.bind(this);
+
+    constructor(map: mapboxgl.Map, file: Writable<GPXFile>) {
+        this.map = map;
+        this.file = file;
+
+        computeAnchorPoints(get(file));
+        this.createMarkers();
+        this.add();
+    }
+
+    add() {
+        this.toggleMarkersForZoomLevelAndBounds();
+        this.map.on('zoom', this.toggleMarkersForZoomLevelAndBoundsBinded);
+        this.map.on('move', this.toggleMarkersForZoomLevelAndBoundsBinded);
+        this.map.on('click', this.extendFileBinded);
+
+        this.unsubscribe = this.file.subscribe(this.updateControls.bind(this));
+    }
+
+    updateControls() {
+        // Update controls
+        console.log('updateControls');
+    }
+
+    remove() {
+        for (let marker of this.markers) {
+            marker.remove();
+        }
+        this.map.off('zoom', this.toggleMarkersForZoomLevelAndBoundsBinded);
+        this.map.off('move', this.toggleMarkersForZoomLevelAndBoundsBinded);
+        this.map.off('click', this.extendFileBinded);
+
+        this.unsubscribe();
+    }
+
+    createMarkers() {
+        for (let segment of get(this.file).getSegments()) {
+            for (let anchor of segment._data.anchors) {
+                let marker = getMarker(anchor.point.getCoordinates(), true);
+                Object.defineProperty(marker, '_simplified', {
+                    value: anchor
+                });
+                this.markers.push(marker);
+            }
+        }
+    }
+
+    toggleMarkersForZoomLevelAndBounds() {
+        let zoom = this.map.getZoom();
+        this.markers.forEach((marker) => {
+            if (marker._simplified.zoom <= zoom && this.map.getBounds().contains(marker.getLngLat())) {
+                marker.addTo(this.map);
+            } else {
+                marker.remove();
+            }
+        });
+    }
+
+    async extendFile(e: mapboxgl.MapMouseEvent) {
+        let segments = get(this.file).getSegments();
+        if (segments.length === 0) {
+            return;
+        }
+        let anchors = segments[segments.length - 1]._data.anchors;
+        let lastAnchor = anchors[anchors.length - 1];
+
+        let newPoint = {
+            lon: e.lngLat.lng,
+            lat: e.lngLat.lat
+        };
+
+        let response = await route([lastAnchor.point.getCoordinates(), newPoint]);
+
+        applyToFileStore(this.file, (f) => f.append(response), true);
+    }
+}
+
+export function getMarker(coordinates: Coordinates, draggable: boolean = false): mapboxgl.Marker {
+    let element = document.createElement('div');
+    element.className = `h-3 w-3 rounded-full bg-background border-2 border-black cursor-pointer`;
+    return new mapboxgl.Marker({
+        draggable,
+        element
+    }).setLngLat(coordinates);
+}

website/src/lib/components/routing/Simplify.ts

@@ -0,0 +1,116 @@
+import type { Coordinates, GPXFile, TrackPoint } from "gpx";
+
+export type SimplifiedTrackPoint = { point: TrackPoint, distance?: number, zoom?: number };
+
+const earthRadius = 6371008.8;
+
+export function getZoomLevelForDistance(latitude: number, distance?: number): number {
+    if (distance === undefined) {
+        return 0;
+    }
+
+    const rad = Math.PI / 180;
+    const lat = latitude * rad;
+
+    return Math.min(20, Math.max(0, Math.floor(Math.log2((earthRadius * Math.cos(lat)) / distance))));
+}
+
+export function computeAnchorPoints(file: GPXFile) {
+    for (let segment of file.getSegments()) {
+        let points = segment.trkpt;
+        let anchors = ramerDouglasPeucker(points);
+        anchors.forEach((point) => {
+            point.zoom = getZoomLevelForDistance(point.point.getLatitude(), point.distance);
+        });
+        segment._data['anchors'] = anchors;
+    }
+}
+
+export function ramerDouglasPeucker(points: TrackPoint[], epsilon: number = 50, start: number = 0, end: number = points.length - 1): SimplifiedTrackPoint[] {
+    let simplified = [{
+        point: points[start],
+        index: start,
+
+    }];
+    ramerDouglasPeuckerRecursive(points, epsilon, start, end, simplified);
+    simplified.push({
+        point: points[end],
+        index: end
+    });
+    return simplified;
+}
+
+function ramerDouglasPeuckerRecursive(points: TrackPoint[], epsilon: number, start: number, end: number, simplified: SimplifiedTrackPoint[]) {
+    let largest = {
+        index: 0,
+        distance: 0
+    };
+
+    for (let i = start + 1; i < end; i++) {
+        let distance = crossarc(points[start].getCoordinates(), points[end].getCoordinates(), points[i].getCoordinates());
+        if (distance > largest.distance) {
+            largest.index = i;
+            largest.distance = distance;
+        }
+    }
+
+    if (largest.distance > epsilon) {
+        ramerDouglasPeuckerRecursive(points, epsilon, start, largest.index, simplified);
+        simplified.push({ point: points[largest.index], distance: largest.distance });
+        ramerDouglasPeuckerRecursive(points, epsilon, largest.index, end, simplified);
+    }
+}
+
+function crossarc(coord1: Coordinates, coord2: Coordinates, coord3: Coordinates): number {
+    // Calculates the shortest distance in meters 
+    // between an arc (defined by p1 and p2) and a third point, p3.
+    // Input lat1,lon1,lat2,lon2,lat3,lon3 in degrees.
+
+    const rad = Math.PI / 180;
+    const lat1 = coord1.lat * rad;
+    const lat2 = coord2.lat * rad;
+    const lat3 = coord3.lat * rad;
+
+    const lon1 = coord1.lon * rad;
+    const lon2 = coord2.lon * rad;
+    const lon3 = coord3.lon * rad;
+
+    // Prerequisites for the formulas
+    const bear12 = bearing(lat1, lon1, lat2, lon2);
+    const bear13 = bearing(lat1, lon1, lat3, lon3);
+    let dis13 = distance(lat1, lon1, lat3, lon3);
+
+    let diff = Math.abs(bear13 - bear12);
+    if (diff > Math.PI) {
+        diff = 2 * Math.PI - diff;
+    }
+
+    // Is relative bearing obtuse?
+    if (diff > (Math.PI / 2)) {
+        return dis13;
+    }
+
+    // Find the cross-track distance.
+    let dxt = Math.asin(Math.sin(dis13 / earthRadius) * Math.sin(bear13 - bear12)) * earthRadius;
+
+    // Is p4 beyond the arc?
+    let dis12 = distance(lat1, lon1, lat2, lon2);
+    let dis14 = Math.acos(Math.cos(dis13 / earthRadius) / Math.cos(dxt / earthRadius)) * earthRadius;
+    if (dis14 > dis12) {
+        return distance(lat2, lon2, lat3, lon3);
+    } else {
+        return Math.abs(dxt);
+    }
+}
+
+function distance(latA: number, lonA: number, latB: number, lonB: number): number {
+    // Finds the distance between two lat / lon points.
+    return Math.acos(Math.sin(latA) * Math.sin(latB) + Math.cos(latA) * Math.cos(latB) * Math.cos(lonB - lonA)) * earthRadius;
+}
+
+
+function bearing(latA: number, lonA: number, latB: number, lonB: number): number {
+    // Finds the bearing from one lat / lon point to another.
+    return Math.atan2(Math.sin(lonB - lonA) * Math.cos(latB),
+        Math.cos(latA) * Math.sin(latB) - Math.sin(latA) * Math.cos(latB) * Math.cos(lonB - lonA));
+}

website/src/lib/components/toolbar/Toolbar.svelte

@@ -16,6 +16,7 @@
 	} from 'lucide-svelte';
 
 	import { _ } from 'svelte-i18n';
+	import { derived } from 'svelte/store';
 
 	function getToggleTool(tool: Tool) {
 		return () => toggleTool(tool);
@@ -72,8 +73,6 @@
 				<span slot="tooltip">{$_('toolbar.structure_tooltip')}</span>
 			</ToolbarItem>
 		</div>
-		{#if $currentTool === Tool.ROUTING}
 		<Routing />
-		{/if}
 	</div>
 </div>

website/src/lib/stores.ts

@@ -28,6 +28,10 @@ export function getFileIndex(file: GPXFile): number {
 
 export function applyToFile(file: GPXFile, callback: (file: GPXFile) => void, updateSelected: boolean) {
     let store = getFileStore(file);
+    applyToFileStore(store, callback, updateSelected);
+}
+
+export function applyToFileStore(store: Writable<GPXFile>, callback: (file: GPXFile) => void, updateSelected: boolean) {
     store.update($file => {
         callback($file)
         return $file;