remove console log

catch graphhopper exceptions
update graphhopper url
2026-03-13 08:12:58 +00:00 · 2026-03-07 15:59:08 +01:00 · 2026-03-07 15:57:58 +01:00 · 2026-03-07 15:30:22 +01:00 · 2026-01-18 15:23:39 +01:00 · 2026-01-17 11:58:47 +01:00
320 changed files with 8535 additions and 3143 deletions
--- a/.github/workflows/deploy.yml
+++ b/.github/workflows/deploy.yml
@@ -1,63 +1,63 @@
 name: Deploy to GitHub Pages
 on:
-  push:
-    branches: 'main'
+    push:
+        branches: 'main'

 jobs:
-  build_site:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v4
+    build_site:
+        runs-on: ubuntu-latest
+        steps:
+            - name: Checkout
+              uses: actions/checkout@v5

-      - name: Install Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version: 20
-          cache: npm
-          cache-dependency-path: |
-            gpx/package-lock.json
-            website/package-lock.json
-      
-      - name: Install dependencies for gpx
-        run: npm install --prefix gpx
+            - name: Install Node.js
+              uses: actions/setup-node@v6
+              with:
+                  node-version: 24
+                  cache: npm
+                  cache-dependency-path: |
+                      gpx/package-lock.json
+                      website/package-lock.json

-      - name: Build gpx
-        run: npm run build --prefix gpx
+            - name: Install dependencies for gpx
+              run: npm install --prefix gpx

-      - name: Install dependencies for website
-        run: npm install --prefix website
+            - name: Build gpx
+              run: npm run build --prefix gpx

-      - name: Create env file
-        run: |
-          touch website/.env
-          echo PUBLIC_MAPBOX_TOKEN=${{ secrets.PUBLIC_MAPBOX_TOKEN }} >> website/.env
-          cat website/.env
+            - name: Install dependencies for website
+              run: npm install --prefix website

-      - name: Build website
-        env:
-          BASE_PATH: ''
-        run: |
-          npm run build --prefix website
+            - name: Create env file
+              run: |
+                  touch website/.env
+                  echo PUBLIC_MAPBOX_TOKEN=${{ secrets.PUBLIC_MAPBOX_TOKEN }} >> website/.env
+                  cat website/.env

-      - name: Upload Artifacts
-        uses: actions/upload-pages-artifact@v3
-        with:
-          path: 'website/build/'
+            - name: Build website
+              env:
+                  BASE_PATH: ''
+              run: |
+                  npm run build --prefix website

-  deploy:
-    needs: build_site
-    runs-on: ubuntu-latest
+            - name: Upload Artifacts
+              uses: actions/upload-pages-artifact@v4
+              with:
+                  path: 'website/build/'

-    permissions:
-      pages: write
-      id-token: write
+    deploy:
+        needs: build_site
+        runs-on: ubuntu-latest

-    environment:
-      name: github-pages
-      url: ${{ steps.deployment.outputs.page_url }}
+        permissions:
+            pages: write
+            id-token: write

