small fix

* New translations en.json (Spanish)

* New translations getting-started.mdx (Dutch)

* New translations edit.mdx (Dutch)

* New translations en.json (Basque)

* New translations file.mdx (Basque)

* New translations en.json (Chinese Simplified)

* New translations file.mdx (Chinese Simplified)

gpx/src/gpx.ts

@@ -17,6 +17,9 @@ import {
 import { immerable, isDraft, original, freeze } from 'immer';
 
 function cloneJSON<T>(obj: T): T {
+    if (obj === undefined) {
+        return undefined;
+    }
     if (obj === null || typeof obj !== 'object') {
         return null;
     }
@@ -973,7 +976,7 @@ export class TrackSegment extends GPXTreeLeaf {
     _elevationComputation(statistics: GPXStatistics) {
         let simplified = ramerDouglasPeucker(
             this.trkpt,
-            5,
+            20,
             getElevationDistanceFunction(statistics)
         );
 
@@ -981,59 +984,67 @@ export class TrackSegment extends GPXTreeLeaf {
             let start = simplified[i].point._data.index;
             let end = simplified[i + 1].point._data.index;
 
-            const ele = this.trkpt[end].ele - this.trkpt[start].ele || 0;
-            const dist =
-                statistics.local.distance.total[end] - statistics.local.distance.total[start];
+            let cumulEle = 0;
+            let currentStart = start;
+            let currentEnd = start;
+            let smoothedEle = distanceWindowSmoothing(start, end + 1, statistics, 0.1, (s, e) => {
+                for (let i = currentStart; i < s; i++) {
+                    cumulEle -= this.trkpt[i].ele ?? 0;
+                }
+                for (let i = currentEnd; i <= e; i++) {
+                    cumulEle += this.trkpt[i].ele ?? 0;
+                }
+                currentStart = s;
+                currentEnd = e + 1;
+                return cumulEle / (e - s + 1);
+            });
+            smoothedEle[0] = this.trkpt[start].ele ?? 0;
+            smoothedEle[smoothedEle.length - 1] = this.trkpt[end].ele ?? 0;
 
-            for (let j = start; j < end + (i + 1 == simplified.length - 1 ? 1 : 0); j++) {
-                const localDist =
-                    statistics.local.distance.total[j] - statistics.local.distance.total[start];
-                const localEle = dist > 0 ? (localDist / dist) * ele : 0;
-                statistics.local.elevation.gain.push(
-                    statistics.global.elevation.gain + (localEle > 0 ? localEle : 0)
-                );
-                statistics.local.elevation.loss.push(
-                    statistics.global.elevation.loss + (localEle < 0 ? -localEle : 0)
-                );
-            }
+            for (let j = start; j < end; j++) {
+                statistics.local.elevation.gain.push(statistics.global.elevation.gain);
+                statistics.local.elevation.loss.push(statistics.global.elevation.loss);
 
-            if (ele > 0) {
-                statistics.global.elevation.gain += ele;
-            } else if (ele < 0) {
-                statistics.global.elevation.loss -= ele;
+                const ele = smoothedEle[j - start + 1] - smoothedEle[j - start];
+                if (ele > 0) {
+                    statistics.global.elevation.gain += ele;
+                } else if (ele < 0) {
+                    statistics.global.elevation.loss -= ele;
+                }
             }
         }
+        statistics.local.elevation.gain.push(statistics.global.elevation.gain);
+        statistics.local.elevation.loss.push(statistics.global.elevation.loss);
 
         let slope = [];
         let length = [];
-        for (let a = 0; a < simplified.length - 1; ) {
-            let b = a + 1;
-            while (b < simplified.length - 1 && simplified[b].distance < 20) {
-                b++;
-            }
-
-            let start = simplified[a].point._data.index;
-            let end = simplified[b].point._data.index;
+        for (let i = 0; i < simplified.length - 1; i++) {
+            let start = simplified[i].point._data.index;
+            let end = simplified[i + 1].point._data.index;
             let dist =
                 statistics.local.distance.total[end] - statistics.local.distance.total[start];
-            let ele = (simplified[b].point.ele ?? 0) - (simplified[a].point.ele ?? 0);
+            let ele = (simplified[i + 1].point.ele ?? 0) - (simplified[i].point.ele ?? 0);
 
-            for (let j = start; j < end + (b === simplified.length - 1 ? 1 : 0); j++) {
+            for (let j = start; j < end + (i + 1 === simplified.length - 1 ? 1 : 0); j++) {
                 slope.push((0.1 * ele) / dist);
                 length.push(dist);
             }
-
-            a = b;
         }
 
         statistics.local.slope.segment = slope;
         statistics.local.slope.length = length;
-        statistics.local.slope.at = distanceWindowSmoothing(statistics, 0.05, (start, end) => {
-            const ele = this.trkpt[end].ele - this.trkpt[start].ele || 0;
-            const dist =
-                statistics.local.distance.total[end] - statistics.local.distance.total[start];
-            return dist > 0 ? (0.1 * ele) / dist : 0;
-        });
+        statistics.local.slope.at = distanceWindowSmoothing(
+            0,
+            this.trkpt.length,
+            statistics,
+            0.05,
+            (start, end) => {
+                const ele = this.trkpt[end].ele - this.trkpt[start].ele || 0;
+                const dist =
+                    statistics.local.distance.total[end] - statistics.local.distance.total[start];
+                return dist > 0 ? (0.1 * ele) / dist : 0;
+            }
+        );
     }
 
     getNumberOfTrackPoints(): number {
@@ -1364,10 +1375,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 = {};
         }
@@ -1377,8 +1385,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);
         });
     }
 
@@ -1484,12 +1496,18 @@ export class Waypoint {
         this.attributes = waypoint.attributes;
         this.ele = waypoint.ele;
         this.time = waypoint.time;
-        this.name = waypoint.name;
-        this.cmt = waypoint.cmt;
-        this.desc = waypoint.desc;
-        this.link = waypoint.link;
-        this.sym = waypoint.sym;
-        this.type = waypoint.type;
+        this.name = waypoint.name === '' ? undefined : waypoint.name;
+        this.cmt = waypoint.cmt === '' ? undefined : waypoint.cmt;
+        this.desc = waypoint.desc === '' ? undefined : waypoint.desc;
+        this.link =
+            !waypoint.link ||
+            !waypoint.link.attributes ||
+            !waypoint.link.attributes.href ||
+            waypoint.link.attributes.href === ''
+                ? undefined
+                : waypoint.link;
+        this.sym = waypoint.sym === '' ? undefined : waypoint.sym;
+        this.type = waypoint.type === '' ? undefined : waypoint.type;
         if (waypoint.hasOwnProperty('_data')) {
             this._data = waypoint._data;
         }
@@ -1938,36 +1956,39 @@ export function getElevationDistanceFunction(statistics: GPXStatistics) {
 }
 
 function windowSmoothing(
-    length: number,
+    left: number,
+    right: number,
     distance: (index1: number, index2: number) => number,
     window: number,
     compute: (start: number, end: number) => number
 ): number[] {
     let result = [];
 
-    let start = 0,
-        end = 0;
-    for (var i = 0; i < length; i++) {
+    let start = left;
+    for (var i = left; i < right; i++) {
         while (start + 1 < i && distance(start, i) > window) {
             start++;
         }
-        end = Math.min(i + 2, length);
-        while (end < length && distance(i, end) <= window) {
+        let end = Math.min(i + 2, right);
+        while (end < right && distance(i, end) <= window) {
             end++;
         }
-        result[i] = compute(start, end - 1);
+        result.push(compute(start, end - 1));
     }
 
     return result;
 }
 
 function distanceWindowSmoothing(
+    left: number,
+    right: number,
     statistics: GPXStatistics,
     window: number,
     compute: (start: number, end: number) => number
 ): number[] {
     return windowSmoothing(
-        statistics.local.points.length,
+        left,
+        right,
         (index1, index2) =>
             statistics.local.distance.total[index2] - statistics.local.distance.total[index1],
         window,
@@ -1981,6 +2002,7 @@ function timeWindowSmoothing(
     compute: (start: number, end: number) => number
 ): number[] {
     return windowSmoothing(
+        0,
         points.length,
         (index1, index2) =>
             points[index2].time?.getTime() - points[index1].time?.getTime() || 2 * window,

website/package-lock.json

@@ -22,7 +22,7 @@
                 "gpx": "file:../gpx",
                 "immer": "^10.1.1",
                 "jszip": "^3.10.1",
-                "mapbox-gl": "^3.12.0",
+                "mapbox-gl": "^3.16.0",
                 "mapillary-js": "^4.1.2",
                 "png.js": "^0.2.1",
                 "sanitize-html": "^2.17.0",
@@ -1701,9 +1701,10 @@
             }
         },
         "node_modules/@mapbox/point-geometry": {
-            "version": "0.1.0",
-            "resolved": "https://registry.npmjs.org/@mapbox/point-geometry/-/point-geometry-0.1.0.tgz",
-            "integrity": "sha512-6j56HdLTwWGO0fJPlrZtdU/B13q8Uwmo18Ck2GnGgN9PCFyKTZ3UbXeEdRFh18i9XQ92eH2VdtpJHpBD3aripQ=="
+            "version": "1.1.0",
+            "resolved": "https://registry.npmjs.org/@mapbox/point-geometry/-/point-geometry-1.1.0.tgz",
+            "integrity": "sha512-YGcBz1cg4ATXDCM/71L9xveh4dynfGmcLDqufR+nQQy3fKwsAZsWd/x4621/6uJaeB9mwOHE6hPeDgXz9uViUQ==",
+            "license": "ISC"
         },
         "node_modules/@mapbox/polyline": {
             "version": "1.2.1",
@@ -1738,11 +1739,26 @@
             "integrity": "sha512-nMkuDXFv60aBr9soUG5q+GvZYL+2KZHVvsqFCzqnkGEf46U2fvmytHaEVc1/YZbiLn8X+eR3QzX1+dwDO1lxlw=="
         },
         "node_modules/@mapbox/vector-tile": {
-            "version": "1.3.1",
-            "resolved": "https://registry.npmjs.org/@mapbox/vector-tile/-/vector-tile-1.3.1.tgz",
-            "integrity": "sha512-MCEddb8u44/xfQ3oD+Srl/tNcQoqTw3goGk2oLsrFxOTc3dUp+kAnby3PvAeeBYSMSjSPD1nd1AJA6W49WnoUw==",
+            "version": "2.0.4",
+            "resolved": "https://registry.npmjs.org/@mapbox/vector-tile/-/vector-tile-2.0.4.tgz",
+            "integrity": "sha512-AkOLcbgGTdXScosBWwmmD7cDlvOjkg/DetGva26pIRiZPdeJYjYKarIlb4uxVzi6bwHO6EWH82eZ5Nuv4T5DUg==",
+            "license": "BSD-3-Clause",
             "dependencies": {
-                "@mapbox/point-geometry": "~0.1.0"
+                "@mapbox/point-geometry": "~1.1.0",
+                "@types/geojson": "^7946.0.16",
+                "pbf": "^4.0.1"
+            }
+        },
+        "node_modules/@mapbox/vector-tile/node_modules/pbf": {
+            "version": "4.0.1",
+            "resolved": "https://registry.npmjs.org/pbf/-/pbf-4.0.1.tgz",
+            "integrity": "sha512-SuLdBvS42z33m8ejRbInMapQe8n0D3vN/Xd5fmWM3tufNgRQFBpaW2YVJxQZV4iPNqb0vEFvssMEo5w9c6BTIA==",
+            "license": "BSD-3-Clause",
+            "dependencies": {
+                "resolve-protobuf-schema": "^2.1.0"
+            },
+            "bin": {
+                "pbf": "bin/pbf"
             }
         },
         "node_modules/@mapbox/whoots-js": {
@@ -2644,7 +2660,8 @@
         "node_modules/@types/mapbox__point-geometry": {
             "version": "0.1.4",
             "resolved": "https://registry.npmjs.org/@types/mapbox__point-geometry/-/mapbox__point-geometry-0.1.4.tgz",
-            "integrity": "sha512-mUWlSxAmYLfwnRBmgYV86tgYmMIICX4kza8YnE/eIlywGe2XoOxlpVnXWwir92xRLjwyarqwpu2EJKD2pk0IUA=="
+            "integrity": "sha512-mUWlSxAmYLfwnRBmgYV86tgYmMIICX4kza8YnE/eIlywGe2XoOxlpVnXWwir92xRLjwyarqwpu2EJKD2pk0IUA==",
+            "license": "MIT"
         },
         "node_modules/@types/mapbox__sphericalmercator": {
             "version": "1.2.3",
@@ -2660,16 +2677,6 @@
                 "@types/geojson": "*"
             }
         },
-        "node_modules/@types/mapbox__vector-tile": {
-            "version": "1.3.4",
-            "resolved": "https://registry.npmjs.org/@types/mapbox__vector-tile/-/mapbox__vector-tile-1.3.4.tgz",
-            "integrity": "sha512-bpd8dRn9pr6xKvuEBQup8pwQfD4VUyqO/2deGjfpe6AwC8YRlyEipvefyRJUSiCJTZuCb8Pl1ciVV5ekqJ96Bg==",
-            "dependencies": {
-                "@types/geojson": "*",
-                "@types/mapbox__point-geometry": "*",
-                "@types/pbf": "*"
-            }
-        },
         "node_modules/@types/mapbox-gl": {
             "version": "3.4.1",
             "resolved": "https://registry.npmjs.org/@types/mapbox-gl/-/mapbox-gl-3.4.1.tgz",
@@ -4947,9 +4954,10 @@
             }
         },
         "node_modules/gl-matrix": {
-            "version": "3.4.3",
-            "resolved": "https://registry.npmjs.org/gl-matrix/-/gl-matrix-3.4.3.tgz",
-            "integrity": "sha512-wcCp8vu8FT22BnvKVPjXa/ICBWRq/zjFfdofZy1WSpQZpphblv12/bOQLBC1rMM7SGOFS9ltVmKOHil5+Ml7gA=="
+            "version": "3.4.4",
+            "resolved": "https://registry.npmjs.org/gl-matrix/-/gl-matrix-3.4.4.tgz",
+            "integrity": "sha512-latSnyDNt/8zYUB6VIJ6PCh2jBjJX6gnDsoCZ7LyW7GkqrD51EWwa9qCoGixj8YqBtETQK/xY7OmpTF8xz1DdQ==",
+            "license": "MIT"
         },
         "node_modules/glob": {
             "version": "11.0.2",
@@ -6061,9 +6069,9 @@
             }
         },
         "node_modules/mapbox-gl": {
-            "version": "3.12.0",
-            "resolved": "https://registry.npmjs.org/mapbox-gl/-/mapbox-gl-3.12.0.tgz",
-            "integrity": "sha512-DV6TRr+xoPrLSKuGiUcbyLVkoLdNaNNpn6O7+ZC27yQH7BOOIF7l6JKbTCMhfMJuZBVJfL8YRJjlMJ6MZCTggA==",
+            "version": "3.16.0",
+            "resolved": "https://registry.npmjs.org/mapbox-gl/-/mapbox-gl-3.16.0.tgz",
+            "integrity": "sha512-rluV1Zp/0oHf1Y9BV+nePRNnKyTdljko3E19CzO5rBqtQaNUYS0ePCMPRtxOuWRwSdKp3f9NWJkOCjemM8nmjw==",
             "license": "SEE LICENSE IN LICENSE.txt",
             "workspaces": [
                 "src/style-spec",
@@ -6072,33 +6080,43 @@
             "dependencies": {
                 "@mapbox/jsonlint-lines-primitives": "^2.0.2",
                 "@mapbox/mapbox-gl-supported": "^3.0.0",
-                "@mapbox/point-geometry": "^0.1.0",
+                "@mapbox/point-geometry": "^1.1.0",
                 "@mapbox/tiny-sdf": "^2.0.6",
                 "@mapbox/unitbezier": "^0.0.1",
-                "@mapbox/vector-tile": "^1.3.1",
+                "@mapbox/vector-tile": "^2.0.4",
                 "@mapbox/whoots-js": "^3.1.0",
                 "@types/geojson": "^7946.0.16",
                 "@types/geojson-vt": "^3.2.5",
                 "@types/mapbox__point-geometry": "^0.1.4",
-                "@types/mapbox__vector-tile": "^1.3.4",
                 "@types/pbf": "^3.0.5",
                 "@types/supercluster": "^7.1.3",
                 "cheap-ruler": "^4.0.0",
                 "csscolorparser": "~1.0.3",
                 "earcut": "^3.0.1",
                 "geojson-vt": "^4.0.2",
-                "gl-matrix": "^3.4.3",
+                "gl-matrix": "^3.4.4",
                 "grid-index": "^1.1.0",
                 "kdbush": "^4.0.2",
                 "martinez-polygon-clipping": "^0.7.4",
                 "murmurhash-js": "^1.0.0",
-                "pbf": "^3.2.1",
+                "pbf": "^4.0.1",
                 "potpack": "^2.0.0",
                 "quickselect": "^3.0.0",
                 "serialize-to-js": "^3.1.2",
                 "supercluster": "^8.0.1",
-                "tinyqueue": "^3.0.0",
-                "vt-pbf": "^3.1.3"
+                "tinyqueue": "^3.0.0"
+            }
+        },
+        "node_modules/mapbox-gl/node_modules/pbf": {
+            "version": "4.0.1",
+            "resolved": "https://registry.npmjs.org/pbf/-/pbf-4.0.1.tgz",
+            "integrity": "sha512-SuLdBvS42z33m8ejRbInMapQe8n0D3vN/Xd5fmWM3tufNgRQFBpaW2YVJxQZV4iPNqb0vEFvssMEo5w9c6BTIA==",
+            "license": "BSD-3-Clause",
+            "dependencies": {
+                "resolve-protobuf-schema": "^2.1.0"
+            },
+            "bin": {
+                "pbf": "bin/pbf"
             }
         },
         "node_modules/mapillary-js": {
@@ -9021,16 +9039,6 @@
             "integrity": "sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ==",
             "dev": true
         },
-        "node_modules/vt-pbf": {
-            "version": "3.1.3",
-            "resolved": "https://registry.npmjs.org/vt-pbf/-/vt-pbf-3.1.3.tgz",
-            "integrity": "sha512-2LzDFzt0mZKZ9IpVF2r69G9bXaP2Q2sArJCmcCgvfTdCCZzSyz4aCLoQyUilu37Ll56tCblIZrXFIjNUpGIlmA==",
-            "dependencies": {
-                "@mapbox/point-geometry": "0.1.0",
-                "@mapbox/vector-tile": "^1.3.1",
-                "pbf": "^3.2.1"
-            }
-        },
         "node_modules/which": {
             "version": "2.0.2",
             "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",

website/package.json

@@ -74,7 +74,7 @@
         "gpx": "file:../gpx",
         "immer": "^10.1.1",
         "jszip": "^3.10.1",
-        "mapbox-gl": "^3.12.0",
+        "mapbox-gl": "^3.16.0",
         "mapillary-js": "^4.1.2",
         "png.js": "^0.2.1",
         "sanitize-html": "^2.17.0",

website/src/hooks.server.js

@@ -24,6 +24,14 @@ export async function handle({ event, resolve }) {
 
     let headTag = `<head>
     <title>gpx.studio — ${title}</title>
+    <script type="application/ld+json">
+    {
+        "@context": "https://schema.org",
+        "@type": "WebSite",
+        "name": "gpx.studio",
+        "url": "https://gpx.studio"
+    }
+    </script>
     <meta name="description" content="${description}" />
     <meta property="og:title" content="gpx.studio — ${title}" />
     <meta property="og:description" content="${description}" />

website/src/lib/assets/layers.ts

@@ -145,7 +145,7 @@ export const basemaps: { [key: string]: string | StyleSpecification } = {
     swisstopoVector: 'https://vectortiles.geo.admin.ch/styles/ch.swisstopo.basemap.vt/style.json',
     swisstopoSatellite:
         'https://vectortiles.geo.admin.ch/styles/ch.swisstopo.imagerybasemap.vt/style.json',
-    linz: 'https://basemaps.linz.govt.nz/v1/tiles/topographic/EPSG:3857/style/topographic.json?api=d01fbtg0ar23gctac5m0jgyy2ds',
+    linz: 'https://basemaps.linz.govt.nz/v1/styles/topographic-v2.json?api=d01fbtg0ar23gctac5m0jgyy2ds',
     linzTopo: {
         version: 8,
         sources: {
@@ -836,6 +836,7 @@ export const overpassTree: LayerTreeType = {
             shower: true,
             shelter: true,
             barrier: true,
+            cemetery: true,
         },
         tourism: {
             attraction: true,
@@ -919,6 +920,7 @@ export const defaultOverpassQueries: LayerTreeType = {
             shower: false,
             shelter: false,
             barrier: false,
+            cemetery: false,
         },
         tourism: {
             attraction: false,
@@ -1053,6 +1055,7 @@ export const defaultOverpassTree: LayerTreeType = {
             shower: false,
             shelter: false,
             barrier: false,
+            cemetery: false,
         },
         tourism: {
             attraction: false,
@@ -1099,9 +1102,7 @@ type OverpassQueryData = {
         svg: string;
         color: string;
     };
-    tags:
-        | Record<string, string | boolean | string[]>
-        | Record<string, string | boolean | string[]>[];
+    tags: Record<string, string | string[]> | Record<string, string | string[]>[];
     symbol?: string;
 };
 
@@ -1182,6 +1183,20 @@ export const overpassQueryData: Record<string, OverpassQueryData> = {
         },
         symbol: 'Shelter',
     },
+    cemetery: {
+        icon: {
+            svg: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 17v-10a6 5 0 1 1 12 0v10"/><path d="M 4 21 a 1 1 0 0 0 1 1 h 14 a 1 1 0 0 0 1-1 v -1 a 2 2 0 0 0-2-2 H6 a 2 2 0 0 0-2 2 z"/></svg>',
+            color: '#000000',
+        },
+        tags: [
+            {
+                landuse: 'cemetery',
+            },
+            {
+                amenity: 'grave_yard',
+            },
+        ],
+    },
     'fuel-station': {
         icon: {
             svg: Fuel,
@@ -1218,7 +1233,25 @@ export const overpassQueryData: Record<string, OverpassQueryData> = {
             color: '#000000',
         },
         tags: {
-            barrier: true,
+            barrier: [
+                'bar',
+                'barrier_board',
+                'block',
+                'chain',
+                'cycle_barrier',
+                'gate',
+                'hampshire_gate',
+                'horse_stile',
+                'kissing_gate',
+                'lift_gate',
+                'motorcycle_barrier',
+                'sliding_beam',
+                'sliding_gate',
+                'stile',
+                'swing_gate',
+                'turnstile',
+                'wicket_gate',
+            ],
         },
     },
     attraction: {

website/src/lib/assets/symbols.ts

@@ -1,6 +1,5 @@
 import {
     Landmark,
-    Icon,
     Shell,
     Bike,
     Building,
@@ -29,6 +28,7 @@ import {
     TriangleAlert,
     Anchor,
     Toilet,
+    X,
     type IconProps,
 } from '@lucide/svelte';
 import {
@@ -61,6 +61,7 @@ import {
     TriangleAlert as TriangleAlertSvg,
     Anchor as AnchorSvg,
     Toilet as ToiletSvg,
+    X as XSvg,
 } from 'lucide-static';
 import type { Component } from 'svelte';
 
@@ -87,7 +88,11 @@ export const symbols: { [key: string]: Symbol } = {
         icon: ShoppingBasket,
         iconSvg: ShoppingBasketSvg,
     },
-    crossing: { value: 'Crossing' },
+    crossing: {
+        value: 'Crossing',
+        icon: X,
+        iconSvg: XSvg,
+    },
     department_store: {
         value: 'Department Store',
         icon: ShoppingBasket,

website/src/lib/components/Footer.svelte

@@ -34,6 +34,7 @@
                         {i18n._('homepage.home')}
                     </Button>
                     <Button
+                        data-sveltekit-reload
                         variant="link"
                         class="h-6 px-0 has-[>svg]:px-0 text-muted-foreground"
                         href={getURLForLanguage(i18n.lang, '/app')}

website/src/lib/components/Menu.svelte

@@ -644,6 +644,19 @@
         } else if (e.key === 'F5') {
             $routing = !$routing;
             e.preventDefault();
+        } else if (
+            e.key === 'ArrowRight' ||
+            e.key === 'ArrowDown' ||
+            e.key === 'ArrowLeft' ||
+            e.key === 'ArrowUp'
+        ) {
+            if (!targetInput) {
+                selection.updateFromKey(
+                    e.key === 'ArrowRight' || e.key === 'ArrowDown',
+                    e.shiftKey
+                );
+                e.preventDefault();
+            }
         }
     }}
     on:dragover={(e) => e.preventDefault()}

website/src/lib/components/Nav.svelte

@@ -23,6 +23,7 @@
             {i18n._('homepage.home')}
         </Button>
         <Button
+            data-sveltekit-reload
             variant="link"
             class="text-base px-0 has-[>svg]:px-0"
             href={getURLForLanguage(i18n.lang, '/app')}

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

@@ -175,7 +175,7 @@
                         let file = fileStateCollection.getFile(item.getFileId());
                         if (layer && file) {
                             let waypoint = file.wpt[item.getWaypointIndex()];
-                            if (waypoint) {
+                            if (waypoint && !waypoint._data.hidden) {
                                 waypointPopup?.setItem({
                                     item: waypoint,
                                     fileId: item.getFileId(),

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

@@ -16,7 +16,8 @@
 </script>
 
 <Button
-    class="p-1 has-[>svg]:px-2 h-8 justify-start {className}"
+    size="sm"
+    class="justify-start {className}"
     variant="outline"
     onclick={() => {
         navigator.clipboard.writeText(

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

@@ -1,11 +1,13 @@
 <script lang="ts">
     import type { TrackPoint } from 'gpx';
+    import { Button } from '$lib/components/ui/button';
     import CopyCoordinates from '$lib/components/map/gpx-layer/CopyCoordinates.svelte';
     import * as Card from '$lib/components/ui/card';
     import WithUnits from '$lib/components/WithUnits.svelte';
-    import { Compass, Mountain, Timer } from '@lucide/svelte';
+    import { Compass, Earth, Mountain, Timer } from '@lucide/svelte';
     import { i18n } from '$lib/i18n.svelte';
     import type { PopupItem } from '$lib/components/map/map-popup';
+    import { map } from '$lib/components/map/map';
 
     let { trackpoint }: { trackpoint: PopupItem<TrackPoint> } = $props();
 </script>
@@ -35,5 +37,16 @@
             onCopy={() => trackpoint.hide?.()}
             class="mt-0.5"
         />
+        {#if trackpoint.fileId === undefined}
+            <Button
+                size="sm"
+                variant="outline"
+                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"
+            >
+                <Earth size="14" />
+                {i18n._('menu.edit_osm')}
+            </Button>
+        {/if}
     </Card.Content>
 </Card.Root>

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

@@ -13,6 +13,8 @@
     import { ScrollArea } from '$lib/components/ui/scroll-area/index.js';
     import { fileActions } from '$lib/logic/file-actions';
     import type { PopupItem } from '$lib/components/map/map-popup';
+    import { selection } from '$lib/logic/selection';
+    import { ListFileItem } from '$lib/components/file-list/file-list';
 
     let {
         waypoint,
@@ -20,6 +22,9 @@
         waypoint: PopupItem<Waypoint>;
     } = $props();
 
+    let selected = $derived(
+        waypoint.fileId ? $selection.hasAnyChildren(new ListFileItem(waypoint.fileId)) : false
+    );
     let symbolKey = $derived(waypoint ? getSymbolKey(waypoint.item.sym) : undefined);
 
     function sanitize(text: string | undefined): string {
@@ -81,7 +86,7 @@
         </ScrollArea>
         <div class="mt-2 flex flex-col gap-1">
             <CopyCoordinates coordinates={waypoint.item.attributes} />
-            {#if $currentTool === Tool.WAYPOINT}
+            {#if $currentTool === Tool.WAYPOINT && selected}
                 <Button
                     class="p-1 has-[>svg]:px-2 h-8"
                     variant="outline"

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

@@ -8,14 +8,7 @@ import { allHidden } from '$lib/logic/hidden';
 
 const { distanceMarkers, distanceUnits } = settings;
 
-const stops = [
-    [100, 0],
-    [50, 7],
-    [25, 8, 10],
-    [10, 10],
-    [5, 11],
-    [1, 13],
-];
+const levels = [100, 50, 25, 10, 5, 1];
 
 export class DistanceMarkers {
     updateBinded: () => void = this.update.bind(this);
@@ -50,43 +43,50 @@ export class DistanceMarkers {
                         data: this.getDistanceMarkersGeoJSON(),
                     });
                 }
-                stops.forEach(([d, minzoom, maxzoom]) => {
-                    if (!map_.getLayer(`distance-markers-${d}`)) {
-                        map_.addLayer({
-                            id: `distance-markers-${d}`,
-                            type: 'symbol',
-                            source: 'distance-markers',
-                            filter:
-                                d === 5
-                                    ? [
-                                          'any',
-                                          ['==', ['get', 'level'], 5],
-                                          ['==', ['get', 'level'], 25],
-                                      ]
-                                    : ['==', ['get', 'level'], d],
-                            minzoom: minzoom,
-                            maxzoom: maxzoom ?? 24,
-                            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',
-                            },
-                        });
-                    } else {
-                        map_.moveLayer(`distance-markers-${d}`);
-                    }
-                });
+                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,
+                            ['>=', ['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',
+                        },
+                    });
+                } else {
+                    map_.moveLayer('distance-markers');
+                }
             } else {
-                stops.forEach(([d]) => {
-                    if (map_.getLayer(`distance-markers-${d}`)) {
-                        map_.removeLayer(`distance-markers-${d}`);
-                    }
-                });
+                if (map_.getLayer('distance-markers')) {
+                    map_.removeLayer('distance-markers');
+                }
             }
         } catch (e) {
             // No reliable way to check if the map is ready to add sources and layers
@@ -109,9 +109,7 @@ export class DistanceMarkers {
                 getConvertedDistanceToKilometers(currentTargetDistance)
             ) {
                 let distance = currentTargetDistance.toFixed(0);
-                let [level, minzoom] = stops.find(([d]) => currentTargetDistance % d === 0) ?? [
-                    0, 0,
-                ];
+                let level = levels.find((level) => currentTargetDistance % level === 0) || 1;
                 features.push({
                     type: 'Feature',
                     geometry: {
@@ -124,7 +122,6 @@ export class DistanceMarkers {
                     properties: {
                         distance,
                         level,
-                        minzoom,
                     },
                 } as GeoJSON.Feature);
                 currentTargetDistance += 1;

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

@@ -55,14 +55,18 @@ function decrementColor(color: string) {
     }
 }
 
-function getMarkerForSymbol(symbol: string | undefined, layerColor: string) {
+export function getSvgForSymbol(symbol?: string | undefined, layerColor?: string | undefined) {
     let symbolSvg = symbol ? symbols[symbol]?.iconSvg : undefined;
     return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-    ${Square.replace('width="24"', 'width="12"')
-        .replace('height="24"', 'height="12"')
-        .replace('stroke="currentColor"', 'stroke="SteelBlue"')
-        .replace('stroke-width="2"', 'stroke-width="1.5" x="9.6" y="0.4"')
-        .replace('fill="none"', `fill="${layerColor}"`)}
+    ${
+        layerColor
+            ? Square.replace('width="24"', 'width="12"')
+                  .replace('height="24"', 'height="12"')
+                  .replace('stroke="currentColor"', 'stroke="SteelBlue"')
+                  .replace('stroke-width="2"', 'stroke-width="1.5" x="9.6" y="0.4"')
+                  .replace('fill="none"', `fill="${layerColor}"`)
+            : ''
+    }
     ${MapPin.replace('width="24"', '')
         .replace('height="24"', '')
         .replace('stroke="currentColor"', '')
@@ -87,9 +91,10 @@ export class GPXLayer {
     fileId: string;
     file: Readable<GPXFileWithStatistics | undefined>;
     layerColor: string;
-    markers: mapboxgl.Marker[] = [];
     selected: boolean = false;
-    draggable: boolean;
+    currentWaypointData: GeoJSON.FeatureCollection | null = null;
+    draggedWaypointIndex: number | null = null;
+    draggingStartingPosition: mapboxgl.Point = new mapboxgl.Point(0, 0);
     unsubscribe: Function[] = [];
 
     updateBinded: () => void = this.update.bind(this);
@@ -98,6 +103,20 @@ export class GPXLayer {
     layerOnMouseMoveBinded: (e: any) => void = this.layerOnMouseMove.bind(this);
     layerOnClickBinded: (e: any) => void = this.layerOnClick.bind(this);
     layerOnContextMenuBinded: (e: any) => void = this.layerOnContextMenu.bind(this);
+    waypointLayerOnMouseEnterBinded: (e: mapboxgl.MapMouseEvent) => void =
+        this.waypointLayerOnMouseEnter.bind(this);
+    waypointLayerOnMouseLeaveBinded: (e: mapboxgl.MapMouseEvent) => void =
+        this.waypointLayerOnMouseLeave.bind(this);
+    waypointLayerOnClickBinded: (e: mapboxgl.MapMouseEvent) => void =
+        this.waypointLayerOnClick.bind(this);
+    waypointLayerOnMouseDownBinded: (e: mapboxgl.MapMouseEvent) => void =
+        this.waypointLayerOnMouseDown.bind(this);
+    waypointLayerOnTouchStartBinded: (e: mapboxgl.MapTouchEvent) => void =
+        this.waypointLayerOnTouchStart.bind(this);
+    waypointLayerOnMouseMoveBinded: (e: mapboxgl.MapMouseEvent | mapboxgl.MapTouchEvent) => void =
+        this.waypointLayerOnMouseMove.bind(this);
+    waypointLayerOnMouseUpBinded: (e: mapboxgl.MapMouseEvent | mapboxgl.MapTouchEvent) => void =
+        this.waypointLayerOnMouseUp.bind(this);
 
     constructor(fileId: string, file: Readable<GPXFileWithStatistics | undefined>) {
         this.fileId = fileId;
@@ -125,18 +144,6 @@ export class GPXLayer {
             })
         );
         this.unsubscribe.push(directionMarkers.subscribe(this.updateBinded));
-        this.unsubscribe.push(
-            currentTool.subscribe((tool) => {
-                if (tool === Tool.WAYPOINT && !this.draggable) {
-                    this.draggable = true;
-                    this.markers.forEach((marker) => marker.setDraggable(true));
-                } else if (tool !== Tool.WAYPOINT && this.draggable) {
-                    this.draggable = false;
-                    this.markers.forEach((marker) => marker.setDraggable(false));
-                }
-            })
-        );
-        this.draggable = get(currentTool) === Tool.WAYPOINT;
     }
 
     update() {
@@ -146,6 +153,8 @@ export class GPXLayer {
             return;
         }
 
+        this.loadIcons();
+
         if (
             file._data.style &&
             file._data.style.color &&
@@ -189,6 +198,56 @@ export class GPXLayer {
                 _map.on('mousemove', this.fileId, this.layerOnMouseMoveBinded);
             }
 
+            let waypointSource = _map.getSource(this.fileId + '-waypoints') as
+                | mapboxgl.GeoJSONSource
+                | undefined;
+            this.currentWaypointData = this.getWaypointsGeoJSON();
+            if (waypointSource) {
+                waypointSource.setData(this.currentWaypointData);
+            } else {
+                _map.addSource(this.fileId + '-waypoints', {
+                    type: 'geojson',
+                    data: this.currentWaypointData,
+                });
+            }
+
+            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.on(
+                    'mouseenter',
+                    this.fileId + '-waypoints',
+                    this.waypointLayerOnMouseEnterBinded
+                );
+                _map.on(
+                    'mouseleave',
+                    this.fileId + '-waypoints',
+                    this.waypointLayerOnMouseLeaveBinded
+                );
+                _map.on('click', this.fileId + '-waypoints', this.waypointLayerOnClickBinded);
+                _map.on(
+                    'mousedown',
+                    this.fileId + '-waypoints',
+                    this.waypointLayerOnMouseDownBinded
+                );
+                _map.on(
+                    'touchstart',
+                    this.fileId + '-waypoints',
+                    this.waypointLayerOnTouchStartBinded
+                );
+            }
+
             if (get(directionMarkers)) {
                 if (!_map.getLayer(this.fileId + '-direction')) {
                     _map.addLayer(
@@ -213,7 +272,7 @@ export class GPXLayer {
                                 'text-halo-color': 'white',
                             },
                         },
-                        _map.getLayer('distance-markers-100') ? 'distance-markers-100' : undefined
+                        _map.getLayer('distance-markers') ? 'distance-markers' : undefined
                     );
                 }
             } else {
@@ -222,10 +281,10 @@ export class GPXLayer {
                 }
             }
 
-            let visibleItems: [number, number][] = [];
+            let visibleSegments: [number, number][] = [];
             file.forEachSegment((segment, trackIndex, segmentIndex) => {
                 if (!segment._data.hidden) {
-                    visibleItems.push([trackIndex, segmentIndex]);
+                    visibleSegments.push([trackIndex, segmentIndex]);
                 }
             });
 
@@ -233,7 +292,7 @@ export class GPXLayer {
                 this.fileId,
                 [
                     'any',
-                    ...visibleItems.map(([trackIndex, segmentIndex]) => [
+                    ...visibleSegments.map(([trackIndex, segmentIndex]) => [
                         'all',
                         ['==', 'trackIndex', trackIndex],
                         ['==', 'segmentIndex', segmentIndex],
@@ -241,12 +300,26 @@ export class GPXLayer {
                 ],
                 { validate: false }
             );
+
+            let visibleWaypoints: number[] = [];
+            file.wpt.forEach((waypoint, waypointIndex) => {
+                if (!waypoint._data.hidden) {
+                    visibleWaypoints.push(waypointIndex);
+                }
+            });
+
+            _map.setFilter(
+                this.fileId + '-waypoints',
+                ['in', ['get', 'waypointIndex'], ['literal', visibleWaypoints]],
+                { validate: false }
+            );
+
             if (_map.getLayer(this.fileId + '-direction')) {
                 _map.setFilter(
                     this.fileId + '-direction',
                     [
                         'any',
-                        ...visibleItems.map(([trackIndex, segmentIndex]) => [
+                        ...visibleSegments.map(([trackIndex, segmentIndex]) => [
                             'all',
                             ['==', 'trackIndex', trackIndex],
                             ['==', 'segmentIndex', segmentIndex],
@@ -259,114 +332,6 @@ export class GPXLayer {
             // No reliable way to check if the map is ready to add sources and layers
             return;
         }
-
-        let markerIndex = 0;
-
-        if (get(selection).hasAnyChildren(new ListFileItem(this.fileId))) {
-            file.wpt.forEach((waypoint) => {
-                // Update markers
-                let symbolKey = getSymbolKey(waypoint.sym);
-                if (markerIndex < this.markers.length) {
-                    this.markers[markerIndex].getElement().innerHTML = getMarkerForSymbol(
-                        symbolKey,
-                        this.layerColor
-                    );
-                    this.markers[markerIndex].setLngLat(waypoint.getCoordinates());
-                    Object.defineProperty(this.markers[markerIndex], '_waypoint', {
-                        value: waypoint,
-                        writable: true,
-                    });
-                } else {
-                    let element = document.createElement('div');
-                    element.classList.add('w-8', 'h-8', 'drop-shadow-xl');
-                    element.innerHTML = getMarkerForSymbol(symbolKey, this.layerColor);
-                    let marker = new mapboxgl.Marker({
-                        draggable: this.draggable,
-                        element,
-                        anchor: 'bottom',
-                    }).setLngLat(waypoint.getCoordinates());
-                    Object.defineProperty(marker, '_waypoint', { value: waypoint, writable: true });
-                    let dragEndTimestamp = 0;
-                    marker.getElement().addEventListener('mousemove', (e) => {
-                        if (marker._isDragging) {
-                            return;
-                        }
-                        waypointPopup?.setItem({ item: marker._waypoint, fileId: this.fileId });
-                        e.stopPropagation();
-                    });
-                    marker.getElement().addEventListener('click', (e) => {
-                        if (dragEndTimestamp && Date.now() - dragEndTimestamp < 1000) {
-                            return;
-                        }
-
-                        if (get(currentTool) === Tool.WAYPOINT && e.shiftKey) {
-                            fileActions.deleteWaypoint(this.fileId, marker._waypoint._data.index);
-                            e.stopPropagation();
-                            return;
-                        }
-
-                        if (get(treeFileView)) {
-                            if (
-                                (e.ctrlKey || e.metaKey) &&
-                                get(selection).hasAnyChildren(
-                                    new ListWaypointsItem(this.fileId),
-                                    false
-                                )
-                            ) {
-                                selection.addSelectItem(
-                                    new ListWaypointItem(this.fileId, marker._waypoint._data.index)
-                                );
-                            } else {
-                                selection.selectItem(
-                                    new ListWaypointItem(this.fileId, marker._waypoint._data.index)
-                                );
-                            }
-                        } else if (get(currentTool) === Tool.WAYPOINT) {
-                            selectedWaypoint.set([marker._waypoint, this.fileId]);
-                        } else {
-                            waypointPopup?.setItem({ item: marker._waypoint, fileId: this.fileId });
-                        }
-                        e.stopPropagation();
-                    });
-                    marker.on('dragstart', () => {
-                        mapCursor.notify(MapCursorState.WAYPOINT_DRAGGING, true);
-                        marker.getElement().style.cursor = 'grabbing';
-                        waypointPopup?.hide();
-                    });
-                    marker.on('dragend', (e) => {
-                        mapCursor.notify(MapCursorState.WAYPOINT_DRAGGING, false);
-                        marker.getElement().style.cursor = '';
-                        getElevation([marker._waypoint]).then((ele) => {
-                            fileActionManager.applyToFile(this.fileId, (file) => {
-                                let latLng = marker.getLngLat();
-                                let wpt = file.wpt[marker._waypoint._data.index];
-                                wpt.setCoordinates({
-                                    lat: latLng.lat,
-                                    lon: latLng.lng,
-                                });
-                                wpt.ele = ele[0];
-                            });
-                        });
-                        dragEndTimestamp = Date.now();
-                    });
-                    this.markers.push(marker);
-                }
-                markerIndex++;
-            });
-        }
-
-        while (markerIndex < this.markers.length) {
-            // Remove extra markers
-            this.markers.pop()?.remove();
-        }
-
-        this.markers.forEach((marker) => {
-            if (!marker._waypoint._data.hidden) {
-                marker.addTo(_map);
-            } else {
-                marker.remove();
-            }
-        });
     }
 
     remove() {
@@ -379,6 +344,24 @@ export class GPXLayer {
             _map.off('mousemove', this.fileId, this.layerOnMouseMoveBinded);
             _map.off('style.import.load', this.updateBinded);
 
+            _map.off(
+                'mouseenter',
+                this.fileId + '-waypoints',
+                this.waypointLayerOnMouseEnterBinded
+            );
+            _map.off(
+                'mouseleave',
+                this.fileId + '-waypoints',
+                this.waypointLayerOnMouseLeaveBinded
+            );
+            _map.off('click', this.fileId + '-waypoints', this.waypointLayerOnClickBinded);
+            _map.off('mousedown', this.fileId + '-waypoints', this.waypointLayerOnMouseDownBinded);
+            _map.off(
+                'touchstart',
+                this.fileId + '-waypoints',
+                this.waypointLayerOnTouchStartBinded
+            );
+
             if (_map.getLayer(this.fileId + '-direction')) {
                 _map.removeLayer(this.fileId + '-direction');
             }
@@ -388,12 +371,14 @@ export class GPXLayer {
             if (_map.getSource(this.fileId)) {
                 _map.removeSource(this.fileId);
             }
+            if (_map.getLayer(this.fileId + '-waypoints')) {
+                _map.removeLayer(this.fileId + '-waypoints');
+            }
+            if (_map.getSource(this.fileId + '-waypoints')) {
+                _map.removeSource(this.fileId + '-waypoints');
+            }
         }
 
-        this.markers.forEach((marker) => {
-            marker.remove();
-        });
-
         this.unsubscribe.forEach((unsubscribe) => unsubscribe());
 
         decrementColor(this.layerColor);
@@ -407,6 +392,9 @@ export class GPXLayer {
         if (_map.getLayer(this.fileId)) {
             _map.moveLayer(this.fileId);
         }
+        if (_map.getLayer(this.fileId + '-waypoints')) {
+            _map.moveLayer(this.fileId + '-waypoints');
+        }
         if (_map.getLayer(this.fileId + '-direction')) {
             _map.moveLayer(this.fileId + '-direction');
         }
@@ -449,7 +437,7 @@ export class GPXLayer {
         }
     }
 
-    layerOnClick(e: any) {
+    layerOnClick(e: mapboxgl.MapMouseEvent) {
         if (
             get(currentTool) === Tool.ROUTING &&
             get(selection).hasAnyChildren(new ListRootItem(), true, ['waypoints'])
@@ -457,8 +445,8 @@ export class GPXLayer {
             return;
         }
 
-        let trackIndex = e.features[0].properties.trackIndex;
-        let segmentIndex = e.features[0].properties.segmentIndex;
+        let trackIndex = e.features![0].properties!.trackIndex;
+        let segmentIndex = e.features![0].properties!.segmentIndex;
 
         if (
             get(currentTool) === Tool.SCISSORS &&
@@ -466,6 +454,11 @@ export class GPXLayer {
                 new ListTrackSegmentItem(this.fileId, trackIndex, segmentIndex)
             )
         ) {
+            if (get(map)?.queryRenderedFeatures(e.point, { layers: ['split-controls'] }).length) {
+                // Clicked on split control, ignoring
+                return;
+            }
+
             fileActions.split(get(splitAs), this.fileId, trackIndex, segmentIndex, {
                 lat: e.lngLat.lat,
                 lon: e.lngLat.lng,
@@ -502,6 +495,160 @@ export class GPXLayer {
         }
     }
 
+    waypointLayerOnMouseEnter(e: mapboxgl.MapMouseEvent) {
+        if (this.draggedWaypointIndex !== null) {
+            return;
+        }
+        let file = get(this.file)?.file;
+        if (!file) {
+            return;
+        }
+
+        let waypointIndex = e.features![0].properties!.waypointIndex;
+        let waypoint = file.wpt[waypointIndex];
+        waypointPopup?.setItem({ item: waypoint, fileId: this.fileId });
+
+        mapCursor.notify(MapCursorState.WAYPOINT_HOVER, true);
+    }
+
+    waypointLayerOnMouseLeave() {
+        mapCursor.notify(MapCursorState.WAYPOINT_HOVER, false);
+    }
+
+    waypointLayerOnClick(e: mapboxgl.MapMouseEvent) {
+        e.preventDefault();
+
+        let waypointIndex = e.features![0].properties!.waypointIndex;
+        let file = get(this.file)?.file;
+        if (!file) {
+            return;
+        }
+
+        let waypoint = file.wpt[waypointIndex];
+        if (get(currentTool) === Tool.WAYPOINT) {
+            if (this.selected) {
+                if (e.originalEvent.shiftKey) {
+                    fileActions.deleteWaypoint(this.fileId, waypointIndex);
+                } else {
+                    selection.selectItem(new ListWaypointItem(this.fileId, waypointIndex));
+                    selectedWaypoint.set([waypoint, this.fileId]);
+                }
+            } else {
+                if (get(treeFileView)) {
+                    selection.selectItem(new ListWaypointItem(this.fileId, waypointIndex));
+                } else {
+                    selection.selectItem(new ListFileItem(this.fileId));
+                }
+                selectedWaypoint.set([waypoint, this.fileId]);
+            }
+        } else {
+            if (get(treeFileView)) {
+                if ((e.originalEvent.ctrlKey || e.originalEvent.metaKey) && this.selected) {
+                    selection.addSelectItem(new ListWaypointItem(this.fileId, waypointIndex));
+                } else {
+                    selection.selectItem(new ListWaypointItem(this.fileId, waypointIndex));
+                }
+            } else {
+                if (!this.selected) {
+                    selection.selectItem(new ListFileItem(this.fileId));
+                }
+                waypointPopup?.setItem({ item: waypoint, fileId: this.fileId });
+            }
+        }
+    }
+
+    waypointLayerOnMouseDown(e: mapboxgl.MapMouseEvent) {
+        if (get(currentTool) !== Tool.WAYPOINT || !this.selected) {
+            return;
+        }
+        const _map = get(map);
+        if (!_map) {
+            return;
+        }
+
+        e.preventDefault();
+
+        this.draggedWaypointIndex = e.features![0].properties!.waypointIndex;
+        this.draggingStartingPosition = e.point;
+        waypointPopup?.hide();
+
+        _map.on('mousemove', this.waypointLayerOnMouseMoveBinded);
+        _map.once('mouseup', this.waypointLayerOnMouseUpBinded);
+    }
+
+    waypointLayerOnTouchStart(e: mapboxgl.MapTouchEvent) {
+        if (e.points.length !== 1 || get(currentTool) !== Tool.WAYPOINT || !this.selected) {
+            return;
+        }
+        const _map = get(map);
+        if (!_map) {
+            return;
+        }
+
+        this.draggedWaypointIndex = e.features![0].properties!.waypointIndex;
+        this.draggingStartingPosition = e.point;
+        waypointPopup?.hide();
+
+        e.preventDefault();
+
+        _map.on('touchmove', this.waypointLayerOnMouseMoveBinded);
+        _map.once('touchend', this.waypointLayerOnMouseUpBinded);
+    }
+
+    waypointLayerOnMouseMove(e: mapboxgl.MapMouseEvent | mapboxgl.MapTouchEvent) {
+        if (this.draggedWaypointIndex === null || e.point.equals(this.draggingStartingPosition)) {
+            return;
+        }
+
+        mapCursor.notify(MapCursorState.WAYPOINT_DRAGGING, true);
+
+        (
+            this.currentWaypointData!.features[this.draggedWaypointIndex].geometry as GeoJSON.Point
+        ).coordinates = [e.lngLat.lng, e.lngLat.lat];
+
+        let waypointSource = get(map)?.getSource(this.fileId + '-waypoints') as
+            | mapboxgl.GeoJSONSource
+            | undefined;
+        if (waypointSource) {
+            waypointSource.setData(this.currentWaypointData!);
+        }
+    }
+
+    waypointLayerOnMouseUp(e: mapboxgl.MapMouseEvent | mapboxgl.MapTouchEvent) {
+        mapCursor.notify(MapCursorState.WAYPOINT_DRAGGING, false);
+
+        get(map)?.off('mousemove', this.waypointLayerOnMouseMoveBinded);
+        get(map)?.off('touchmove', this.waypointLayerOnMouseMoveBinded);
+
+        if (this.draggedWaypointIndex === null) {
+            return;
+        }
+        if (e.point.equals(this.draggingStartingPosition)) {
+            this.draggedWaypointIndex = null;
+            return;
+        }
+
+        getElevation([
+            {
+                lat: e.lngLat.lat,
+                lon: e.lngLat.lng,
+            },
+        ]).then((ele) => {
+            if (this.draggedWaypointIndex === null) {
+                return;
+            }
+            fileActionManager.applyToFile(this.fileId, (file) => {
+                let wpt = file.wpt[this.draggedWaypointIndex!];
+                wpt.setCoordinates({
+                    lat: e.lngLat.lat,
+                    lon: e.lngLat.lng,
+                });
+                wpt.ele = ele[0];
+            });
+            this.draggedWaypointIndex = null;
+        });
+    }
+
     getGeoJSON(): GeoJSON.FeatureCollection {
         let file = get(this.file)?.file;
         if (!file) {
@@ -548,4 +695,65 @@ export class GPXLayer {
         }
         return data;
     }
+
+    getWaypointsGeoJSON(): GeoJSON.FeatureCollection {
+        let file = get(this.file)?.file;
+
+        let data: GeoJSON.FeatureCollection = {
+            type: 'FeatureCollection',
+            features: [],
+        };
+
+        if (!file) {
+            return data;
+        }
+
+        file.wpt.forEach((waypoint, index) => {
+            data.features.push({
+                type: 'Feature',
+                geometry: {
+                    type: 'Point',
+                    coordinates: [waypoint.getLongitude(), waypoint.getLatitude()],
+                },
+                properties: {
+                    fileId: this.fileId,
+                    waypointIndex: index,
+                    icon: `${this.fileId}-waypoint-${getSymbolKey(waypoint.sym) ?? 'default'}`,
+                },
+            });
+        });
+
+        return data;
+    }
+
+    loadIcons() {
+        const _map = get(map);
+        let file = get(this.file)?.file;
+        if (!_map || !file) {
+            return;
+        }
+
+        let symbols = new Set<string | undefined>();
+        file.wpt.forEach((waypoint) => {
+            symbols.add(getSymbolKey(waypoint.sym));
+        });
+
+        symbols.forEach((symbol) => {
+            const iconId = `${this.fileId}-waypoint-${symbol ?? 'default'}`;
+            if (!_map.hasImage(iconId)) {
+                let icon = new Image(100, 100);
+                icon.onload = () => {
+                    if (!_map.hasImage(iconId)) {
+                        _map.addImage(iconId, icon);
+                    }
+                };
+
+                // Lucide icons are SVG files with a 24x24 viewBox
+                // Create a new SVG with a 32x32 viewBox and center the icon in a circle
+                icon.src =
+                    'data:image/svg+xml,' +
+                    encodeURIComponent(getSvgForSymbol(symbol, this.layerColor));
+            }
+        });
+    }
 }

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

@@ -160,7 +160,7 @@
                                     type="single"
                                     onValueChange={setOpacityFromSelection}
                                 >
-                                    <Select.Trigger class="h-8 mr-1 w-full">
+                                    <Select.Trigger class="mr-1 w-full" size="sm">
                                         {#if selectedOverlay}
                                             {#if isSelected($selectedOverlayTree, selectedOverlay)}
                                                 {#if $isLayerFromExtension(selectedOverlay)}

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

@@ -85,7 +85,7 @@
         {:else if anySelectedLayer(node[id])}
             <CollapsibleTreeNode {id}>
                 {#snippet trigger()}
-                    <span>{i18n._(`layers.label.${id}`)}</span>
+                    <span>{i18n._(`layers.label.${id}`, id)}</span>
                 {/snippet}
                 {#snippet content()}
                     <div class="ml-2">

website/src/lib/components/map/layer-control/extension-api.ts

@@ -8,6 +8,7 @@ import { map } from '$lib/components/map/map';
 const { currentOverlays, previousOverlays, selectedOverlayTree } = settings;
 
 export type CustomOverlay = {
+    extensionName: string;
     id: string;
     name: string;
     tileUrls: string[];
@@ -46,8 +47,16 @@ export class ExtensionAPI {
     }
 
     addOrUpdateOverlay(overlay: CustomOverlay) {
-        if (!overlay.id || !overlay.name || !overlay.tileUrls || overlay.tileUrls.length === 0) {
-            throw new Error('Overlay must have an id, name, and at least one tile URL.');
+        if (
+            !overlay.extensionName ||
+            !overlay.id ||
+            !overlay.name ||
+            !overlay.tileUrls ||
+            overlay.tileUrls.length === 0
+        ) {
+            throw new Error(
+                'Overlay must have an extensionName, id, name, and at least one tile URL.'
+            );
         }
         overlay.id = this.getOverlayId(overlay.id);
 
@@ -75,10 +84,17 @@ export class ExtensionAPI {
             ],
         };
 
-        overlayTree.overlays.world[overlay.id] = true;
+        if (!overlayTree.overlays.hasOwnProperty(overlay.extensionName)) {
+            overlayTree.overlays[overlay.extensionName] = {};
+        }
+
+        overlayTree.overlays[overlay.extensionName][overlay.id] = true;
 
         selectedOverlayTree.update((selected) => {
-            selected.overlays.world[overlay.id] = true;
+            if (!selected.overlays.hasOwnProperty(overlay.extensionName)) {
+                selected.overlays[overlay.extensionName] = {};
+            }
+            selected.overlays[overlay.extensionName][overlay.id] = true;
             return selected;
         });
 
@@ -94,7 +110,10 @@ export class ExtensionAPI {
         }
 
         currentOverlays.update((current) => {
-            current.overlays.world[overlay.id] = show;
+            if (!current.overlays.hasOwnProperty(overlay.extensionName)) {
+                current.overlays[overlay.extensionName] = {};
+            }
+            current.overlays[overlay.extensionName][overlay.id] = show;
             return current;
         });
     }
@@ -133,6 +152,29 @@ export class ExtensionAPI {
         });
     }
 
+    updateOverlaysOrder(ids: string[]) {
+        ids = ids.map((id) => this.getOverlayId(id));
+        selectedOverlayTree.update((selected) => {
+            let isSelected: Record<string, boolean> = {};
+            ids.forEach((id) => {
+                const overlay = get(this._overlays).get(id);
+                if (
+                    overlay &&
+                    selected.overlays.hasOwnProperty(overlay.extensionName) &&
+                    selected.overlays[overlay.extensionName].hasOwnProperty(id)
+                ) {
+                    isSelected[id] = selected.overlays[overlay.extensionName][id];
+                    delete selected.overlays[overlay.extensionName][id];
+                }
+            });
+            Object.entries(isSelected).forEach(([id, value]) => {
+                const overlay = get(this._overlays).get(id)!;
+                selected.overlays[overlay.extensionName][id] = value;
+            });
+            return selected;
+        });
+    }
+
     isLayerFromExtension = derived(this._overlays, ($overlays) => {
         return (id: string) => $overlays.has(id);
     });

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

@@ -101,7 +101,9 @@ export class OverpassLayer {
                 this.map.on('click', 'overpass', this.onHoverBinded);
             }
 
-            this.map.setFilter('overpass', ['in', 'query', ...getCurrentQueries()]);
+            this.map.setFilter('overpass', ['in', 'query', ...getCurrentQueries()], {
+                validate: false,
+            });
         } catch (e) {
             // No reliable way to check if the map is ready to add sources and layers
         }
@@ -283,10 +285,12 @@ function getQuery(query: string) {
     }
 }
 
-function getQueryItem(tags: Record<string, string | boolean | string[]>) {
-    let arrayEntry = Object.values(tags).find((value) => Array.isArray(value));
+function getQueryItem(tags: Record<string, string | string[]>) {
+    let arrayEntry = Object.entries(tags).find((entry): entry is [string, string[]] =>
+        Array.isArray(entry[1])
+    );
     if (arrayEntry !== undefined) {
-        return arrayEntry
+        return arrayEntry[1]
             .map(
                 (val) =>
                     `nwr${Object.entries(tags)
@@ -309,7 +313,7 @@ function belongsToQuery(element: any, query: string) {
     }
 }
 
-function belongsToQueryItem(element: any, tags: Record<string, string | boolean | string[]>) {
+function belongsToQueryItem(element: any, tags: Record<string, string | string[]>) {
     return Object.entries(tags).every(([tag, value]) =>
         Array.isArray(value) ? value.includes(element.tags[tag]) : element.tags[tag] === value
     );

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

@@ -43,7 +43,7 @@ export class MapboxGLMap {
                             sources: {},
                             layers: [],
                             glyphs: 'mapbox://fonts/mapbox/{fontstack}/{range}.pbf',
-                            sprite: `https://api.mapbox.com/styles/v1/mapbox/outdoors-v12/sprite?access_token=${accessToken}`,
+                            sprite: 'mapbox://sprites/mapbox/outdoors-v12',
                         },
                     },
                     {

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 {
@@ -163,11 +163,11 @@
                             {i18n._('toolbar.routing.activity')}
                         </span>
                         <Select.Root type="single" bind:value={$routingProfile}>
-                            <Select.Trigger class="h-8 grow">
+                            <Select.Trigger class="grow" size="sm">
                                 {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}`
@@ -195,7 +195,7 @@
                 disabled={!validSelection}
                 onclick={fileActions.reverseSelection}
             >
-                <ArrowRightLeft size="12" />{i18n._('toolbar.routing.reverse.button')}
+                <ArrowRightLeft class="size-3" />{i18n._('toolbar.routing.reverse.button')}
             </ButtonWithTooltip>
             <ButtonWithTooltip
                 label={i18n._('toolbar.routing.route_back_to_start.tooltip')}
@@ -231,7 +231,7 @@
                     }
                 }}
             >
-                <House size="12" />{i18n._('toolbar.routing.route_back_to_start.button')}
+                <House class="size-3" />{i18n._('toolbar.routing.route_back_to_start.button')}
             </ButtonWithTooltip>
             <ButtonWithTooltip
                 label={i18n._('toolbar.routing.round_trip.tooltip')}
@@ -240,7 +240,7 @@
                 disabled={!validSelection}
                 onclick={fileActions.createRoundTripForSelection}
             >
-                <Repeat size="12" />{i18n._('toolbar.routing.round_trip.button')}
+                <Repeat class="size-3" />{i18n._('toolbar.routing.round_trip.button')}
             </ButtonWithTooltip>
         </div>
         <div class="w-full flex flex-row gap-2 items-end justify-between">

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

@@ -6,35 +6,141 @@ 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: 'brouter', profile: 'gravel' },
+    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',
+};
+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
+                ? {}
+                : {
+                      priority: [
+                          {
+                              if: 'road_access == PRIVATE',
+                              multiply_by: '0.0',
+                          },
+                      ],
+                  },
+        }),
+    });
+
+    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 +158,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/Scissors.svelte

@@ -107,7 +107,7 @@
             {i18n._('toolbar.scissors.split_as')}
         </span>
         <Select.Root bind:value={$splitAs} type="single">
-            <Select.Trigger class="h-8 w-fit grow">
+            <Select.Trigger class="w-fit grow" size="sm">
                 {i18n._('gpx.' + $splitAs)}
             </Select.Trigger>
             <Select.Content>

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

@@ -1,5 +1,3 @@
-import { TrackPoint, TrackSegment } from 'gpx';
-import mapboxgl from 'mapbox-gl';
 import { ListTrackSegmentItem } from '$lib/components/file-list/file-list';
 import { currentTool, Tool } from '$lib/components/toolbar/tools';
 import { splitAs } from '$lib/components/toolbar/tools/scissors/scissors';
@@ -9,20 +7,41 @@ import { gpxStatistics } from '$lib/logic/statistics';
 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';
 
 export class SplitControls {
-    active: boolean = false;
     map: mapboxgl.Map;
-    controls: ControlWithMarker[] = [];
-    shownControls: ControlWithMarker[] = [];
     unsubscribes: Function[] = [];
 
-    toggleControlsForZoomLevelAndBoundsBinded: () => void =
-        this.toggleControlsForZoomLevelAndBounds.bind(this);
+    layerOnMouseEnterBinded: (e: any) => void = this.layerOnMouseEnter.bind(this);
+    layerOnMouseLeaveBinded: () => void = this.layerOnMouseLeave.bind(this);
+    layerOnClickBinded: (e: any) => void = this.layerOnClick.bind(this);
 
     constructor(map: mapboxgl.Map) {
         this.map = map;
 
+        if (!this.map.hasImage('split-control')) {
+            let icon = new Image(100, 100);
+            icon.onload = () => {
+                if (!this.map.hasImage('split-control')) {
+                    this.map.addImage('split-control', icon);
+                }
+            };
+
+            // Lucide icons are SVG files with a 24x24 viewBox
+            // Create a new SVG with a 32x32 viewBox and center the icon in a circle
+            icon.src =
+                'data:image/svg+xml,' +
+                encodeURIComponent(`
+                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40">
+                            <circle cx="20" cy="20" r="20" fill="white" />
+                            <g transform="translate(8 8)">
+                            ${Scissors.replace('stroke="currentColor"', 'stroke="black"')}
+                            </g>
+                        </svg>
+                    `);
+        }
+
         this.unsubscribes.push(gpxStatistics.subscribe(this.addIfNeeded.bind(this)));
         this.unsubscribes.push(currentTool.subscribe(this.addIfNeeded.bind(this)));
         this.unsubscribes.push(selection.subscribe(this.addIfNeeded.bind(this)));
@@ -31,29 +50,18 @@ export class SplitControls {
     addIfNeeded() {
         let scissors = get(currentTool) === Tool.SCISSORS;
         if (!scissors) {
-            if (this.active) {
-                this.remove();
-            }
+            this.remove();
             return;
         }
 
-        if (this.active) {
-            this.updateControls();
-        } else {
-            this.add();
-        }
-    }
-
-    add() {
-        this.active = true;
-
-        this.map.on('zoom', this.toggleControlsForZoomLevelAndBoundsBinded);
-        this.map.on('move', this.toggleControlsForZoomLevelAndBoundsBinded);
+        this.updateControls();
     }
 
     updateControls() {
-        // Update the markers when the files change
-        let controlIndex = 0;
+        let data: GeoJSON.FeatureCollection = {
+            type: 'FeatureCollection',
+            features: [],
+        };
         selection.applyToOrderedSelectedItemsFromFile((fileId, level, items) => {
             let file = fileStateCollection.getFile(fileId);
 
@@ -64,30 +72,23 @@ export class SplitControls {
                             new ListTrackSegmentItem(fileId, trackIndex, segmentIndex)
                         )
                     ) {
-                        for (let point of segment.trkpt.slice(1, -1)) {
-                            // Update the existing controls (could be improved by matching the existing controls with the new ones?)
+                        for (let i = 1; i < segment.trkpt.length - 1; i++) {
+                            let point = segment.trkpt[i];
                             if (point._data.anchor) {
-                                if (controlIndex < this.controls.length) {
-                                    this.controls[controlIndex].fileId = fileId;
-                                    this.controls[controlIndex].point = point;
-                                    this.controls[controlIndex].segment = segment;
-                                    this.controls[controlIndex].trackIndex = trackIndex;
-                                    this.controls[controlIndex].segmentIndex = segmentIndex;
-                                    this.controls[controlIndex].marker.setLngLat(
-                                        point.getCoordinates()
-                                    );
-                                } else {
-                                    this.controls.push(
-                                        this.createControl(
-                                            point,
-                                            segment,
-                                            fileId,
-                                            trackIndex,
-                                            segmentIndex
-                                        )
-                                    );
-                                }
-                                controlIndex++;
+                                data.features.push({
+                                    type: 'Feature',
+                                    geometry: {
+                                        type: 'Point',
+                                        coordinates: [point.getLongitude(), point.getLatitude()],
+                                    },
+                                    properties: {
+                                        fileId: fileId,
+                                        trackIndex: trackIndex,
+                                        segmentIndex: segmentIndex,
+                                        pointIndex: i,
+                                        minZoom: point._data.zoom,
+                                    },
+                                });
                             }
                         }
                     }
@@ -95,86 +96,77 @@ export class SplitControls {
             }
         }, false);
 
-        while (controlIndex < this.controls.length) {
-            // Remove the extra controls
-            this.controls.pop()?.marker.remove();
-        }
+        try {
+            let source = this.map.getSource('split-controls') as mapboxgl.GeoJSONSource | undefined;
+            if (source) {
+                source.setData(data);
+            } else {
+                this.map.addSource('split-controls', {
+                    type: 'geojson',
+                    data: data,
+                });
+            }
 
-        this.toggleControlsForZoomLevelAndBounds();
+            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.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
+        }
     }
 
     remove() {
-        this.active = false;
+        this.map.off('mouseenter', 'split-controls', this.layerOnMouseEnterBinded);
+        this.map.off('mouseleave', 'split-controls', this.layerOnMouseLeaveBinded);
+        this.map.off('click', 'split-controls', this.layerOnClickBinded);
 
-        for (let control of this.controls) {
-            control.marker.remove();
-        }
-        this.map.off('zoom', this.toggleControlsForZoomLevelAndBoundsBinded);
-        this.map.off('move', this.toggleControlsForZoomLevelAndBoundsBinded);
-    }
-
-    toggleControlsForZoomLevelAndBounds() {
-        // Show markers only if they are in the current zoom level and bounds
-        this.shownControls.splice(0, this.shownControls.length);
-
-        let southWest = this.map.unproject([0, this.map.getCanvas().height]);
-        let northEast = this.map.unproject([this.map.getCanvas().width, 0]);
-        let bounds = new mapboxgl.LngLatBounds(southWest, northEast);
-
-        let zoom = this.map.getZoom();
-        this.controls.forEach((control) => {
-            control.inZoom = control.point._data.zoom <= zoom;
-            if (control.inZoom && bounds.contains(control.marker.getLngLat())) {
-                control.marker.addTo(this.map);
-                this.shownControls.push(control);
-            } else {
-                control.marker.remove();
+        try {
+            if (this.map.getLayer('split-controls')) {
+                this.map.removeLayer('split-controls');
             }
-        });
+
+            if (this.map.getSource('split-controls')) {
+                this.map.removeSource('split-controls');
+            }
+        } catch (e) {
+            // No reliable way to check if the map is ready to remove sources and layers
+        }
     }
 
-    createControl(
-        point: TrackPoint,
-        segment: TrackSegment,
-        fileId: string,
-        trackIndex: number,
-        segmentIndex: number
-    ): ControlWithMarker {
-        let element = document.createElement('div');
-        element.className = `h-6 w-6 p-0.5 rounded-full bg-white border-2 border-black cursor-pointer`;
-        element.innerHTML = Scissors.replace('width="24"', '')
-            .replace('height="24"', '')
-            .replace('stroke="currentColor"', 'stroke="black"');
+    layerOnMouseEnter(e: any) {
+        mapCursor.notify(MapCursorState.SPLIT_CONTROL, true);
+    }
 
-        let marker = new mapboxgl.Marker({
-            draggable: true,
-            className: 'z-10',
-            element,
-        }).setLngLat(point.getCoordinates());
+    layerOnMouseLeave() {
+        mapCursor.notify(MapCursorState.SPLIT_CONTROL, false);
+    }
 
-        let control = {
-            point,
-            segment,
-            fileId,
-            trackIndex,
-            segmentIndex,
-            marker,
-            inZoom: false,
-        };
-
-        marker.getElement().addEventListener('click', (e) => {
-            e.stopPropagation();
-            fileActions.split(
-                get(splitAs),
-                control.fileId,
-                control.trackIndex,
-                control.segmentIndex,
-                control.point.getCoordinates(),
-                control.point._data.index
-            );
-        });
-
-        return control;
+    layerOnClick(e: mapboxgl.MapMouseEvent) {
+        let coordinates = (e.features![0].geometry as GeoJSON.Point).coordinates;
+        fileActions.split(
+            get(splitAs),
+            e.features![0].properties!.fileId,
+            e.features![0].properties!.trackIndex,
+            e.features![0].properties!.segmentIndex,
+            { lon: coordinates[0], lat: coordinates[1] },
+            e.features![0].properties!.pointIndex
+        );
     }
 
     destroy() {
@@ -182,16 +174,3 @@ export class SplitControls {
         this.unsubscribes.forEach((unsubscribe) => unsubscribe());
     }
 }
-
-type Control = {
-    segment: TrackSegment;
-    fileId: string;
-    trackIndex: number;
-    segmentIndex: number;
-    point: TrackPoint;
-};
-
-type ControlWithMarker = Control & {
-    marker: mapboxgl.Marker;
-    inZoom: boolean;
-};

website/src/lib/components/toolbar/tools/waypoint/Waypoint.svelte

@@ -16,6 +16,8 @@
     import { fileActions } from '$lib/logic/file-actions';
     import { map } from '$lib/components/map/map';
     import { mapCursor, MapCursorState } from '$lib/logic/map-cursor';
+    import mapboxgl from 'mapbox-gl';
+    import { getSvgForSymbol } from '$lib/components/map/gpx-layer/gpx-layer';
 
     let props: {
         class?: string;
@@ -39,6 +41,21 @@
         })
     );
 
+    let marker: mapboxgl.Marker | null = null;
+
+    function reset() {
+        if ($selectedWaypoint) {
+            selectedWaypoint.reset();
+        } else {
+            name = '';
+            description = '';
+            link = '';
+            sym = '';
+            longitude = 0;
+            latitude = 0;
+        }
+    }
+
     $effect(() => {
         if ($selectedWaypoint) {
             const wpt = $selectedWaypoint[0];
@@ -54,14 +71,7 @@
                 latitude = parseFloat(wpt.getLatitude().toFixed(6));
             });
         } else {
-            untrack(() => {
-                name = '';
-                description = '';
-                link = '';
-                sym = '';
-                longitude = 0;
-                latitude = 0;
-            });
+            untrack(reset);
         }
     });
 
@@ -85,14 +95,14 @@
                 desc: description.length > 0 ? description : undefined,
                 cmt: description.length > 0 ? description : undefined,
                 link: link.length > 0 ? { attributes: { href: link } } : undefined,
-                sym: sym,
+                sym: sym.length > 0 ? sym : undefined,
             },
             selectedWaypoint.wpt && selectedWaypoint.fileId
                 ? new ListWaypointItem(selectedWaypoint.fileId, selectedWaypoint.wpt._data.index)
                 : undefined
         );
 
-        selectedWaypoint.reset();
+        reset();
     }
 
     function setCoordinates(e: any) {
@@ -100,6 +110,37 @@
         longitude = e.lngLat.lng.toFixed(6);
     }
 
+    $effect(() => {
+        if ($selectedWaypoint) {
+            if (marker) {
+                marker.remove();
+                marker = null;
+            }
+        } else if (latitude != 0 || longitude != 0) {
+            if ($map) {
+                if (marker) {
+                    marker.setLngLat([longitude, latitude]).getElement().innerHTML =
+                        getSvgForSymbol(symbolKey);
+                } else {
+                    let element = document.createElement('div');
+                    element.classList.add('w-8', 'h-8');
+                    element.innerHTML = getSvgForSymbol(symbolKey);
+                    marker = new mapboxgl.Marker({
+                        element,
+                        anchor: 'bottom',
+                    })
+                        .setLngLat([longitude, latitude])
+                        .addTo($map);
+                }
+            }
+        } else {
+            if (marker) {
+                marker.remove();
+                marker = null;
+            }
+        }
+    });
+
     onMount(() => {
         if ($map) {
             $map.on('click', setCoordinates);
@@ -112,6 +153,10 @@
             $map.off('click', setCoordinates);
             mapCursor.notify(MapCursorState.TOOL_WITH_CROSSHAIR, false);
         }
+        if (marker) {
+            marker.remove();
+            marker = null;
+        }
     });
 </script>
 
@@ -129,19 +174,27 @@
             bind:value={description}
             id="description"
             disabled={!canCreate && !$selectedWaypoint}
+            class="min-h-8 h-8 py-1 px-3 text-sm"
         />
         <Label for="symbol">{i18n._('toolbar.waypoint.icon')}</Label>
         <Select.Root bind:value={sym} type="single">
             <Select.Trigger
                 id="symbol"
-                class="w-full h-8"
+                size="sm"
+                class="w-full"
                 disabled={!canCreate && !$selectedWaypoint}
             >
-                {#if symbolKey}
-                    {i18n._(`gpx.symbol.${symbolKey}`)}
-                {:else}
-                    {sym}
-                {/if}
+                <span class="flex flex-row gap-1.5 items-center">
+                    {#if symbolKey}
+                        {#if symbols[symbolKey].icon}
+                            {@const Component = symbols[symbolKey].icon}
+                            <Component size="14" />
+                        {/if}
+                        {i18n._(`gpx.symbol.${symbolKey}`)}
+                    {:else}
+                        {sym}
+                    {/if}
+                </span>
             </Select.Trigger>
             <Select.Content class="max-h-60 overflow-y-scroll">
                 {#each sortedSymbols as [key, symbol]}
@@ -149,7 +202,7 @@
                         <span>
                             {#if symbol.icon}
                                 {@const Component = symbol.icon}
-                                <Component size="14" class="inline-block align-sub mr-0.5" />
+                                <Component size="14" class="inline-block align-sub" />
                             {:else}
                                 <span class="w-4 inline-block"></span>
                             {/if}
@@ -210,7 +263,7 @@
                 {i18n._('toolbar.waypoint.create')}
             {/if}
         </Button>
-        <Button variant="outline" size="icon" onclick={() => selectedWaypoint.reset()}>
+        <Button variant="outline" size="icon" onclick={reset}>
             <CircleX size="16" />
         </Button>
     </div>

website/src/lib/docs/es/menu/view.mdx

@@ -1,5 +1,5 @@
 ---
-title: View options
+title: Opciones de vista
 ---
 
 <script lang="ts">

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

@@ -29,13 +29,13 @@ Beste era batez, fitxategiak zuzenean arrastatu eta jaregin ditzakezu zure fitxa
 
 Sortu hautatutako fitxategien kopia bat.
 
-### <FileX size="16" class="inline-block" style="margin-bottom: 2px" /> Delete
+### <FileX size="16" class="inline-block" style="margin-bottom: 2px" /> Ezabatu
 
-Delete the currently selected files.
+Ezabatu hautatutako fitxategiak.
 
-### <FileX size="16" class="inline-block" style="margin-bottom: 2px" /> Delete all
+### <FileX size="16" class="inline-block" style="margin-bottom: 2px" /> Ezabatu guztiak
 
-Delete all files.
+Ezabatu fitxategi guztiak.
 
 ### <Download size="16" class="inline-block" style="margin-bottom: 2px" /> Esportatu...
 

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

@@ -29,13 +29,13 @@ cÈ inoltre possibile trascinare i file direttamente dal file system del tuo Pc
 
 Crea una copia dei file attualmente selezionati.
 
-### <FileX size="16" class="inline-block" style="margin-bottom: 2px" /> Delete
+### <FileX size="16" class="inline-block" style="margin-bottom: 2px" />Elimina
 
-Delete the currently selected files.
+Elimina i file attualmente selezionati.
 
-### <FileX size="16" class="inline-block" style="margin-bottom: 2px" /> Delete all
+### <FileX size="16" class="inline-block" style="margin-bottom: 2px" />Cancella tutto
 
-Delete all files.
+Elimina tutti i file.
 
 ### <Download size="16" class="inline-block" style="margin-bottom: 2px" /> Esporta...
 

website/src/lib/docs/nl/getting-started.mdx

@@ -14,7 +14,7 @@ Deze handleiding zal je door alle componenten en gereedschappen van de interface
 <DocsImage src="getting-started/interface" alt="De gpx.studio interface." />
 
 Zoals weergegeven in bovenstaande scherm, is de interface verdeeld in vier hoofddelen rond de kaart. 
-Voordat we in de details van elke sectie duiken, hebben we een snel overzicht van de interface.
+Voordat we in de details van elke sectie duiken, eerst een snel overzicht van de interface.
 
 ## Menu
 

website/src/lib/docs/nl/menu/edit.mdx

@@ -83,7 +83,7 @@ Deze actie is alleen beschikbaar wanneer de verticale indeling van de bestandsli
 
 ### <ClipboardPaste size="16" class="inline-block" style="margin-bottom: 2px" /> Plakken
 
-Plak de bestandsitems van het klembord naar het huidige hiërarchie niveau indien compatibel.
+Plak de bestandsitems van het klembord naar het huidige hiërarchieniveau indien compatibel.
 
 <DocsNote>
 

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

@@ -33,9 +33,9 @@ title: 文件
 
 Delete the currently selected files.
 
-### <FileX size="16" class="inline-block" style="margin-bottom: 2px" /> Delete all
+### <FileX size="16" class="inline-block" style="margin-bottom: 2px" /> 删除全部
 
-Delete all files.
+删除全部文件。
 
 ### <Download size="16" class="inline-block" style="margin-bottom: 2px" /> 导出...
 

website/src/lib/i18n.svelte.ts

@@ -14,7 +14,7 @@ class Locale {
     private _isLoadingInitial = $state(true);
     private _isLoading = $state(true);
     private dictionary: Dictionary = $state({});
-    private _t = $derived((key: string) => {
+    private _t = $derived((key: string, fallback?: string) => {
         const keys = key.split('.');
         let value: string | Dictionary = this.dictionary;
 
@@ -22,7 +22,7 @@ class Locale {
             if (value && typeof value === 'object' && k in value) {
                 value = value[k];
             } else {
-                return key;
+                return fallback || key;
             }
         }
 

website/src/lib/logic/bounds.ts

@@ -66,10 +66,8 @@ export class BoundsManager {
 
     finalizeFitBounds() {
         if (
-            this._bounds.getSouth() === 90 &&
-            this._bounds.getWest() === 180 &&
-            this._bounds.getNorth() === -90 &&
-            this._bounds.getEast() === -180
+            this._bounds.getSouth() >= this._bounds.getNorth() &&
+            this._bounds.getWest() >= this._bounds.getEast()
         ) {
             return;
         }

website/src/lib/logic/map-cursor.ts

@@ -4,10 +4,12 @@ import { get, writable, type Writable } from 'svelte/store';
 export enum MapCursorState {
     DEFAULT,
     LAYER_HOVER,
+    TOOL_WITH_CROSSHAIR,
+    WAYPOINT_HOVER,
     WAYPOINT_DRAGGING,
     TRACKPOINT_DRAGGING,
-    TOOL_WITH_CROSSHAIR,
     SCISSORS,
+    SPLIT_CONTROL,
     MAPILLARY_HOVER,
     STREET_VIEW_CROSSHAIR,
 }
@@ -16,10 +18,12 @@ const scissorsCursor = `url('data:image/svg+xml,<svg xmlns="http://www.w3.org/20
 const cursorStyles = {
     [MapCursorState.DEFAULT]: 'default',
     [MapCursorState.LAYER_HOVER]: 'pointer',
+    [MapCursorState.WAYPOINT_HOVER]: 'pointer',
     [MapCursorState.WAYPOINT_DRAGGING]: 'grabbing',
     [MapCursorState.TRACKPOINT_DRAGGING]: 'grabbing',
     [MapCursorState.TOOL_WITH_CROSSHAIR]: 'crosshair',
     [MapCursorState.SCISSORS]: scissorsCursor,
+    [MapCursorState.SPLIT_CONTROL]: 'pointer',
     [MapCursorState.MAPILLARY_HOVER]: 'pointer',
     [MapCursorState.STREET_VIEW_CROSSHAIR]: 'crosshair',
 };

website/src/lib/logic/selection.ts

@@ -179,6 +179,112 @@ export class Selection {
         }
     }
 
+    updateFromKey(down: boolean, shift: boolean) {
+        let selected = get(this._selection).getSelected();
+        if (selected.length === 0) {
+            return;
+        }
+
+        let next: ListItem | undefined = undefined;
+        if (selected[0] instanceof ListFileItem) {
+            let order = get(settings.fileOrder);
+            let limitIndex: number | undefined = undefined;
+            selected.forEach((item) => {
+                let index = order.indexOf(item.getFileId());
+                if (
+                    limitIndex === undefined ||
+                    (down && index > limitIndex) ||
+                    (!down && index < limitIndex)
+                ) {
+                    limitIndex = index;
+                }
+            });
+
+            if (limitIndex !== undefined) {
+                let nextIndex = down ? limitIndex + 1 : limitIndex - 1;
+
+                while (true) {
+                    if (nextIndex < 0) {
+                        nextIndex = order.length - 1;
+                    } else if (nextIndex >= order.length) {
+                        nextIndex = 0;
+                    }
+
+                    if (nextIndex === limitIndex) {
+                        break;
+                    }
+
+                    next = new ListFileItem(order[nextIndex]);
+                    if (!get(selection).has(next)) {
+                        break;
+                    }
+
+                    nextIndex += down ? 1 : -1;
+                }
+            }
+        } else if (
+            selected[0] instanceof ListTrackItem &&
+            selected[selected.length - 1] instanceof ListTrackItem
+        ) {
+            let fileId = selected[0].getFileId();
+            let file = fileStateCollection.getFile(fileId);
+            if (file) {
+                let numberOfTracks = file.trk.length;
+                let trackIndex = down
+                    ? selected[selected.length - 1].getTrackIndex()
+                    : selected[0].getTrackIndex();
+                if (down && trackIndex < numberOfTracks - 1) {
+                    next = new ListTrackItem(fileId, trackIndex + 1);
+                } else if (!down && trackIndex > 0) {
+                    next = new ListTrackItem(fileId, trackIndex - 1);
+                }
+            }
+        } else if (
+            selected[0] instanceof ListTrackSegmentItem &&
+            selected[selected.length - 1] instanceof ListTrackSegmentItem
+        ) {
+            let fileId = selected[0].getFileId();
+            let file = fileStateCollection.getFile(fileId);
+            if (file) {
+                let trackIndex = selected[0].getTrackIndex();
+                let numberOfSegments = file.trk[trackIndex].trkseg.length;
+                let segmentIndex = down
+                    ? selected[selected.length - 1].getSegmentIndex()
+                    : selected[0].getSegmentIndex();
+                if (down && segmentIndex < numberOfSegments - 1) {
+                    next = new ListTrackSegmentItem(fileId, trackIndex, segmentIndex + 1);
+                } else if (!down && segmentIndex > 0) {
+                    next = new ListTrackSegmentItem(fileId, trackIndex, segmentIndex - 1);
+                }
+            }
+        } else if (
+            selected[0] instanceof ListWaypointItem &&
+            selected[selected.length - 1] instanceof ListWaypointItem
+        ) {
+            let fileId = selected[0].getFileId();
+            let file = fileStateCollection.getFile(fileId);
+            if (file) {
+                let numberOfWaypoints = file.wpt.length;
+                let waypointIndex = down
+                    ? selected[selected.length - 1].getWaypointIndex()
+                    : selected[0].getWaypointIndex();
+                if (down && waypointIndex < numberOfWaypoints - 1) {
+                    next = new ListWaypointItem(fileId, waypointIndex + 1);
+                } else if (!down && waypointIndex > 0) {
+                    next = new ListWaypointItem(fileId, waypointIndex - 1);
+                }
+            }
+        }
+
+        if (next && (!get(this._selection).has(next) || !shift)) {
+            if (shift) {
+                this.addSelectItem(next);
+            } else {
+                this.selectItem(next);
+            }
+        }
+    }
+
     getOrderedSelection(reverse: boolean = false): ListItem[] {
         let selected: ListItem[] = [];
         this.applyToOrderedSelectedItemsFromFile((fileId, level, items) => {

website/src/locales/be.json

@@ -79,7 +79,8 @@
         "unhide": "Паказаць",
         "center": "Center",
         "open_in": "Адчыніць у",
-        "copy_coordinates": "Copy coordinates"
+        "copy_coordinates": "Copy coordinates",
+        "edit_osm": "Edit in OpenStreetMap"
     },
     "toolbar": {
         "routing": {
@@ -352,6 +353,7 @@
             "water": "Water",
             "shower": "Shower",
             "shelter": "Shelter",
+            "cemetery": "Cemetery",
             "motorized": "Cars and Motorcycles",
             "fuel-station": "Fuel Station",
             "parking": "Parking",

website/src/locales/ca.json

@@ -79,7 +79,8 @@
         "unhide": "Veure",
         "center": "Centrar",
         "open_in": "Obrir amb",
-        "copy_coordinates": "Copiar coordenades"
+        "copy_coordinates": "Copiar coordenades",
+        "edit_osm": "Edit in OpenStreetMap"
     },
     "toolbar": {
         "routing": {
@@ -352,6 +353,7 @@
             "water": "Aigua",
             "shower": "Dutxa",
             "shelter": "Refugi",
+            "cemetery": "Cemetery",
             "motorized": "Cotxes i motos",
             "fuel-station": "Gasolinera",
             "parking": "Aparcament",

website/src/locales/cs.json

@@ -79,7 +79,8 @@
         "unhide": "Zobrazit skryté",
         "center": "Vycentrovat",
         "open_in": "Otevřít v",
-        "copy_coordinates": "Zkopírovat souřadnice"
+        "copy_coordinates": "Zkopírovat souřadnice",
+        "edit_osm": "Upravit v OpenStreetMap"
     },
     "toolbar": {
         "routing": {
@@ -352,6 +353,7 @@
             "water": "Voda",
             "shower": "Sprcha",
             "shelter": "Přístřeší",
+            "cemetery": "Hřbitov",
             "motorized": "Automobily a motocykly",
             "fuel-station": "Čerpací stanice",
             "parking": "Parkoviště",

website/src/locales/da.json

@@ -79,7 +79,8 @@
         "unhide": "Unhide",
         "center": "Center",
         "open_in": "Open in",
-        "copy_coordinates": "Kopier koordinater"
+        "copy_coordinates": "Kopier koordinater",
+        "edit_osm": "Edit in OpenStreetMap"
     },
     "toolbar": {
         "routing": {
@@ -352,6 +353,7 @@
             "water": "Water",
             "shower": "Shower",
             "shelter": "Shelter",
+            "cemetery": "Cemetery",
             "motorized": "Cars and Motorcycles",
             "fuel-station": "Fuel Station",
             "parking": "Parking",

website/src/locales/de.json

@@ -79,7 +79,8 @@
         "unhide": "Einblenden",
         "center": "Zentrieren",
         "open_in": "Öffnen in",
-        "copy_coordinates": "Koordinaten kopieren"
+        "copy_coordinates": "Koordinaten kopieren",
+        "edit_osm": "Edit in OpenStreetMap"
     },
     "toolbar": {
         "routing": {
@@ -352,6 +353,7 @@
             "water": "Trinkwasser",
             "shower": "Dusche",
             "shelter": "Unterstand",
+            "cemetery": "Cemetery",
             "motorized": "Autos und Motorräder",
             "fuel-station": "Tankstelle",
             "parking": "Parken",

website/src/locales/el.json

@@ -79,7 +79,8 @@
         "unhide": "Unhide",
         "center": "Center",
         "open_in": "Open in",
-        "copy_coordinates": "Copy coordinates"
+        "copy_coordinates": "Copy coordinates",
+        "edit_osm": "Edit in OpenStreetMap"
     },
     "toolbar": {
         "routing": {
@@ -352,6 +353,7 @@
             "water": "Water",
             "shower": "Shower",
             "shelter": "Shelter",
+            "cemetery": "Cemetery",
             "motorized": "Cars and Motorcycles",
             "fuel-station": "Fuel Station",
             "parking": "Parking",

website/src/locales/en.json

@@ -79,7 +79,8 @@
         "unhide": "Unhide",
         "center": "Center",
         "open_in": "Open in",
-        "copy_coordinates": "Copy coordinates"
+        "copy_coordinates": "Copy coordinates",
+        "edit_osm": "Edit in OpenStreetMap"
     },
     "toolbar": {
         "routing": {
@@ -352,6 +353,7 @@
             "water": "Water",
             "shower": "Shower",
             "shelter": "Shelter",
+            "cemetery": "Cemetery",
             "motorized": "Cars and Motorcycles",
             "fuel-station": "Fuel Station",
             "parking": "Parking",

website/src/locales/es.json

@@ -36,7 +36,7 @@
         "switch_basemap": "Cambiar al mapa base anterior",
         "toggle_overlays": "Alternar capas",
         "toggle_3d": "Alternar 3D",
-        "settings": "Configuraciones",
+        "settings": "Configuración",
         "distance_units": "Unidades de distancia",
         "metric": "Métrico",
         "imperial": "Imperial",
@@ -79,7 +79,8 @@
         "unhide": "Mostrar",
         "center": "Centrar",
         "open_in": "Abrir en",
-        "copy_coordinates": "Copiar coordenadas"
+        "copy_coordinates": "Copiar coordenadas",
+        "edit_osm": "Editar en OpenStreetMap"
     },
     "toolbar": {
         "routing": {
@@ -352,6 +353,7 @@
             "water": "Agua",
             "shower": "Ducha",
             "shelter": "Refugio",
+            "cemetery": "Cementerio",
             "motorized": "Coches y motos",
             "fuel-station": "Gasolinera",
             "parking": "Aparcamiento",

website/src/locales/eu.json

@@ -28,7 +28,7 @@
         "undo": "Desegin",
         "redo": "Berregin",
         "delete": "Ezabatu",
-        "delete_all": "Delete all",
+        "delete_all": "Ezabatu guztiak",
         "select_all": "Hautatu dena",
         "view": "Ikusi",
         "elevation_profile": "Altuera profila",
@@ -79,7 +79,8 @@
         "unhide": "Erakutsi",
         "center": "Erdiratu",
         "open_in": "Ireki hemen",
-        "copy_coordinates": "Kopiatu koordenatuak"
+        "copy_coordinates": "Kopiatu koordenatuak",
+        "edit_osm": "Editatu OpenStreeMapen"
     },
     "toolbar": {
         "routing": {
@@ -352,6 +353,7 @@
             "water": "Ura",
             "shower": "Dutxa",
             "shelter": "Babeslekua",
+            "cemetery": "Hilerria",
             "motorized": "Kotxeak eta motorrak",
             "fuel-station": "Gasolindegia",
             "parking": "Aparkalekua",

website/src/locales/fi.json

@@ -79,7 +79,8 @@
         "unhide": "Näytä",
         "center": "Keskitä",
         "open_in": "Avaa",
-        "copy_coordinates": "Copy coordinates"
+        "copy_coordinates": "Copy coordinates",
+        "edit_osm": "Edit in OpenStreetMap"
     },
     "toolbar": {
         "routing": {
@@ -352,6 +353,7 @@
             "water": "Water",
             "shower": "Shower",
             "shelter": "Shelter",
+            "cemetery": "Cemetery",
             "motorized": "Cars and Motorcycles",
             "fuel-station": "Fuel Station",
             "parking": "Parking",

website/src/locales/fr.json

@@ -79,7 +79,8 @@
         "unhide": "Afficher",
         "center": "Centrer",
         "open_in": "Ouvrir avec",
-        "copy_coordinates": "Copier les coordonnées"
+        "copy_coordinates": "Copier les coordonnées",
+        "edit_osm": "Éditer dans OpenStreetMap"
     },
     "toolbar": {
         "routing": {
@@ -352,6 +353,7 @@
             "water": "Cours d'eau",
             "shower": "Douche",
             "shelter": "Abri",
+            "cemetery": "Cimetière",
             "motorized": "Voitures et motos",
             "fuel-station": "Station-service",
             "parking": "Parking",

website/src/locales/he.json

@@ -79,7 +79,8 @@
         "unhide": "Unhide",
         "center": "Center",
         "open_in": "Open in",
-        "copy_coordinates": "Copy coordinates"
+        "copy_coordinates": "Copy coordinates",
+        "edit_osm": "Edit in OpenStreetMap"
     },
     "toolbar": {
         "routing": {
@@ -352,6 +353,7 @@
             "water": "Water",
             "shower": "גשם",
             "shelter": "Shelter",
+            "cemetery": "Cemetery",
             "motorized": "Cars and Motorcycles",
             "fuel-station": "Fuel Station",
             "parking": "Parking",

website/src/locales/hu.json

@@ -79,7 +79,8 @@
         "unhide": "Felfedés ",
         "center": "Középre ",
         "open_in": "Megnyitás itt ",
-        "copy_coordinates": "Koordináták másolása"
+        "copy_coordinates": "Koordináták másolása",
+        "edit_osm": "Edit in OpenStreetMap"
     },
     "toolbar": {
         "routing": {
@@ -352,6 +353,7 @@
             "water": "Víz",
             "shower": "Zuhanyozó",
             "shelter": "Menedék",
+            "cemetery": "Cemetery",
             "motorized": "Autók és Motorok",
             "fuel-station": "Benzinkút",
             "parking": "Parkoló",

website/src/locales/id.json

@@ -79,7 +79,8 @@
         "unhide": "Tampilkan",
         "center": "Tengah",
         "open_in": "Buka di",
-        "copy_coordinates": "Salin koordinat"
+        "copy_coordinates": "Salin koordinat",
+        "edit_osm": "Edit in OpenStreetMap"
     },
     "toolbar": {
         "routing": {
@@ -352,6 +353,7 @@
             "water": "Air",
             "shower": "Mandi",
             "shelter": "Penampungan",
+            "cemetery": "Cemetery",
             "motorized": "Mobil dan Motor",
             "fuel-station": "Stasiun bahan bakar",
             "parking": "Parkir",

website/src/locales/it.json

@@ -28,7 +28,7 @@
         "undo": "Annulla",
         "redo": "Ripeti",
         "delete": "Elimina",
-        "delete_all": "Delete all",
+        "delete_all": "Cancella tutto",
         "select_all": "Seleziona tutto",
         "view": "Visualizza",
         "elevation_profile": "Profilo altimetrico",
@@ -79,7 +79,8 @@
         "unhide": "Mostra",
         "center": "Centra",
         "open_in": "Apri con",
-        "copy_coordinates": "Copia le coordinate"
+        "copy_coordinates": "Copia le coordinate",
+        "edit_osm": "Modifica in OpenStreetMap"
     },
     "toolbar": {
         "routing": {
@@ -352,6 +353,7 @@
             "water": "Acqua",
             "shower": "Doccia",
             "shelter": "Riparo",
+            "cemetery": "Cimitero",
             "motorized": "Auto e Motocicli",
             "fuel-station": "Stazione di Rifornimento",
             "parking": "Parcheggio",

website/src/locales/ko.json

@@ -79,7 +79,8 @@
         "unhide": "표시",
         "center": "중앙",
         "open_in": "Open in",
-        "copy_coordinates": "Copy coordinates"
+        "copy_coordinates": "Copy coordinates",
+        "edit_osm": "Edit in OpenStreetMap"
     },
     "toolbar": {
         "routing": {
@@ -352,6 +353,7 @@
             "water": "Water",
             "shower": "Shower",
             "shelter": "대피소",
+            "cemetery": "Cemetery",
             "motorized": "Cars and Motorcycles",
             "fuel-station": "주유소",
             "parking": "주차장",

website/src/locales/lt.json

@@ -79,7 +79,8 @@
         "unhide": "Rodyti",
         "center": "Center",
         "open_in": "Atverti naudojant",
-        "copy_coordinates": "Copy coordinates"
+        "copy_coordinates": "Copy coordinates",
+        "edit_osm": "Edit in OpenStreetMap"
     },
     "toolbar": {
         "routing": {
@@ -352,6 +353,7 @@
             "water": "Vanduo",
             "shower": "Dušas",
             "shelter": "Prieglauda",
+            "cemetery": "Cemetery",
             "motorized": "Automobiliai ir motociklai",
             "fuel-station": "Degalinė",
             "parking": "Automobilių stovėjimo aikštelė",

website/src/locales/lv.json

@@ -79,7 +79,8 @@
         "unhide": "Unhide",
         "center": "Center",
         "open_in": "Open in",
-        "copy_coordinates": "Copy coordinates"
+        "copy_coordinates": "Copy coordinates",
+        "edit_osm": "Edit in OpenStreetMap"
     },
     "toolbar": {
         "routing": {
@@ -352,6 +353,7 @@
             "water": "Water",
             "shower": "Shower",
             "shelter": "Shelter",
+            "cemetery": "Cemetery",
             "motorized": "Cars and Motorcycles",
             "fuel-station": "Fuel Station",
             "parking": "Parking",

website/src/locales/nl.json

@@ -79,7 +79,8 @@
         "unhide": "Maak zichtbaar",
         "center": "Midden",
         "open_in": "Openen in",
-        "copy_coordinates": "Coördinaten kopiëren"
+        "copy_coordinates": "Coördinaten kopiëren",
+        "edit_osm": "Bewerken in OpenStreetMap"
     },
     "toolbar": {
         "routing": {
@@ -352,6 +353,7 @@
             "water": "Water",
             "shower": "Douche",
             "shelter": "Schuilplaats",
+            "cemetery": "Begraafplaats",
             "motorized": "Auto's en Motorfietsen",
             "fuel-station": "Tankstation",
             "parking": "Parkeren",

website/src/locales/no.json

@@ -79,7 +79,8 @@
         "unhide": "Vis",
         "center": "Sentrer",
         "open_in": "Åpne I",
-        "copy_coordinates": "Kopier koordinater"
+        "copy_coordinates": "Kopier koordinater",
+        "edit_osm": "Edit in OpenStreetMap"
     },
     "toolbar": {
         "routing": {
@@ -352,6 +353,7 @@
             "water": "Vann",
             "shower": "Dusj",
             "shelter": "Ly",
+            "cemetery": "Cemetery",
             "motorized": "Biler og motorsykler",
             "fuel-station": "Bensinstasjon",
             "parking": "Parkering",

website/src/locales/pl.json

@@ -2,7 +2,7 @@
     "metadata": {
         "home_title": "edytor online plików GPX",
         "app_title": "Aplikacja",
-        "embed_title": "online'owy edytor plików GPX",
+        "embed_title": "Online'owy edytor plików GPX",
         "help_title": "pomoc",
         "404_title": "nie odnaleziono strony",
         "description": "Przeglądaj, edytuj i twórz pliki GPX online z zaawansowanymi możliwościami planowania trasy i narzędziami do przetwarzania plików, pięknymi mapami i szczegółowymi wizualizacjami danych."
@@ -79,7 +79,8 @@
         "unhide": "Pokaż",
         "center": "Wyśrodkuj",
         "open_in": "Otwórz w",
-        "copy_coordinates": "Kopiuj współrzędne"
+        "copy_coordinates": "Kopiuj współrzędne",
+        "edit_osm": "Edit in OpenStreetMap"
     },
     "toolbar": {
         "routing": {
@@ -304,7 +305,7 @@
             "openTopoMap": "OpenTopoMap",
             "openHikingMap": "OpenHikingMap",
             "cyclOSM": "CyclOSM",
-            "utagawaVTT": "UtagawaMTB",
+            "utagawaVTT": "",
             "linz": "LINZ Topo",
             "linzTopo": "LINZ Topo50",
             "swisstopoRaster": "swisstopo Raster",
@@ -352,6 +353,7 @@
             "water": "Woda",
             "shower": "Prysznic",
             "shelter": "Schronienie",
+            "cemetery": "Cemetery",
             "motorized": "Samochody i motocykle",
             "fuel-station": "Stacja paliw",
             "parking": "Parking",

website/src/locales/pt-BR.json

@@ -79,7 +79,8 @@
         "unhide": "Mostrar",
         "center": "Centralizar",
         "open_in": "Abrir em",
-        "copy_coordinates": "Copiar coordenadas"
+        "copy_coordinates": "Copiar coordenadas",
+        "edit_osm": "Edit in OpenStreetMap"
     },
     "toolbar": {
         "routing": {
@@ -352,6 +353,7 @@
             "water": "Água",
             "shower": "Chuveiro",
             "shelter": "Abrigo",
+            "cemetery": "Cemetery",
             "motorized": "Carros e Motocicletas",
             "fuel-station": "Postos de combustível",
             "parking": "Estacionamento",

website/src/locales/pt.json

@@ -79,7 +79,8 @@
         "unhide": "Mostrar",
         "center": "Centro",
         "open_in": "Abrir em",
-        "copy_coordinates": "Copiar coordenadas"
+        "copy_coordinates": "Copiar coordenadas",
+        "edit_osm": "Edit in OpenStreetMap"
     },
     "toolbar": {
         "routing": {
@@ -352,6 +353,7 @@
             "water": "Água",
             "shower": "Chuveiro",
             "shelter": "Shelter",
+            "cemetery": "Cemetery",
             "motorized": "Carros e Motocicletas",
             "fuel-station": "Postos de combustível",
             "parking": "Estacionamento",

website/src/locales/ro.json

@@ -79,7 +79,8 @@
         "unhide": "Dezvăluie",
         "center": "Center",
         "open_in": "Open in",
-        "copy_coordinates": "Copiază coordonatele"
+        "copy_coordinates": "Copiază coordonatele",
+        "edit_osm": "Edit in OpenStreetMap"
     },
     "toolbar": {
         "routing": {
@@ -352,6 +353,7 @@
             "water": "Water",
             "shower": "Shower",
             "shelter": "Shelter",
+            "cemetery": "Cemetery",
             "motorized": "Cars and Motorcycles",
             "fuel-station": "Fuel Station",
             "parking": "Parking",

website/src/locales/ru.json

@@ -79,7 +79,8 @@
         "unhide": "Отобразить",
         "center": "По центру",
         "open_in": "Открыть в",
-        "copy_coordinates": "Скопировать координаты"
+        "copy_coordinates": "Скопировать координаты",
+        "edit_osm": "Edit in OpenStreetMap"
     },
     "toolbar": {
         "routing": {
@@ -352,6 +353,7 @@
             "water": "Вода",
             "shower": "Душ",
             "shelter": "Укрытие",
+            "cemetery": "Cemetery",
             "motorized": "Автомобили и мотоциклы",
             "fuel-station": "Заправочная станция",
             "parking": "Парковка",

website/src/locales/sr.json

@@ -79,7 +79,8 @@
         "unhide": "Prikaži",
         "center": "Centar",
         "open_in": "Otvorite u",
-        "copy_coordinates": "Kopiraj koordinate"
+        "copy_coordinates": "Kopiraj koordinate",
+        "edit_osm": "Edit in OpenStreetMap"
     },
     "toolbar": {
         "routing": {
@@ -352,6 +353,7 @@
             "water": "Voda",
             "shower": "Tuš",
             "shelter": "Sklonište",
+            "cemetery": "Cemetery",
             "motorized": "Automobili i motocikli",
             "fuel-station": "Benzinska stanica",
             "parking": "Parking",

website/src/locales/sv.json

@@ -79,7 +79,8 @@
         "unhide": "Visa",
         "center": "Center",
         "open_in": "Öppna i",
-        "copy_coordinates": "Copy coordinates"
+        "copy_coordinates": "Copy coordinates",
+        "edit_osm": "Edit in OpenStreetMap"
     },
     "toolbar": {
         "routing": {
@@ -352,6 +353,7 @@
             "water": "Water",
             "shower": "Dusch",
             "shelter": "Shelter",
+            "cemetery": "Cemetery",
             "motorized": "Cars and Motorcycles",
             "fuel-station": "Bensinstation",
             "parking": "Parkering",

website/src/locales/th.json

@@ -79,7 +79,8 @@
         "unhide": "Unhide",
         "center": "Center",
         "open_in": "Open in",
-        "copy_coordinates": "Copy coordinates"
+        "copy_coordinates": "Copy coordinates",
+        "edit_osm": "Edit in OpenStreetMap"
     },
     "toolbar": {
         "routing": {
@@ -352,6 +353,7 @@
             "water": "Water",
             "shower": "Shower",
             "shelter": "Shelter",
+            "cemetery": "Cemetery",
             "motorized": "Cars and Motorcycles",
             "fuel-station": "Fuel Station",
             "parking": "Parking",

website/src/locales/tr.json

@@ -79,7 +79,8 @@
         "unhide": "Göster",
         "center": "Merkez",
         "open_in": "Uygulamada Aç",
-        "copy_coordinates": "Koordinatları kopyala"
+        "copy_coordinates": "Koordinatları kopyala",
+        "edit_osm": "Edit in OpenStreetMap"
     },
     "toolbar": {
         "routing": {
@@ -352,6 +353,7 @@
             "water": "Su",
             "shower": "Duş",
             "shelter": "Barınak",
+            "cemetery": "Cemetery",
             "motorized": "Araba ve Motosiklet",
             "fuel-station": "Benzin istasyonu",
             "parking": "Otopark",

website/src/locales/uk.json

@@ -79,7 +79,8 @@
         "unhide": "Показати",
         "center": "Центр",
         "open_in": "Відкрити в",
-        "copy_coordinates": "Копіювати координати"
+        "copy_coordinates": "Копіювати координати",
+        "edit_osm": "Edit in OpenStreetMap"
     },
     "toolbar": {
         "routing": {
@@ -352,6 +353,7 @@
             "water": "Вода",
             "shower": "Душ",
             "shelter": "Укриття",
+            "cemetery": "Cemetery",
             "motorized": "Автомобілі та Мотоцикли",
             "fuel-station": "Паливна станція",
             "parking": "Парковка",

website/src/locales/vi.json

@@ -79,7 +79,8 @@
         "unhide": "Unhide",
         "center": "Center",
         "open_in": "Open in",
-        "copy_coordinates": "Copy coordinates"
+        "copy_coordinates": "Copy coordinates",
+        "edit_osm": "Edit in OpenStreetMap"
     },
     "toolbar": {
         "routing": {
@@ -352,6 +353,7 @@
             "water": "Nước",
             "shower": "Shower",
             "shelter": "Shelter",
+            "cemetery": "Cemetery",
             "motorized": "Cars and Motorcycles",
             "fuel-station": "Fuel Station",
             "parking": "Parking",

website/src/locales/zh-HK.json

@@ -79,7 +79,8 @@
         "unhide": "Unhide",
         "center": "Center",
         "open_in": "Open in",
-        "copy_coordinates": "Copy coordinates"
+        "copy_coordinates": "Copy coordinates",
+        "edit_osm": "Edit in OpenStreetMap"
     },
     "toolbar": {
         "routing": {
@@ -352,6 +353,7 @@
             "water": "Water",
             "shower": "Shower",
             "shelter": "Shelter",
+            "cemetery": "Cemetery",
             "motorized": "Cars and Motorcycles",
             "fuel-station": "Fuel Station",
             "parking": "Parking",

website/src/locales/zh.json

@@ -28,7 +28,7 @@
         "undo": "撤销",
         "redo": "恢复",
         "delete": "删除",
-        "delete_all": "Delete all",
+        "delete_all": "全部删除",
         "select_all": "全选",
         "view": "显示",
         "elevation_profile": "海拔剖面图",
@@ -79,7 +79,8 @@
         "unhide": "显示",
         "center": "居中",
         "open_in": "打开于",
-        "copy_coordinates": "复制坐标"
+        "copy_coordinates": "复制坐标",
+        "edit_osm": "在 OpenStreetMap 中编辑"
     },
     "toolbar": {
         "routing": {
@@ -352,6 +353,7 @@
             "water": "饮用水",
             "shower": "淋浴",
             "shelter": "庇护所",
+            "cemetery": "墓地",
             "motorized": "汽车和摩托车",
             "fuel-station": "加油站",
             "parking": "停车场",

website/src/routes/404/+page.svelte

@@ -19,6 +19,7 @@
             {i18n._('homepage.home')}
         </Button>
         <Button
+            data-sveltekit-reload
             href={getURLForLanguage(i18n.lang, '/app')}
             class="text-base w-1/4 min-w-fit rounded-full"
         >

website/src/routes/[[language]]/+page.svelte

@@ -64,7 +64,11 @@
                     {i18n._('metadata.description')}
                 </div>
                 <div class="w-full flex flex-row justify-center gap-3">
-                    <Button href={getURLForLanguage(i18n.lang, '/app')} class="w-1/3 min-w-fit">
+                    <Button
+                        data-sveltekit-reload
+                        href={getURLForLanguage(i18n.lang, '/app')}
+                        class="w-1/3 min-w-fit"
+                    >
                         <Map size="18" />
                         {i18n._('homepage.app')}
                     </Button>