finer-grained road access

gpx/src/gpx.ts

@@ -1398,10 +1398,7 @@ export class TrackPoint {
             : undefined;
     }
 
-    setExtensions(extensions: Record<string, string>) {
-        if (Object.keys(extensions).length === 0) {
-            return;
-        }
+    setExtension(key: string, value: string) {
         if (!this.extensions) {
             this.extensions = {};
         }
@@ -1411,8 +1408,12 @@ export class TrackPoint {
         if (!this.extensions['gpxtpx:TrackPointExtension']['gpxtpx:Extensions']) {
             this.extensions['gpxtpx:TrackPointExtension']['gpxtpx:Extensions'] = {};
         }
+        this.extensions['gpxtpx:TrackPointExtension']['gpxtpx:Extensions'][key] = value;
+    }
+
+    setExtensions(extensions: Record<string, string>) {
         Object.entries(extensions).forEach(([key, value]) => {
-            this.extensions['gpxtpx:TrackPointExtension']['gpxtpx:Extensions'][key] = value;
+            this.setExtension(key, value);
         });
     }
 

website/src/lib/assets/custom/bikerouter-gravel.json

@@ -17,6 +17,7 @@
         }
     },
     "sprite": "https://demotiles.maplibre.org/styles/osm-bright-gl-style/sprite",