-    steps:
-    - name: Deploy
-      id: deployment
-      uses: actions/deploy-pages@v4
+        environment:
+            name: github-pages
+            url: ${{ steps.deployment.outputs.page_url }}
+
+        steps:
+            - name: Deploy
+              id: deployment
+              uses: actions/deploy-pages@v4
--- a/.prettierignore
+++ b/.prettierignore
@@ -1,6 +1,3 @@
-# Ignore files for PNPM, NPM and YARN
-pnpm-lock.yaml
-package-lock.json
-yarn.lock
-src/lib/components/ui
-*.mdx
+website/src/lib/components/ui
+website/src/lib/docs/**/*.mdx
+**/*.webmanifest
--- a/2
+++ b/2
@@ -1,6 +1,6 @@
 MIT License

-Copyright (c) 2024 gpx.studio
+Copyright (c) 2026 gpx.studio

 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
--- a/gpx/package.json
+++ b/gpx/package.json
@@ -25,7 +25,7 @@
    "scripts": {
        "build": "tsc",
        "postinstall": "npm run build",
-        "lint": "prettier --check . && eslint .",
-        "format": "prettier --write ."
+        "lint": "prettier --check . --config ../.prettierrc && eslint .",
+        "format": "prettier --write . --config ../.prettierrc"
    }
 }
--- a/gpx/src/gpx.ts
+++ b/gpx/src/gpx.ts
@@ -1,4 +1,5 @@
 import { ramerDouglasPeucker } from './simplify';
+import { GPXStatistics, GPXStatisticsGroup, TrackPointLocalStatistics } from './statistics';
 import {
    Coordinates,
    GPXFileAttributes,
@@ -17,6 +18,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;
    }
@@ -33,7 +37,6 @@ export abstract class GPXTreeElement<T extends GPXTreeElement<any>> {
    abstract getNumberOfTrackPoints(): number;
    abstract getStartTimestamp(): Date | undefined;
    abstract getEndTimestamp(): Date | undefined;
-    abstract getStatistics(): GPXStatistics;
    abstract getSegments(): TrackSegment[];
    abstract getTrackPoints(): TrackPoint[];

@@ -73,14 +76,6 @@ abstract class GPXTreeNode<T extends GPXTreeElement<any>> extends GPXTreeElement
        return this.children[this.children.length - 1].getEndTimestamp();
    }

-    getStatistics(): GPXStatistics {
-        let statistics = new GPXStatistics();
-        for (let child of this.children) {
-            statistics.mergeWith(child.getStatistics());
-        }
-        return statistics;
-    }
-
    getSegments(): TrackSegment[] {
        return this.children.flatMap((child) => child.getSegments());
    }
@@ -145,7 +140,9 @@ export class GPXFile extends GPXTreeNode<Track> {
                    },
                },
            };
-            this.wpt = gpx.wpt ? gpx.wpt.map((waypoint) => new Waypoint(waypoint)) : [];
+            this.wpt = gpx.wpt
+                ? gpx.wpt.map((waypoint, index) => new Waypoint(waypoint, index))
+                : [];
            this.trk = gpx.trk ? gpx.trk.map((track) => new Track(track)) : [];
            if (gpx.rte && gpx.rte.length > 0) {
                this.trk = this.trk.concat(gpx.rte.map((route) => convertRouteToTrack(route)));
@@ -183,9 +180,6 @@ export class GPXFile extends GPXTreeNode<Track> {
                segment._data['segmentIndex'] = segmentIndex;
            });
        });
-        this.wpt.forEach((waypoint, waypointIndex) => {
-            waypoint._data['index'] = waypointIndex;
-        });
    }

    get children(): Array<Track> {
@@ -206,8 +200,16 @@ export class GPXFile extends GPXTreeNode<Track> {
        });
    }

+    getStatistics(): GPXStatisticsGroup {
+        let statistics = new GPXStatisticsGroup();
+        this.forEachSegment((segment) => {
+            statistics.add(segment.getStatistics());
+        });
+        return statistics;
+    }
+
    getStyle(defaultColor?: string): MergedLineStyles {
-        return this.trk
+        const style = this.trk
            .map((track) => track.getStyle())
            .reduce(
                (acc, style) => {
@@ -217,8 +219,6 @@ export class GPXFile extends GPXTreeNode<Track> {
                        !acc.color.includes(style['gpx_style:color'])
                    ) {
                        acc.color.push(style['gpx_style:color']);
-                    } else if (defaultColor && !acc.color.includes(defaultColor)) {
-                        acc.color.push(defaultColor);
                    }
                    if (
                        style &&
@@ -242,6 +242,10 @@ export class GPXFile extends GPXTreeNode<Track> {
                    width: [],
                }
            );
+        if (style.color.length === 0 && defaultColor) {
+            style.color.push(defaultColor);
+        }
+        return style;
    }

    clone(): GPXFile {
@@ -804,7 +808,7 @@ export class TrackSegment extends GPXTreeLeaf {
    constructor(segment?: (TrackSegmentType & { _data?: any }) | TrackSegment) {
        super();
        if (segment) {
-            this.trkpt = segment.trkpt.map((point) => new TrackPoint(point));
+            this.trkpt = segment.trkpt.map((point, index) => new TrackPoint(point, index));
            if (segment.hasOwnProperty('_data')) {
                this._data = segment._data;
            }
@@ -816,15 +820,12 @@ export class TrackSegment extends GPXTreeLeaf {
    _computeStatistics(): GPXStatistics {
        let statistics = new GPXStatistics();

-        statistics.local.points = this.trkpt.map((point) => point);
-
-        statistics.local.elevation.smoothed = this._computeSmoothedElevation();
-        statistics.local.slope.at = this._computeSlope();
+        statistics.global.length = this.trkpt.length;
+        statistics.local.points = this.trkpt.slice(0);
+        statistics.local.data = this.trkpt.map(() => new TrackPointLocalStatistics());

        const points = this.trkpt;
        for (let i = 0; i < points.length; i++) {
-            points[i]._data['index'] = i;
-
            // distance
            let dist = 0;
            if (i > 0) {
@@ -833,34 +834,18 @@ export class TrackSegment extends GPXTreeLeaf {
                statistics.global.distance.total += dist;
            }

-            statistics.local.distance.total.push(statistics.global.distance.total);
-
-            // elevation
-            if (i > 0) {
-                const ele =
-                    statistics.local.elevation.smoothed[i] -
-                    statistics.local.elevation.smoothed[i - 1];
-                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);
+            statistics.local.data[i].distance.total = statistics.global.distance.total;

            // time
            if (points[i].time === undefined) {
-                statistics.local.time.total.push(0);
+                statistics.local.data[i].time.total = 0;
            } else {
                if (statistics.global.time.start === undefined) {
                    statistics.global.time.start = points[i].time;
                }
                statistics.global.time.end = points[i].time;
-                statistics.local.time.total.push(
-                    (points[i].time.getTime() - statistics.global.time.start.getTime()) / 1000
-                );
+                statistics.local.data[i].time.total =
+                    (points[i].time.getTime() - statistics.global.time.start.getTime()) / 1000;
            }

            // speed
@@ -875,8 +860,8 @@ export class TrackSegment extends GPXTreeLeaf {
                }
            }

-            statistics.local.distance.moving.push(statistics.global.distance.moving);
-            statistics.local.time.moving.push(statistics.global.time.moving);
+            statistics.local.data[i].distance.moving = statistics.global.distance.moving;
+            statistics.local.data[i].time.moving = statistics.global.time.moving;

            // bounds
            statistics.global.bounds.southWest.lat = Math.min(
@@ -960,8 +945,7 @@ export class TrackSegment extends GPXTreeLeaf {
            }
        }

-        [statistics.local.slope.segment, statistics.local.slope.length] =
-            this._computeSlopeSegments(statistics);
+        this._elevationComputation(statistics);

        statistics.global.time.total =
            statistics.global.time.start && statistics.global.time.end
@@ -977,73 +961,115 @@ export class TrackSegment extends GPXTreeLeaf {
                ? statistics.global.distance.moving / (statistics.global.time.moving / 3600)
                : 0;

-        statistics.local.speed = distanceWindowSmoothingWithDistanceAccumulator(
+        timeWindowSmoothing(
            points,
-            200,
-            (accumulated, start, end) =>
+            10000,
+            (start, end) =>
                points[start].time && points[end].time
-                    ? (3600 * accumulated) /
-                      (points[end].time.getTime() - points[start].time.getTime())
-                    : undefined
+                    ? (3600 *
+                          (statistics.local.data[end].distance.total -
+                              statistics.local.data[start].distance.total)) /
+                      Math.max(
+                          (points[end].time.getTime() - points[start].time.getTime()) / 1000,
+                          1
+                      )
+                    : undefined,
+            (value, index) => {
+                statistics.local.data[index].speed = value;
+            }
        );

        return statistics;
    }

-    _computeSmoothedElevation(): number[] {
-        const points = this.trkpt;
-
-        let smoothed = distanceWindowSmoothing(
-            points,
-            100,
-            (index) => points[index].ele ?? 0,
-            (accumulated, start, end) => accumulated / (end - start + 1)
-        );
-
-        if (points.length > 0) {
-            smoothed[0] = points[0].ele ?? 0;
-            smoothed[points.length - 1] = points[points.length - 1].ele ?? 0;
-        }
-
-        return smoothed;
-    }
-
-    _computeSlope(): number[] {
-        const points = this.trkpt;
-
-        return distanceWindowSmoothingWithDistanceAccumulator(
-            points,
-            50,
-            (accumulated, start, end) =>
-                (100 * ((points[end].ele ?? 0) - (points[start].ele ?? 0))) /
-                (accumulated > 0 ? accumulated : 1)
-        );
-    }
-
-    _computeSlopeSegments(statistics: GPXStatistics): [number[], number[]] {
+    _elevationComputation(statistics: GPXStatistics) {
        let simplified = ramerDouglasPeucker(
            this.trkpt,
            20,
            getElevationDistanceFunction(statistics)
        );

-        let slope = [];
-        let length = [];
+        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 cumulEle = 0;
+            let currentStart = start;
+            let currentEnd = start;
+            let prevSmoothedEle = 0;
+            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, j) => {
+                    if (j === start) {
+                        smoothedEle = this.trkpt[start].ele ?? 0;
+                        prevSmoothedEle = smoothedEle;
+                    } else if (j === end) {
+                        smoothedEle = this.trkpt[end].ele ?? 0;
+                    }
+                    const ele = smoothedEle - prevSmoothedEle;
+                    if (ele > 0) {
+                        statistics.global.elevation.gain += ele;
+                    } else if (ele < 0) {
+                        statistics.global.elevation.loss -= ele;
+                    }
+                    prevSmoothedEle = smoothedEle;
+                    if (j < end) {
+                        statistics.local.data[j].elevation.gain = statistics.global.elevation.gain;
+                        statistics.local.data[j].elevation.loss = statistics.global.elevation.loss;
+                    }
+                }
+            );
+        }
+        if (statistics.global.length > 0) {
+            statistics.local.data[statistics.global.length - 1].elevation.gain =
+                statistics.global.elevation.gain;
+            statistics.local.data[statistics.global.length - 1].elevation.loss =
+                statistics.global.elevation.loss;
+        }

        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];
+                statistics.local.data[end].distance.total -
+                statistics.local.data[start].distance.total;
            let ele = (simplified[i + 1].point.ele ?? 0) - (simplified[i].point.ele ?? 0);
-
            for (let j = start; j < end + (i + 1 === simplified.length - 1 ? 1 : 0); j++) {
-                slope.push((0.1 * ele) / dist);
-                length.push(dist);
+                statistics.local.data[j].slope.segment = (0.1 * ele) / dist;
+                statistics.local.data[j].slope.length = dist;
            }
        }

-        return [slope, length];
+        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.data[end].distance.total -
+                    statistics.local.data[start].distance.total;
+                return dist > 0 ? (0.1 * ele) / dist : 0;
+            },
+            (value, index) => {
+                statistics.local.data[index].slope.at = value;
+            }
+        );
    }

    getNumberOfTrackPoints(): number {
@@ -1290,8 +1316,8 @@ export class TrackSegment extends GPXTreeLeaf {
        lastPoint: TrackPoint | undefined
    ) {
        let og = getOriginal(this); // Read as much as possible from the original object because it is faster
-        let slope = og._computeSlope();
-        let trkpt = withArtificialTimestamps(og.trkpt, totalTime, lastPoint, startTime, slope);
+        let statistics = og._computeStatistics();
+        let trkpt = withArtificialTimestamps(og.trkpt, totalTime, lastPoint, startTime, statistics);
        this.trkpt = freeze(trkpt); // Pre-freeze the array, faster as well
    }

@@ -1300,6 +1326,7 @@ export class TrackSegment extends GPXTreeLeaf {
    }
 }

+const emptyExtensions: Record<string, string> = {};
 export class TrackPoint {
    [immerable] = true;

@@ -1310,7 +1337,7 @@ export class TrackPoint {

    _data: { [key: string]: any } = {};

-    constructor(point: (TrackPointType & { _data?: any }) | TrackPoint) {
+    constructor(point: (TrackPointType & { _data?: any }) | TrackPoint, index?: number) {
        this.attributes = point.attributes;
        this.ele = point.ele;
        this.time = point.time;
@@ -1318,6 +1345,9 @@ export class TrackPoint {
        if (point.hasOwnProperty('_data')) {
            this._data = point._data;
        }
+        if (index !== undefined) {
+            this._data.index = index;
+        }
    }

    getCoordinates(): Coordinates {
@@ -1368,10 +1398,7 @@ export class TrackPoint {
            : undefined;
    }

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

@@ -1391,7 +1422,7 @@ export class TrackPoint {
            this.extensions['gpxtpx:TrackPointExtension'] &&
            this.extensions['gpxtpx:TrackPointExtension']['gpxtpx:Extensions']
            ? this.extensions['gpxtpx:TrackPointExtension']['gpxtpx:Extensions']
-            : {};
+            : emptyExtensions;
    }

    toTrackPointType(exclude: string[] = []): TrackPointType {
@@ -1461,11 +1492,18 @@ export class TrackPoint {

    clone(): TrackPoint {
        return new TrackPoint({
-            attributes: cloneJSON(this.attributes),
+            attributes: {
+                lat: this.attributes.lat,
+                lon: this.attributes.lon,
+            },
            ele: this.ele,
            time: this.time ? new Date(this.time.getTime()) : undefined,
-            extensions: cloneJSON(this.extensions),
-            _data: cloneJSON(this._data),
+            extensions: this.extensions ? cloneJSON(this.extensions) : undefined,
+            _data: {
+                index: this._data?.index,
+                anchor: this._data?.anchor,
+                zoom: this._data?.zoom,
+            },
        });
    }
 }
@@ -1484,19 +1522,28 @@ export class Waypoint {
    type?: string;
    _data: { [key: string]: any } = {};

-    constructor(waypoint: (WaypointType & { _data?: any }) | Waypoint) {
+    constructor(waypoint: (WaypointType & { _data?: any }) | Waypoint, index?: number) {
        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;
        }
+        if (index !== undefined) {
+            this._data.index = index;
+        }
    }

    getCoordinates(): Coordinates {
@@ -1544,7 +1591,10 @@ export class Waypoint {

    clone(): Waypoint {
        return new Waypoint({
-            attributes: cloneJSON(this.attributes),
+            attributes: {
+                lat: this.attributes.lat,
+                lon: this.attributes.lon,
+            },
            ele: this.ele,
            time: this.time ? new Date(this.time.getTime()) : undefined,
            name: this.name,
@@ -1593,310 +1643,6 @@ export class Waypoint {
    }
 }

-export class GPXStatistics {
-    global: {
-        distance: {
-            moving: number;
-            total: number;
-        };
-        time: {
-            start: Date | undefined;
-            end: Date | undefined;
-            moving: number;
-            total: number;
-        };
-        speed: {
-            moving: number;
-            total: number;
-        };
-        elevation: {
-            gain: number;
-            loss: number;
-        };
-        bounds: {
-            southWest: Coordinates;
-            northEast: Coordinates;
-        };
-        atemp: {
-            avg: number;
-            count: number;
-        };
-        hr: {
-            avg: number;
-            count: number;
-        };
-        cad: {
-            avg: number;
-            count: number;
-        };
-        power: {
-            avg: number;
-            count: number;
-        };
-        extensions: Record<string, Record<string, number>>;
-    };
-    local: {
-        points: TrackPoint[];
-        distance: {
-            moving: number[];
-            total: number[];
-        };
-        time: {
-            moving: number[];
-            total: number[];
-        };
-        speed: number[];
-        elevation: {
-            smoothed: number[];
-            gain: number[];
-            loss: number[];
-        };
-        slope: {
-            at: number[];
-            segment: number[];
-            length: number[];
-        };
-    };
-
-    constructor() {
-        this.global = {
-            distance: {
-                moving: 0,
-                total: 0,
-            },
-            time: {
-                start: undefined,
-                end: undefined,
-                moving: 0,
-                total: 0,
-            },
-            speed: {
-                moving: 0,
-                total: 0,
-            },
-            elevation: {
-                gain: 0,
-                loss: 0,
-            },
-            bounds: {
-                southWest: {
-                    lat: 90,
-                    lon: 180,
-                },
-                northEast: {
-                    lat: -90,
-                    lon: -180,
-                },
-            },
-            atemp: {
-                avg: 0,
-                count: 0,
-            },
-            hr: {
-                avg: 0,
-                count: 0,
-            },
-            cad: {
-                avg: 0,
-                count: 0,
-            },
-            power: {
-                avg: 0,
-                count: 0,
-            },
-            extensions: {},
-        };
-        this.local = {
-            points: [],
-            distance: {
-                moving: [],
-                total: [],
-            },
-            time: {
-                moving: [],
-                total: [],
-            },
-            speed: [],
-            elevation: {
-                smoothed: [],
-                gain: [],
-                loss: [],
-            },
-            slope: {
-                at: [],
-                segment: [],
-                length: [],
-            },
-        };
-    }
-
-    mergeWith(other: GPXStatistics): void {
-        this.local.points = this.local.points.concat(other.local.points);
-
-        this.local.distance.total = this.local.distance.total.concat(
-            other.local.distance.total.map((distance) => distance + this.global.distance.total)
-        );
-        this.local.distance.moving = this.local.distance.moving.concat(
-            other.local.distance.moving.map((distance) => distance + this.global.distance.moving)
-        );
-        this.local.time.total = this.local.time.total.concat(
-            other.local.time.total.map((time) => time + this.global.time.total)
-        );
-        this.local.time.moving = this.local.time.moving.concat(
-            other.local.time.moving.map((time) => time + this.global.time.moving)
-        );
-        this.local.elevation.gain = this.local.elevation.gain.concat(
-            other.local.elevation.gain.map((gain) => gain + this.global.elevation.gain)
-        );
-        this.local.elevation.loss = this.local.elevation.loss.concat(
-            other.local.elevation.loss.map((loss) => loss + this.global.elevation.loss)
-        );
-
-        this.local.speed = this.local.speed.concat(other.local.speed);
-        this.local.elevation.smoothed = this.local.elevation.smoothed.concat(
-            other.local.elevation.smoothed
-        );
-        this.local.slope.at = this.local.slope.at.concat(other.local.slope.at);
-        this.local.slope.segment = this.local.slope.segment.concat(other.local.slope.segment);
-        this.local.slope.length = this.local.slope.length.concat(other.local.slope.length);
-
-        this.global.distance.total += other.global.distance.total;
-        this.global.distance.moving += other.global.distance.moving;
-
-        this.global.time.start =
-            this.global.time.start !== undefined && other.global.time.start !== undefined
-                ? new Date(
-                      Math.min(this.global.time.start.getTime(), other.global.time.start.getTime())
-                  )
-                : (this.global.time.start ?? other.global.time.start);
-        this.global.time.end =
-            this.global.time.end !== undefined && other.global.time.end !== undefined
-                ? new Date(
-                      Math.max(this.global.time.end.getTime(), other.global.time.end.getTime())
-                  )
-                : (this.global.time.end ?? other.global.time.end);
-
-        this.global.time.total += other.global.time.total;
-        this.global.time.moving += other.global.time.moving;
-
-        this.global.speed.moving =
-            this.global.time.moving > 0
-                ? this.global.distance.moving / (this.global.time.moving / 3600)
-                : 0;
-        this.global.speed.total =
-            this.global.time.total > 0
-                ? this.global.distance.total / (this.global.time.total / 3600)
-                : 0;
-
-        this.global.elevation.gain += other.global.elevation.gain;
-        this.global.elevation.loss += other.global.elevation.loss;
-
-        this.global.bounds.southWest.lat = Math.min(
-            this.global.bounds.southWest.lat,
-            other.global.bounds.southWest.lat
-        );
-        this.global.bounds.southWest.lon = Math.min(
-            this.global.bounds.southWest.lon,
-            other.global.bounds.southWest.lon
-        );
-        this.global.bounds.northEast.lat = Math.max(
-            this.global.bounds.northEast.lat,
-            other.global.bounds.northEast.lat
-        );
-        this.global.bounds.northEast.lon = Math.max(
-            this.global.bounds.northEast.lon,
-            other.global.bounds.northEast.lon
-        );
-
-        this.global.atemp.avg =
-            (this.global.atemp.count * this.global.atemp.avg +
-                other.global.atemp.count * other.global.atemp.avg) /
-            Math.max(1, this.global.atemp.count + other.global.atemp.count);
-        this.global.atemp.count += other.global.atemp.count;
-        this.global.hr.avg =
-            (this.global.hr.count * this.global.hr.avg +
-                other.global.hr.count * other.global.hr.avg) /
-            Math.max(1, this.global.hr.count + other.global.hr.count);
-        this.global.hr.count += other.global.hr.count;
-        this.global.cad.avg =
-            (this.global.cad.count * this.global.cad.avg +
-                other.global.cad.count * other.global.cad.avg) /
-            Math.max(1, this.global.cad.count + other.global.cad.count);
-        this.global.cad.count += other.global.cad.count;
-        this.global.power.avg =
-            (this.global.power.count * this.global.power.avg +
-                other.global.power.count * other.global.power.avg) /
-            Math.max(1, this.global.power.count + other.global.power.count);
-        this.global.power.count += other.global.power.count;
-        Object.keys(other.global.extensions).forEach((extension) => {
-            if (this.global.extensions[extension] === undefined) {
-                this.global.extensions[extension] = {};
-            }
-            Object.keys(other.global.extensions[extension]).forEach((value) => {
-                if (this.global.extensions[extension][value] === undefined) {
-                    this.global.extensions[extension][value] = 0;
-                }
-                this.global.extensions[extension][value] +=
-                    other.global.extensions[extension][value];
-            });
-        });
-    }
-
-    slice(start: number, end: number): GPXStatistics {
-        if (start < 0) {
-            start = 0;
-        } else if (start >= this.local.points.length) {
-            return new GPXStatistics();
-        }
-        if (end < start) {
-            return new GPXStatistics();
-        } else if (end >= this.local.points.length) {
-            end = this.local.points.length - 1;
-        }
-
-        let statistics = new GPXStatistics();
-
-        statistics.local.points = this.local.points.slice(start, end + 1);
-
-        statistics.global.distance.total =
-            this.local.distance.total[end] - this.local.distance.total[start];
-        statistics.global.distance.moving =
-            this.local.distance.moving[end] - this.local.distance.moving[start];
-
-        statistics.global.time.start = this.local.points[start].time;
-        statistics.global.time.end = this.local.points[end].time;
-
-        statistics.global.time.total = this.local.time.total[end] - this.local.time.total[start];
-        statistics.global.time.moving = this.local.time.moving[end] - this.local.time.moving[start];
-
-        statistics.global.speed.moving =
-            statistics.global.time.moving > 0
-                ? statistics.global.distance.moving / (statistics.global.time.moving / 3600)
-                : 0;
-        statistics.global.speed.total =
-            statistics.global.time.total > 0
-                ? statistics.global.distance.total / (statistics.global.time.total / 3600)
-                : 0;
-
-        statistics.global.elevation.gain =
-            this.local.elevation.gain[end] - this.local.elevation.gain[start];
-        statistics.global.elevation.loss =
-            this.local.elevation.loss[end] - this.local.elevation.loss[start];
-
-        statistics.global.bounds.southWest.lat = this.global.bounds.southWest.lat;
-        statistics.global.bounds.southWest.lon = this.global.bounds.southWest.lon;
-        statistics.global.bounds.northEast.lat = this.global.bounds.northEast.lat;
-        statistics.global.bounds.northEast.lon = this.global.bounds.northEast.lon;
-
-        statistics.global.atemp = this.global.atemp;
-        statistics.global.hr = this.global.hr;
-        statistics.global.cad = this.global.cad;
-        statistics.global.power = this.global.power;
-
-        return statistics;
-    }
-}
-
 const earthRadius = 6371008.8;
 export function distance(
    coord1: TrackPoint | Coordinates,
@@ -1911,11 +1657,15 @@ export function distance(
    const rad = Math.PI / 180;
    const lat1 = coord1.lat * rad;
    const lat2 = coord2.lat * rad;
+    const dLat = lat2 - lat1;
+    const dLon = (coord2.lon - coord1.lon) * rad;
+
+    // Haversine formula - better numerical stability for small distances
    const a =
-        Math.sin(lat1) * Math.sin(lat2) +
-        Math.cos(lat1) * Math.cos(lat2) * Math.cos((coord2.lon - coord1.lon) * rad);
-    const maxMeters = earthRadius * Math.acos(Math.min(a, 1));
-    return maxMeters;
+        Math.sin(dLat / 2) * Math.sin(dLat / 2) +
+        Math.cos(lat1) * Math.cos(lat2) * Math.sin(dLon / 2) * Math.sin(dLon / 2);
+    const c = 2 * Math.asin(Math.sqrt(Math.min(a, 1)));
+    return earthRadius * c;
 }

 export function getElevationDistanceFunction(statistics: GPXStatistics) {
@@ -1926,9 +1676,9 @@ export function getElevationDistanceFunction(statistics: GPXStatistics) {
        if (point1.ele === undefined || point2.ele === undefined || point3.ele === undefined) {
            return 0;
        }
-        let x1 = statistics.local.distance.total[point1._data.index] * 1000;
-        let x2 = statistics.local.distance.total[point2._data.index] * 1000;
-        let x3 = statistics.local.distance.total[point3._data.index] * 1000;
+        let x1 = statistics.local.data[point1._data.index].distance.total * 1000;
+        let x2 = statistics.local.data[point2._data.index].distance.total * 1000;
+        let x3 = statistics.local.data[point3._data.index].distance.total * 1000;
        let y1 = point1.ele;
        let y2 = point2.ele;
        let y3 = point3.ele;
@@ -1942,57 +1692,61 @@ export function getElevationDistanceFunction(statistics: GPXStatistics) {
    };
 }

-function distanceWindowSmoothing(
-    points: TrackPoint[],
-    distanceWindow: number,
-    accumulate: (index: number) => number,
-    compute: (accumulated: number, start: number, end: number) => number,
-    remove?: (index: number) => number
-): number[] {
-    let result = [];
-
-    let start = 0,
-        end = 0,
-        accumulated = 0;
-    for (var i = 0; i < points.length; i++) {
-        while (
-            start + 1 < i &&
-            distance(points[start].getCoordinates(), points[i].getCoordinates()) > distanceWindow
-        ) {
-            if (remove) {
-                accumulated -= remove(start);
-            } else {
-                accumulated -= accumulate(start);
-            }
+function windowSmoothing(
+    left: number,
+    right: number,
+    distance: (index1: number, index2: number) => number,
+    window: number,
+    compute: (start: number, end: number) => number,
+    callback: (value: number, index: number) => void
+): void {
+    let start = left;
+    for (var i = left; i < right; i++) {
+        while (start + 1 < i && distance(start, i) > window) {
            start++;
        }
-        while (
-            end < points.length &&
-            distance(points[i].getCoordinates(), points[end].getCoordinates()) <= distanceWindow
-        ) {
-            accumulated += accumulate(end);
+        let end = Math.min(i + 2, right);
+        while (end < right && distance(i, end) <= window) {
            end++;
        }
-        result[i] = compute(accumulated, start, end - 1);
+        callback(compute(start, end - 1), i);
    }
-
-    return result;
 }

-function distanceWindowSmoothingWithDistanceAccumulator(
-    points: TrackPoint[],
-    distanceWindow: number,
-    compute: (accumulated: number, start: number, end: number) => number
-): number[] {
-    return distanceWindowSmoothing(
-        points,
-        distanceWindow,
-        (index) =>
-            index > 0
-                ? distance(points[index - 1].getCoordinates(), points[index].getCoordinates())
-                : 0,
+function distanceWindowSmoothing(
+    left: number,
+    right: number,
+    statistics: GPXStatistics,
+    window: number,
+    compute: (start: number, end: number) => number,
+    callback: (value: number, index: number) => void
+): void {
+    windowSmoothing(
+        left,
+        right,
+        (index1, index2) =>
+            statistics.local.data[index2].distance.total -
+            statistics.local.data[index1].distance.total,
+        window,
        compute,
-        (index) => distance(points[index].getCoordinates(), points[index + 1].getCoordinates())
+        callback
+    );
+}
+
+function timeWindowSmoothing(
+    points: TrackPoint[],
+    window: number,
+    compute: (start: number, end: number) => number,
+    callback: (value: number, index: number) => void
+): void {
+    windowSmoothing(
+        0,
+        points.length,
+        (index1, index2) =>
+            points[index2].time?.getTime() - points[index1].time?.getTime() || 2 * window,
+        window,
+        compute,
+        callback
    );
 }

@@ -2044,14 +1798,14 @@ function withArtificialTimestamps(
    totalTime: number,
    lastPoint: TrackPoint | undefined,
    startTime: Date,
-    slope: number[]
+    statistics: GPXStatistics
 ): TrackPoint[] {
    let weight = [];
    let totalWeight = 0;

    for (let i = 0; i < points.length - 1; i++) {
        let dist = distance(points[i].getCoordinates(), points[i + 1].getCoordinates());
-        let w = dist * (0.5 + 1 / (1 + Math.exp(-0.2 * slope[i])));
+        let w = dist * (0.5 + 1 / (1 + Math.exp(-0.2 * statistics.local.data[i].slope.at)));
        weight.push(w);
        totalWeight += w;
    }
--- a/gpx/src/index.ts
+++ b/gpx/src/index.ts
@@ -1,4 +1,5 @@
 export * from './gpx';
+export * from './statistics';
 export { Coordinates, LineStyleExtension, WaypointType } from './types';
 export { parseGPX, buildGPX } from './io';
 export * from './simplify';
--- a/gpx/src/simplify.ts
+++ b/gpx/src/simplify.ts
@@ -3,8 +3,6 @@ import { Coordinates } from './types';

 export type SimplifiedTrackPoint = { point: TrackPoint; distance?: number };

-const earthRadius = 6371008.8;
-
 export function ramerDouglasPeucker(
    points: TrackPoint[],
    epsilon: number = 50,
@@ -61,76 +59,56 @@ function ramerDouglasPeuckerRecursive(
 }

 export function crossarcDistance(
-    point1: TrackPoint,
-    point2: TrackPoint,
+    point1: TrackPoint | Coordinates,
+    point2: TrackPoint | Coordinates,
    point3: TrackPoint | Coordinates
 ): number {
    return crossarc(
-        point1.getCoordinates(),
-        point2.getCoordinates(),
+        point1 instanceof TrackPoint ? point1.getCoordinates() : point1,
+        point2 instanceof TrackPoint ? point2.getCoordinates() : point2,
        point3 instanceof TrackPoint ? point3.getCoordinates() : point3
    );
 }

+const metersPerLatitudeDegree = 111320;
+
+function getMetersPerLongitudeDegree(latitude: number): number {
+    return Math.cos((latitude * Math.PI) / 180) * metersPerLatitudeDegree;
+}
+
 function crossarc(coord1: Coordinates, coord2: Coordinates, coord3: Coordinates): number {
-    // Calculates the shortest distance in meters
-    // between an arc (defined by p1 and p2) and a third point, p3.
-    // Input lat1,lon1,lat2,lon2,lat3,lon3 in degrees.
+    // Calculates the perpendicular distance in meters
+    // between a line segment (defined by p1 and p2) and a third point, p3.
+    // Uses simple planar geometry (ignores earth curvature).

-    const rad = Math.PI / 180;
-    const lat1 = coord1.lat * rad;
-    const lat2 = coord2.lat * rad;
-    const lat3 = coord3.lat * rad;
+    // Convert to meters using approximate scaling
+    const metersPerLongitudeDegree = getMetersPerLongitudeDegree(coord1.lat);

-    const lon1 = coord1.lon * rad;
-    const lon2 = coord2.lon * rad;
-    const lon3 = coord3.lon * rad;
+    const x1 = coord1.lon * metersPerLongitudeDegree;
+    const y1 = coord1.lat * metersPerLatitudeDegree;
+    const x2 = coord2.lon * metersPerLongitudeDegree;
+    const y2 = coord2.lat * metersPerLatitudeDegree;
+    const x3 = coord3.lon * metersPerLongitudeDegree;
+    const y3 = coord3.lat * metersPerLatitudeDegree;

-    // Prerequisites for the formulas
-    const bear12 = bearing(lat1, lon1, lat2, lon2);
-    const bear13 = bearing(lat1, lon1, lat3, lon3);
-    let dis13 = distance(lat1, lon1, lat3, lon3);
+    const dx = x2 - x1;
+    const dy = y2 - y1;
+    const segmentLengthSquared = dx * dx + dy * dy;

-    let diff = Math.abs(bear13 - bear12);
-    if (diff > Math.PI) {
-        diff = 2 * Math.PI - diff;
+    if (segmentLengthSquared === 0) {
+        // p1 and p2 are the same point
+        return Math.sqrt((x3 - x1) * (x3 - x1) + (y3 - y1) * (y3 - y1));
    }

-    // Is relative bearing obtuse?
-    if (diff > Math.PI / 2) {
-        return dis13;
-    }
+    // Project p3 onto the line defined by p1-p2
+    const t = Math.max(0, Math.min(1, ((x3 - x1) * dx + (y3 - y1) * dy) / segmentLengthSquared));

-    // Find the cross-track distance.
-    let dxt = Math.asin(Math.sin(dis13 / earthRadius) * Math.sin(bear13 - bear12)) * earthRadius;
+    // Find the closest point on the segment
+    const projX = x1 + t * dx;
+    const projY = y1 + t * dy;

-    // Is p4 beyond the arc?
-    let dis12 = distance(lat1, lon1, lat2, lon2);
-    let dis14 =
-        Math.acos(Math.cos(dis13 / earthRadius) / Math.cos(dxt / earthRadius)) * earthRadius;
-    if (dis14 > dis12) {
-        return distance(lat2, lon2, lat3, lon3);
-    } else {
-        return Math.abs(dxt);
-    }
-}
-
-function distance(latA: number, lonA: number, latB: number, lonB: number): number {
-    // Finds the distance between two lat / lon points.
-    return (
-        Math.acos(
-            Math.sin(latA) * Math.sin(latB) +
-                Math.cos(latA) * Math.cos(latB) * Math.cos(lonB - lonA)
-        ) * earthRadius
-    );
-}
-
-function bearing(latA: number, lonA: number, latB: number, lonB: number): number {
-    // Finds the bearing from one lat / lon point to another.
-    return Math.atan2(
-        Math.sin(lonB - lonA) * Math.cos(latB),
-        Math.cos(latA) * Math.sin(latB) - Math.sin(latA) * Math.cos(latB) * Math.cos(lonB - lonA)
-    );
+    // Return distance from p3 to the projected point
+    return Math.sqrt((x3 - projX) * (x3 - projX) + (y3 - projY) * (y3 - projY));
 }

 export function projectedPoint(
@@ -146,56 +124,39 @@ export function projectedPoint(
 }

 function projected(coord1: Coordinates, coord2: Coordinates, coord3: Coordinates): Coordinates {
-    // Calculates the point on the line defined by p1 and p2
+    // Calculates the point on the line segment defined by p1 and p2
    // that is closest to the third point, p3.
-    // Input lat1,lon1,lat2,lon2,lat3,lon3 in degrees.
+    // Uses simple planar geometry (ignores earth curvature).

-    const rad = Math.PI / 180;
-    const lat1 = coord1.lat * rad;
-    const lat2 = coord2.lat * rad;
-    const lat3 = coord3.lat * rad;
+    // Convert to meters using approximate scaling
+    const metersPerLongitudeDegree = getMetersPerLongitudeDegree(coord1.lat);

-    const lon1 = coord1.lon * rad;
-    const lon2 = coord2.lon * rad;
-    const lon3 = coord3.lon * rad;
+    const x1 = coord1.lon * metersPerLongitudeDegree;
+    const y1 = coord1.lat * metersPerLatitudeDegree;
+    const x2 = coord2.lon * metersPerLongitudeDegree;
+    const y2 = coord2.lat * metersPerLatitudeDegree;
+    const x3 = coord3.lon * metersPerLongitudeDegree;
+    const y3 = coord3.lat * metersPerLatitudeDegree;

-    // Prerequisites for the formulas
-    const bear12 = bearing(lat1, lon1, lat2, lon2);
-    const bear13 = bearing(lat1, lon1, lat3, lon3);
-    let dis13 = distance(lat1, lon1, lat3, lon3);
+    const dx = x2 - x1;
+    const dy = y2 - y1;
+    const segmentLengthSquared = dx * dx + dy * dy;

-    let diff = Math.abs(bear13 - bear12);
-    if (diff > Math.PI) {
-        diff = 2 * Math.PI - diff;
-    }
-
-    // Is relative bearing obtuse?
-    if (diff > Math.PI / 2) {
+    if (segmentLengthSquared === 0) {
+        // p1 and p2 are the same point
        return coord1;
    }

-    // Find the cross-track distance.
-    let dxt = Math.asin(Math.sin(dis13 / earthRadius) * Math.sin(bear13 - bear12)) * earthRadius;
+    // Project p3 onto the line defined by p1-p2
+    const t = Math.max(0, Math.min(1, ((x3 - x1) * dx + (y3 - y1) * dy) / segmentLengthSquared));

-    // Is p4 beyond the arc?
-    let dis12 = distance(lat1, lon1, lat2, lon2);
-    let dis14 =
-        Math.acos(Math.cos(dis13 / earthRadius) / Math.cos(dxt / earthRadius)) * earthRadius;
-    if (dis14 > dis12) {
-        return coord2;
-    } else {
-        // Determine the closest point (p4) on the great circle
-        const f = dis14 / earthRadius;
-        const lat4 = Math.asin(
-            Math.sin(lat1) * Math.cos(f) + Math.cos(lat1) * Math.sin(f) * Math.cos(bear12)
-        );
-        const lon4 =
-            lon1 +
-            Math.atan2(
-                Math.sin(bear12) * Math.sin(f) * Math.cos(lat1),
-                Math.cos(f) - Math.sin(lat1) * Math.sin(lat4)
-            );
+    // Find the closest point on the segment
+    const projX = x1 + t * dx;
+    const projY = y1 + t * dy;

-        return { lat: lat4 / rad, lon: lon4 / rad };
-    }
+    // Convert back to degrees
+    return {
+        lat: projY / metersPerLatitudeDegree,
+        lon: projX / metersPerLongitudeDegree,
+    };
 }
--- a/gpx/src/statistics.ts
+++ b/gpx/src/statistics.ts
@@ -0,0 +1,391 @@
+import { TrackPoint } from './gpx';
+import { Coordinates } from './types';
+
+export class GPXGlobalStatistics {
+    length: number;
+    distance: {
+        moving: number;
+        total: number;
+    };
+    time: {
+        start: Date | undefined;
+        end: Date | undefined;
+        moving: number;
+        total: number;
+    };
+    speed: {
+        moving: number;
+        total: number;
+    };
+    elevation: {
+        gain: number;
+        loss: number;
+    };
+    bounds: {
+        southWest: Coordinates;
+        northEast: Coordinates;
+    };
+    atemp: {
+        avg: number;
+        count: number;
+    };
+    hr: {
+        avg: number;
+        count: number;
+    };
+    cad: {
+        avg: number;
+        count: number;
+    };
+    power: {
+        avg: number;
+        count: number;
+    };
+    extensions: Record<string, Record<string, number>>;
+
+    constructor() {
+        this.length = 0;
+        this.distance = {
+            moving: 0,
+            total: 0,
+        };
+        this.time = {
+            start: undefined,
+            end: undefined,
+            moving: 0,
+            total: 0,
+        };
+        this.speed = {
+            moving: 0,
+            total: 0,
+        };
+        this.elevation = {
+            gain: 0,
+            loss: 0,
+        };
+        this.bounds = {
+            southWest: {
+                lat: 90,
+                lon: 180,
+            },
+            northEast: {
+                lat: -90,
+                lon: -180,
+            },
+        };
+        this.atemp = {
+            avg: 0,
+            count: 0,
+        };
+        this.hr = {
+            avg: 0,
+            count: 0,
+        };
+        this.cad = {
+            avg: 0,
+            count: 0,
+        };
+        this.power = {
+            avg: 0,
+            count: 0,
+        };
+        this.extensions = {};
+    }
+
+    mergeWith(other: GPXGlobalStatistics): void {
+        this.length += other.length;
+
+        this.distance.total += other.distance.total;
+        this.distance.moving += other.distance.moving;
+
+        this.time.start =
+            this.time.start !== undefined && other.time.start !== undefined
+                ? new Date(Math.min(this.time.start.getTime(), other.time.start.getTime()))
+                : (this.time.start ?? other.time.start);
+        this.time.end =
+            this.time.end !== undefined && other.time.end !== undefined
+                ? new Date(Math.max(this.time.end.getTime(), other.time.end.getTime()))
+                : (this.time.end ?? other.time.end);
+
+        this.time.total += other.time.total;
+        this.time.moving += other.time.moving;
+
+        this.speed.moving =
+            this.time.moving > 0 ? this.distance.moving / (this.time.moving / 3600) : 0;
+        this.speed.total = this.time.total > 0 ? this.distance.total / (this.time.total / 3600) : 0;
+
+        this.elevation.gain += other.elevation.gain;
+        this.elevation.loss += other.elevation.loss;
+
+        this.bounds.southWest.lat = Math.min(this.bounds.southWest.lat, other.bounds.southWest.lat);
+        this.bounds.southWest.lon = Math.min(this.bounds.southWest.lon, other.bounds.southWest.lon);
+        this.bounds.northEast.lat = Math.max(this.bounds.northEast.lat, other.bounds.northEast.lat);
+        this.bounds.northEast.lon = Math.max(this.bounds.northEast.lon, other.bounds.northEast.lon);
+
+        this.atemp.avg =
+            (this.atemp.count * this.atemp.avg + other.atemp.count * other.atemp.avg) /
+            Math.max(1, this.atemp.count + other.atemp.count);
+        this.atemp.count += other.atemp.count;
+        this.hr.avg =
+            (this.hr.count * this.hr.avg + other.hr.count * other.hr.avg) /
+            Math.max(1, this.hr.count + other.hr.count);
+        this.hr.count += other.hr.count;
+        this.cad.avg =
+            (this.cad.count * this.cad.avg + other.cad.count * other.cad.avg) /
+            Math.max(1, this.cad.count + other.cad.count);
+        this.cad.count += other.cad.count;
+        this.power.avg =
+            (this.power.count * this.power.avg + other.power.count * other.power.avg) /
+            Math.max(1, this.power.count + other.power.count);
+        this.power.count += other.power.count;
+
+        Object.keys(other.extensions).forEach((extension) => {
+            if (this.extensions[extension] === undefined) {
+                this.extensions[extension] = {};
+            }
+            Object.keys(other.extensions[extension]).forEach((value) => {
+                if (this.extensions[extension][value] === undefined) {
+                    this.extensions[extension][value] = 0;
+                }
+                this.extensions[extension][value] += other.extensions[extension][value];
+            });
+        });
+    }
+}
+
+export class TrackPointLocalStatistics {
+    distance: {
+        moving: number;
+        total: number;
+    };
+    time: {
+        moving: number;
+        total: number;
+    };
+    speed: number;
+    elevation: {
+        gain: number;
+        loss: number;
+    };
+    slope: {
+        at: number;
+        segment: number;
+        length: number;
+    };
+
+    constructor() {
+        this.distance = {
+            moving: 0,
+            total: 0,
+        };
+        this.time = {
+            moving: 0,
+            total: 0,
+        };
+        this.speed = 0;
+        this.elevation = {
+            gain: 0,
+            loss: 0,
+        };
+        this.slope = {
+            at: 0,
+            segment: 0,
+            length: 0,
+        };
+    }
+}
+
+export class GPXLocalStatistics {
+    points: TrackPoint[];
+    data: TrackPointLocalStatistics[];
+
+    constructor() {
+        this.points = [];
+        this.data = [];
+    }
+}
+
+export type TrackPointWithLocalStatistics = {
+    trkpt: TrackPoint;
+} & TrackPointLocalStatistics;
+
+export class GPXStatistics {
+    global: GPXGlobalStatistics;
+    local: GPXLocalStatistics;
+
+    constructor() {
+        this.global = new GPXGlobalStatistics();
+        this.local = new GPXLocalStatistics();
+    }
+
+    sliced(start: number, end: number): GPXGlobalStatistics {
+        if (start < 0) {
+            start = 0;
+        } else if (start >= this.global.length) {
+            return new GPXGlobalStatistics();
+        }
+
+        if (end < start) {
+            return new GPXGlobalStatistics();
+        } else if (end >= this.global.length) {
+            end = this.global.length - 1;
+        }
+
+        if (start === 0 && end === this.global.length - 1) {
+            return this.global;
+        }
+
+        let statistics = new GPXGlobalStatistics();
+
+        statistics.length = end - start + 1;
+
+        statistics.distance.total =
+            this.local.data[end].distance.total - this.local.data[start].distance.total;
+        statistics.distance.moving =
+            this.local.data[end].distance.moving - this.local.data[start].distance.moving;
+
+        statistics.time.start = this.local.points[start].time;
+        statistics.time.end = this.local.points[end].time;
+
+        statistics.time.total = this.local.data[end].time.total - this.local.data[start].time.total;
+        statistics.time.moving =
+            this.local.data[end].time.moving - this.local.data[start].time.moving;
+
+        statistics.speed.moving =
+            statistics.time.moving > 0
+                ? statistics.distance.moving / (statistics.time.moving / 3600)
+                : 0;
+        statistics.speed.total =
+            statistics.time.total > 0
+                ? statistics.distance.total / (statistics.time.total / 3600)
+                : 0;
+
+        statistics.elevation.gain =
+            this.local.data[end].elevation.gain - this.local.data[start].elevation.gain;
+        statistics.elevation.loss =
+            this.local.data[end].elevation.loss - this.local.data[start].elevation.loss;
+
+        statistics.bounds.southWest.lat = this.global.bounds.southWest.lat;
+        statistics.bounds.southWest.lon = this.global.bounds.southWest.lon;
+        statistics.bounds.northEast.lat = this.global.bounds.northEast.lat;
+        statistics.bounds.northEast.lon = this.global.bounds.northEast.lon;
+
+        statistics.atemp = this.global.atemp;
+        statistics.hr = this.global.hr;
+        statistics.cad = this.global.cad;
+        statistics.power = this.global.power;
+
+        return statistics;
+    }
+}
+
+export class GPXStatisticsGroup {
+    private _statistics: GPXStatistics[];
+    private _cumulative: GPXGlobalStatistics[];
+    private _slice: [number, number] | null = null;
+    global: GPXGlobalStatistics;
+
+    constructor() {
+        this._statistics = [];
+        this._cumulative = [new GPXGlobalStatistics()];
+        this.global = new GPXGlobalStatistics();
+    }
+
+    add(statistics: GPXStatistics | GPXStatisticsGroup): void {
+        if (statistics instanceof GPXStatisticsGroup) {
+            statistics._statistics.forEach((stats) => this._add(stats));
+        } else {
+            this._add(statistics);
+        }
+    }
+
+    _add(statistics: GPXStatistics): void {
+        this._statistics.push(statistics);
+        const cumulative = new GPXGlobalStatistics();
+        cumulative.mergeWith(this._cumulative[this._cumulative.length - 1]);
+        cumulative.mergeWith(statistics.global);
+        this._cumulative.push(cumulative);
+        this.global.mergeWith(statistics.global);
+    }
+
+    sliced(start: number, end: number): GPXGlobalStatistics {
+        let sliced = new GPXGlobalStatistics();
+        for (let i = 0; i < this._statistics.length; i++) {
+            const statistics = this._statistics[i];
+            const cumulative = this._cumulative[i];
+            if (start < cumulative.length + statistics.global.length && end >= cumulative.length) {
+                const localStart = Math.max(0, start - cumulative.length);
+                const localEnd = Math.min(statistics.global.length - 1, end - cumulative.length);
+                sliced.mergeWith(statistics.sliced(localStart, localEnd));
+            }
+        }
+        return sliced;
+    }
+
+    getTrackPoint(index: number): TrackPointWithLocalStatistics | undefined {
+        if (this._slice !== null) {
+            index += this._slice[0];
+        }
+        for (let i = 0; i < this._statistics.length; i++) {
+            const statistics = this._statistics[i];
+            const cumulative = this._cumulative[i];
+            if (index < cumulative.length + statistics.global.length) {
+                return this._getTrackPoint(cumulative, statistics, index - cumulative.length);
+            }
+        }
+        return undefined;
+    }
+
+    _getTrackPoint(
+        cumulative: GPXGlobalStatistics,
+        statistics: GPXStatistics,
+        index: number
+    ): TrackPointWithLocalStatistics {
+        const point = statistics.local.points[index];
+        return {
+            trkpt: point,
+            distance: {
+                moving: statistics.local.data[index].distance.moving + cumulative.distance.moving,
+                total: statistics.local.data[index].distance.total + cumulative.distance.total,
+            },
+            time: {
+                moving: statistics.local.data[index].time.moving + cumulative.time.moving,
+                total: statistics.local.data[index].time.total + cumulative.time.total,
+            },
+            speed: statistics.local.data[index].speed,
+            elevation: {
+                gain: statistics.local.data[index].elevation.gain + cumulative.elevation.gain,
+                loss: statistics.local.data[index].elevation.loss + cumulative.elevation.loss,
+            },
+            slope: {
+                at: statistics.local.data[index].slope.at,
+                segment: statistics.local.data[index].slope.segment,
+                length: statistics.local.data[index].slope.length,
+            },
+        };
+    }
+
+    forEachTrackPoint(
+        callback: (
+            point: TrackPoint,
+            distance: number,
+            speed: number,
+            slope: { at: number; segment: number; length: number },
+            index: number
+        ) => void
+    ): void {
+        for (let i = 0; i < this._statistics.length; i++) {
+            const statistics = this._statistics[i];
+            const cumulative = this._cumulative[i];
+            statistics.local.points.forEach((point, index) =>
+                callback(
+                    point,
+                    cumulative.distance.total + statistics.local.data[index].distance.total,
+                    statistics.local.data[index].speed,
+                    statistics.local.data[index].slope,
+                    cumulative.length + index
+                )
+            );
+        }
+    }
+}
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +0,0 @@
-{
-  "name": "gpx.studio",
-  "lockfileVersion": 3,
-  "requires": true,
-  "packages": {}
-}
--- a/website/components.json
+++ b/website/components.json
@@ -1,17 +1,17 @@
 {
-	"$schema": "https://shadcn-svelte.com/schema.json",
-	"style": "default",
-	"tailwind": {
-		"css": "src/app.css",
-		"baseColor": "slate"
-	},
-	"aliases": {
-		"components": "$lib/components",
-		"utils": "$lib/utils",
-		"ui": "$lib/components/ui",
-		"hooks": "$lib/hooks",
-		"lib": "$lib"
-	},
-	"typescript": true,
-	"registry": "https://shadcn-svelte.com/registry"
+    "$schema": "https://shadcn-svelte.com/schema.json",
+    "style": "default",
+    "tailwind": {
+        "css": "src/app.css",
+        "baseColor": "slate"
+    },
+    "aliases": {
+        "components": "$lib/components",
+        "utils": "$lib/utils",
+        "ui": "$lib/components/ui",
+        "hooks": "$lib/hooks",
+        "lib": "$lib"
+    },
+    "typescript": true,
+    "registry": "https://shadcn-svelte.com/registry"
 }
--- a/website/package-lock.json
+++ b/website/package-lock.json
@@ -14,7 +14,7 @@
                "@mapbox/sphericalmercator": "^2.0.1",
                "@mapbox/tilebelt": "^2.0.2",
                "@types/mapbox__sphericalmercator": "^1.2.3",
-                "chart.js": "^4.4.9",
+                "chart.js": "^4.5.1",
                "chartjs-plugin-zoom": "^2.2.0",
                "clsx": "^2.1.1",
                "dexie": "^4.0.11",
@@ -22,7 +22,7 @@
                "gpx": "file:../gpx",
                "immer": "^10.1.1",
                "jszip": "^3.10.1",
-                "mapbox-gl": "^3.12.0",
+                "mapbox-gl": "^3.17.0",
                "mapillary-js": "^4.1.2",
                "png.js": "^0.2.1",
                "sanitize-html": "^2.17.0",
@@ -47,7 +47,7 @@
                "@types/sortablejs": "^1.15.8",
                "@typescript-eslint/eslint-plugin": "^8.33.1",
                "@typescript-eslint/parser": "^8.33.1",
-                "bits-ui": "^2.12.0",
+                "bits-ui": "^2.14.4",
                "eslint": "^9.28.0",
                "eslint-config-prettier": "^10.1.5",
                "eslint-plugin-svelte": "^3.9.1",
@@ -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",
@@ -3234,9 +3241,9 @@
            ]
        },
        "node_modules/bits-ui": {
-            "version": "2.12.0",
-            "resolved": "https://registry.npmjs.org/bits-ui/-/bits-ui-2.12.0.tgz",
-            "integrity": "sha512-8NF4ILNyAJlIxDXpl/akGXGBV5QmZAe+8gTfPttM5P6/+LrijumcSfFXY5cr4QkXwTmLA7H5stYpbgJf2XFJvg==",
+            "version": "2.14.4",
+            "resolved": "https://registry.npmjs.org/bits-ui/-/bits-ui-2.14.4.tgz",
+            "integrity": "sha512-W6kenhnbd/YVvur+DKkaVJ6GldE53eLewur5AhUCqslYQ0vjZr8eWlOfwZnMiPB+PF5HMVqf61vXBvmyrAmPWg==",
            "dev": true,
            "license": "MIT",
            "dependencies": {
@@ -3657,9 +3664,9 @@
            }
        },
        "node_modules/chart.js": {
-            "version": "4.4.9",
-            "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.4.9.tgz",
-            "integrity": "sha512-EyZ9wWKgpAU0fLJ43YAEIF8sr5F2W3LqbS40ZJyHIner2lY14ufqv2VMp69MAiZ2rpwxEUxEhIH/0U3xyRynxg==",
+            "version": "4.5.1",
+            "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.5.1.tgz",
+            "integrity": "sha512-GIjfiT9dbmHRiYi6Nl2yFCq7kkwdkp1W/lp2J99rX0yo9tgJGn3lKQATztIjb5tVtevcBtIdICNWqlq5+E8/Pw==",
            "license": "MIT",
            "dependencies": {
                "@kurkle/color": "^0.3.0"
@@ -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,44 +6069,55 @@
            }
        },
        "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.17.0",
+            "resolved": "https://registry.npmjs.org/mapbox-gl/-/mapbox-gl-3.17.0.tgz",
+            "integrity": "sha512-nCrDKRlr5di6xUksUDslNWwxroJ5yv1hT8pyVFtcpWJOOKsYQxF/wOFTMie8oxMnXeFkrz1Tl1TwA1XN1yX0KA==",
            "license": "SEE LICENSE IN LICENSE.txt",
            "workspaces": [
                "src/style-spec",
+                "test/build/vite",
+                "test/build/webpack",
                "test/build/typings"
            ],
            "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": {
@@ -7616,14 +7635,6 @@
                "node": ">=10"
            }
        },
-        "node_modules/serialize-to-js": {
-            "version": "3.1.2",
-            "resolved": "https://registry.npmjs.org/serialize-to-js/-/serialize-to-js-3.1.2.tgz",
-            "integrity": "sha512-owllqNuDDEimQat7EPG0tH7JjO090xKNzUtYz6X+Sk2BXDnOCilDdNLwjWeFywG9xkJul1ULvtUQa9O4pUaY0w==",
-            "engines": {
-                "node": ">=4.0.0"
-            }
-        },
        "node_modules/set-cookie-parser": {
            "version": "2.7.0",
            "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.0.tgz",
@@ -9021,16 +9032,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",
--- a/website/package.json
+++ b/website/package.json
@@ -10,8 +10,8 @@
        "preview": "vite preview",
        "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
        "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-        "lint": "prettier --check . && eslint .",
-        "format": "prettier --write ."
+        "lint": "prettier --check . --config ../.prettierrc --ignore-path ../.prettierignore --ignore-path ./.gitignore && eslint .",
+        "format": "prettier --write . --config ../.prettierrc --ignore-path ../.prettierignore --ignore-path ./.gitignore"
    },
    "devDependencies": {
        "@lucide/svelte": "^0.544.0",
@@ -31,7 +31,7 @@
        "@types/sortablejs": "^1.15.8",
        "@typescript-eslint/eslint-plugin": "^8.33.1",
        "@typescript-eslint/parser": "^8.33.1",
-        "bits-ui": "^2.12.0",
+        "bits-ui": "^2.14.4",
        "eslint": "^9.28.0",
        "eslint-config-prettier": "^10.1.5",
        "eslint-plugin-svelte": "^3.9.1",
@@ -66,7 +66,7 @@
        "@mapbox/sphericalmercator": "^2.0.1",
        "@mapbox/tilebelt": "^2.0.2",
        "@types/mapbox__sphericalmercator": "^1.2.3",
-        "chart.js": "^4.4.9",
+        "chart.js": "^4.5.1",
        "chartjs-plugin-zoom": "^2.2.0",
        "clsx": "^2.1.1",
        "dexie": "^4.0.11",
@@ -74,7 +74,7 @@
        "gpx": "file:../gpx",
        "immer": "^10.1.1",
        "jszip": "^3.10.1",
-        "mapbox-gl": "^3.12.0",
+        "mapbox-gl": "^3.17.0",
        "mapillary-js": "^4.1.2",
        "png.js": "^0.2.1",
        "sanitize-html": "^2.17.0",
--- a/website/src/app.css
+++ b/website/src/app.css
@@ -1,124 +1,126 @@
-@import "tailwindcss";
-@import "tw-animate-css";
- 
+@import 'tailwindcss';
+@import 'tw-animate-css';
+
@custom-variant dark (&:is(.dark *));
- 
+
 :root {
- --background: hsl(0 0% 100%) /* <- Wrap in HSL */;
- --foreground: hsl(240 10% 3.9%);
- --muted: hsl(240 4.8% 95.9%);
- --muted-foreground: hsl(240 3.8% 46.1%);
- --popover: hsl(0 0% 100%);
- --popover-foreground: hsl(240 10% 3.9%);
- --card: hsl(0 0% 100%);
- --card-foreground: hsl(240 10% 3.9%);
- --border: hsl(240 5.9% 90%);
- --input: hsl(240 5.9% 90%);
- --primary: hsl(240 5.9% 10%);
- --primary-foreground: hsl(0 0% 98%);
- --secondary: hsl(240 4.8% 95.9%);
- --secondary-foreground: hsl(240 5.9% 10%);
- --accent: hsl(240 4.8% 95.9%);
- --accent-foreground: hsl(240 5.9% 10%);
- --destructive: hsl(0 72.2% 50.6%);
- --destructive-foreground: hsl(0 0% 98%);
- --ring: hsl(240 10% 3.9%);
- --sidebar: hsl(0 0% 98%);
- --sidebar-foreground: hsl(240 5.3% 26.1%);
- --sidebar-primary: hsl(240 5.9% 10%);
- --sidebar-primary-foreground: hsl(0 0% 98%);
- --sidebar-accent: hsl(240 4.8% 95.9%);
- --sidebar-accent-foreground: hsl(240 5.9% 10%);
- --sidebar-border: hsl(220 13% 91%);
- --sidebar-ring: hsl(217.2 91.2% 59.8%);
+    --background: hsl(0 0% 100%) /* <- Wrap in HSL */;
+    --foreground: hsl(240 10% 3.9%);
+    --muted: hsl(240 4.8% 95.9%);
+    --muted-foreground: hsl(240 3.8% 46.1%);
+    --popover: hsl(0 0% 100%);
+    --popover-foreground: hsl(240 10% 3.9%);
+    --card: hsl(0 0% 100%);
+    --card-foreground: hsl(240 10% 3.9%);
+    --border: hsl(240 5.9% 90%);
+    --input: hsl(240 5.9% 90%);
+    --primary: hsl(240 5.9% 10%);
+    --primary-foreground: hsl(0 0% 98%);
+    --secondary: hsl(240 4.8% 95.9%);
+    --secondary-foreground: hsl(240 5.9% 10%);
+    --accent: hsl(240 4.8% 95.9%);
+    --accent-foreground: hsl(240 5.9% 10%);
+    --destructive: hsl(0 72.2% 50.6%);
+    --destructive-foreground: hsl(0 0% 98%);
+    --ring: hsl(240 10% 3.9%);
+    --sidebar: hsl(0 0% 98%);
+    --sidebar-foreground: hsl(240 5.3% 26.1%);
+    --sidebar-primary: hsl(240 5.9% 10%);
+    --sidebar-primary-foreground: hsl(0 0% 98%);
+    --sidebar-accent: hsl(240 4.8% 95.9%);
+    --sidebar-accent-foreground: hsl(240 5.9% 10%);
+    --sidebar-border: hsl(220 13% 91%);
+    --sidebar-ring: hsl(217.2 91.2% 59.8%);

- --support: rgb(220 15 130);
- --link: rgb(0 110 180);
- 
- --radius: 0.5rem;
+    --support: rgb(220 15 130);
+    --link: rgb(0 110 180);
+    --selection: hsl(240 4.8% 93%);
+
+    --radius: 0.5rem;
 }
- 
+
 .dark {
- --background: hsl(240 10% 3.9%);
- --foreground: hsl(0 0% 98%);
- --muted: hsl(240 3.7% 15.9%);
- --muted-foreground: hsl(240 5% 64.9%);
- --popover: hsl(240 10% 3.9%);
- --popover-foreground: hsl(0 0% 98%);
- --card: hsl(240 10% 3.9%);
- --card-foreground: hsl(0 0% 98%);
- --border: hsl(240 3.7% 15.9%);
- --input: hsl(240 3.7% 15.9%);
- --primary: hsl(0 0% 98%);
- --primary-foreground: hsl(240 5.9% 10%);
- --secondary: hsl(240 3.7% 15.9%);
- --secondary-foreground: hsl(0 0% 98%);
- --accent: hsl(240 3.7% 15.9%);
- --accent-foreground: hsl(0 0% 98%);
- --destructive: hsl(0 62.8% 30.6%);
- --destructive-foreground: hsl(0 0% 98%);
- --ring: hsl(240 4.9% 83.9%);
- --sidebar: hsl(240 5.9% 10%);
- --sidebar-foreground: hsl(240 4.8% 95.9%);
- --sidebar-primary: hsl(224.3 76.3% 48%);
- --sidebar-primary-foreground: hsl(0 0% 100%);
- --sidebar-accent: hsl(240 3.7% 15.9%);
- --sidebar-accent-foreground: hsl(240 4.8% 95.9%);
- --sidebar-border: hsl(240 3.7% 15.9%);
- --sidebar-ring: hsl(217.2 91.2% 59.8%);
+    --background: hsl(240 10% 3.9%);
+    --foreground: hsl(0 0% 98%);
+    --muted: hsl(240 3.7% 15.9%);
+    --muted-foreground: hsl(240 5% 64.9%);
+    --popover: hsl(240 10% 3.9%);
+    --popover-foreground: hsl(0 0% 98%);
+    --card: hsl(240 10% 3.9%);
+    --card-foreground: hsl(0 0% 98%);
+    --border: hsl(240 3.7% 15.9%);
+    --input: hsl(240 3.7% 15.9%);
+    --primary: hsl(0 0% 98%);
+    --primary-foreground: hsl(240 5.9% 10%);
+    --secondary: hsl(240 3.7% 15.9%);
+    --secondary-foreground: hsl(0 0% 98%);
+    --accent: hsl(240 3.7% 15.9%);
+    --accent-foreground: hsl(0 0% 98%);
+    --destructive: hsl(0 62.8% 30.6%);
+    --destructive-foreground: hsl(0 0% 98%);
+    --ring: hsl(240 4.9% 83.9%);
+    --sidebar: hsl(240 5.9% 10%);
+    --sidebar-foreground: hsl(240 4.8% 95.9%);
+    --sidebar-primary: hsl(224.3 76.3% 48%);
+    --sidebar-primary-foreground: hsl(0 0% 100%);
+    --sidebar-accent: hsl(240 3.7% 15.9%);
+    --sidebar-accent-foreground: hsl(240 4.8% 95.9%);
+    --sidebar-border: hsl(240 3.7% 15.9%);
+    --sidebar-ring: hsl(217.2 91.2% 59.8%);

- --support: rgb(255 110 190);
- --link: rgb(80 190 255);
+    --support: rgb(255 110 190);
+    --link: rgb(80 190 255);
+    --selection: hsl(240 3.7% 22%);
 }