+    "glyphs": "https://api.maptiler.com/fonts/{fontstack}/{range}.pbf?key={key}",
     "layers": [
         {
             "id": "background",

website/src/lib/components/file-list/FileListNodeLabel.svelte

@@ -34,10 +34,11 @@
     import { editStyle } from '$lib/components/file-list/style/utils.svelte';
     import { getSymbolKey, symbols } from '$lib/assets/symbols';
     import { selection, copied, cut } from '$lib/logic/selection';
+    import { map } from '$lib/components/map/map';
     import { fileActions, pasteSelection } from '$lib/logic/file-actions';
     import { allHidden } from '$lib/logic/hidden';
     import { boundsManager } from '$lib/logic/bounds';
-    import { gpxColors, gpxLayers } from '$lib/components/map/gpx-layer/gpx-layers';
+    import { gpxLayers } from '$lib/components/map/gpx-layer/gpx-layers';
     import { fileStateCollection } from '$lib/logic/file-state';
     import { waypointPopup } from '$lib/components/map/gpx-layer/gpx-layer-popup';
     import { allowedPastes } from './sortable-file-list';
@@ -57,11 +58,19 @@
 
     let singleSelection = $derived($selection.size === 1);
 
-    let nodeColors: string[] = $derived.by(() => {
+    let nodeColors: string[] = $state([]);
+
+    $effect.pre(() => {
         let colors: string[] = [];
-        if (node) {
+        if (node && $map) {
             if (node instanceof GPXFile) {
-                let defaultColor = $gpxColors.get(item.getFileId());
+                let defaultColor = undefined;
+
+                let layer = gpxLayers.getLayer(item.getFileId());
+                if (layer) {
+                    defaultColor = layer.layerColor;
+                }
+
                 let style = node.getStyle(defaultColor);
                 colors = style.color;
             } else if (node instanceof Track) {
@@ -74,14 +83,14 @@
                     colors.push(style['gpx_style:color']);
                 }
                 if (colors.length === 0) {
-                    let defaultColor = $gpxColors.get(item.getFileId());
-                    if (defaultColor) {
-                        colors.push(defaultColor);
+                    let layer = gpxLayers.getLayer(item.getFileId());
+                    if (layer) {
+                        colors.push(layer.layerColor);
                     }
                 }
             }
         }
-        return colors;
+        nodeColors = colors;
     });
 
     let symbolKey = $derived(node instanceof Waypoint ? getSymbolKey(node.sym) : undefined);

website/src/lib/components/map/Map.svelte

@@ -48,7 +48,7 @@
             language = 'en';
         }
 
-        map.init(language, hash, geocoder, geolocate);
+        map.init(PUBLIC_MAPBOX_TOKEN, language, hash, geocoder, geolocate);
     });
 
     onDestroy(() => {

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { onDestroy } from 'svelte';
+    import { onDestroy, onMount } from 'svelte';
     import { gpxLayers } from '$lib/components/map/gpx-layer/gpx-layers';
     import { DistanceMarkers } from '$lib/components/map/gpx-layer/distance-markers';
     import { StartEndMarkers } from '$lib/components/map/gpx-layer/start-end-markers';
@@ -9,10 +9,13 @@
     let distanceMarkers: DistanceMarkers;
     let startEndMarkers: StartEndMarkers;
 
-    map.onLoad((map_) => {
+    onMount(() => {
         gpxLayers.init();
         startEndMarkers = new StartEndMarkers();
         distanceMarkers = new DistanceMarkers();
+    });
+
+    map.onLoad((map_) => {
         createPopups(map_);
     });
 

website/src/lib/components/map/gpx-layer/TrackpointPopup.svelte

@@ -41,7 +41,6 @@
             <Button
                 size="sm"
                 variant="outline"
-                class="justify-start"
                 href={`https://www.openstreetmap.org/edit?#map=${(($map?.getZoom() ?? 17) + 1).toFixed(0)}/${trackpoint.item.getLatitude().toFixed(5)}/${trackpoint.item.getLongitude().toFixed(5)}`}
                 target="_blank"
             >

website/src/lib/components/map/gpx-layer/distance-markers.ts

@@ -3,7 +3,7 @@ import { gpxStatistics } from '$lib/logic/statistics';
 import { getConvertedDistanceToKilometers } from '$lib/units';
 import type { GeoJSONSource } from 'mapbox-gl';
 import { get } from 'svelte/store';
-import { ANCHOR_LAYER_KEY, map } from '$lib/components/map/map';
+import { map } from '$lib/components/map/map';
 import { allHidden } from '$lib/logic/hidden';
 
 const { distanceMarkers, distanceUnits } = settings;
@@ -44,45 +44,44 @@ export class DistanceMarkers {
                     });
                 }
                 if (!map_.getLayer('distance-markers')) {
-                    map_.addLayer(
-                        {
-                            id: 'distance-markers',
-                            type: 'symbol',
-                            source: 'distance-markers',
-                            filter: [
-                                'match',
-                                ['get', 'level'],
-                                100,
-                                ['>=', ['zoom'], 0],
-                                50,
-                                ['>=', ['zoom'], 7],
-                                25,
-                                [
-                                    'any',
-                                    ['all', ['>=', ['zoom'], 8], ['<=', ['zoom'], 9]],
-                                    ['>=', ['zoom'], 11],
-                                ],
-                                10,
-                                ['>=', ['zoom'], 10],
-                                5,
+                    map_.addLayer({
+                        id: 'distance-markers',
+                        type: 'symbol',
+                        source: 'distance-markers',
+                        filter: [
+                            'match',
+                            ['get', 'level'],
+                            100,
+                            ['>=', ['zoom'], 0],
+                            50,
+                            ['>=', ['zoom'], 7],
+                            25,
+                            [
+                                'any',
+                                ['all', ['>=', ['zoom'], 8], ['<=', ['zoom'], 9]],
                                 ['>=', ['zoom'], 11],
-                                1,
-                                ['>=', ['zoom'], 13],
-                                false,
                             ],
-                            layout: {
-                                'text-field': ['get', 'distance'],
-                                'text-size': 14,
-                                'text-font': ['Open Sans Bold'],
-                            },
-                            paint: {
-                                'text-color': 'black',
-                                'text-halo-width': 2,
-                                'text-halo-color': 'white',
-                            },
+                            10,
+                            ['>=', ['zoom'], 10],
+                            5,
+                            ['>=', ['zoom'], 11],
+                            1,
+                            ['>=', ['zoom'], 13],
+                            false,
+                        ],
+                        layout: {
+                            'text-field': ['get', 'distance'],
+                            'text-size': 14,
+                            'text-font': ['Open Sans Bold'],
                         },
-                        ANCHOR_LAYER_KEY.distanceMarkers
-                    );
+                        paint: {
+                            'text-color': 'black',
+                            'text-halo-width': 2,
+                            'text-halo-color': 'white',
+                        },
+                    });
+                } else {
+                    map_.moveLayer('distance-markers');
                 }
             } else {
                 if (map_.getLayer('distance-markers')) {

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

@@ -1,6 +1,6 @@
 import { get, type Readable } from 'svelte/store';
 import mapboxgl, { type FilterSpecification } from 'mapbox-gl';
-import { ANCHOR_LAYER_KEY, map } from '$lib/components/map/map';
+import { map } from '$lib/components/map/map';
 import { waypointPopup, trackpointPopup } from './gpx-layer-popup';
 import {
     ListTrackSegmentItem,
@@ -22,7 +22,6 @@ import { fileActionManager } from '$lib/logic/file-action-manager';
 import { fileActions } from '$lib/logic/file-actions';
 import { splitAs } from '$lib/components/toolbar/tools/scissors/scissors';
 import { mapCursor, MapCursorState } from '$lib/logic/map-cursor';
-import { gpxColors } from '$lib/components/map/gpx-layer/gpx-layers';
 
 const colors = [
     '#ff0000',
@@ -44,35 +43,16 @@ for (let color of colors) {
 }
 
 // Get the color with the least amount of uses
-function getColor(fileId: string) {
+function getColor() {
     let color = colors.reduce((a, b) => (colorCount[a] <= colorCount[b] ? a : b));
     colorCount[color]++;
-    gpxColors.update((colors) => {
-        colors.set(fileId, color);
-        return colors;
-    });
     return color;
 }
 
-function replaceColor(fileId: string, oldColor: string, newColor: string) {
-    if (colorCount.hasOwnProperty(oldColor)) {
-        colorCount[oldColor]--;
-    }
-    colorCount[newColor]++;
-    gpxColors.update((colors) => {
-        colors.set(fileId, newColor);
-        return colors;
-    });
-}
-
-function removeColor(fileId: string, color: string) {
+function decrementColor(color: string) {
     if (colorCount.hasOwnProperty(color)) {
         colorCount[color]--;
     }
-    gpxColors.update((colors) => {
-        colors.delete(fileId);
-        return colors;
-    });
 }
 
 export function getSvgForSymbol(symbol?: string | undefined, layerColor?: string | undefined) {
@@ -141,7 +121,7 @@ export class GPXLayer {
     constructor(fileId: string, file: Readable<GPXFileWithStatistics | undefined>) {
         this.fileId = fileId;
         this.file = file;
-        this.layerColor = getColor(fileId);
+        this.layerColor = getColor();
         this.unsubscribe.push(
             map.subscribe(($map) => {
                 if ($map) {
@@ -178,7 +158,7 @@ export class GPXLayer {
             file._data.style.color &&
             this.layerColor !== `#${file._data.style.color}`
         ) {
-            replaceColor(this.fileId, this.layerColor, `#${file._data.style.color}`);
+            decrementColor(this.layerColor);
             this.layerColor = `#${file._data.style.color}`;
         }
 
@@ -196,23 +176,20 @@ export class GPXLayer {
             }
 
             if (!_map.getLayer(this.fileId)) {
-                _map.addLayer(
-                    {
-                        id: this.fileId,
-                        type: 'line',
-                        source: this.fileId,
-                        layout: {
-                            'line-join': 'round',
-                            'line-cap': 'round',
-                        },
-                        paint: {
-                            'line-color': ['get', 'color'],
-                            'line-width': ['get', 'width'],
-                            'line-opacity': ['get', 'opacity'],
-                        },
+                _map.addLayer({
+                    id: this.fileId,
+                    type: 'line',
+                    source: this.fileId,
+                    layout: {
+                        'line-join': 'round',
+                        'line-cap': 'round',
                     },
-                    ANCHOR_LAYER_KEY.tracks
-                );
+                    paint: {
+                        'line-color': ['get', 'color'],
+                        'line-width': ['get', 'width'],
+                        'line-opacity': ['get', 'opacity'],
+                    },
+                });
 
                 _map.on('click', this.fileId, this.layerOnClickBinded);
                 _map.on('contextmenu', this.fileId, this.layerOnContextMenuBinded);
@@ -235,21 +212,18 @@ export class GPXLayer {
             }
 
             if (!_map.getLayer(this.fileId + '-waypoints')) {
-                _map.addLayer(
-                    {
-                        id: this.fileId + '-waypoints',
-                        type: 'symbol',
-                        source: this.fileId + '-waypoints',
-                        layout: {
-                            'icon-image': ['get', 'icon'],
-                            'icon-size': 0.3,
-                            'icon-anchor': 'bottom',
-                            'icon-padding': 0,
-                            'icon-allow-overlap': true,
-                        },
+                _map.addLayer({
+                    id: this.fileId + '-waypoints',
+                    type: 'symbol',
+                    source: this.fileId + '-waypoints',
+                    layout: {
+                        'icon-image': ['get', 'icon'],
+                        'icon-size': 0.3,
+                        'icon-anchor': 'bottom',
+                        'icon-padding': 0,
+                        'icon-allow-overlap': true,
                     },
-                    ANCHOR_LAYER_KEY.waypoints
-                );
+                });
 
                 _map.on(
                     'mouseenter',
@@ -298,7 +272,7 @@ export class GPXLayer {
                                 'text-halo-color': 'white',
                             },
                         },
-                        ANCHOR_LAYER_KEY.directionMarkers
+                        _map.getLayer('distance-markers') ? 'distance-markers' : undefined
                     );
                 }
             } else {
@@ -390,7 +364,7 @@ export class GPXLayer {
 
         this.unsubscribe.forEach((unsubscribe) => unsubscribe());
 
-        removeColor(this.fileId, this.layerColor);
+        decrementColor(this.layerColor);
     }
 
     moveToFront() {
@@ -399,13 +373,13 @@ export class GPXLayer {
             return;
         }
         if (_map.getLayer(this.fileId)) {
-            _map.moveLayer(this.fileId, ANCHOR_LAYER_KEY.tracks);
+            _map.moveLayer(this.fileId);
         }
         if (_map.getLayer(this.fileId + '-waypoints')) {
-            _map.moveLayer(this.fileId + '-waypoints', ANCHOR_LAYER_KEY.waypoints);
+            _map.moveLayer(this.fileId + '-waypoints');
         }
         if (_map.getLayer(this.fileId + '-direction')) {
-            _map.moveLayer(this.fileId + '-direction', ANCHOR_LAYER_KEY.directionMarkers);
+            _map.moveLayer(this.fileId + '-direction');
         }
     }
 

website/src/lib/components/map/gpx-layer/gpx-layers.ts

@@ -1,5 +1,4 @@
 import { GPXFileStateCollectionObserver } from '$lib/logic/file-state';
-import { writable } from 'svelte/store';
 import { GPXLayer } from './gpx-layer';
 
 export class GPXLayerCollection {
@@ -43,4 +42,3 @@ export class GPXLayerCollection {
 }
 
 export const gpxLayers = new GPXLayerCollection();
-export const gpxColors = writable(new Map<string, string>());

website/src/lib/components/map/layer-control/OverpassPopup.svelte

@@ -54,27 +54,28 @@
 
 <Card.Root class="border-none shadow-md text-base p-2 max-w-[50dvw] gap-0">
     <Card.Header class="p-0 gap-0">
-        <Card.Title class="text-md flex flex-row">
-            <div class="flex flex-col">
-                <p>{name}</p>
-                <div class="text-muted-foreground text-xs font-normal">
-                    {poi.item.lat.toFixed(6)}&deg; {poi.item.lon.toFixed(6)}&deg;
+        <Card.Title class="text-md">
+            <div class="flex flex-row gap-3">
+                <div class="flex flex-col">
+                    {name}
+                    <div class="text-muted-foreground text-xs font-normal">
+                        {poi.item.lat.toFixed(6)}&deg; {poi.item.lon.toFixed(6)}&deg;
+                    </div>
                 </div>
+                <Button
+                    class="ml-auto"
+                    variant="outline"
+                    size="icon"
+                    href="https://www.openstreetmap.org/edit?editor=id&{poi.item.type ??
+                        'node'}={poi.item.id}"
+                    target="_blank"
+                >
+                    <PencilLine size="16" />
+                </Button>
             </div>
-
-            <Button
-                class="ml-auto"
-                variant="outline"
-                size="icon-sm"
-                href="https://www.openstreetmap.org/edit?editor=id&{poi.item.type ?? 'node'}={poi
-                    .item.id}"
-                target="_blank"
-            >
-                <PencilLine size="16" />
-            </Button>
         </Card.Title>
     </Card.Header>
-    <Card.Content class="flex flex-col gap-1 p-0 text-sm whitespace-normal break-all">
+    <Card.Content class="flex flex-col p-0 text-sm mt-1 whitespace-normal break-all">
         <ScrollArea class="flex flex-col max-h-[30dvh]">
             {#if tags.image || tags['image:0']}
                 <div class="w-full rounded-md overflow-clip my-2 max-w-96 mx-auto">
@@ -99,14 +100,8 @@
                 {/each}
             </div>
         </ScrollArea>
-        <Button
-            size="sm"
-            class="mt-1 justify-start"
-            variant="outline"
-            disabled={$selection.size === 0}
-            onclick={addToFile}
-        >
-            <MapPin size="14" />
+        <Button class="mt-2" variant="outline" disabled={$selection.size === 0} onclick={addToFile}>
+            <MapPin size="16" />
             {i18n._('toolbar.waypoint.add')}
         </Button>
     </Card.Content>

website/src/lib/components/map/layer-control/overpass-layer.ts

@@ -6,7 +6,6 @@ import { overpassQueryData } from '$lib/assets/layers';
 import { MapPopup } from '$lib/components/map/map-popup';
 import { settings } from '$lib/logic/settings';
 import { db } from '$lib/db';
-import { ANCHOR_LAYER_KEY } from '$lib/components/map/map';
 
 const { currentOverpassQueries } = settings;
 
@@ -86,20 +85,17 @@ export class OverpassLayer {
             }
 
             if (!this.map.getLayer('overpass')) {
-                this.map.addLayer(
-                    {
-                        id: 'overpass',
-                        type: 'symbol',
-                        source: 'overpass',
-                        layout: {
-                            'icon-image': ['get', 'icon'],
-                            'icon-size': 0.25,
-                            'icon-padding': 0,
-                            'icon-allow-overlap': ['step', ['zoom'], false, 14, true],
-                        },
+                this.map.addLayer({
+                    id: 'overpass',
+                    type: 'symbol',
+                    source: 'overpass',
+                    layout: {
+                        'icon-image': ['get', 'icon'],
+                        'icon-size': 0.25,
+                        'icon-padding': 0,
+                        'icon-allow-overlap': ['step', ['zoom'], false, 14, true],
                     },
-                    ANCHOR_LAYER_KEY.overpass
-                );
+                });
 
                 this.map.on('mouseenter', 'overpass', this.onHoverBinded);
                 this.map.on('click', 'overpass', this.onHoverBinded);

website/src/lib/components/map/map.ts

@@ -20,28 +20,6 @@ let fitBoundsOptions: mapboxgl.MapOptions['fitBoundsOptions'] = {
     easing: () => 1,
 };
 
-const emptySource: mapboxgl.GeoJSONSourceSpecification = {
-    type: 'geojson',
-    data: {
-        type: 'FeatureCollection',
-        features: [],
-    },
-};
-export const ANCHOR_LAYER_KEY = {
-    mapillary: 'mapillary-end',
-    tracks: 'tracks-end',
-    directionMarkers: 'direction-markers-end',
-    distanceMarkers: 'distance-markers-end',
-    interactions: 'interactions-end',
-    overpass: 'overpass-end',
-    waypoints: 'waypoints-end',
-};
-const anchorLayers: mapboxgl.LayerSpecification[] = Object.values(ANCHOR_LAYER_KEY).map((id) => ({
-    id: id,
-    type: 'symbol',
-    source: 'empty-source',
-}));
-
 export class MapboxGLMap {
     private _map: Writable<mapboxgl.Map | null> = writable(null);
     private _onLoadCallbacks: ((map: mapboxgl.Map) => void)[] = [];
@@ -51,15 +29,19 @@ export class MapboxGLMap {
         return this._map.subscribe(run, invalidate);
     }
 
-    init(language: string, hash: boolean, geocoder: boolean, geolocate: boolean) {
+    init(
+        accessToken: string,
+        language: string,
+        hash: boolean,
+        geocoder: boolean,
+        geolocate: boolean
+    ) {
         const map = new mapboxgl.Map({
             container: 'map',
             style: {
                 version: 8,
-                sources: {
-                    'empty-source': emptySource,
-                },
-                layers: anchorLayers,
+                sources: {},
+                layers: [],
                 imports: [
                     {
                         id: 'basemap',
@@ -68,6 +50,11 @@ export class MapboxGLMap {
                     {
                         id: 'overlays',
                         url: '',
+                        data: {
+                            version: 8,
+                            sources: {},
+                            layers: [],
+                        },
                     },
                 ],
             },
@@ -225,21 +212,16 @@ export class MapboxGLMap {
         const map = get(this._map);
         if (map) {
             const source = get(terrainSource);
-            try {
-                if (!map.getSource(source)) {
-                    map.addSource(source, terrainSources[source]);
-                }
-                if (map.getPitch() > 0) {
-                    map.setTerrain({
-                        source: source,
-                        exaggeration: 1,
-                    });
-                } else {
-                    map.setTerrain(null);
-                }
-            } catch (e) {
-                // No reliable way to check if the map is ready to add sources and layers
-                return;
+            if (!map.getSource(source)) {
+                map.addSource(source, terrainSources[source]);
+            }
+            if (map.getPitch() > 0) {
+                map.setTerrain({
+                    source: source,
+                    exaggeration: 1,
+                });
+            } else {
+                map.setTerrain(null);
             }
         }
     }

website/src/lib/components/map/street-view-control/mapillary.ts

@@ -2,7 +2,6 @@ import mapboxgl, { type LayerSpecification, type VectorSourceSpecification } fro
 import { Viewer, type ViewerBearingEvent } from 'mapillary-js/dist/mapillary.module';
 import 'mapillary-js/dist/mapillary.css';
 import { mapCursor, MapCursorState } from '$lib/logic/map-cursor';
-import { ANCHOR_LAYER_KEY } from '$lib/components/map/map';
 
 const mapillarySource: VectorSourceSpecification = {
     type: 'vector',
@@ -100,10 +99,10 @@ export class MapillaryLayer {
             this.map.addSource('mapillary', mapillarySource);
         }
         if (!this.map.getLayer('mapillary-sequence')) {
-            this.map.addLayer(mapillarySequenceLayer, ANCHOR_LAYER_KEY.mapillary);
+            this.map.addLayer(mapillarySequenceLayer);
         }
         if (!this.map.getLayer('mapillary-image')) {
-            this.map.addLayer(mapillaryImageLayer, ANCHOR_LAYER_KEY.mapillary);
+            this.map.addLayer(mapillaryImageLayer);
         }
         this.map.on('style.load', this.addBinded);
         this.map.on('mouseenter', 'mapillary-image', this.onMouseEnterBinded);

website/src/lib/components/toolbar/tools/Clean.svelte

@@ -15,7 +15,7 @@
     import { onDestroy, onMount } from 'svelte';
     import { getURLForLanguage } from '$lib/utils';
     import { Trash2 } from '@lucide/svelte';
-    import { ANCHOR_LAYER_KEY, map } from '$lib/components/map/map';
+    import { map } from '$lib/components/map/map';
     import type { GeoJSONSource } from 'mapbox-gl';
     import { selection } from '$lib/logic/selection';
     import { fileActions } from '$lib/logic/file-actions';
@@ -63,18 +63,15 @@
                     });
                 }
                 if (!$map.getLayer('rectangle')) {
-                    $map.addLayer(
-                        {
-                            id: 'rectangle',
-                            type: 'fill',
-                            source: 'rectangle',
-                            paint: {
-                                'fill-color': 'SteelBlue',
-                                'fill-opacity': 0.5,
-                            },
+                    $map.addLayer({
+                        id: 'rectangle',
+                        type: 'fill',
+                        source: 'rectangle',
+                        paint: {
+                            'fill-color': 'SteelBlue',
+                            'fill-opacity': 0.5,
                         },
-                        ANCHOR_LAYER_KEY.interactions
-                    );
+                    });
                 }
             }
         }

website/src/lib/components/toolbar/tools/Elevation.svelte

@@ -2,6 +2,7 @@
     import { Button } from '$lib/components/ui/button';
     import Help from '$lib/components/Help.svelte';
     import { MountainSnow } from '@lucide/svelte';
+    import { map } from '$lib/components/map/map';
     import { i18n } from '$lib/i18n.svelte';
     import { getURLForLanguage } from '$lib/utils';
     import { selection } from '$lib/logic/selection';
@@ -19,7 +20,11 @@
         variant="outline"
         class="whitespace-normal h-fit"
         disabled={!validSelection}
-        onclick={() => fileActions.addElevationToSelection()}
+        onclick={() => {
+            if ($map) {
+                fileActions.addElevationToSelection($map);
+            }
+        }}
     >
         <MountainSnow size="16" class="shrink-0" />
         {i18n._('toolbar.elevation.button')}

website/src/lib/components/toolbar/tools/reduce/utils.svelte.ts

@@ -1,5 +1,5 @@
 import { ListItem, ListTrackSegmentItem } from '$lib/components/file-list/file-list';
-import { ANCHOR_LAYER_KEY, map } from '$lib/components/map/map';
+import { map } from '$lib/components/map/map';
 import { fileActions } from '$lib/logic/file-actions';
 import { GPXFileStateCollectionObserver, type GPXFileState } from '$lib/logic/file-state';
 import { selection } from '$lib/logic/selection';
@@ -144,18 +144,17 @@ export class ReducedGPXLayerCollection {
             });
         }
         if (!map_.getLayer('simplified')) {
-            map_.addLayer(
-                {
-                    id: 'simplified',
-                    type: 'line',
-                    source: 'simplified',
-                    paint: {
-                        'line-color': 'white',
-                        'line-width': 3,
-                    },
+            map_.addLayer({
+                id: 'simplified',
+                type: 'line',
+                source: 'simplified',
+                paint: {
+                    'line-color': 'white',
+                    'line-width': 3,
                 },
-                ANCHOR_LAYER_KEY.interactions
-            );
+            });
+        } else {
+            map_.moveLayer('simplified');
         }
     }
 

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

@@ -21,7 +21,7 @@
         SquareArrowUpLeft,
         SquareArrowOutDownRight,
     } from '@lucide/svelte';
-    import { brouterProfiles } from '$lib/components/toolbar/tools/routing/routing';
+    import { routingProfiles } from '$lib/components/toolbar/tools/routing/routing';
     import { i18n } from '$lib/i18n.svelte';
     import { slide } from 'svelte/transition';
     import {
@@ -167,7 +167,7 @@
                                 {i18n._(`toolbar.routing.activities.${$routingProfile}`)}
                             </Select.Trigger>
                             <Select.Content>
-                                {#each Object.keys(brouterProfiles) as profile}
+                                {#each Object.keys(routingProfiles) as profile}
                                     <Select.Item value={profile}
                                         >{i18n._(
                                             `toolbar.routing.activities.${profile}`

website/src/lib/components/toolbar/tools/routing/routing.ts

@@ -6,35 +6,185 @@ import { get } from 'svelte/store';
 
 const { routing, routingProfile, privateRoads } = settings;
 
-export const brouterProfiles: { [key: string]: string } = {
-    bike: 'Trekking-dry',
-    racing_bike: 'fastbike',
-    gravel_bike: 'gravel',
-    mountain_bike: 'MTB',
-    foot: 'Hiking-Alpine-SAC6',
-    motorcycle: 'Car-FastEco',
-    water: 'river',
-    railway: 'rail',
+export type RoutingProfile = {
+    engine: 'graphhopper' | 'brouter';
+    profile: string;
+};
+
+export const routingProfiles: { [key: string]: RoutingProfile } = {
+    bike: { engine: 'graphhopper', profile: 'bike' },
+    racing_bike: { engine: 'graphhopper', profile: 'racingbike' },
+    gravel_bike: { engine: 'graphhopper', profile: 'gravelbike' },
+    mountain_bike: { engine: 'graphhopper', profile: 'mtb' },
+    foot: { engine: 'graphhopper', profile: 'foot' },
+    motorcycle: { engine: 'graphhopper', profile: 'motorcycle' },
+    water: { engine: 'brouter', profile: 'river' },
+    railway: { engine: 'brouter', profile: 'rail' },
 };
 
 export function route(points: Coordinates[]): Promise<TrackPoint[]> {
     if (get(routing)) {
-        return getRoute(points, brouterProfiles[get(routingProfile)], get(privateRoads));
+        const profile = routingProfiles[get(routingProfile)];
+        if (profile.engine === 'graphhopper') {
+            return getGraphHopperRoute(points, profile.profile, get(privateRoads));
+        } else {
+            return getBRouterRoute(points, profile.profile);
+        }
     } else {
         return getIntermediatePoints(points);
     }
 }
 
-async function getRoute(
+const graphhopperDetails = ['road_class', 'surface', 'hike_rating', 'mtb_rating'];
+const hikeRatingToSACScale: { [key: string]: string } = {
+    '1': 'hiking',
+    '2': 'mountain_hiking',
+    '3': 'demanding_mountain_hiking',
+    '4': 'alpine_hiking',
+    '5': 'demanding_alpine_hiking',
+    '6': 'difficult_alpine_hiking',
+};
+const mtbRatingToScale: { [key: string]: string } = {
+    '1': '0',
+    '2': '1',
+    '3': '2',
+    '4': '3',
+    '5': '4',
+    '6': '5',
+    '7': '6',
+};
+
+const graphhopperBlockPrivateCustomModels: { [key: string]: any } = {
+    bike: {
+        priority: [
+            {
+                if: 'bike_road_access == PRIVATE',
+                multiply_by: '0.0',
+            },
+        ],
+    },
+    racingbike: {
+        priority: [
+            {
+                if: 'bike_road_access == PRIVATE',
+                multiply_by: '0.0',
+            },
+        ],
+    },
+    gravelbike: {
+        priority: [
+            {
+                if: 'bike_road_access == PRIVATE',
+                multiply_by: '0.0',
+            },
+        ],
+    },
+    mtb: {
+        priority: [
+            {
+                if: 'bike_road_access == PRIVATE',
+                multiply_by: '0.0',
+            },
+        ],
+    },
+    foot: {
+        priority: [
+            {
+                if: 'foot_road_access == PRIVATE',
+                multiply_by: '0.0',
+            },
+        ],
+    },
+    motorcycle: {
+        priority: [
+            {
+                if: 'road_access == PRIVATE',
+                multiply_by: '0.0',
+            },
+        ],
+    },
+};
+async function getGraphHopperRoute(
     points: Coordinates[],
-    brouterProfile: string,
+    graphHopperProfile: string,
     privateRoads: boolean
 ): Promise<TrackPoint[]> {
-    let url = `https://brouter.gpx.studio?lonlats=${points.map((point) => `${point.lon.toFixed(8)},${point.lat.toFixed(8)}`).join('|')}&profile=${brouterProfile + (privateRoads ? '-private' : '')}&format=geojson&alternativeidx=0`;
+    let response = await fetch('https://graphhopper-a.gpx.studio/route', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+            points: points.map((point) => [point.lon, point.lat]),
+            profile: graphHopperProfile,
+            elevation: true,
+            points_encoded: false,
+            details: graphhopperDetails,
+            custom_model: privateRoads
+                ? {}
+                : graphhopperBlockPrivateCustomModels[graphHopperProfile] || {},
+        }),
+    });
+
+    if (!response.ok) {
+        throw new Error(`${await response.text()}`);
+    }
+
+    let json = await response.json();
+
+    let route: TrackPoint[] = [];
+    let coordinates = json.paths[0].points.coordinates;
+    let details = json.paths[0].details;
+
+    for (let i = 0; i < coordinates.length; i++) {
+        route.push(
+            new TrackPoint({
+                attributes: {
+                    lat: coordinates[i][1],
+                    lon: coordinates[i][0],
+                },
+                ele: coordinates[i][2] ?? (i > 0 ? route[i - 1].ele : 0),
+                extensions: {},
+            })
+        );
+    }
+
+    for (let key of graphhopperDetails) {
+        let detail = details[key];
+        for (let i = 0; i < detail.length; i++) {
+            for (let j = detail[i][0]; j < detail[i][1] + (i == detail.length - 1); j++) {
+                if (detail[i][2] !== undefined && detail[i][2] !== 'missing') {
+                    if (key === 'road_class') {
+                        route[j].setExtension('highway', detail[i][2]);
+                    } else if (key === 'hike_rating') {
+                        const sacScale = hikeRatingToSACScale[detail[i][2]];
+                        if (sacScale) {
+                            route[j].setExtension('sac_scale', sacScale);
+                        }
+                    } else if (key === 'mtb_rating') {
+                        const mtbScale = mtbRatingToScale[detail[i][2]];
+                        if (mtbScale) {
+                            route[j].setExtension('mtb_scale', mtbScale);
+                        }
+                    } else if (key === 'surface' && detail[i][2] !== 'other') {
+                        route[j].setExtension('surface', detail[i][2]);
+                    }
+                }
+            }
+        }
+    }
+
+    return route;
+}
+
+async function getBRouterRoute(
+    points: Coordinates[],
+    brouterProfile: string
+): Promise<TrackPoint[]> {
+    let url = `https://brouter.de/brouter?lonlats=${points.map((point) => `${point.lon.toFixed(8)},${point.lat.toFixed(8)}`).join('|')}&profile=${brouterProfile}&format=geojson&alternativeidx=0`;
 
     let response = await fetch(url);
 
-    // Check if the response is ok
     if (!response.ok) {
         throw new Error(`${await response.text()}`);
     }
@@ -52,14 +202,13 @@ async function getRoute(
     let tags = messageIdx < messages.length ? getTags(messages[messageIdx][tagIdx]) : {};
 
     for (let i = 0; i < coordinates.length; i++) {
-        let coord = coordinates[i];
         route.push(
             new TrackPoint({
                 attributes: {
-                    lat: coord[1],
-                    lon: coord[0],
+                    lat: coordinates[i][1],
+                    lon: coordinates[i][0],
                 },
-                ele: coord[2] ?? (i > 0 ? route[i - 1].ele : 0),
+                ele: coordinates[i][2] ?? (i > 0 ? route[i - 1].ele : 0),
             })
         );
 

website/src/lib/components/toolbar/tools/scissors/split-controls.ts

@@ -8,7 +8,6 @@ import { get } from 'svelte/store';
 import { fileStateCollection } from '$lib/logic/file-state';
 import { fileActions } from '$lib/logic/file-actions';
 import { mapCursor, MapCursorState } from '$lib/logic/map-cursor';
-import { ANCHOR_LAYER_KEY } from '$lib/components/map/map';
 
 export class SplitControls {
     map: mapboxgl.Map;
@@ -109,25 +108,24 @@ export class SplitControls {
             }
 
             if (!this.map.getLayer('split-controls')) {
-                this.map.addLayer(
-                    {
-                        id: 'split-controls',
-                        type: 'symbol',
-                        source: 'split-controls',
-                        layout: {
-                            'icon-image': 'split-control',
-                            'icon-size': 0.25,
-                            'icon-padding': 0,
-                        },
-                        filter: ['<=', ['get', 'minZoom'], ['zoom']],
+                this.map.addLayer({
+                    id: 'split-controls',
+                    type: 'symbol',
+                    source: 'split-controls',
+                    layout: {
+                        'icon-image': 'split-control',
+                        'icon-size': 0.25,
+                        'icon-padding': 0,
                     },
-                    ANCHOR_LAYER_KEY.interactions
-                );
+                    filter: ['<=', ['get', 'minZoom'], ['zoom']],
+                });
 
                 this.map.on('mouseenter', 'split-controls', this.layerOnMouseEnterBinded);
                 this.map.on('mouseleave', 'split-controls', this.layerOnMouseLeaveBinded);
                 this.map.on('click', 'split-controls', this.layerOnClickBinded);
             }
+
+            this.map.moveLayer('split-controls');
         } catch (e) {
             // No reliable way to check if the map is ready to add sources and layers
         }

website/src/lib/docs/vi/menu/file.mdx

@@ -31,7 +31,7 @@ Create a copy of the currently selected files.
 
 ### <FileX size="16" class="inline-block" style="margin-bottom: 2px" /> Delete
 
-.
+Delete the currently selected files.
 
 ### <FileX size="16" class="inline-block" style="margin-bottom: 2px" /> Delete all
 

website/src/lib/logic/file-actions.ts

@@ -807,7 +807,7 @@ export const fileActions = {
             });
         });
     },
-    addElevationToSelection: async () => {
+    addElevationToSelection: async (map: mapboxgl.Map) => {
         if (get(selection).size === 0) {
             return;
         }

website/src/locales/cs.json

@@ -282,7 +282,7 @@
             "update": "Aktualizovat vrstvu"
         },
         "opacity": "Průhlednost překryvu",
-        "terrain": "Zdroj terénu",
+        "terrain": "Terrain source",
         "label": {
             "basemaps": "Základní mapy",
             "overlays": "Překrytí",

website/src/locales/es.json

@@ -282,7 +282,7 @@
             "update": "Actualizar capa"
         },
         "opacity": "Opacidad de la capa superpuesta",
-        "terrain": "Origen del terreno",
+        "terrain": "Terrain source",
         "label": {
             "basemaps": "Mapas base",
             "overlays": "Capas",

website/src/locales/nl.json

@@ -282,7 +282,7 @@
             "update": "Update laag"
         },
         "opacity": "Laag Transparantie",
-        "terrain": "Terrein bron",
+        "terrain": "Terrain source",
         "label": {
             "basemaps": "Basis kaarten",
             "overlays": "Lagen",

website/src/locales/pl.json

@@ -282,7 +282,7 @@
             "update": "Zaktualizuj warstwę"
         },
         "opacity": "Przezroczystość nakładki",
-        "terrain": "Źródło danych terenowych",
+        "terrain": "Terrain source",
         "label": {
             "basemaps": "Mapy bazowe",
             "overlays": "Nakładki",

website/src/locales/zh.json

@@ -282,7 +282,7 @@
             "update": "更新图层"
         },
         "opacity": "图层透明度",
-        "terrain": "地形来源",
+        "terrain": "Terrain source",
         "label": {
             "basemaps": "底图",
             "overlays": "叠加层",
@@ -326,7 +326,7 @@
             "usgs": "USGS",
             "bikerouterGravel": "bikerouter.de Gravel",
             "cyclOSMlite": "CyclOSM Lite",
-            "mapterhornHillshade": "山体阴影",
+            "mapterhornHillshade": "Mapterhorn Hillshade",
             "openRailwayMap": "OpenRailwayMap",
             "swisstopoSlope": "Swisstopo Slope",
             "swisstopoHiking": "Swisstopo Hiking",