- 
+
@theme inline {
- /* Radius (for rounded-*) */
- --radius-sm: calc(var(--radius) - 4px);
- --radius-md: calc(var(--radius) - 2px);
- --radius-lg: var(--radius);
- --radius-xl: calc(var(--radius) + 4px);
- 
- /* Colors */
- --color-background: var(--background);
- --color-foreground: var(--foreground);
- --color-muted: var(--muted);
- --color-muted-foreground: var(--muted-foreground);
- --color-popover: var(--popover);
- --color-popover-foreground: var(--popover-foreground);
- --color-card: var(--card);
- --color-card-foreground: var(--card-foreground);
- --color-border: var(--border);
- --color-input: var(--input);
- --color-primary: var(--primary);
- --color-primary-foreground: var(--primary-foreground);
- --color-secondary: var(--secondary);
- --color-secondary-foreground: var(--secondary-foreground);
- --color-accent: var(--accent);
- --color-accent-foreground: var(--accent-foreground);
- --color-destructive: var(--destructive);
- --color-destructive-foreground: var(--destructive-foreground);
- --color-ring: var(--ring);
- --color-radius: var(--radius);
- --color-sidebar: var(--sidebar);
- --color-sidebar-foreground: var(--sidebar-foreground);
- --color-sidebar-primary: var(--sidebar-primary);
- --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
- --color-sidebar-accent: var(--sidebar-accent);
- --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
- --color-sidebar-border: var(--sidebar-border);
- --color-sidebar-ring: var(--sidebar-ring);
- --color-support: var(--support);
- --color-link: var(--link);
+    /* Radius (for rounded-*) */
+    --radius-sm: calc(var(--radius) - 4px);
+    --radius-md: calc(var(--radius) - 2px);
+    --radius-lg: var(--radius);
+    --radius-xl: calc(var(--radius) + 4px);

- --breakpoint-xs: 540px;
+    /* Colors */
+    --color-background: var(--background);
+    --color-foreground: var(--foreground);
+    --color-muted: var(--muted);
+    --color-muted-foreground: var(--muted-foreground);
+    --color-popover: var(--popover);
+    --color-popover-foreground: var(--popover-foreground);
+    --color-card: var(--card);
+    --color-card-foreground: var(--card-foreground);
+    --color-border: var(--border);
+    --color-input: var(--input);
+    --color-primary: var(--primary);
+    --color-primary-foreground: var(--primary-foreground);
+    --color-secondary: var(--secondary);
+    --color-secondary-foreground: var(--secondary-foreground);
+    --color-accent: var(--accent);
+    --color-accent-foreground: var(--accent-foreground);
+    --color-destructive: var(--destructive);
+    --color-destructive-foreground: var(--destructive-foreground);
+    --color-ring: var(--ring);
+    --color-radius: var(--radius);
+    --color-sidebar: var(--sidebar);
+    --color-sidebar-foreground: var(--sidebar-foreground);
+    --color-sidebar-primary: var(--sidebar-primary);
+    --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+    --color-sidebar-accent: var(--sidebar-accent);
+    --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+    --color-sidebar-border: var(--sidebar-border);
+    --color-sidebar-ring: var(--sidebar-ring);
+    --color-support: var(--support);
+    --color-link: var(--link);
+
+    --breakpoint-xs: 540px;
 }
- 
+
@layer base {
- * {
-  @apply border-border;
- }
- 
- body {
-  @apply bg-background text-foreground;
- }
-}
+    * {
+        @apply border-border;
+    }
+
+    body {
+        @apply bg-background text-foreground;
+    }
+}
--- a/website/src/hooks.server.js
+++ b/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}" />
--- a/website/src/lib/assets/layers.ts
+++ b/website/src/lib/assets/layers.ts
@@ -22,7 +22,7 @@ import {
    Binoculars,
    Toilet,
 } from 'lucide-static';
-import { type StyleSpecification } from 'mapbox-gl';
+import { type RasterDEMSourceSpecification, type StyleSpecification } from 'mapbox-gl';
 import ignFrTopo from './custom/ign-fr-topo.json';
 import ignFrPlan from './custom/ign-fr-plan.json';
 import ignFrSatellite from './custom/ign-fr-satellite.json';
@@ -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: {
@@ -368,6 +368,42 @@ export const overlays: { [key: string]: string | StyleSpecification } = {
        ],
    },
    bikerouterGravel: bikerouterGravel as StyleSpecification,
+    openRailwayMap: {
+        version: 8,
+        sources: {
+            openRailwayMap: {
+                type: 'raster',
+                tiles: ['https://tiles.openrailwaymap.org/standard/{z}/{x}/{y}.png'],
+                tileSize: 256,
+                maxzoom: 19,
+                attribution:
+                    'Data <a href="https://www.openstreetmap.org/copyright">&copy; OpenStreetMap contributors</a>, Style: <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA 2.0</a> <a href="http://www.openrailwaymap.org/">OpenRailwayMap</a>',
+            },
+        },
+        layers: [
+            {
+                id: 'openRailwayMap',
+                type: 'raster',
+                source: 'openRailwayMap',
+            },
+        ],
+    },
+    mapterhornHillshade: {
+        version: 8,
+        sources: {
+            mapterhornHillshade: {
+                type: 'raster-dem',
+                url: 'https://tiles.mapterhorn.com/tilejson.json',
+            },
+        },
+        layers: [
+            {
+                id: 'mapterhornHillshade',
+                type: 'hillshade',
+                source: 'mapterhornHillshade',
+            },
+        ],
+    },
    swisstopoSlope: {
        version: 8,
        sources: {
@@ -799,8 +835,10 @@ export const overlayTree: LayerTreeType = {
                waymarkedTrailsHorseRiding: true,
                waymarkedTrailsWinter: true,
            },
-            cyclOSMlite: true,
            bikerouterGravel: true,
+            cyclOSMlite: true,
+            mapterhornHillshade: true,
+            openRailwayMap: true,
        },
        countries: {
            france: {
@@ -836,6 +874,7 @@ export const overpassTree: LayerTreeType = {
            shower: true,
            shelter: true,
            barrier: true,
+            cemetery: true,
        },
        tourism: {
            attraction: true,
@@ -882,8 +921,10 @@ export const defaultOverlays: LayerTreeType = {
                waymarkedTrailsHorseRiding: false,
                waymarkedTrailsWinter: false,
            },
-            cyclOSMlite: false,
            bikerouterGravel: false,
+            cyclOSMlite: false,
+            mapterhornHillshade: false,
+            openRailwayMap: false,
        },
        countries: {
            france: {
@@ -919,6 +960,7 @@ export const defaultOverpassQueries: LayerTreeType = {
            shower: false,
            shelter: false,
            barrier: false,
+            cemetery: false,
        },
        tourism: {
            attraction: false,
@@ -1016,8 +1058,10 @@ export const defaultOverlayTree: LayerTreeType = {
                waymarkedTrailsHorseRiding: false,
                waymarkedTrailsWinter: false,
            },
-            cyclOSMlite: false,
            bikerouterGravel: false,
+            cyclOSMlite: false,
+            mapterhornHillshade: false,
+            openRailwayMap: false,
        },
        countries: {
            france: {
@@ -1053,6 +1097,7 @@ export const defaultOverpassTree: LayerTreeType = {
            shower: false,
            shelter: false,
            barrier: false,
+            cemetery: false,
        },
        tourism: {
            attraction: false,
@@ -1099,9 +1144,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 +1225,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 +1275,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: {
@@ -1378,3 +1453,18 @@ export const overpassQueryData: Record<string, OverpassQueryData> = {
        symbol: 'Anchor',
    },
 };
+
+export const terrainSources: { [key: string]: RasterDEMSourceSpecification } = {
+    'mapbox-dem': {
+        type: 'raster-dem',
+        url: 'mapbox://mapbox.mapbox-terrain-dem-v1',
+        tileSize: 512,
+        maxzoom: 14,
+    },
+    mapterhorn: {
+        type: 'raster-dem',
+        url: 'https://tiles.mapterhorn.com/tilejson.json',
+    },
+};
+
+export const defaultTerrainSource = 'mapbox-dem';
--- a/website/src/lib/assets/symbols.ts
+++ b/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,
--- a/website/src/lib/components/Footer.svelte
+++ b/website/src/lib/components/Footer.svelte
@@ -18,7 +18,7 @@
                    href="https://github.com/gpxstudio/gpx.studio/blob/main/LICENSE"
                    target="_blank"
                >
-                    MIT © 2025 gpx.studio
+                    MIT © 2026 gpx.studio
                </Button>
                <LanguageSelect class="w-40 mt-3" />
            </div>
@@ -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')}
@@ -70,15 +71,6 @@
                        <Logo company="facebook" class="h-4 fill-muted-foreground" />
                        {i18n._('homepage.facebook')}
                    </Button>
-                    <Button
-                        variant="link"
-                        class="h-6 px-0 has-[>svg]:px-0 text-muted-foreground"
-                        href="https://x.com/gpxstudio"
-                        target="_blank"
-                    >
-                        <Logo company="x" class="h-4 fill-muted-foreground" />
-                        {i18n._('homepage.x')}
-                    </Button>
                    <Button
                        variant="link"
                        class="h-6 px-0 has-[>svg]:px-0 text-muted-foreground"
--- a/website/src/lib/components/GPXStatistics.svelte
+++ b/website/src/lib/components/GPXStatistics.svelte
@@ -6,7 +6,7 @@
    import { MoveDownRight, MoveUpRight, Ruler, Timer, Zap } from '@lucide/svelte';

    import { i18n } from '$lib/i18n.svelte';
-    import type { GPXStatistics } from 'gpx';
+    import type { GPXGlobalStatistics, GPXStatisticsGroup } from 'gpx';
    import type { Readable } from 'svelte/store';
    import { settings } from '$lib/logic/settings';

@@ -18,14 +18,14 @@
        orientation,
        panelSize,
    }: {
-        gpxStatistics: Readable<GPXStatistics>;
-        slicedGPXStatistics: Readable<[GPXStatistics, number, number] | undefined>;
+        gpxStatistics: Readable<GPXStatisticsGroup>;
+        slicedGPXStatistics: Readable<[GPXGlobalStatistics, number, number] | undefined>;
        orientation: 'horizontal' | 'vertical';
        panelSize: number;
    } = $props();

    let statistics = $derived(
-        $slicedGPXStatistics !== undefined ? $slicedGPXStatistics[0] : $gpxStatistics
+        $slicedGPXStatistics !== undefined ? $slicedGPXStatistics[0] : $gpxStatistics.global
    );
 </script>

@@ -42,15 +42,15 @@
        <Tooltip label={i18n._('quantities.distance')}>
            <span class="flex flex-row items-center">
                <Ruler size="16" class="mr-1" />
-                <WithUnits value={statistics.global.distance.total} type="distance" />
+                <WithUnits value={statistics.distance.total} type="distance" />
            </span>
        </Tooltip>
        <Tooltip label={i18n._('quantities.elevation_gain_loss')}>
            <span class="flex flex-row items-center">
                <MoveUpRight size="16" class="mr-1" />
-                <WithUnits value={statistics.global.elevation.gain} type="elevation" />
+                <WithUnits value={statistics.elevation.gain} type="elevation" />
                <MoveDownRight size="16" class="mx-1" />
-                <WithUnits value={statistics.global.elevation.loss} type="elevation" />
+                <WithUnits value={statistics.elevation.loss} type="elevation" />
            </span>
        </Tooltip>
        {#if panelSize > 120 || orientation === 'horizontal'}
@@ -64,13 +64,9 @@
            >
                <span class="flex flex-row items-center">
                    <Zap size="16" class="mr-1" />
-                    <WithUnits
-                        value={statistics.global.speed.moving}
-                        type="speed"
-                        showUnits={false}
-                    />
+                    <WithUnits value={statistics.speed.moving} type="speed" showUnits={false} />
                    <span class="mx-1">/</span>
-                    <WithUnits value={statistics.global.speed.total} type="speed" />
+                    <WithUnits value={statistics.speed.total} type="speed" />
                </span>
            </Tooltip>
        {/if}
@@ -83,9 +79,9 @@
            >
                <span class="flex flex-row items-center">
                    <Timer size="16" class="mr-1" />
-                    <WithUnits value={statistics.global.time.moving} type="time" />
+                    <WithUnits value={statistics.time.moving} type="time" />
                    <span class="mx-1">/</span>
-                    <WithUnits value={statistics.global.time.total} type="time" />
+                    <WithUnits value={statistics.time.total} type="time" />
                </span>
            </Tooltip>
        {/if}
--- a/website/src/lib/components/Logo.svelte
+++ b/website/src/lib/components/Logo.svelte
@@ -8,7 +8,7 @@
        ...others
    }: {
        iconOnly?: boolean;
-        company?: 'gpx.studio' | 'mapbox' | 'github' | 'crowdin' | 'facebook' | 'x' | 'reddit';
+        company?: 'gpx.studio' | 'mapbox' | 'github' | 'crowdin' | 'facebook' | 'reddit';
        [key: string]: any;
    } = $props();
 </script>
@@ -55,16 +55,6 @@
            d="M9.101 23.691v-7.98H6.627v-3.667h2.474v-1.58c0-4.085 1.848-5.978 5.858-5.978.401 0 .955.042 1.468.103a8.68 8.68 0 0 1 1.141.195v3.325a8.623 8.623 0 0 0-.653-.036 26.805 26.805 0 0 0-.733-.009c-.707 0-1.259.096-1.675.309a1.686 1.686 0 0 0-.679.622c-.258.42-.374.995-.374 1.752v1.297h3.919l-.386 2.103-.287 1.564h-3.246v8.245C19.396 23.238 24 18.179 24 12.044c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.628 3.874 10.35 9.101 11.647Z"
        /></svg
    >
-{:else if company === 'x'}
-    <svg
-        role="img"
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
-        class="fill-foreground {others.class ?? ''}"
-        ><title>X</title><path
-            d="M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z"
-        /></svg
-    >
 {:else if company === 'reddit'}
    <svg
        role="img"
--- a/website/src/lib/components/Menu.svelte
+++ b/website/src/lib/components/Menu.svelte
@@ -538,6 +538,7 @@
        let targetInput =
            e &&
            e.target &&
+            e.target instanceof HTMLElement &&
            (e.target.tagName === 'INPUT' ||
                e.target.tagName === 'TEXTAREA' ||
                e.target.tagName === 'SELECT' ||
@@ -644,6 +645,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()}
--- a/website/src/lib/components/Nav.svelte
+++ b/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')}
--- a/website/src/lib/components/elevation-profile/ElevationProfile.svelte
+++ b/website/src/lib/components/elevation-profile/ElevationProfile.svelte
@@ -18,7 +18,7 @@
        Construction,
    } from '@lucide/svelte';
    import type { Readable, Writable } from 'svelte/store';
-    import type { GPXStatistics } from 'gpx';
+    import type { GPXGlobalStatistics, GPXStatisticsGroup } from 'gpx';
    import { settings } from '$lib/logic/settings';
    import { i18n } from '$lib/i18n.svelte';
    import { ElevationProfile } from '$lib/components/elevation-profile/elevation-profile';
@@ -32,8 +32,8 @@
        elevationFill,
        showControls = true,
    }: {
-        gpxStatistics: Readable<GPXStatistics>;
-        slicedGPXStatistics: Writable<[GPXStatistics, number, number] | undefined>;
+        gpxStatistics: Readable<GPXStatisticsGroup>;
+        slicedGPXStatistics: Writable<[GPXGlobalStatistics, number, number] | undefined>;
        additionalDatasets: Writable<string[]>;
        elevationFill: Writable<'slope' | 'surface' | 'highway' | undefined>;
        showControls?: boolean;
--- a/website/src/lib/components/elevation-profile/elevation-profile.ts
+++ b/website/src/lib/components/elevation-profile/elevation-profile.ts
@@ -14,11 +14,16 @@ import {
    getTemperatureWithUnits,
    getVelocityWithUnits,
 } from '$lib/units';
-import Chart from 'chart.js/auto';
+import Chart, {
+    type ChartEvent,
+    type ChartOptions,
+    type ScriptableLineSegmentContext,
+    type TooltipItem,
+} from 'chart.js/auto';
 import mapboxgl from 'mapbox-gl';
 import { get, type Readable, type Writable } from 'svelte/store';
 import { map } from '$lib/components/map/map';
-import type { GPXStatistics } from 'gpx';
+import type { GPXGlobalStatistics, GPXStatisticsGroup } from 'gpx';
 import { mode } from 'mode-watcher';
 import { getHighwayColor, getSlopeColor, getSurfaceColor } from '$lib/assets/colors';

@@ -27,6 +32,20 @@ const { distanceUnits, velocityUnits, temperatureUnits } = settings;
 Chart.defaults.font.family =
    'ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"'; // Tailwind CSS font

+interface ElevationProfilePoint {
+    x: number;
+    y: number;
+    time?: Date;
+    slope: {
+        at: number;
+        segment: number;
+        length: number;
+    };
+    extensions: Record<string, any>;
+    coordinates: [number, number];
+    index: number;
+}
+
 export class ElevationProfile {
    private _chart: Chart | null = null;
    private _canvas: HTMLCanvasElement;
@@ -35,14 +54,14 @@ export class ElevationProfile {
    private _dragging = false;
    private _panning = false;

-    private _gpxStatistics: Readable<GPXStatistics>;
-    private _slicedGPXStatistics: Writable<[GPXStatistics, number, number] | undefined>;
+    private _gpxStatistics: Readable<GPXStatisticsGroup>;
+    private _slicedGPXStatistics: Writable<[GPXGlobalStatistics, number, number] | undefined>;
    private _additionalDatasets: Readable<string[]>;
    private _elevationFill: Readable<'slope' | 'surface' | 'highway' | undefined>;

    constructor(
-        gpxStatistics: Readable<GPXStatistics>,
-        slicedGPXStatistics: Writable<[GPXStatistics, number, number] | undefined>,
+        gpxStatistics: Readable<GPXStatisticsGroup>,
+        slicedGPXStatistics: Writable<[GPXGlobalStatistics, number, number] | undefined>,
        additionalDatasets: Readable<string[]>,
        elevationFill: Readable<'slope' | 'surface' | 'highway' | undefined>,
        canvas: HTMLCanvasElement,
@@ -90,7 +109,7 @@ export class ElevationProfile {
    }

    initialize() {
-        let options = {
+        let options: ChartOptions<'line'> = {
            animation: false,
            parsing: false,
            maintainAspectRatio: false,
@@ -98,8 +117,8 @@ export class ElevationProfile {
                x: {
                    type: 'linear',
                    ticks: {
-                        callback: function (value: number) {
-                            return `${value.toFixed(1).replace(/\.0+$/, '')} ${getDistanceUnits()}`;
+                        callback: function (value: number | string) {
+                            return `${(value as number).toFixed(1).replace(/\.0+$/, '')} ${getDistanceUnits()}`;
                        },
                        align: 'inner',
                        maxRotation: 0,
@@ -108,8 +127,8 @@ export class ElevationProfile {
                y: {
                    type: 'linear',
                    ticks: {
-                        callback: function (value: number) {
-                            return getElevationWithUnits(value, false);
+                        callback: function (value: number | string) {
+                            return getElevationWithUnits(value as number, false);
                        },
                    },
                },
@@ -140,8 +159,8 @@ export class ElevationProfile {
                        title: () => {
                            return '';
                        },
-                        label: (context: Chart.TooltipContext) => {
-                            let point = context.raw;
+                        label: (context: TooltipItem<'line'>) => {
+                            let point = context.raw as ElevationProfilePoint;
                            if (context.datasetIndex === 0) {
                                const map_ = get(map);
                                if (map_ && this._marker) {
@@ -165,10 +184,10 @@ export class ElevationProfile {
                                return `${i18n._('quantities.power')}: ${getPowerWithUnits(point.y)}`;
                            }
                        },
-                        afterBody: (contexts: Chart.TooltipContext[]) => {
+                        afterBody: (contexts: TooltipItem<'line'>[]) => {
                            let context = contexts.filter((context) => context.datasetIndex === 0);
                            if (context.length === 0) return;
-                            let point = context[0].raw;
+                            let point = context[0].raw as ElevationProfilePoint;
                            let slope = {
                                at: point.slope.at.toFixed(1),
                                segment: point.slope.segment.toFixed(1),
@@ -227,6 +246,7 @@ export class ElevationProfile {
                        onPanStart: () => {
                            this._panning = true;
                            this._slicedGPXStatistics.set(undefined);
+                            return true;
                        },
                        onPanComplete: () => {
                            this._panning = false;
@@ -238,13 +258,13 @@ export class ElevationProfile {
                        },
                        mode: 'x',
                        onZoomStart: ({ chart, event }: { chart: Chart; event: any }) => {
+                            if (!this._chart) {
+                                return false;
+                            }
+                            const maxZoom = this._chart.getInitialScaleBounds()?.x?.max ?? 0;
                            if (
                                event.deltaY < 0 &&
-                                Math.abs(
-                                    this._chart.getInitialScaleBounds().x.max /
-                                        this._chart.options.plugins.zoom.limits.x.minRange -
-                                        this._chart.getZoomLevel()
-                                ) < 0.01
+                                Math.abs(maxZoom / this._chart.getZoomLevel()) < 0.01
                            ) {
                                // Disable wheel pan if zoomed in to the max, and zooming in
                                return false;
@@ -262,7 +282,6 @@ export class ElevationProfile {
                    },
                },
            },
-            stacked: false,
            onResize: () => {
                this.updateOverlay();
            },
@@ -270,7 +289,7 @@ export class ElevationProfile {

        let datasets: string[] = ['speed', 'hr', 'cad', 'atemp', 'power'];
        datasets.forEach((id) => {
-            options.scales[`y${id}`] = {
+            options.scales![`y${id}`] = {
                type: 'linear',
                position: 'right',
                grid: {
@@ -291,7 +310,7 @@ export class ElevationProfile {
                {
                    id: 'toggleMarker',
                    events: ['mouseout'],
-                    afterEvent: (chart: Chart, args: { event: Chart.ChartEvent }) => {
+                    afterEvent: (chart: Chart, args: { event: ChartEvent }) => {
                        if (args.event.type === 'mouseout') {
                            const map_ = get(map);
                            if (map_ && this._marker) {
@@ -305,7 +324,7 @@ export class ElevationProfile {

        let startIndex = 0;
        let endIndex = 0;
-        const getIndex = (evt) => {
+        const getIndex = (evt: PointerEvent) => {
            if (!this._chart) {
                return undefined;
            }
@@ -323,22 +342,22 @@ export class ElevationProfile {
                if (evt.x - rect.left <= this._chart.chartArea.left) {
                    return 0;
                } else if (evt.x - rect.left >= this._chart.chartArea.right) {
-                    return get(this._gpxStatistics).local.points.length - 1;
+                    return this._chart.data.datasets[0].data.length - 1;
                } else {
                    return undefined;
                }
            }

-            let point = points.find((point) => point.element.raw);
+            const point = points.find((point) => (point.element as any).raw);
            if (point) {
-                return point.element.raw.index;
+                return (point.element as any).raw.index;
            } else {
                return points[0].index;
            }
        };

        let dragStarted = false;
-        const onMouseDown = (evt) => {
+        const onMouseDown = (evt: PointerEvent) => {
            if (evt.shiftKey) {
                // Panning interaction
                return;
@@ -347,7 +366,7 @@ export class ElevationProfile {
            this._canvas.style.cursor = 'col-resize';
            startIndex = getIndex(evt);
        };
-        const onMouseMove = (evt) => {
+        const onMouseMove = (evt: PointerEvent) => {
            if (dragStarted) {
                this._dragging = true;
                endIndex = getIndex(evt);
@@ -356,7 +375,7 @@ export class ElevationProfile {
                        startIndex = endIndex;
                    } else if (startIndex !== endIndex) {
                        this._slicedGPXStatistics.set([
-                            get(this._gpxStatistics).slice(
+                            get(this._gpxStatistics).sliced(
                                Math.min(startIndex, endIndex),
                                Math.max(startIndex, endIndex)
                            ),
@@ -367,7 +386,7 @@ export class ElevationProfile {
                }
            }
        };
-        const onMouseUp = (evt) => {
+        const onMouseUp = (evt: PointerEvent) => {
            dragStarted = false;
            this._dragging = false;
            this._canvas.style.cursor = '';
@@ -386,85 +405,99 @@ export class ElevationProfile {
            return;
        }
        const data = get(this._gpxStatistics);
+        const units = {
+            distance: get(distanceUnits),
+            velocity: get(velocityUnits),
+            temperature: get(temperatureUnits),
+        };
+
+        const datasets: Array<Array<any>> = [[], [], [], [], [], []];
+        data.forEachTrackPoint((trkpt, distance, speed, slope, index) => {
+            datasets[0].push({
+                x: getConvertedDistance(distance, units.distance),
+                y: trkpt.ele ? getConvertedElevation(trkpt.ele, units.distance) : 0,
+                time: trkpt.time,
+                slope: slope,
+                extensions: trkpt.getExtensions(),
+                coordinates: trkpt.getCoordinates(),
+                index: index,
+            });
+            if (data.global.time.total > 0) {
+                datasets[1].push({
+                    x: getConvertedDistance(distance, units.distance),
+                    y: getConvertedVelocity(speed, units.velocity, units.distance),
+                    index: index,
+                });
+            }
+            if (data.global.hr.count > 0) {
+                datasets[2].push({
+                    x: getConvertedDistance(distance, units.distance),
+                    y: trkpt.getHeartRate(),
+                    index: index,
+                });
+            }
+            if (data.global.cad.count > 0) {
+                datasets[3].push({
+                    x: getConvertedDistance(distance, units.distance),
+                    y: trkpt.getCadence(),
+                    index: index,
+                });
+            }
+            if (data.global.atemp.count > 0) {
+                datasets[4].push({
+                    x: getConvertedDistance(distance, units.distance),
+                    y: getConvertedTemperature(trkpt.getTemperature(), units.temperature),
+                    index: index,
+                });
+            }
+            if (data.global.power.count > 0) {
+                datasets[5].push({
+                    x: getConvertedDistance(distance, units.distance),
+                    y: trkpt.getPower(),
+                    index: index,
+                });
+            }
+        });
+
        this._chart.data.datasets[0] = {
            label: i18n._('quantities.elevation'),
-            data: data.local.points.map((point, index) => {
-                return {
-                    x: getConvertedDistance(data.local.distance.total[index]),
-                    y: point.ele ? getConvertedElevation(point.ele) : 0,
-                    time: point.time,
-                    slope: {
-                        at: data.local.slope.at[index],
-                        segment: data.local.slope.segment[index],
-                        length: data.local.slope.length[index],
-                    },
-                    extensions: point.getExtensions(),
-                    coordinates: point.getCoordinates(),
-                    index: index,
-                };
-            }),
+            data: datasets[0],
            normalized: true,
            fill: 'start',
            order: 1,
            segment: {},
        };
        this._chart.data.datasets[1] = {
-            data: data.local.points.map((point, index) => {
-                return {
-                    x: getConvertedDistance(data.local.distance.total[index]),
-                    y: getConvertedVelocity(data.local.speed[index]),
-                    index: index,
-                };
-            }),
+            data: datasets[1],
            normalized: true,
            yAxisID: 'yspeed',
        };
        this._chart.data.datasets[2] = {
-            data: data.local.points.map((point, index) => {
-                return {
-                    x: getConvertedDistance(data.local.distance.total[index]),
-                    y: point.getHeartRate(),
-                    index: index,
-                };
-            }),
+            data: datasets[2],
            normalized: true,
            yAxisID: 'yhr',
        };
        this._chart.data.datasets[3] = {
-            data: data.local.points.map((point, index) => {
-                return {
-                    x: getConvertedDistance(data.local.distance.total[index]),
-                    y: point.getCadence(),
-                    index: index,
-                };
-            }),
+            data: datasets[3],
            normalized: true,
            yAxisID: 'ycad',
        };
        this._chart.data.datasets[4] = {
-            data: data.local.points.map((point, index) => {
-                return {
-                    x: getConvertedDistance(data.local.distance.total[index]),
-                    y: getConvertedTemperature(point.getTemperature()),
-                    index: index,
-                };
-            }),
+            data: datasets[4],
            normalized: true,
            yAxisID: 'yatemp',
        };
        this._chart.data.datasets[5] = {
-            data: data.local.points.map((point, index) => {
-                return {
-                    x: getConvertedDistance(data.local.distance.total[index]),
-                    y: point.getPower(),
-                    index: index,
-                };
-            }),
+            data: datasets[5],
            normalized: true,
            yAxisID: 'ypower',
        };
-        this._chart.options.scales.x['min'] = 0;
-        this._chart.options.scales.x['max'] = getConvertedDistance(data.global.distance.total);
+
+        this._chart.options.scales!.x!['min'] = 0;
+        this._chart.options.scales!.x!['max'] = getConvertedDistance(
+            data.global.distance.total,
+            units.distance
+        );

        this.setVisibility();
        this.setFill();
@@ -513,21 +546,24 @@ export class ElevationProfile {
            return;
        }
        const elevationFill = get(this._elevationFill);
+        const dataset = this._chart.data.datasets[0];
+        let segment: any = {};
        if (elevationFill === 'slope') {
-            this._chart.data.datasets[0]['segment'] = {
+            segment = {
                backgroundColor: this.slopeFillCallback,
            };
        } else if (elevationFill === 'surface') {
-            this._chart.data.datasets[0]['segment'] = {
+            segment = {
                backgroundColor: this.surfaceFillCallback,
            };
        } else if (elevationFill === 'highway') {
-            this._chart.data.datasets[0]['segment'] = {
+            segment = {
                backgroundColor: this.highwayFillCallback,
            };
        } else {
-            this._chart.data.datasets[0]['segment'] = {};
+            segment = {};
        }
+        Object.assign(dataset, { segment });
    }

    updateOverlay() {
@@ -554,10 +590,12 @@ export class ElevationProfile {

                const gpxStatistics = get(this._gpxStatistics);
                let startPixel = this._chart.scales.x.getPixelForValue(
-                    getConvertedDistance(gpxStatistics.local.distance.total[startIndex])
+                    getConvertedDistance(
+                        gpxStatistics.getTrackPoint(startIndex)?.distance.total ?? 0
+                    )
                );
                let endPixel = this._chart.scales.x.getPixelForValue(
-                    getConvertedDistance(gpxStatistics.local.distance.total[endIndex])
+                    getConvertedDistance(gpxStatistics.getTrackPoint(endIndex)?.distance.total ?? 0)
                );

                selectionContext.fillRect(
@@ -575,19 +613,22 @@ export class ElevationProfile {
        }
    }

-    slopeFillCallback(context) {
-        return getSlopeColor(context.p0.raw.slope.segment);
+    slopeFillCallback(context: ScriptableLineSegmentContext & { p0: { raw: any } }) {
+        const point = context.p0.raw as ElevationProfilePoint;
+        return getSlopeColor(point.slope.segment);
    }

-    surfaceFillCallback(context) {
-        return getSurfaceColor(context.p0.raw.extensions.surface);
+    surfaceFillCallback(context: ScriptableLineSegmentContext & { p0: { raw: any } }) {
+        const point = context.p0.raw as ElevationProfilePoint;
+        return getSurfaceColor(point.extensions.surface);
    }

-    highwayFillCallback(context) {
+    highwayFillCallback(context: ScriptableLineSegmentContext & { p0: { raw: any } }) {
+        const point = context.p0.raw as ElevationProfilePoint;
        return getHighwayColor(
-            context.p0.raw.extensions.highway,
-            context.p0.raw.extensions.sac_scale,
-            context.p0.raw.extensions.mtb_scale
+            point.extensions.highway,
+            point.extensions.sac_scale,
+            point.extensions.mtb_scale
        );
    }

--- a/website/src/lib/components/embedding/Embedding.svelte
+++ b/website/src/lib/components/embedding/Embedding.svelte
@@ -20,6 +20,7 @@
    import { loadFile } from '$lib/logic/file-actions';
    import { selection } from '$lib/logic/selection';
    import { untrack } from 'svelte';
+    import { isSelected, toggle } from '$lib/components/map/layer-control/utils';

    let {
        useHash = true,
@@ -32,6 +33,7 @@

    const {
        currentBasemap,
+        selectedBasemapTree,
        distanceUnits,
        velocityUnits,
        temperatureUnits,
@@ -66,6 +68,9 @@
        if (allowedEmbeddingBasemaps.includes(options.basemap)) {
            $currentBasemap = options.basemap;
        }
+        if (!isSelected($selectedBasemapTree, options.basemap)) {
+            $selectedBasemapTree = toggle($selectedBasemapTree, options.basemap);
+        }
        $distanceMarkers = options.distanceMarkers;
        $directionMarkers = options.directionMarkers;
        $distanceUnits = options.distanceUnits;
--- a/website/src/lib/components/export/Export.svelte
+++ b/website/src/lib/components/export/Export.svelte
@@ -21,7 +21,7 @@
        SquareActivity,
    } from '@lucide/svelte';
    import { i18n } from '$lib/i18n.svelte';
-    import { GPXStatistics } from 'gpx';
+    import { GPXGlobalStatistics } from 'gpx';
    import { ListRootItem } from '$lib/components/file-list/file-list';
    import { fileStateCollection } from '$lib/logic/file-state';
    import { selection } from '$lib/logic/selection';
@@ -48,24 +48,24 @@
                extensions: false,
            };
        } else {
-            let statistics = $gpxStatistics;
+            let statistics = $gpxStatistics.global;
            if (exportState.current === ExportState.ALL) {
                statistics = Array.from(get(fileStateCollection).values())
                    .map((file) => file.statistics)
                    .reduce((acc, cur) => {
                        if (cur !== undefined) {
-                            acc.mergeWith(cur.getStatisticsFor(new ListRootItem()));
+                            acc.mergeWith(cur.getStatisticsFor(new ListRootItem()).global);
                        }
                        return acc;
-                    }, new GPXStatistics());
+                    }, new GPXGlobalStatistics());
            }
            return {
-                time: statistics.global.time.total === 0,
-                hr: statistics.global.hr.count === 0,
-                cad: statistics.global.cad.count === 0,
-                atemp: statistics.global.atemp.count === 0,
-                power: statistics.global.power.count === 0,
-                extensions: Object.keys(statistics.global.extensions).length === 0,
+                time: statistics.time.total === 0,
+                hr: statistics.hr.count === 0,
+                cad: statistics.cad.count === 0,
+                atemp: statistics.atemp.count === 0,
+                power: statistics.power.count === 0,
+                extensions: Object.keys(statistics.extensions).length === 0,
            };
        }
    });
--- a/website/src/lib/components/file-list/FileListNodeContent.svelte
+++ b/website/src/lib/components/file-list/FileListNodeContent.svelte
@@ -121,20 +121,16 @@
    }

    .vertical :global(button) {
-        @apply hover:bg-muted;
-    }
-
-    .vertical :global(.sortable-selected button) {
-        @apply hover:bg-accent;
+        @apply hover:bg-[var(--selection)];
    }

    .vertical :global(.sortable-selected) {
-        @apply bg-accent;
+        @apply bg-[var(--selection)];
    }

    .horizontal :global(button) {
-        @apply bg-accent;
-        @apply hover:bg-muted;
+        @apply bg-[var(--selection)];
+        @apply hover:bg-background;
    }

    .horizontal :global(.sortable-selected button) {
--- a/website/src/lib/components/file-list/FileListNodeLabel.svelte
+++ b/website/src/lib/components/file-list/FileListNodeLabel.svelte
@@ -72,17 +72,15 @@
                }

                let style = node.getStyle(defaultColor);
-                style.color.forEach((c) => {
-                    if (!colors.includes(c)) {
-                        colors.push(c);
-                    }
-                });
+                colors = style.color;
            } else if (node instanceof Track) {
                let style = node.getStyle();
-                if (style) {
-                    if (style['gpx_style:color'] && !colors.includes(style['gpx_style:color'])) {
-                        colors.push(style['gpx_style:color']);
-                    }
+                if (
+                    style &&
+                    style['gpx_style:color'] &&
+                    !colors.includes(style['gpx_style:color'])
+                ) {
+                    colors.push(style['gpx_style:color']);
                }
                if (colors.length === 0) {
                    let layer = gpxLayers.getLayer(item.getFileId());
@@ -175,7 +173,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(),
--- a/website/src/lib/components/map/gpx-layer/CopyCoordinates.svelte
+++ b/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(
--- a/website/src/lib/components/map/gpx-layer/TrackpointPopup.svelte
+++ b/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>
--- a/website/src/lib/components/map/gpx-layer/WaypointPopup.svelte
+++ b/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"
--- a/website/src/lib/components/map/gpx-layer/distance-markers.ts
+++ b/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
@@ -101,35 +101,26 @@ export class DistanceMarkers {
    getDistanceMarkersGeoJSON(): GeoJSON.FeatureCollection {
        let statistics = get(gpxStatistics);

-        let features = [];
+        let features: GeoJSON.Feature[] = [];
        let currentTargetDistance = 1;
-        for (let i = 0; i < statistics.local.distance.total.length; i++) {
-            if (
-                statistics.local.distance.total[i] >=
-                getConvertedDistanceToKilometers(currentTargetDistance)
-            ) {
+        statistics.forEachTrackPoint((trkpt, dist) => {
+            if (dist >= 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: {
                        type: 'Point',
-                        coordinates: [
-                            statistics.local.points[i].getLongitude(),
-                            statistics.local.points[i].getLatitude(),
-                        ],
+                        coordinates: [trkpt.getLongitude(), trkpt.getLatitude()],
                    },
                    properties: {
                        distance,
                        level,
-                        minzoom,
                    },
                } as GeoJSON.Feature);
                currentTargetDistance += 1;
            }
-        }
+        });

        return {
            type: 'FeatureCollection',
--- a/website/src/lib/components/map/gpx-layer/gpx-layer.ts
+++ b/website/src/lib/components/map/gpx-layer/gpx-layer.ts
@@ -1,5 +1,5 @@
 import { get, type Readable } from 'svelte/store';
-import mapboxgl from 'mapbox-gl';
+import mapboxgl, { type FilterSpecification } from 'mapbox-gl';
 import { map } from '$lib/components/map/map';
 import { waypointPopup, trackpointPopup } from './gpx-layer-popup';
 import {
@@ -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() {
@@ -155,6 +162,8 @@ export class GPXLayer {
            this.layerColor = `#${file._data.style.color}`;
        }

+        this.loadIcons();
+
        try {
            let source = _map.getSource(this.fileId) as mapboxgl.GeoJSONSource | undefined;
            if (source) {
@@ -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,151 +281,40 @@ export class GPXLayer {
                }
            }

-            let visibleItems: [number, number][] = [];
+            let visibleTrackSegmentIds: string[] = [];
            file.forEachSegment((segment, trackIndex, segmentIndex) => {
                if (!segment._data.hidden) {
-                    visibleItems.push([trackIndex, segmentIndex]);
+                    visibleTrackSegmentIds.push(`${trackIndex}-${segmentIndex}`);
+                }
+            });
+            const segmentFilter: FilterSpecification = [
+                'in',
+                ['get', 'trackSegmentId'],
+                ['literal', visibleTrackSegmentIds],
+            ];
+
+            _map.setFilter(this.fileId, segmentFilter, { validate: false });
+
+            if (_map.getLayer(this.fileId + '-direction')) {
+                _map.setFilter(this.fileId + '-direction', segmentFilter, { validate: false });
+            }
+
+            let visibleWaypoints: number[] = [];
+            file.wpt.forEach((waypoint, waypointIndex) => {
+                if (!waypoint._data.hidden) {
+                    visibleWaypoints.push(waypointIndex);
                }
            });

            _map.setFilter(
-                this.fileId,
-                [
-                    'any',
-                    ...visibleItems.map(([trackIndex, segmentIndex]) => [
-                        'all',
-                        ['==', 'trackIndex', trackIndex],
-                        ['==', 'segmentIndex', segmentIndex],
-                    ]),
-                ],
+                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]) => [
-                            'all',
-                            ['==', 'trackIndex', trackIndex],
-                            ['==', 'segmentIndex', segmentIndex],
-                        ]),
-                    ],
-                    { validate: false }
-                );
-            }
        } catch (e) {
            // 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 +327,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 +354,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 +375,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 +420,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 +428,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 +437,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 +478,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) {
@@ -539,6 +669,7 @@ export class GPXLayer {
            }
            feature.properties.trackIndex = trackIndex;
            feature.properties.segmentIndex = segmentIndex;
+            feature.properties.trackSegmentId = `${trackIndex}-${segmentIndex}`;

            segmentIndex++;
            if (segmentIndex >= file.trk[trackIndex].trkseg.length) {
@@ -548,4 +679,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: `waypoint-${getSymbolKey(waypoint.sym) ?? 'default'}-${this.layerColor}`,
+                },
+            });
+        });
+
+        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 = `waypoint-${symbol ?? 'default'}-${this.layerColor}`;
+            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));
+            }
+        });
+    }
 }
--- a/website/src/lib/components/map/gpx-layer/start-end-markers.ts
+++ b/website/src/lib/components/map/gpx-layer/start-end-markers.ts
@@ -34,13 +34,20 @@ export class StartEndMarkers {
        if (!map_) return;

        const tool = get(currentTool);
-        const statistics = get(slicedGPXStatistics)?.[0] ?? get(gpxStatistics);
+        const statistics = get(gpxStatistics);
+        const slicedStatistics = get(slicedGPXStatistics);
        const hidden = get(allHidden);
-        if (statistics.local.points.length > 0 && tool !== Tool.ROUTING && !hidden) {
-            this.start.setLngLat(statistics.local.points[0].getCoordinates()).addTo(map_);
+        if (statistics.global.length > 0 && tool !== Tool.ROUTING && !hidden) {
+            this.start
+                .setLngLat(
+                    statistics.getTrackPoint(slicedStatistics?.[1] ?? 0)!.trkpt.getCoordinates()
+                )
+                .addTo(map_);
            this.end
                .setLngLat(
-                    statistics.local.points[statistics.local.points.length - 1].getCoordinates()
+                    statistics
+                        .getTrackPoint(slicedStatistics?.[2] ?? statistics.global.length - 1)!
+                        .trkpt.getCoordinates()
                )
                .addTo(map_);
        } else {
--- a/website/src/lib/components/map/layer-control/LayerControl.svelte
+++ b/website/src/lib/components/map/layer-control/LayerControl.svelte
@@ -101,9 +101,7 @@
                                acc: Record<string, ImportSpecification>,
                                imprt: ImportSpecification
                            ) => {
-                                if (
-                                    !['basemap', 'overlays', 'glyphs-and-sprite'].includes(imprt.id)
-                                ) {
+                                if (!['basemap', 'overlays'].includes(imprt.id)) {
                                    acc[imprt.id] = imprt;
                                }
                                return acc;
--- a/website/src/lib/components/map/layer-control/LayerControlSettings.svelte
+++ b/website/src/lib/components/map/layer-control/LayerControlSettings.svelte
@@ -13,6 +13,7 @@
        overlays,
        overlayTree,
        overpassTree,
+        terrainSources,
    } from '$lib/assets/layers';
    import { getLayers, isSelected, toggle } from '$lib/components/map/layer-control/utils';
    import { i18n } from '$lib/i18n.svelte';
@@ -20,7 +21,7 @@
    import CustomLayers from './CustomLayers.svelte';
    import { settings } from '$lib/logic/settings';
    import { untrack } from 'svelte';
-    import { extensionAPI } from './extension-api';
+    import { extensionAPI } from '$lib/components/map/layer-control/extension-api';

    const {
        selectedBasemapTree,
@@ -31,8 +32,11 @@
        currentOverpassQueries,
        customLayers,
        opacities,
+        terrainSource,
    } = settings;

+    const { isLayerFromExtension, getLayerName } = extensionAPI;
+
    let { open = $bindable() }: { open: boolean } = $props();

    let accordionValue: string | undefined = $state(undefined);
@@ -52,7 +56,7 @@
    }

    $effect(() => {
-        if ($selectedBasemapTree && $currentBasemap) {
+        if (open && $selectedBasemapTree && $currentBasemap) {
            if (!isSelected($selectedBasemapTree, $currentBasemap)) {
                if (!isSelected($selectedBasemapTree, defaultBasemap)) {
                    $selectedBasemapTree = toggle($selectedBasemapTree, defaultBasemap);
@@ -63,7 +67,7 @@
    });

    $effect(() => {
-        if ($selectedOverlayTree) {
+        if (open && $selectedOverlayTree) {
            untrack(() => {
                if ($currentOverlays) {
                    let overlayLayers = getLayers($currentOverlays);
@@ -84,7 +88,7 @@
    });

    $effect(() => {
-        if ($selectedOverpassTree) {
+        if (open && $selectedOverpassTree) {
            untrack(() => {
                if ($currentOverpassQueries) {
                    let overlayLayers = getLayers($currentOverpassQueries);
@@ -158,11 +162,11 @@
                                    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 extensionAPI.isLayerFromExtension(selectedOverlay)}
-                                                    {extensionAPI.getLayerName(selectedOverlay)}
+                                                {#if $isLayerFromExtension(selectedOverlay)}
+                                                    {$getLayerName(selectedOverlay)}
                                                {:else}
                                                    {i18n._(`layers.label.${selectedOverlay}`)}
                                                {/if}
@@ -175,8 +179,8 @@
                                        {#each Object.keys(overlays) as id}
                                            {#if isSelected($selectedOverlayTree, id)}
                                                <Select.Item value={id}>
-                                                    {#if extensionAPI.isLayerFromExtension(id)}
-                                                        {extensionAPI.getLayerName(id)}
+                                                    {#if $isLayerFromExtension(id)}
+                                                        {$getLayerName(id)}
                                                    {:else}
                                                        {i18n._(`layers.label.${id}`)}
                                                    {/if}
@@ -231,6 +235,23 @@
                            </ScrollArea>
                        </Accordion.Content>
                    </Accordion.Item>
+                    <Accordion.Item value="terrain-source">
+                        <Accordion.Trigger>{i18n._('layers.terrain')}</Accordion.Trigger>
+                        <Accordion.Content class="flex flex-col gap-3 overflow-visible">
+                            <Select.Root bind:value={$terrainSource} type="single">
+                                <Select.Trigger class="mr-1 w-full" size="sm">
+                                    {i18n._(`layers.label.${$terrainSource}`)}
+                                </Select.Trigger>
+                                <Select.Content class="h-fit max-h-[40dvh] overflow-y-auto">
+                                    {#each Object.keys(terrainSources) as id}
+                                        <Select.Item value={id}>
+                                            {i18n._(`layers.label.${id}`)}
+                                        </Select.Item>
+                                    {/each}
+                                </Select.Content>
+                            </Select.Root>
+                        </Accordion.Content>
+                    </Accordion.Item>
                </Accordion.Root>
            </ScrollArea>
        </Sheet.Header>
--- a/website/src/lib/components/map/layer-control/LayerTreeNode.svelte
+++ b/website/src/lib/components/map/layer-control/LayerTreeNode.svelte
@@ -26,6 +26,7 @@
    } = $props();

    const { customLayers } = settings;
+    const { isLayerFromExtension, getLayerName } = extensionAPI;

    $effect.pre(() => {
        if (checked !== undefined) {
@@ -73,8 +74,8 @@
                    <Label for="{name}-{id}" class="flex flex-row items-center gap-1">
                        {#if $customLayers.hasOwnProperty(id)}
                            {$customLayers[id].name}
-                        {:else if extensionAPI.isLayerFromExtension(id)}
-                            {extensionAPI.getLayerName(id)}
+                        {:else if $isLayerFromExtension(id)}
+                            {$getLayerName(id)}
                        {:else}
                            {i18n._(`layers.label.${id}`)}
                        {/if}
@@ -84,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">
--- a/website/src/lib/components/map/layer-control/extension-api.ts
+++ b/website/src/lib/components/map/layer-control/extension-api.ts
@@ -1,13 +1,14 @@
-import { map, type MapboxGLMap } from '$lib/components/map/map';
 import { settings } from '$lib/logic/settings';
-import { get } from 'svelte/store';
-import { isSelected, remove, removeByPrefix, toggle } from './utils';
+import { derived, get, writable, type Writable } from 'svelte/store';
+import { isSelected, remove, removeAll } from './utils';
 import { overlays, overlayTree } from '$lib/assets/layers';
 import { browser } from '$app/environment';
+import { map } from '$lib/components/map/map';

 const { currentOverlays, previousOverlays, selectedOverlayTree } = settings;

 export type CustomOverlay = {
+    extensionName: string;
    id: string;
    name: string;
    tileUrls: string[];
@@ -15,11 +16,9 @@ export type CustomOverlay = {
 };

 export class ExtensionAPI {
-    private _map: MapboxGLMap;
-    private _overlays: Map<string, CustomOverlay> = new Map();
+    private _overlays: Writable<Map<string, CustomOverlay>> = writable(new Map());

-    constructor(map: MapboxGLMap) {
-        this._map = map;
+    init() {
        if (browser && !window.hasOwnProperty('gpxstudio')) {
            Object.defineProperty(window, 'gpxstudio', {
                value: this,
@@ -30,21 +29,41 @@ export class ExtensionAPI {
        }
    }

-    async ensureLoaded(): Promise<void> {
-        return new Promise((resolve) => {
-            this._map.onLoad(() => {
-                resolve();
+    ensureLoaded(): Promise<void> {
+        let unsubscribe: () => void;
+        const promise = new Promise<void>((resolve) => {
+            map.onLoad(() => {
+                unsubscribe = currentOverlays.subscribe((current) => {
+                    if (current) {
+                        resolve();
+                    }
+                });
            });
        });
+        promise.finally(() => {
+            unsubscribe?.();
+        });
+        return promise;
    }

    addOrUpdateOverlay(overlay: CustomOverlay) {
-        if (!overlay.id || !overlay.tileUrls || overlay.tileUrls.length === 0) {
-            throw new Error('Overlay must have an id 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);

-        this._overlays.set(overlay.id, overlay);
+        this._overlays.update(($overlays) => {
+            $overlays.set(overlay.id, overlay);
+            return $overlays;
+        });

        overlays[overlay.id] = {
            version: 8,
@@ -65,103 +84,130 @@ 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;
        });

        const current = get(currentOverlays);
+        let show = false;
        if (current && isSelected(current, overlay.id)) {
+            show = true;
            try {
-                get(this._map)?.removeImport(overlay.id);
+                get(map)?.removeImport(overlay.id);
            } catch (e) {
                // No reliable way to check if the map is ready to remove sources and layers
            }
        }

        currentOverlays.update((current) => {
-            current.overlays.world[overlay.id] = true;
+            if (!current.overlays.hasOwnProperty(overlay.extensionName)) {
+                current.overlays[overlay.extensionName] = {};
+            }
+            current.overlays[overlay.extensionName][overlay.id] = show;
            return current;
        });
    }

-    removeOverlaysWithPrefix(prefix: string) {
-        prefix = this.getOverlayId(prefix);
+    filterOverlays(ids: string[]) {
+        ids = ids.map((id) => this.getOverlayId(id));
+        const idsToRemove = Array.from(get(this._overlays).keys()).filter(
+            (id) => !ids.includes(id)
+        );

-        currentOverlays.update((overlays) => {
-            removeByPrefix(overlays, prefix);
-            return overlays;
+        currentOverlays.update((current) => {
+            removeAll(current, idsToRemove);
+            return current;
        });
-        previousOverlays.update((overlays) => {
-            removeByPrefix(overlays, prefix);
-            return overlays;
+        previousOverlays.update((previous) => {
+            removeAll(previous, idsToRemove);
+            return previous;
        });
-        selectedOverlayTree.update((overlays) => {
-            removeByPrefix(overlays, prefix);
-            return overlays;
+        selectedOverlayTree.update((selected) => {
+            removeAll(selected, idsToRemove);
+            return selected;
        });
        Object.keys(overlays).forEach((id) => {
-            if (id.startsWith(prefix)) {
+            if (idsToRemove.includes(id)) {
                delete overlays[id];
            }
        });
-        Object.keys(overlayTree.overlays.world).forEach((id) => {
-            if (id.startsWith(prefix)) {
-                delete overlayTree.overlays.world[id];
-            }
-        });
-    }
-
-    toggleOverlay(id: string) {
-        id = this.getOverlayId(id);
-
-        currentOverlays.update((overlays) => {
-            toggle(overlays, id);
-            return overlays;
-        });
-        if (!isSelected(get(selectedOverlayTree), id)) {
-            selectedOverlayTree.update((overlays) => {
-                toggle(overlays, id);
-                return overlays;
+        removeAll(overlayTree, idsToRemove);
+        this._overlays.update(($overlays) => {
+            $overlays.forEach((_, id) => {
+                if (idsToRemove.includes(id)) {
+                    $overlays.delete(id);
+                }
            });
-        }
+            return $overlays;
+        });
    }

-    isLayerFromExtension(id: string): boolean {
-        return this._overlays.has(id);
+    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;
+        });
    }

-    getLayerName(id: string): string {
-        const overlay = this._overlays.get(id);
-        return overlay ? overlay.name : '';
-    }
+    isLayerFromExtension = derived(this._overlays, ($overlays) => {
+        return (id: string) => $overlays.has(id);
+    });
+
+    getLayerName = derived(this._overlays, ($overlays) => {
+        return (id: string) => $overlays.get(id)?.name || '';
+    });

    private getOverlayId(id: string): string {
        return `extension-${id}`;
    }

    private destroy() {
-        currentOverlays.update((overlays) => {
-            this._overlays.forEach((_, id) => {
-                remove(overlays, id);
+        const ids = Array.from(get(this._overlays).keys());
+        currentOverlays.update((current) => {
+            ids.forEach((id) => {
+                remove(current, id);
            });
-            return overlays;
+            return current;
        });
-        previousOverlays.update((overlays) => {
-            this._overlays.forEach((_, id) => {
-                remove(overlays, id);
+        previousOverlays.update((previous) => {
+            ids.forEach((id) => {
+                remove(previous, id);
            });
-            return overlays;
+            return previous;
        });
-        selectedOverlayTree.update((overlays) => {
-            this._overlays.forEach((_, id) => {
-                remove(overlays, id);
+        selectedOverlayTree.update((selected) => {
+            ids.forEach((id) => {
+                remove(selected, id);
            });
-            return overlays;
+            return selected;
        });
    }
 }

-export const extensionAPI = new ExtensionAPI(map);
+export const extensionAPI = new ExtensionAPI();
--- a/website/src/lib/components/map/layer-control/overpass-layer.ts
+++ b/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
    );
--- a/website/src/lib/components/map/layer-control/utils.ts
+++ b/website/src/lib/components/map/layer-control/utils.ts
@@ -66,12 +66,12 @@ export function remove(node: LayerTreeType, id: string) {
    return node;
 }

-export function removeByPrefix(node: LayerTreeType, prefix: string) {
+export function removeAll(node: LayerTreeType, ids: string[]) {
    Object.keys(node).forEach((key) => {
-        if (key.startsWith(prefix)) {
+        if (ids.includes(key)) {
            delete node[key];
        } else if (typeof node[key] !== 'boolean') {
-            remove(node[key], prefix);
+            removeAll(node[key], ids);
        }
    });
    return node;
--- a/website/src/lib/components/map/map.ts
+++ b/website/src/lib/components/map/map.ts
@@ -3,8 +3,16 @@ import MapboxGeocoder from '@mapbox/mapbox-gl-geocoder';
 import { get, writable, type Writable } from 'svelte/store';
 import { settings } from '$lib/logic/settings';
 import { tick } from 'svelte';
+import { terrainSources } from '$lib/assets/layers';

-const { treeFileView, elevationProfile, bottomPanelSize, rightPanelSize, distanceUnits } = settings;
+const {
+    treeFileView,
+    elevationProfile,
+    bottomPanelSize,
+    rightPanelSize,
+    distanceUnits,
+    terrainSource,
+} = settings;

 let fitBoundsOptions: mapboxgl.MapOptions['fitBoundsOptions'] = {
    maxZoom: 15,
@@ -35,17 +43,6 @@ export class MapboxGLMap {
                sources: {},
                layers: [],
                imports: [
-                    {
-                        id: 'glyphs-and-sprite', // make Mapbox glyphs and sprite available to other styles
-                        url: '',
-                        data: {
-                            version: 8,
-                            sources: {},
-                            layers: [],
-                            glyphs: 'mapbox://fonts/mapbox/{fontstack}/{range}.pbf',
-                            sprite: `https://api.mapbox.com/styles/v1/mapbox/outdoors-v12/sprite?access_token=${accessToken}`,
-                        },
-                    },
                    {
                        id: 'basemap',
                        url: '',
@@ -134,39 +131,26 @@ export class MapboxGLMap {
        });
        map.addControl(scaleControl);
        map.on('style.load', () => {
-            map.addSource('mapbox-dem', {
-                type: 'raster-dem',
-                url: 'mapbox://mapbox.mapbox-terrain-dem-v1',
-                tileSize: 512,
-                maxzoom: 14,
-            });
-            if (map.getPitch() > 0) {
-                map.setTerrain({
-                    source: 'mapbox-dem',
-                    exaggeration: 1,
-                });
-            }
            map.setFog({
                color: 'rgb(186, 210, 235)',
                'high-color': 'rgb(36, 92, 223)',
                'horizon-blend': 0.1,
                'space-color': 'rgb(156, 240, 255)',
            });
-            map.on('pitch', () => {
-                if (map.getPitch() > 0) {
-                    map.setTerrain({
-                        source: 'mapbox-dem',
-                        exaggeration: 1,
-                    });
-                } else {
-                    map.setTerrain(null);
-                }
-            });
+            map.on('pitch', this.setTerrain.bind(this));
+            this.setTerrain();
+        });
+        map.on('style.import.load', () => {
+            const basemap = map.getStyle().imports?.find((imprt) => imprt.id === 'basemap');
+            if (basemap && basemap.data && basemap.data.glyphs) {
+                map.setGlyphsUrl(basemap.data.glyphs);
+            }
        });
        map.on('load', () => {
            this._map.set(map); // only set the store after the map has loaded
            window._map = map; // entry point for extensions
            this.resize();
+            this.setTerrain();
            scaleControl.setUnit(get(distanceUnits));

            this._onLoadCallbacks.forEach((callback) => callback(map));
@@ -182,6 +166,7 @@ export class MapboxGLMap {
                scaleControl.setUnit(units);
            })
        );
+        this._unsubscribes.push(terrainSource.subscribe(() => this.setTerrain()));
    }

    onLoad(callback: (map: mapboxgl.Map) => void) {
@@ -222,6 +207,24 @@ export class MapboxGLMap {
            }
        }
    }
+
+    setTerrain() {
+        const map = get(this._map);
+        if (map) {
+            const source = get(terrainSource);
+            if (!map.getSource(source)) {
+                map.addSource(source, terrainSources[source]);
+            }
+            if (map.getPitch() > 0) {
+                map.setTerrain({
+                    source: source,
+                    exaggeration: 1,
+                });
+            } else {
+                map.setTerrain(null);
+            }
+        }
+    }
 }

 export const map = new MapboxGLMap();
--- a/website/src/lib/components/toolbar/tools/Time.svelte
+++ b/website/src/lib/components/toolbar/tools/Time.svelte
@@ -38,7 +38,7 @@
    let endTime: string | undefined = $state(undefined);
    let movingTime: number | undefined = $state(undefined);
    let speed: number | undefined = $state(undefined);
-    let artificial = $state(false);
+    let artificial = $state(true);

    function toCalendarDate(date: Date): CalendarDate {
        return new CalendarDate(date.getFullYear(), date.getMonth() + 1, date.getDate());
@@ -346,7 +346,7 @@
                let fileId = item.getFileId();
                fileActionManager.applyToFile(fileId, (file) => {
                    if (item instanceof ListFileItem) {
-                        if (artificial || !$gpxStatistics.global.time.moving) {
+                        if (artificial && !$gpxStatistics.global.time.moving) {
                            file.createArtificialTimestamps(
                                getDate(startDate!, startTime!),
                                movingTime!
@@ -359,7 +359,7 @@
                            );
                        }
                    } else if (item instanceof ListTrackItem) {
-                        if (artificial || !$gpxStatistics.global.time.moving) {
+                        if (artificial && !$gpxStatistics.global.time.moving) {
                            file.createArtificialTimestamps(
                                getDate(startDate!, startTime!),
                                movingTime!,
@@ -374,7 +374,7 @@
                            );
                        }
                    } else if (item instanceof ListTrackSegmentItem) {
-                        if (artificial || !$gpxStatistics.global.time.moving) {
+                        if (artificial && !$gpxStatistics.global.time.moving) {
                            file.createArtificialTimestamps(
                                getDate(startDate!, startTime!),
                                movingTime!,
--- a/website/src/lib/components/toolbar/tools/reduce/Reduce.svelte
+++ b/website/src/lib/components/toolbar/tools/reduce/Reduce.svelte
@@ -10,7 +10,7 @@
    import { onDestroy } from 'svelte';
    import { getURLForLanguage } from '$lib/utils';
    import { selection } from '$lib/logic/selection';
-    import { minTolerance, ReducedGPXLayerCollection, tolerance } from './reduce.svelte';
+    import { minTolerance, ReducedGPXLayerCollection, tolerance } from './utils.svelte';

    let props: { class?: string } = $props();

--- a/website/src/lib/components/toolbar/tools/reduce/reduce.svelte.ts
+++ b/website/src/lib/components/toolbar/tools/reduce/reduce.svelte.ts
@@ -5,7 +5,7 @@ import { GPXFileStateCollectionObserver, type GPXFileState } from '$lib/logic/fi
 import { selection } from '$lib/logic/selection';
 import { ramerDouglasPeucker, TrackPoint, type SimplifiedTrackPoint } from 'gpx';
 import type { GeoJSONSource } from 'mapbox-gl';
-import { get, writable, type Writable } from 'svelte/store';
+import { get, writable } from 'svelte/store';

 export const minTolerance = 0.1;

@@ -28,17 +28,15 @@ export class ReducedGPXLayer {

    update() {
        const file = this._fileState.file;
-        const stats = this._fileState.statistics;
-        if (!file || !stats) {
+        if (!file) {
            return;
        }
        file.forEachSegment((segment, trackIndex, segmentIndex) => {
            let segmentItem = new ListTrackSegmentItem(file._data.id, trackIndex, segmentIndex);
-            let statistics = stats.getStatisticsFor(segmentItem);
            this._updateSimplified(segmentItem.getFullId(), [
                segmentItem,
-                statistics.local.points.length,
-                ramerDouglasPeucker(statistics.local.points, minTolerance),
+                segment.trkpt.length,
+                ramerDouglasPeucker(segment.trkpt, minTolerance),
            ]);
        });
    }
--- a/website/src/lib/components/toolbar/tools/routing/Routing.svelte
+++ b/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">
--- a/website/src/lib/components/toolbar/tools/routing/routing-controls.ts
+++ b/website/src/lib/components/toolbar/tools/routing/routing-controls.ts
@@ -731,17 +731,7 @@ export class RoutingControls {
        try {
            response = await route(targetCoordinates);
        } catch (e: any) {
-            if (e.message.includes('from-position not mapped in existing datafile')) {
-                toast.error(i18n._('toolbar.routing.error.from'));
-            } else if (e.message.includes('via1-position not mapped in existing datafile')) {
-                toast.error(i18n._('toolbar.routing.error.via'));
-            } else if (e.message.includes('to-position not mapped in existing datafile')) {
-                toast.error(i18n._('toolbar.routing.error.to'));
-            } else if (e.message.includes('Time-out')) {
-                toast.error(i18n._('toolbar.routing.error.timeout'));
-            } else {
-                toast.error(e.message);
-            }
+            toast.error(i18n._(e.message, e.message));
            return false;
        }

@@ -793,24 +783,25 @@ export class RoutingControls {
                replacingDistance +=
                    distance(response[i - 1].getCoordinates(), response[i].getCoordinates()) / 1000;
            }
+            let startAnchorStats = stats.getTrackPoint(anchors[0].point._data.index)!;
+            let endAnchorStats = stats.getTrackPoint(
+                anchors[anchors.length - 1].point._data.index
+            )!;
+
            let replacedDistance =
-                stats.local.distance.moving[anchors[anchors.length - 1].point._data.index] -
-                stats.local.distance.moving[anchors[0].point._data.index];
+                endAnchorStats.distance.moving - startAnchorStats.distance.moving;

            let newDistance = stats.global.distance.moving + replacingDistance - replacedDistance;
            let newTime = (newDistance / stats.global.speed.moving) * 3600;

            let remainingTime =
                stats.global.time.moving -
-                (stats.local.time.moving[anchors[anchors.length - 1].point._data.index] -
-                    stats.local.time.moving[anchors[0].point._data.index]);
+                (endAnchorStats.time.moving - startAnchorStats.time.moving);
            let replacingTime = newTime - remainingTime;

            if (replacingTime <= 0) {
                // Fallback to simple time difference
-                replacingTime =
-                    stats.local.time.total[anchors[anchors.length - 1].point._data.index] -
-                    stats.local.time.total[anchors[0].point._data.index];
+                replacingTime = endAnchorStats.time.total - startAnchorStats.time.total;
            }

            speed = (replacingDistance / replacingTime) * 3600;
@@ -820,9 +811,7 @@ export class RoutingControls {
                let endIndex = anchors[anchors.length - 1].point._data.index;
                startTime = new Date(
                    (segment.trkpt[endIndex].time?.getTime() ?? 0) -
-                        (replacingTime +
-                            stats.local.time.total[endIndex] -
-                            stats.local.time.moving[endIndex]) *
+                        (replacingTime + endAnchorStats.time.total - endAnchorStats.time.moving) *
                            1000
                );
            }
--- a/website/src/lib/components/toolbar/tools/routing/routing.ts
+++ b/website/src/lib/components/toolbar/tools/routing/routing.ts
@@ -6,37 +6,213 @@ import { get } from 'svelte/store';

 const { routing, routingProfile, privateRoads } = settings;

-export const brouterProfiles: { [key: string]: string } = {
-    bike: 'Trekking-dry',
-    racing_bike: 'fastbike',
-    gravel_bike: 'gravel',
-    mountain_bike: 'MTB',
-    foot: 'Hiking-Alpine-SAC6',
-    motorcycle: 'Car-FastEco',
-    water: 'river',
-    railway: 'rail',
+export type RoutingProfile = {
+    engine: 'graphhopper' | 'brouter';
+    profile: string;
+};
+
+export const routingProfiles: { [key: string]: RoutingProfile } = {
+    bike: { engine: 'graphhopper', profile: 'bike' },
+    racing_bike: { engine: 'graphhopper', profile: 'racingbike' },
+    gravel_bike: { engine: 'graphhopper', profile: 'gravelbike' },
+    mountain_bike: { engine: 'graphhopper', profile: 'mtb' },
+    foot: { engine: 'graphhopper', profile: 'foot' },
+    motorcycle: { engine: 'graphhopper', profile: 'motorcycle' },
+    water: { engine: 'brouter', profile: 'river' },
+    railway: { engine: 'brouter', profile: 'rail' },
 };

 export function route(points: Coordinates[]): Promise<TrackPoint[]> {
    if (get(routing)) {
-        return getRoute(points, brouterProfiles[get(routingProfile)], get(privateRoads));
+        const profile = routingProfiles[get(routingProfile)];
+        if (profile.engine === 'graphhopper') {
+            return getGraphHopperRoute(points, profile.profile, get(privateRoads));
+        } else {
+            return getBRouterRoute(points, profile.profile);
+        }
    } else {
        return getIntermediatePoints(points);
    }
 }

-async function getRoute(
+const graphhopperDetails = ['road_class', 'surface', 'hike_rating', 'mtb_rating'];
+const hikeRatingToSACScale: { [key: string]: string } = {
+    '1': 'hiking',
+    '2': 'mountain_hiking',
+    '3': 'demanding_mountain_hiking',
+    '4': 'alpine_hiking',
+    '5': 'demanding_alpine_hiking',
+    '6': 'difficult_alpine_hiking',
+};
+const mtbRatingToScale: { [key: string]: string } = {
+    '1': '0',
+    '2': '1',
+    '3': '2',
+    '4': '3',
+    '5': '4',
+    '6': '5',
+    '7': '6',
+};
+
+const graphhopperBlockPrivateCustomModels: { [key: string]: any } = {
+    bike: {
+        priority: [
+            {
+                if: 'bike_road_access == PRIVATE',
+                multiply_by: '0.0',
+            },
+        ],
+    },
+    racingbike: {
+        priority: [
+            {
+                if: 'bike_road_access == PRIVATE',
+                multiply_by: '0.0',
+            },
+        ],
+    },
+    gravelbike: {
+        priority: [
+            {
+                if: 'bike_road_access == PRIVATE',
+                multiply_by: '0.0',
+            },
+        ],
+    },
+    mtb: {
+        priority: [
+            {
+                if: 'bike_road_access == PRIVATE',
+                multiply_by: '0.0',
+            },
+        ],
+    },
+    foot: {
+        priority: [
+            {
+                if: 'foot_road_access == PRIVATE',
+                multiply_by: '0.0',
+            },
+        ],
+    },
+    motorcycle: {
+        priority: [
+            {
+                if: 'road_access == PRIVATE',
+                multiply_by: '0.0',
+            },
+        ],
+    },
+};
+async function getGraphHopperRoute(
    points: Coordinates[],
-    brouterProfile: string,
+    graphHopperProfile: string,
    privateRoads: boolean
 ): Promise<TrackPoint[]> {
-    let url = `https://brouter.gpx.studio?lonlats=${points.map((point) => `${point.lon.toFixed(8)},${point.lat.toFixed(8)}`).join('|')}&profile=${brouterProfile + (privateRoads ? '-private' : '')}&format=geojson&alternativeidx=0`;
+    let response = await fetch('https://graphhopper.gpx.studio/route', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+            points: points.map((point) => [point.lon, point.lat]),
+            profile: graphHopperProfile,
+            elevation: true,
+            points_encoded: false,
+            details: graphhopperDetails,
+            custom_model: privateRoads
+                ? {}
+                : graphhopperBlockPrivateCustomModels[graphHopperProfile] || {},
+        }),
+    });
+
+    if (!response.ok) {
+        const error = await response.json();
+        if (error.message.includes('Cannot find point 0')) {
+            throw new Error('toolbar.routing.error.from');
+        } else if (error.message.includes('Cannot find point 1')) {
+            if (points.length == 3) {
+                throw new Error('toolbar.routing.error.via');
+            } else {
+                throw new Error('toolbar.routing.error.to');
+            }
+        } else if (error.hints[0].details.includes('PointDistanceExceededException')) {
+            throw new Error('toolbar.routing.error.distance');
+        } else if (error.hints[0].details.includes('ConnectionNotFoundException')) {
+            throw new Error('toolbar.routing.error.connection');
+        } else {
+            throw new Error(error.message);
+        }
+    }
+
+    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()}`);
+        const error = await response.text();
+        if (error.includes('from-position not mapped in existing datafile')) {
+            throw new Error('toolbar.routing.error.from');
+        } else if (error.includes('via1-position not mapped in existing datafile')) {
+            throw new Error('toolbar.routing.error.via');
+        } else if (error.includes('to-position not mapped in existing datafile')) {
+            throw new Error('toolbar.routing.error.to');
+        } else if (error.includes('Time-out')) {
+            throw new Error('toolbar.routing.error.timeout');
+        } else {
+            throw new Error(error);
+        }
    }

    let geojson = await response.json();
@@ -52,14 +228,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),
            })
        );

--- a/website/src/lib/components/toolbar/tools/scissors/Scissors.svelte
+++ b/website/src/lib/components/toolbar/tools/scissors/Scissors.svelte
@@ -26,12 +26,10 @@

    let validSelection = $derived(
        $selection.hasAnyChildren(new ListRootItem(), true, ['waypoints']) &&
-            $gpxStatistics.local.points.length > 0
+            $gpxStatistics.global.length > 0
    );
    let maxSliderValue = $derived(
-        validSelection && $gpxStatistics.local.points.length > 0
-            ? $gpxStatistics.local.points.length - 1
-            : 1
+        validSelection && $gpxStatistics.global.length > 0 ? $gpxStatistics.global.length - 1 : 1
    );
    let sliderValues = $derived([0, maxSliderValue]);
    let canCrop = $derived(sliderValues[0] != 0 || sliderValues[1] != maxSliderValue);
@@ -45,7 +43,7 @@
    function updateSlicedGPXStatistics() {
        if (validSelection && canCrop) {
            $slicedGPXStatistics = [
-                get(gpxStatistics).slice(sliderValues[0], sliderValues[1]),
+                get(gpxStatistics).sliced(sliderValues[0], sliderValues[1]),
                sliderValues[0],
                sliderValues[1],
            ];
@@ -107,7 +105,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>
--- a/website/src/lib/components/toolbar/tools/scissors/split-controls.ts
+++ b/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;
-};
--- a/website/src/lib/components/toolbar/tools/waypoint/Waypoint.svelte
+++ b/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>
--- a/website/src/lib/docs/be/home/funding.mdx
+++ b/website/src/lib/docs/be/home/funding.mdx
@@ -2,7 +2,7 @@
    import { HeartHandshake } from '@lucide/svelte';
 </script>

-## <HeartHandshake size="18" class="mr-1 inline-block align-baseline" /> Help keep the website free (and ad-free)
+## <HeartHandshake size="18" class="inline-block align-baseline" /> Help keep the website free (and ad-free)

 Each time you add or move GPS points, our servers calculate the best route on the road network.
 We also use APIs from <a href="https://mapbox.com" target="_blank">Mapbox</a> to display beautiful maps, retrieve elevation data and allow you to search for places.
--- a/website/src/lib/docs/be/home/translation.mdx
+++ b/website/src/lib/docs/be/home/translation.mdx
@@ -2,7 +2,7 @@
    import { Languages } from '@lucide/svelte';
 </script>

-## <Languages size="18" class="mr-1 inline-block align-baseline" /> Translation
+## <Languages size="18" class="inline-block align-baseline" /> Translation

 The website is translated by volunteers using a collaborative translation platform.
 You can contribute by adding or improving translations on our <a href="https://crowdin.com/project/gpxstudio" target="_blank">Crowdin project</a>.
--- a/website/src/lib/docs/be/menu/file.mdx
+++ b/website/src/lib/docs/be/menu/file.mdx
@@ -29,13 +29,13 @@ You can also drag and drop files directly from your file system into the window.

 Create a copy of the currently selected files.

-### <FileX size="16" class="inline-block" style="margin-bottom: 2px" /> Close
+### <FileX size="16" class="inline-block" style="margin-bottom: 2px" /> Delete

-Close the currently selected files.
+Delete the currently selected files.

-### <FileX size="16" class="inline-block" style="margin-bottom: 2px" /> Close all
+### <FileX size="16" class="inline-block" style="margin-bottom: 2px" /> Delete all

-Close all files.
+Delete all files.

 ### <Download size="16" class="inline-block" style="margin-bottom: 2px" /> Export...

--- a/website/src/lib/docs/be/toolbar/routing.mdx
+++ b/website/src/lib/docs/be/toolbar/routing.mdx
@@ -3,7 +3,7 @@ title: Route planning and editing
 ---

 <script>
-    import { Pencil, Route, Bike, TriangleAlert, ArrowRightLeft, Home, Repeat, Trash2, CirclePlay, SquareArrowUpLeft } from '@lucide/svelte';
+    import { Pencil, Route, Bike, TriangleAlert, ArrowRightLeft, House, Repeat, Trash2, CirclePlay, SquareArrowUpLeft } from '@lucide/svelte';
    import DocsNote from '$lib/components/docs/DocsNote.svelte';
    import Routing from '$lib/components/toolbar/tools/routing/Routing.svelte';
    import DocsImage from '$lib/components/docs/DocsImage.svelte';
@@ -71,7 +71,7 @@ The following tools automate some common route modification operations.

 Reverse the direction of the route.

-### <Home size="16" class="inline-block" style="margin-bottom: 2px" /> Back to start
+### <House size="16" class="inline-block" style="margin-bottom: 2px" /> Back to start

 Connect the last point of the route with the starting point, using the chosen routing settings.

--- a/website/src/lib/docs/ca/home/funding.mdx
+++ b/website/src/lib/docs/ca/home/funding.mdx
@@ -2,7 +2,7 @@
    import { HeartHandshake } from '@lucide/svelte';
 </script>

-## <HeartHandshake size="18" class="mr-1 inline-block align-baseline" /> Ajuda a mantenir aquesta pàgina web gratuïta (i sense anuncis)
+## <HeartHandshake size="18" class="inline-block align-baseline" /> Ajuda a mantenir aquesta pàgina web gratuïta (i sense anuncis)

 Cada cop que afegeixes o mous un punt GPS, els nostres servidors calculen la millor ruta possible.
 També utilitzen l'API de <a href="https://mapbox.com" target="_blank">Mapbox</a> per ensenyar mapes bonics, donar informació sobre l'altitud i permetre la cerca de llocs d'interès.
--- a/website/src/lib/docs/ca/home/translation.mdx
+++ b/website/src/lib/docs/ca/home/translation.mdx
@@ -2,7 +2,7 @@
    import { Languages } from '@lucide/svelte';
 </script>

-## <Languages size="18" class="mr-1 inline-block align-baseline" />Traducció
+## <Languages size="18" class="inline-block align-baseline" /> Traducció

 Aquesta pàgina web ha estat traduïda per voluntaris utilitzant una plataforma de traducció col·laborativa.
 Tu també pots contribuir-hi afegint o millorant les traduccions al nostre <a href="https://crowdin.com/project/gpxstudio" target="_blank">projecte de Crowdin</a>.
--- a/website/src/lib/docs/ca/menu/file.mdx
+++ b/website/src/lib/docs/ca/menu/file.mdx
@@ -29,13 +29,13 @@ Pots arrossegar y deixar arxius directament des del seu sistema d'arxius cap a l

 Crear una còpia dels arxius seleccionats.

-### <FileX size="16" class="inline-block" style="margin-bottom: 2px" /> Tanca
+### <FileX size="16" class="inline-block" style="margin-bottom: 2px" /> Delete

-Tanca els arxius seleccionats.
+Delete the currently selected files.

-### <FileX size="16" class="inline-block" style="margin-bottom: 2px" /> Tanca tot
+### <FileX size="16" class="inline-block" style="margin-bottom: 2px" /> Delete all

-Tanca tots els arxius.
+Delete all files.

 ### <Download size="16" class="inline-block" style="margin-bottom: 2px" /> Exportar...

--- a/website/src/lib/docs/ca/toolbar/routing.mdx
+++ b/website/src/lib/docs/ca/toolbar/routing.mdx
@@ -3,7 +3,7 @@ title: Planificació i edició de rutes
 ---

 <script>
-    import { Pencil, Route, Bike, TriangleAlert, ArrowRightLeft, Home, Repeat, Trash2, CirclePlay, SquareArrowUpLeft } from '@lucide/svelte';
+    import { Pencil, Route, Bike, TriangleAlert, ArrowRightLeft, House, Repeat, Trash2, CirclePlay, SquareArrowUpLeft } from '@lucide/svelte';
    import DocsNote from '$lib/components/docs/DocsNote.svelte';
    import Routing from '$lib/components/toolbar/tools/routing/Routing.svelte';
    import DocsImage from '$lib/components/docs/DocsImage.svelte';
@@ -71,7 +71,7 @@ Les eines següents automatitzen algunes operacions comunes de modificació de r

 Inverteix el sentit de la ruta.

-### <Home size="16" class="inline-block" style="margin-bottom: 2px" /> Tornar a l'inici
+### <House size="16" class="inline-block" style="margin-bottom: 2px" /> Tornar a l'inici

 Connecta l'últim punt de la ruta amb el punt d'inici, utilitzant la configuració de ruta escollida.

--- a/website/src/lib/docs/cs/home/funding.mdx
+++ b/website/src/lib/docs/cs/home/funding.mdx
@@ -2,7 +2,7 @@
    import { HeartHandshake } from '@lucide/svelte';
 </script>

-## <HeartHandshake size="18" class="mr-1 inline-block align-baseline" /> Pomozte udržet web zdarma (a bez reklam)
+## <HeartHandshake size="18" class="inline-block align-baseline" /> Pomozte udržet web zdarma (a bez reklam)

 Vždy, když přidáte nebo přesunete GPS body, naše servery vypočítají nejlepší cestu po silniční síti.
 Používáme také API z <a href="https://mapbox.com" target="_blank">Mapboxu</a> pro zobrazení krásných map, získání dat o nadmořské výšce a vyhledávání míst.
--- a/website/src/lib/docs/cs/home/translation.mdx
+++ b/website/src/lib/docs/cs/home/translation.mdx
@@ -2,7 +2,7 @@
    import { Languages } from '@lucide/svelte';
 </script>

-## <Languages size="18" class="mr-1 inline-block align-baseline" /> Překlad
+## <Languages size="18" class="inline-block align-baseline" /> Překlad

 Tento web je překládán dobrovolníky prostřednictvím kolaborativní překladatelské platformy.
 Ke zlepšení překladů můžete přispět na našem <a href="https://crowdin.com/project/gpxstudio" target="_blank">Crowdin projektu</a>.
--- a/website/src/lib/docs/cs/menu/file.mdx
+++ b/website/src/lib/docs/cs/menu/file.mdx
@@ -29,13 +29,13 @@ Soubory můžete také přetáhnout přímo ze souborového systému do okna.

 Vytvořit kopii aktuálně vybraných souborů.

-### <FileX size="16" class="inline-block" style="margin-bottom: 2px" /> Zavřít
+### <FileX size="16" class="inline-block" style="margin-bottom: 2px" /> Smazat

-Zavřít aktuálně vybrané soubory.
+Smazat aktuálně vybrané soubory.

-### <FileX size="16" class="inline-block" style="margin-bottom: 2px" /> Zavřít vše
+### <FileX size="16" class="inline-block" style="margin-bottom: 2px" /> Smazat vše

-Zavřít všechny soubory.
+Smazat všechny soubory.

 ### <Download size="16" class="inline-block" style="margin-bottom: 2px" /> Export...

--- a/website/src/lib/docs/cs/toolbar/routing.mdx
+++ b/website/src/lib/docs/cs/toolbar/routing.mdx
@@ -3,7 +3,7 @@ title: Plánování a úpravy tras
 ---

 <script>
-    import { Pencil, Route, Bike, TriangleAlert, ArrowRightLeft, Home, Repeat, Trash2, CirclePlay, SquareArrowUpLeft } from '@lucide/svelte';
+    import { Pencil, Route, Bike, TriangleAlert, ArrowRightLeft, House, Repeat, Trash2, CirclePlay, SquareArrowUpLeft } from '@lucide/svelte';
    import DocsNote from '$lib/components/docs/DocsNote.svelte';
    import Routing from '$lib/components/toolbar/tools/routing/Routing.svelte';
    import DocsImage from '$lib/components/docs/DocsImage.svelte';
@@ -24,7 +24,7 @@ Dialog lze minimalizovat kliknutím na <button><SquareArrowUpLeft size="16" clas

 ### <Route size="16" class="inline-block" style="margin-bottom: 2px" /> Plánování tras

-Když je plánování trasy aktivní, kotevní body umístěné nebo přesunuté po mapě budou projenou trasou vypočítanou v silniční síti <a href="https://www.openstreetmap.org" target="_blank">OpenStreetMap</a>.
+Když je plánování trasy aktivní, kotevní body umístěné nebo přesunuté po mapě budou propojeny trasou vypočítanou v silniční síti <a href="https://www.openstreetmap.org" target="_blank">OpenStreetMap</a>.
 Zakázat plánování trasy pro propojení kotevních bodů přímými čarami.
 Toto nastavení lze také přepnout stisknutím <kbd>F5</kbd>.

@@ -71,7 +71,7 @@ Následující nástroje automatizují některé běžné operace úpravy trasy.

 Obrátit směr trasy.

-### <Home size="16" class="inline-block" style="margin-bottom: 2px" /> Zpět na začátek
+### <House size="16" class="inline-block" style="margin-bottom: 2px" /> Zpět na začátek

 Propojit poslední bod trasy s výchozím bodem pomocí zvoleného nastavení směrování.

--- a/website/src/lib/docs/da/home/funding.mdx
+++ b/website/src/lib/docs/da/home/funding.mdx
@@ -2,7 +2,7 @@
    import { HeartHandshake } from '@lucide/svelte';
 </script>

-## <HeartHandshake size="18" class="mr-1 inline-block align-baseline" /> Help keep the website free (and ad-free)
+## <HeartHandshake size="18" class="inline-block align-baseline" /> Help keep the website free (and ad-free)

 Each time you add or move GPS points, our servers calculate the best route on the road network.
 We also use APIs from <a href="https://mapbox.com" target="_blank">Mapbox</a> to display beautiful maps, retrieve elevation data and allow you to search for places.
--- a/website/src/lib/docs/da/home/translation.mdx
+++ b/website/src/lib/docs/da/home/translation.mdx
@@ -2,7 +2,7 @@
    import { Languages } from '@lucide/svelte';
 </script>

-## <Languages size="18" class="mr-1 inline-block align-baseline" /> Oversættelse
+## <Languages size="18" class="inline-block align-baseline" /> Translation

 Hjemmesiden er oversat af frivillige ved hjælp af en kollaborativ oversættelsesplatform.
 You can contribute by adding or improving translations on our <a href="https://crowdin.com/project/gpxstudio" target="_blank">Crowdin project</a>.
--- a/website/src/lib/docs/da/menu/file.mdx
+++ b/website/src/lib/docs/da/menu/file.mdx
@@ -29,13 +29,13 @@ You can also drag and drop files directly from your file system into the window.

 Create a copy of the currently selected files.

-### <FileX size="16" class="inline-block" style="margin-bottom: 2px" /> Close
+### <FileX size="16" class="inline-block" style="margin-bottom: 2px" /> Delete

-Close the currently selected files.
+Delete the currently selected files.

-### <FileX size="16" class="inline-block" style="margin-bottom: 2px" /> Close all
+### <FileX size="16" class="inline-block" style="margin-bottom: 2px" /> Delete all

-Close all files.
+Delete all files.

 ### <Download size="16" class="inline-block" style="margin-bottom: 2px" />Eksporter...

--- a/website/src/lib/docs/da/toolbar/routing.mdx
+++ b/website/src/lib/docs/da/toolbar/routing.mdx
@@ -3,7 +3,7 @@ title: Route planning and editing
 ---

 <script>
-    import { Pencil, Route, Bike, TriangleAlert, ArrowRightLeft, Home, Repeat, Trash2, CirclePlay, SquareArrowUpLeft } from '@lucide/svelte';
+    import { Pencil, Route, Bike, TriangleAlert, ArrowRightLeft, House, Repeat, Trash2, CirclePlay, SquareArrowUpLeft } from '@lucide/svelte';
    import DocsNote from '$lib/components/docs/DocsNote.svelte';
    import Routing from '$lib/components/toolbar/tools/routing/Routing.svelte';
    import DocsImage from '$lib/components/docs/DocsImage.svelte';
@@ -71,7 +71,7 @@ The following tools automate some common route modification operations.

 Reverse the direction of the route.

-### <Home size="16" class="inline-block" style="margin-bottom: 2px" /> Back to start
+### <House size="16" class="inline-block" style="margin-bottom: 2px" /> Back to start

 Connect the last point of the route with the starting point, using the chosen routing settings.

--- a/website/src/lib/docs/de/home/funding.mdx
+++ b/website/src/lib/docs/de/home/funding.mdx
@@ -2,7 +2,7 @@
    import { HeartHandshake } from '@lucide/svelte';
 </script>

-## <HeartHandshake size="18" class="mr-1 inline-block align-baseline" /> Helfen Sie, die Website kostenlos (und werbefrei) zu erhalten
+## <HeartHandshake size="18" class="inline-block align-baseline" /> Helfen Sie, die Website kostenlos (und werbefrei) zu erhalten

 Jedes Mal, wenn Sie GPS-Punkte hinzufügen oder verschieben, berechnen unsere Server die beste Route im Straßennetz.
 Wir verwenden auch APIs von <a href="https://mapbox.com" target="_blank">Mapbox</a>, um schöne Karten anzuzeigen, Höhendaten abzurufen und Ihnen die Suche nach Orten zu ermöglichen.
--- a/website/src/lib/docs/de/home/mapbox.mdx
+++ b/website/src/lib/docs/de/home/mapbox.mdx
@@ -1,5 +1,5 @@
 Mapbox ist das Unternehmen, das einige der schönen Karten auf dieser Website zur Verfügung stellt.
 Sie entwickeln auch die <a href="https://github.com/mapbox/mapbox-gl-js" target="_blank">Karten-Engine</a> welche **gpx.studio** unterstützt.

-Wir sind äusserst glücklich und dankbar, Teil ihres <a href="https://mapbox.com/community" target="_blank">Community</a> Programms zu sein, das gemeinnützige Organisationen, Bildungseinrichtungen und Organisationen mit positivem Einfluss unterstützt.
+Wir sind äußerst glücklich und dankbar, Teil ihres <a href="https://mapbox.com/community" target="_blank">Community</a> Programms zu sein, das gemeinnützige Organisationen, Bildungseinrichtungen und Organisationen mit positivem Einfluss unterstützt.
 Diese Partnerschaft ermöglicht es **gpx.studio**, von den Mapbox-Tools zu ermäßigten Preisen zu profitieren, was erheblich zur finanziellen Tragfähigkeit des Projekts beiträgt und es uns ermöglicht, die bestmögliche Benutzererfahrung zu bieten.
--- a/website/src/lib/docs/de/home/translation.mdx
+++ b/website/src/lib/docs/de/home/translation.mdx
@@ -2,7 +2,7 @@
    import { Languages } from '@lucide/svelte';
 </script>

-## <Languages size="18" class="mr-1 inline-block align-baseline" /> Übersetzung
+## <Languages size="18" class="inline-block align-baseline" /> Übersetzung

 Die Webseite wird von Freiwilligen mit einer gemeinsamen Übersetzungsplattform übersetzt.
 Sie können dazu beitragen, indem Sie Übersetzungen in unserem <a href="https://crowdin.com/project/gpxstudio" target="_blank">Crowdin Projekt</a> hinzufügen oder verbessern.
--- a/website/src/lib/docs/de/menu/file.mdx
+++ b/website/src/lib/docs/de/menu/file.mdx
@@ -29,13 +29,13 @@ Sie können auch Dateien per Drag-and-Drop aus Ihrem Dateisystem in das Fenster

 Erstelle eine Kopie der aktuell ausgewählten Dateien.

-### <FileX size="16" class="inline-block" style="margin-bottom: 2px" /> Schließen
+### <FileX size="16" class="inline-block" style="margin-bottom: 2px" /> Delete

-Die aktuell ausgewählten Dateien schließen.
+Delete the currently selected files.

-### <FileX size="16" class="inline-block" style="margin-bottom: 2px" /> Alle schließen
+### <FileX size="16" class="inline-block" style="margin-bottom: 2px" /> Delete all

-Schließe alle Dateien.
+Delete all files.

 ### <Download size="16" class="inline-block" style="margin-bottom: 2px" /> Exportieren...

--- a/website/src/lib/docs/de/toolbar/routing.mdx
+++ b/website/src/lib/docs/de/toolbar/routing.mdx
@@ -3,7 +3,7 @@ title: Routenplanung und Bearbeitung
 ---

 <script>
-    import { Pencil, Route, Bike, TriangleAlert, ArrowRightLeft, Home, Repeat, Trash2, CirclePlay, SquareArrowUpLeft } from '@lucide/svelte';
+    import { Pencil, Route, Bike, TriangleAlert, ArrowRightLeft, House, Repeat, Trash2, CirclePlay, SquareArrowUpLeft } from '@lucide/svelte';
    import DocsNote from '$lib/components/docs/DocsNote.svelte';
    import Routing from '$lib/components/toolbar/tools/routing/Routing.svelte';
    import DocsImage from '$lib/components/docs/DocsImage.svelte';
@@ -71,7 +71,7 @@ Die folgenden Tools automatisieren einige gemeinsame Routenmodifikationsoperatio

 Die Richtung der Route umkehren.

-### Zurück zum Start
+### <House size="16" class="inline-block" style="margin-bottom: 2px" /> Zurück zum Start

 Verbinden Sie den letzten Punkt der Route mit dem Startpunkt mit den gewählten Routing-Einstellungen.

--- a/website/src/lib/docs/el/home/funding.mdx
+++ b/website/src/lib/docs/el/home/funding.mdx
@@ -2,7 +2,7 @@
    import { HeartHandshake } from '@lucide/svelte';
 </script>

-## <HeartHandshake size="18" class="mr-1 inline-block align-baseline" /> Help keep the website free (and ad-free)
+## <HeartHandshake size="18" class="inline-block align-baseline" /> Help keep the website free (and ad-free)

 Each time you add or move GPS points, our servers calculate the best route on the road network.
 We also use APIs from <a href="https://mapbox.com" target="_blank">Mapbox</a> to display beautiful maps, retrieve elevation data and allow you to search for places.
--- a/website/src/lib/docs/el/home/translation.mdx
+++ b/website/src/lib/docs/el/home/translation.mdx
@@ -2,7 +2,7 @@
    import { Languages } from '@lucide/svelte';
 </script>

-## <Languages size="18" class="mr-1 inline-block align-baseline" /> Translation
+## <Languages size="18" class="inline-block align-baseline" /> Translation

 The website is translated by volunteers using a collaborative translation platform.
 You can contribute by adding or improving translations on our <a href="https://crowdin.com/project/gpxstudio" target="_blank">Crowdin project</a>.
--- a/website/src/lib/docs/el/menu/file.mdx
+++ b/website/src/lib/docs/el/menu/file.mdx
@@ -29,13 +29,13 @@ You can also drag and drop files directly from your file system into the window.

 Create a copy of the currently selected files.

-### <FileX size="16" class="inline-block" style="margin-bottom: 2px" /> Close
+### <FileX size="16" class="inline-block" style="margin-bottom: 2px" /> Delete

-Close the currently selected files.
+Delete the currently selected files.

-### <FileX size="16" class="inline-block" style="margin-bottom: 2px" /> Close all
+### <FileX size="16" class="inline-block" style="margin-bottom: 2px" /> Delete all

-Close all files.
+Delete all files.

 ### <Download size="16" class="inline-block" style="margin-bottom: 2px" /> Export...

--- a/website/src/lib/docs/el/toolbar/routing.mdx
+++ b/website/src/lib/docs/el/toolbar/routing.mdx
@@ -3,7 +3,7 @@ title: Route planning and editing
 ---

 <script>
-    import { Pencil, Route, Bike, TriangleAlert, ArrowRightLeft, Home, Repeat, Trash2, CirclePlay, SquareArrowUpLeft } from '@lucide/svelte';
+    import { Pencil, Route, Bike, TriangleAlert, ArrowRightLeft, House, Repeat, Trash2, CirclePlay, SquareArrowUpLeft } from '@lucide/svelte';
    import DocsNote from '$lib/components/docs/DocsNote.svelte';
    import Routing from '$lib/components/toolbar/tools/routing/Routing.svelte';
    import DocsImage from '$lib/components/docs/DocsImage.svelte';
@@ -71,7 +71,7 @@ The following tools automate some common route modification operations.

 Reverse the direction of the route.

-### <Home size="16" class="inline-block" style="margin-bottom: 2px" /> Back to start
+### <House size="16" class="inline-block" style="margin-bottom: 2px" /> Back to start

 Connect the last point of the route with the starting point, using the chosen routing settings.

--- a/website/src/lib/docs/es/home/funding.mdx
+++ b/website/src/lib/docs/es/home/funding.mdx
@@ -2,7 +2,7 @@
    import { HeartHandshake } from '@lucide/svelte';
 </script>

-## <HeartHandshake size="18" class="mr-1 inline-block align-baseline" /> Ayude a mantener este sitio gratis (y libre de anuncios)
+## <HeartHandshake size="18" class="inline-block align-baseline" /> Ayude a mantener este sitio gratis (y libre de anuncios)

 Cada vez que añade o mueve puntos GPS, nuestros servidores calculan la mejor ruta en la red de carreteras.
 También usamos APIs de <a href="https://mapbox.com" target="_blank">Mapbox</a> para mostrar hermosos mapas, obtener datos de elevación y permitirle buscar lugares.
--- a/website/src/lib/docs/es/home/translation.mdx
+++ b/website/src/lib/docs/es/home/translation.mdx
@@ -2,7 +2,7 @@
    import { Languages } from '@lucide/svelte';
 </script>

-## <Languages size="18" class="mr-1 inline-block align-baseline" /> Traducción
+## <Languages size="18" class="inline-block align-baseline" /> Traducción

 Este sitio está traducido por voluntarios usando una plataforma de traducción colaborativa.
 Puede contribuir añadiendo o mejorando las traducciones en nuestro <a href="https://crowdin.com/project/gpxstudio" target="_blank">proyecto Crowdin</a>.
--- a/website/src/lib/docs/es/integration.mdx
+++ b/website/src/lib/docs/es/integration.mdx
@@ -1,5 +1,5 @@
 ---
-title: Integración
+title: Integraciones
 ---

 <script>
--- a/website/src/lib/docs/es/menu/file.mdx
+++ b/website/src/lib/docs/es/menu/file.mdx
@@ -29,13 +29,13 @@ Puede arrastrar y soltar archivos directamente desde su sistema de archivos a la

 Crear una copia de los archivos seleccionados actualmente.

-### <FileX size="16" class="inline-block" style="margin-bottom: 2px" /> Cerrar
+### <FileX size="16" class="inline-block" style="margin-bottom: 2px" /> Borrar

-Cerrar los archivos seleccionados actualmente.
+Borrar los archivos seleccionados.

-### <FileX size="16" class="inline-block" style="margin-bottom: 2px" /> Cerrar todo
+### <FileX size="16" class="inline-block" style="margin-bottom: 2px" /> Borrar todos

-Cerrar todos los archivos.
+Borrar todos los archivos.

 ### <Download size="16" class="inline-block" style="margin-bottom: 2px" /> Exportar...

--- a/website/src/lib/docs/es/toolbar/routing.mdx
+++ b/website/src/lib/docs/es/toolbar/routing.mdx
@@ -3,7 +3,7 @@ title: Planificación y edición de rutas
 ---

 <script>
-    import { Pencil, Route, Bike, TriangleAlert, ArrowRightLeft, Home, Repeat, Trash2, CirclePlay, SquareArrowUpLeft } from '@lucide/svelte';
+    import { Pencil, Route, Bike, TriangleAlert, ArrowRightLeft, House, Repeat, Trash2, CirclePlay, SquareArrowUpLeft } from '@lucide/svelte';
    import DocsNote from '$lib/components/docs/DocsNote.svelte';
    import Routing from '$lib/components/toolbar/tools/routing/Routing.svelte';
    import DocsImage from '$lib/components/docs/DocsImage.svelte';
@@ -71,7 +71,7 @@ Las siguientes herramientas automatizan algunas operaciones comunes de modificac

 Invierte el sentido de la ruta.

-### <Home size="16" class="inline-block" style="margin-bottom: 2px" /> Volver al inicio
+### <House size="16" class="inline-block" style="margin-bottom: 2px" /> Volver al inicio

 Conecta el último punto de la ruta con el punto de inicio, usando los ajustes de ruta elegidos.

--- a/website/src/lib/docs/eu/home/funding.mdx
+++ b/website/src/lib/docs/eu/home/funding.mdx
@@ -2,7 +2,7 @@
    import { HeartHandshake } from '@lucide/svelte';
 </script>

-## <HeartHandshake size="18" class="mr-1 inline-block align-baseline" /> Lagundu mantentzen webgunea doan (eta propagandarik gabe)
+## <HeartHandshake size="18" class="inline-block align-baseline" /> Lagundu mantentzen webgunea doan (eta propagandarik gabe)

 GPS puntuak gehitzen edo mugitzen dituzun bakoitzean, gure zerbitzariek bide sareko ibilbide onena kalkulatzen dute.<a href="https://mapbox.com" target="_blank">Mapbox</a>en APIak erabiltzen ditugu erakusteko mapa argiak, kota-datuak eskaintzeko eta ahalbidetzeko lekuen bilaketa.

--- a/website/src/lib/docs/eu/home/translation.mdx
+++ b/website/src/lib/docs/eu/home/translation.mdx
@@ -2,7 +2,7 @@
    import { Languages } from '@lucide/svelte';
 </script>

-## <Languages size="18" class="mr-1 inline-block align-baseline" /> Itzulpena
+## <Languages size="18" class="inline-block align-baseline" /> Itzulpena

 Webgune hau itzulpenerako elkarlaneko plataforma bat erabiltzen duten boluntarioen lanari esker itzultzen da.
 Itzulpenean lagundu dezakezu gure <a href="https://crowdin.com/project/gpxstudio" target="_blank">Crowdin proiektu</a>an.
--- a/website/src/lib/docs/eu/menu/file.mdx
+++ b/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" /> Itxi
+### <FileX size="16" class="inline-block" style="margin-bottom: 2px" /> Ezabatu

-Itxi hautatutako fitxategiak.
+Ezabatu hautatutako fitxategiak.

-### <FileX size="16" class="inline-block" style="margin-bottom: 2px" /> Itxi guztiak
+### <FileX size="16" class="inline-block" style="margin-bottom: 2px" /> Ezabatu guztiak

-Itxi fitxategi guztiak.
+Ezabatu fitxategi guztiak.

 ### <Download size="16" class="inline-block" style="margin-bottom: 2px" /> Esportatu...

--- a/website/src/lib/docs/eu/toolbar/routing.mdx
+++ b/website/src/lib/docs/eu/toolbar/routing.mdx
@@ -3,7 +3,7 @@ title: Ibilbideak planifikatzea eta editatzea
 ---

 <script>
-    import { Pencil, Route, Bike, TriangleAlert, ArrowRightLeft, Home, Repeat, Trash2, CirclePlay, SquareArrowUpLeft } from '@lucide/svelte';
+    import { Pencil, Route, Bike, TriangleAlert, ArrowRightLeft, House, Repeat, Trash2, CirclePlay, SquareArrowUpLeft } from '@lucide/svelte';
    import DocsNote from '$lib/components/docs/DocsNote.svelte';
    import Routing from '$lib/components/toolbar/tools/routing/Routing.svelte';
    import DocsImage from '$lib/components/docs/DocsImage.svelte';
@@ -70,7 +70,7 @@ Hurrengo tresnek ibilbidearen aldaketa arrunt batzuk automatizatzen dituzte.

 Ibilbidearen norabidea alderantzikatu.

-### <Home size="16" class="inline-block" style="margin-bottom: 2px" />Bueltatu abiapuntura
+### <House size="16" class="inline-block" style="margin-bottom: 2px" />Bueltatu abiapuntura

 Konektatu ibilbidearen azken puntua abiapuntuarekin, aukeratutako bideratze ezarpenak erabiliz.

--- a/website/src/lib/docs/fi/home/funding.mdx
+++ b/website/src/lib/docs/fi/home/funding.mdx
@@ -2,7 +2,7 @@
    import { HeartHandshake } from '@lucide/svelte';
 </script>

-## <HeartHandshake size="18" class="mr-1 inline-block align-baseline" /> Help keep the website free (and ad-free)
+## <HeartHandshake size="18" class="inline-block align-baseline" /> Help keep the website free (and ad-free)

 Each time you add or move GPS points, our servers calculate the best route on the road network.
 We also use APIs from <a href="https://mapbox.com" target="_blank">Mapbox</a> to display beautiful maps, retrieve elevation data and allow you to search for places.
--- a/website/src/lib/docs/fi/home/translation.mdx
+++ b/website/src/lib/docs/fi/home/translation.mdx
@@ -2,7 +2,7 @@
    import { Languages } from '@lucide/svelte';
 </script>

-## <Languages size="18" class="mr-1 inline-block align-baseline" /> Translation
+## <Languages size="18" class="inline-block align-baseline" /> Translation

 The website is translated by volunteers using a collaborative translation platform.
 You can contribute by adding or improving translations on our <a href="https://crowdin.com/project/gpxstudio" target="_blank">Crowdin project</a>.
--- a/website/src/lib/docs/fi/menu/file.mdx
+++ b/website/src/lib/docs/fi/menu/file.mdx
@@ -29,13 +29,13 @@ You can also drag and drop files directly from your file system into the window.

 Create a copy of the currently selected files.

-### <FileX size="16" class="inline-block" style="margin-bottom: 2px" /> Close
+### <FileX size="16" class="inline-block" style="margin-bottom: 2px" /> Delete

-Close the currently selected files.
+Delete the currently selected files.

-### <FileX size="16" class="inline-block" style="margin-bottom: 2px" /> Close all
+### <FileX size="16" class="inline-block" style="margin-bottom: 2px" /> Delete all

-Close all files.
+Delete all files.

 ### <Download size="16" class="inline-block" style="margin-bottom: 2px" /> Export...

--- a/website/src/lib/docs/fi/toolbar/routing.mdx
+++ b/website/src/lib/docs/fi/toolbar/routing.mdx
@@ -3,7 +3,7 @@ title: Route planning and editing
 ---

 <script>
-    import { Pencil, Route, Bike, TriangleAlert, ArrowRightLeft, Home, Repeat, Trash2, CirclePlay, SquareArrowUpLeft } from '@lucide/svelte';
+    import { Pencil, Route, Bike, TriangleAlert, ArrowRightLeft, House, Repeat, Trash2, CirclePlay, SquareArrowUpLeft } from '@lucide/svelte';
    import DocsNote from '$lib/components/docs/DocsNote.svelte';
    import Routing from '$lib/components/toolbar/tools/routing/Routing.svelte';
    import DocsImage from '$lib/components/docs/DocsImage.svelte';
@@ -71,7 +71,7 @@ The following tools automate some common route modification operations.

 Reverse the direction of the route.

-### <Home size="16" class="inline-block" style="margin-bottom: 2px" /> Back to start
+### <House size="16" class="inline-block" style="margin-bottom: 2px" /> Back to start

 Connect the last point of the route with the starting point, using the chosen routing settings.

--- a/website/src/lib/docs/fr/home/funding.mdx
+++ b/website/src/lib/docs/fr/home/funding.mdx
@@ -2,7 +2,7 @@
    import { HeartHandshake } from '@lucide/svelte';
 </script>

-## <HeartHandshake size="18" class="mr-1 inline-block align-baseline" /> Aidez à garder le site gratuit (et sans pub)
+## <HeartHandshake size="18" class="inline-block align-baseline" /> Aidez à garder le site gratuit (et sans pub)

 Chaque fois que vous ajoutez ou déplacez des points GPS, nos serveurs calculent le meilleur itinéraire sur le réseau routier.
 Nous utilisons également des services de <a href="https://mapbox.com" target="_blank">Mapbox</a> pour afficher de magnifiques cartes, récupérer des données d'altitude et vous permettre de rechercher des adresses.
--- a/website/src/lib/docs/fr/home/translation.mdx
+++ b/website/src/lib/docs/fr/home/translation.mdx
@@ -2,7 +2,7 @@
    import { Languages } from '@lucide/svelte';
 </script>

-## <Languages size="18" class="mr-1 inline-block align-baseline" /> Traduction
+## <Languages size="18" class="inline-block align-baseline" /> Traduction

 Le site est traduit par des bénévoles sur une plate-forme de traduction collaborative.
 Vous pouvez contribuer en ajoutant ou en améliorant des traductions sur notre projet <a href="https://crowdin.com/project/gpxstudio" target="_blank">Crowdin</a>.
--- a/website/src/lib/docs/fr/menu/file.mdx
+++ b/website/src/lib/docs/fr/menu/file.mdx
@@ -29,13 +29,13 @@ Vous pouvez également glisser-déposer des fichiers directement depuis votre sy

 Créer une copie des fichiers sélectionnés.

-### <FileX size="16" class="inline-block" style="margin-bottom: 2px" /> Fermer
+### <FileX size="16" class="inline-block" style="margin-bottom: 2px" /> Supprimer

-Fermer les fichiers sélectionnés.
+Supprimer les fichiers sélectionnés.

-### <FileX size="16" class="inline-block" style="margin-bottom: 2px" /> Fermer tout
+### <FileX size="16" class="inline-block" style="margin-bottom: 2px" /> Supprimer tout

-Fermer tous les fichiers.
+Supprimer toutes les fichiers.

 ### <Download size="16" class="inline-block" style="margin-bottom: 2px" /> Exporter...

--- a/website/src/lib/docs/fr/toolbar/routing.mdx
+++ b/website/src/lib/docs/fr/toolbar/routing.mdx
@@ -3,7 +3,7 @@ title: Planification et édition d'itinéraires
 ---

 <script>
-    import { Pencil, Route, Bike, TriangleAlert, ArrowRightLeft, Home, Repeat, Trash2, CirclePlay, SquareArrowUpLeft } from '@lucide/svelte';
+    import { Pencil, Route, Bike, TriangleAlert, ArrowRightLeft, House, Repeat, Trash2, CirclePlay, SquareArrowUpLeft } from '@lucide/svelte';
    import DocsNote from '$lib/components/docs/DocsNote.svelte';
    import Routing from '$lib/components/toolbar/tools/routing/Routing.svelte';
    import DocsImage from '$lib/components/docs/DocsImage.svelte';
@@ -71,7 +71,7 @@ Les outils suivants automatisent certaines opérations communes de modification

 Inverser le sens de l'itinéraire.

-### <Home size="16" class="inline-block" style="margin-bottom: 2px" /> Retour au départ
+### <House size="16" class="inline-block" style="margin-bottom: 2px" /> Retour au départ

 Connecter le dernier point de l'itinéraire avec le point de départ, en utilisant les paramètres de routage choisis.

--- a/website/src/lib/docs/he/home/funding.mdx
+++ b/website/src/lib/docs/he/home/funding.mdx
@@ -2,7 +2,7 @@
    import { HeartHandshake } from '@lucide/svelte';
 </script>

-## עזור לשמור על אתר זה נקי מפרסומות
+## <HeartHandshake size="18" class="inline-block align-baseline" /> Help keep the website free (and ad-free)

 בכל פעם שאתה מוסיף או מעביר נקודות GPS, השרתים שלנו מחשבים את המסלול הטוב ביותר ברשת הדרכים.
 We also use APIs from <a href="https://mapbox.com" target="_blank">Mapbox</a> to display beautiful maps, retrieve elevation data and allow you to search for places.
--- a/website/src/lib/docs/he/home/translation.mdx
+++ b/website/src/lib/docs/he/home/translation.mdx
@@ -2,7 +2,7 @@
    import { Languages } from '@lucide/svelte';
 </script>

-## <Languages size="18" class="mr-1 inline-block align-baseline" /> Translation
+## <Languages size="18" class="inline-block align-baseline" /> Translation

 The website is translated by volunteers using a collaborative translation platform.
 You can contribute by adding or improving translations on our <a href="https://crowdin.com/project/gpxstudio" target="_blank">Crowdin project</a>.
--- a/website/src/lib/docs/he/menu/file.mdx
+++ b/website/src/lib/docs/he/menu/file.mdx
@@ -29,13 +29,13 @@ You can also drag and drop files directly from your file system into the window.

 Create a copy of the currently selected files.

-### <FileX size="16" class="inline-block" style="margin-bottom: 2px" /> Close
+### <FileX size="16" class="inline-block" style="margin-bottom: 2px" /> Delete

-Close the currently selected files.
+Delete the currently selected files.

-### <FileX size="16" class="inline-block" style="margin-bottom: 2px" /> Close all
+### <FileX size="16" class="inline-block" style="margin-bottom: 2px" /> Delete all

-Close all files.
+Delete all files.

 ### <Download size="16" class="inline-block" style="margin-bottom: 2px" /> Export...

--- a/website/src/lib/docs/he/toolbar/routing.mdx
+++ b/website/src/lib/docs/he/toolbar/routing.mdx
@@ -3,7 +3,7 @@ title: Route planning and editing
 ---

 <script>
-    import { Pencil, Route, Bike, TriangleAlert, ArrowRightLeft, Home, Repeat, Trash2, CirclePlay, SquareArrowUpLeft } from '@lucide/svelte';
+    import { Pencil, Route, Bike, TriangleAlert, ArrowRightLeft, House, Repeat, Trash2, CirclePlay, SquareArrowUpLeft } from '@lucide/svelte';
    import DocsNote from '$lib/components/docs/DocsNote.svelte';
    import Routing from '$lib/components/toolbar/tools/routing/Routing.svelte';
    import DocsImage from '$lib/components/docs/DocsImage.svelte';
@@ -71,7 +71,7 @@ The following tools automate some common route modification operations.

 Reverse the direction of the route.

-### <Home size="16" class="inline-block" style="margin-bottom: 2px" /> Back to start
+### <House size="16" class="inline-block" style="margin-bottom: 2px" /> Back to start

 Connect the last point of the route with the starting point, using the chosen routing settings.

--- a/website/src/lib/docs/hu/home/funding.mdx
+++ b/website/src/lib/docs/hu/home/funding.mdx
@@ -2,7 +2,7 @@
    import { HeartHandshake } from '@lucide/svelte';
 </script>

-## Segítsen megőrizni a webhely ingyenességét (és reklám mentességét)
+## <HeartHandshake size="18" class="inline-block align-baseline" /> Help keep the website free (and ad-free)

 Minden alkalommal, amikor GPS-pontokat ad hozzá vagy mozgat, szervereink kiszámítják a legjobb útvonalat az úthálózaton.<a href="https://mapbox.com" target="_blank">Mapbox</a> API-jait használjuk a gyönyörű térképek megjelenítésére, a magassági adatok lekérésére és a helyek keresésére.

--- a/website/src/lib/docs/hu/home/translation.mdx
+++ b/website/src/lib/docs/hu/home/translation.mdx
@@ -2,7 +2,7 @@
    import { Languages } from '@lucide/svelte';
 </script>

-## Fordítás
+## <Languages size="18" class="inline-block align-baseline" /> Translation

 A weboldalt önkéntesek fordítják egy közös fordítói platformon.
 Hozzájárulhat fordítások hozzáadásával vagy javításával <a href="https://crowdin.com/project/gpxstudio" target="_blank">Crowdin projektünkben</a>.
--- a/website/src/lib/docs/hu/menu/file.mdx
+++ b/website/src/lib/docs/hu/menu/file.mdx
@@ -29,13 +29,13 @@ A fájlokat közvetlenül a fájlrendszerből is áthúzhatja az ablakba.

 Készítsen másolatot az aktuálisan kiválasztott fájlokról.

-### <FileX size="16" class="inline-block" style="margin-bottom: 2px" /> Bezárás
+### <FileX size="16" class="inline-block" style="margin-bottom: 2px" /> Delete

-Zárja be az aktuálisan kiválasztott fájlokat.
+Delete the currently selected files.

-### <FileX size="16" class="inline-block" style="margin-bottom: 2px" /> Az összes bezárása
+### <FileX size="16" class="inline-block" style="margin-bottom: 2px" /> Delete all

-Zárja be az összes fájlt.
+Delete all files.

 ### <Download size="16" class="inline-block" style="margin-bottom: 2px" /> Exportálás...

--- a/website/src/lib/docs/hu/toolbar/routing.mdx
+++ b/website/src/lib/docs/hu/toolbar/routing.mdx
@@ -3,7 +3,7 @@ title: Útvonal tervezés és szerkesztés
 ---

 <script>
-    import { Pencil, Route, Bike, TriangleAlert, ArrowRightLeft, Home, Repeat, Trash2, CirclePlay, SquareArrowUpLeft } from '@lucide/svelte';
+    import { Pencil, Route, Bike, TriangleAlert, ArrowRightLeft, House, Repeat, Trash2, CirclePlay, SquareArrowUpLeft } from '@lucide/svelte';
    import DocsNote from '$lib/components/docs/DocsNote.svelte';
    import Routing from '$lib/components/toolbar/tools/routing/Routing.svelte';
    import DocsImage from '$lib/components/docs/DocsImage.svelte';
@@ -71,7 +71,7 @@ A következő eszközök automatizálnak néhány gyakori útvonal-módosítási

 Fordítsa meg az útvonal irányát.

-### <Home size="16" class="inline-block" style="margin-bottom: 2px" /> Vissza a kezdéshez
+### <House size="16" class="inline-block" style="margin-bottom: 2px" /> Back to start

 Csatlakoztassa az útvonal utolsó pontját a kiindulási ponthoz a kiválasztott útvonalbeállítások segítségével.

--- a/website/src/lib/docs/id/faq.mdx
+++ b/website/src/lib/docs/id/faq.mdx
@@ -0,0 +1,35 @@
+---
+title: FAQ
+---
+
+<script>
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+### Do I need to donate to use the website?
+
+No.
+The website is free to use and always will be (as long as it is financially sustainable).
+However, donations are appreciated and help keep the website running.
+
+### Why is this route chosen over that one? _Or_ how can I add something to the map?
+
+**gpx.studio** uses data from <a href="https://www.openstreetmap.org/" target="_blank">OpenStreetMap</a>, which is an open and collaborative world map.
+This means you can contribute to the map by adding or editing data on OpenStreetMap.
+
+If you have never contributed to OpenStreetMap before, here is how you can suggest changes:
+
+1. Go to the location where you want to add or edit data on the <a href="https://www.openstreetmap.org/" target="_blank">map</a>.
+2. Use the <button>Query features</button> tool on the right to inspect the existing data.
+3. Right-click on the location and select <button>Add a note here</button>.
+4. Explain what is incorrect or missing in the note and click <button>Add note</button> to submit it.
+
+Someone more experienced with OpenStreetMap will then review your note and make the necessary changes.
+
+<DocsNote>
+
+More information on how to contribute to OpenStreetMap can be found <a href="https://wiki.openstreetmap.org/wiki/How_to_contribute" target="_blank">here</a>.
+
+</DocsNote>
--- a/Show More
+++ b/Show More