New translations elevation.mdx (Serbian (Latin))

.github/workflows/deploy.yml

@@ -1,63 +1,63 @@
 name: Deploy to GitHub Pages
 on:
-    push:
+  push:
-        branches: 'main'
+    branches: 'main'
 
 jobs:
-    build_site:
+  build_site:
-        runs-on: ubuntu-latest
+    runs-on: ubuntu-latest
-        steps:
+    steps:
-            - name: Checkout
+      - name: Checkout
-              uses: actions/checkout@v5
+        uses: actions/checkout@v4
 
-            - name: Install Node.js
+      - name: Install Node.js
-              uses: actions/setup-node@v6
+        uses: actions/setup-node@v4
-              with:
+        with:
-                  node-version: 24
+          node-version: 20
-                  cache: npm
+          cache: npm
-                  cache-dependency-path: |
+          cache-dependency-path: |
-                      gpx/package-lock.json
+            gpx/package-lock.json
-                      website/package-lock.json
+            website/package-lock.json
+      
+      - name: Install dependencies for gpx
+        run: npm install --prefix gpx
 
-            - name: Install dependencies for gpx
+      - name: Build gpx
-              run: npm install --prefix gpx
+        run: npm run build --prefix gpx
 
-            - name: Build gpx
+      - name: Install dependencies for website
-              run: npm run build --prefix gpx
+        run: npm install --prefix website
 
-            - name: Install dependencies for website
+      - name: Create env file
-              run: npm install --prefix website
+        run: |
+          touch website/.env
+          echo PUBLIC_MAPBOX_TOKEN=${{ secrets.PUBLIC_MAPBOX_TOKEN }} >> website/.env
+          cat website/.env
 
-            - name: Create env file
+      - name: Build website
-              run: |
+        env:
-                  touch website/.env
+          BASE_PATH: ''
-                  echo PUBLIC_MAPBOX_TOKEN=${{ secrets.PUBLIC_MAPBOX_TOKEN }} >> website/.env
+        run: |
-                  cat website/.env
+          npm run build --prefix website
 
-            - name: Build website
+      - name: Upload Artifacts
-              env:
+        uses: actions/upload-pages-artifact@v3
-                  BASE_PATH: ''
+        with:
-              run: |
+          path: 'website/build/'
-                  npm run build --prefix website
 
-            - name: Upload Artifacts
+  deploy:
-              uses: actions/upload-pages-artifact@v4
+    needs: build_site
-              with:
+    runs-on: ubuntu-latest
-                  path: 'website/build/'
 
-    deploy:
+    permissions:
-        needs: build_site
+      pages: write
-        runs-on: ubuntu-latest
+      id-token: write
 
-        permissions:
+    environment:
-            pages: write
+      name: github-pages
-            id-token: write
+      url: ${{ steps.deployment.outputs.page_url }}
 
-        environment:
+    steps:
-            name: github-pages
+    - name: Deploy
-            url: ${{ steps.deployment.outputs.page_url }}
+      id: deployment
-
+      uses: actions/deploy-pages@v4
-        steps:
-            - name: Deploy
-              id: deployment
-              uses: actions/deploy-pages@v4

.prettierignore

@@ -1,3 +1,6 @@
-website/src/lib/components/ui
+# Ignore files for PNPM, NPM and YARN
-website/src/lib/docs/**/*.mdx
+pnpm-lock.yaml
-**/*.webmanifest
+package-lock.json
+yarn.lock
+src/lib/components/ui
+*.mdx

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2026 gpx.studio
+Copyright (c) 2024 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

gpx/package.json

@@ -25,7 +25,7 @@
     "scripts": {
         "build": "tsc",
         "postinstall": "npm run build",
-        "lint": "prettier --check . --config ../.prettierrc && eslint .",
+        "lint": "prettier --check . && eslint .",
-        "format": "prettier --write . --config ../.prettierrc"
+        "format": "prettier --write ."
     }
 }

gpx/src/gpx.ts

@@ -1,5 +1,4 @@
 import { ramerDouglasPeucker } from './simplify';
-import { GPXStatistics, GPXStatisticsGroup, TrackPointLocalStatistics } from './statistics';
 import {
     Coordinates,
     GPXFileAttributes,
@@ -18,9 +17,6 @@ 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;
     }
@@ -37,6 +33,7 @@ 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[];
 
@@ -76,6 +73,14 @@ 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());
     }
@@ -140,9 +145,7 @@ export class GPXFile extends GPXTreeNode<Track> {
                     },
                 },
             };
-            this.wpt = gpx.wpt
+            this.wpt = gpx.wpt ? gpx.wpt.map((waypoint) => new Waypoint(waypoint)) : [];
-                ? 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)));
@@ -180,6 +183,9 @@ export class GPXFile extends GPXTreeNode<Track> {
                 segment._data['segmentIndex'] = segmentIndex;
             });
         });
+        this.wpt.forEach((waypoint, waypointIndex) => {
+            waypoint._data['index'] = waypointIndex;
+        });
     }
 
     get children(): Array<Track> {
@@ -200,16 +206,8 @@ 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 {
-        const style = this.trk
+        return this.trk
             .map((track) => track.getStyle())
             .reduce(
                 (acc, style) => {
@@ -219,6 +217,8 @@ 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,10 +242,6 @@ export class GPXFile extends GPXTreeNode<Track> {
                     width: [],
                 }
             );
-        if (style.color.length === 0 && defaultColor) {
-            style.color.push(defaultColor);
-        }
-        return style;
     }
 
     clone(): GPXFile {
@@ -808,7 +804,7 @@ export class TrackSegment extends GPXTreeLeaf {
     constructor(segment?: (TrackSegmentType & { _data?: any }) | TrackSegment) {
         super();
         if (segment) {
-            this.trkpt = segment.trkpt.map((point, index) => new TrackPoint(point, index));
+            this.trkpt = segment.trkpt.map((point) => new TrackPoint(point));
             if (segment.hasOwnProperty('_data')) {
                 this._data = segment._data;
             }
@@ -820,12 +816,15 @@ export class TrackSegment extends GPXTreeLeaf {
     _computeStatistics(): GPXStatistics {
         let statistics = new GPXStatistics();
 
-        statistics.global.length = this.trkpt.length;
+        statistics.local.points = this.trkpt.map((point) => point);
-        statistics.local.points = this.trkpt.slice(0);
+
-        statistics.local.data = this.trkpt.map(() => new TrackPointLocalStatistics());
+        statistics.local.elevation.smoothed = this._computeSmoothedElevation();
+        statistics.local.slope.at = this._computeSlope();
 
         const points = this.trkpt;
         for (let i = 0; i < points.length; i++) {
+            points[i]._data['index'] = i;
+
             // distance
             let dist = 0;
             if (i > 0) {
@@ -834,18 +833,34 @@ export class TrackSegment extends GPXTreeLeaf {
                 statistics.global.distance.total += dist;
             }
 
-            statistics.local.data[i].distance.total = statistics.global.distance.total;
+            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);
 
             // time
             if (points[i].time === undefined) {
-                statistics.local.data[i].time.total = 0;
+                statistics.local.time.total.push(0);
             } else {
                 if (statistics.global.time.start === undefined) {
                     statistics.global.time.start = points[i].time;
                 }
                 statistics.global.time.end = points[i].time;
-                statistics.local.data[i].time.total =
+                statistics.local.time.total.push(
-                    (points[i].time.getTime() - statistics.global.time.start.getTime()) / 1000;
+                    (points[i].time.getTime() - statistics.global.time.start.getTime()) / 1000
+                );
             }
 
             // speed
@@ -860,8 +875,8 @@ export class TrackSegment extends GPXTreeLeaf {
                 }
             }
 
-            statistics.local.data[i].distance.moving = statistics.global.distance.moving;
+            statistics.local.distance.moving.push(statistics.global.distance.moving);
-            statistics.local.data[i].time.moving = statistics.global.time.moving;
+            statistics.local.time.moving.push(statistics.global.time.moving);
 
             // bounds
             statistics.global.bounds.southWest.lat = Math.min(
@@ -945,7 +960,8 @@ export class TrackSegment extends GPXTreeLeaf {
             }
         }
 
-        this._elevationComputation(statistics);
+        [statistics.local.slope.segment, statistics.local.slope.length] =
+            this._computeSlopeSegments(statistics);
 
         statistics.global.time.total =
             statistics.global.time.start && statistics.global.time.end
@@ -961,115 +977,73 @@ export class TrackSegment extends GPXTreeLeaf {
                 ? statistics.global.distance.moving / (statistics.global.time.moving / 3600)
                 : 0;
 
-        timeWindowSmoothing(
+        statistics.local.speed = distanceWindowSmoothingWithDistanceAccumulator(
             points,
-            10000,
+            200,
-            (start, end) =>
+            (accumulated, start, end) =>
                 points[start].time && points[end].time
-                    ? (3600 *
+                    ? (3600 * accumulated) /
-                          (statistics.local.data[end].distance.total -
+                      (points[end].time.getTime() - points[start].time.getTime())
-                              statistics.local.data[start].distance.total)) /
+                    : undefined
-                      Math.max(
-                          (points[end].time.getTime() - points[start].time.getTime()) / 1000,
-                          1
-                      )
-                    : undefined,
-            (value, index) => {
-                statistics.local.data[index].speed = value;
-            }
         );
 
         return statistics;
     }
 
-    _elevationComputation(statistics: GPXStatistics) {
+    _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[]] {
         let simplified = ramerDouglasPeucker(
             this.trkpt,
             20,
             getElevationDistanceFunction(statistics)
         );
 
-        for (let i = 0; i < simplified.length - 1; i++) {
+        let slope = [];
-            let start = simplified[i].point._data.index;
+        let length = [];
-            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.data[end].distance.total -
+                statistics.local.distance.total[end] - statistics.local.distance.total[start];
-                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++) {
-                statistics.local.data[j].slope.segment = (0.1 * ele) / dist;
+                slope.push((0.1 * ele) / dist);
-                statistics.local.data[j].slope.length = dist;
+                length.push(dist);
             }
         }
 
-        distanceWindowSmoothing(
+        return [slope, length];
-            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 {
@@ -1316,8 +1290,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 statistics = og._computeStatistics();
+        let slope = og._computeSlope();
-        let trkpt = withArtificialTimestamps(og.trkpt, totalTime, lastPoint, startTime, statistics);
+        let trkpt = withArtificialTimestamps(og.trkpt, totalTime, lastPoint, startTime, slope);
         this.trkpt = freeze(trkpt); // Pre-freeze the array, faster as well
     }
 
@@ -1326,7 +1300,6 @@ export class TrackSegment extends GPXTreeLeaf {
     }
 }
 
-const emptyExtensions: Record<string, string> = {};
 export class TrackPoint {
     [immerable] = true;
 
@@ -1337,7 +1310,7 @@ export class TrackPoint {
 
     _data: { [key: string]: any } = {};
 
-    constructor(point: (TrackPointType & { _data?: any }) | TrackPoint, index?: number) {
+    constructor(point: (TrackPointType & { _data?: any }) | TrackPoint) {
         this.attributes = point.attributes;
         this.ele = point.ele;
         this.time = point.time;
@@ -1345,9 +1318,6 @@ export class TrackPoint {
         if (point.hasOwnProperty('_data')) {
             this._data = point._data;
         }
-        if (index !== undefined) {
-            this._data.index = index;
-        }
     }
 
     getCoordinates(): Coordinates {
@@ -1421,7 +1391,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 {
@@ -1491,18 +1461,11 @@ export class TrackPoint {
 
     clone(): TrackPoint {
         return new TrackPoint({
-            attributes: {
+            attributes: cloneJSON(this.attributes),
-                lat: this.attributes.lat,
-                lon: this.attributes.lon,
-            },
             ele: this.ele,
             time: this.time ? new Date(this.time.getTime()) : undefined,
-            extensions: this.extensions ? cloneJSON(this.extensions) : undefined,
+            extensions: cloneJSON(this.extensions),
-            _data: {
+            _data: cloneJSON(this._data),
-                index: this._data?.index,
-                anchor: this._data?.anchor,
-                zoom: this._data?.zoom,
-            },
         });
     }
 }
@@ -1521,28 +1484,19 @@ export class Waypoint {
     type?: string;
     _data: { [key: string]: any } = {};
 
-    constructor(waypoint: (WaypointType & { _data?: any }) | Waypoint, index?: number) {
+    constructor(waypoint: (WaypointType & { _data?: any }) | Waypoint) {
         this.attributes = waypoint.attributes;
         this.ele = waypoint.ele;
         this.time = waypoint.time;
-        this.name = waypoint.name === '' ? undefined : waypoint.name;
+        this.name = waypoint.name;
-        this.cmt = waypoint.cmt === '' ? undefined : waypoint.cmt;
+        this.cmt = waypoint.cmt;
-        this.desc = waypoint.desc === '' ? undefined : waypoint.desc;
+        this.desc = waypoint.desc;
-        this.link =
+        this.link = waypoint.link;
-            !waypoint.link ||
+        this.sym = waypoint.sym;
-            !waypoint.link.attributes ||
+        this.type = waypoint.type;
-            !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 {
@@ -1590,10 +1544,7 @@ export class Waypoint {
 
     clone(): Waypoint {
         return new Waypoint({
-            attributes: {
+            attributes: cloneJSON(this.attributes),
-                lat: this.attributes.lat,
-                lon: this.attributes.lon,
-            },
             ele: this.ele,
             time: this.time ? new Date(this.time.getTime()) : undefined,
             name: this.name,
@@ -1642,6 +1593,310 @@ 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,
@@ -1656,15 +1911,11 @@ 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(dLat / 2) * Math.sin(dLat / 2) +
+        Math.sin(lat1) * Math.sin(lat2) +
-        Math.cos(lat1) * Math.cos(lat2) * Math.sin(dLon / 2) * Math.sin(dLon / 2);
+        Math.cos(lat1) * Math.cos(lat2) * Math.cos((coord2.lon - coord1.lon) * rad);
-    const c = 2 * Math.asin(Math.sqrt(Math.min(a, 1)));
+    const maxMeters = earthRadius * Math.acos(Math.min(a, 1));
-    return earthRadius * c;
+    return maxMeters;
 }
 
 export function getElevationDistanceFunction(statistics: GPXStatistics) {
@@ -1675,9 +1926,9 @@ export function getElevationDistanceFunction(statistics: GPXStatistics) {
         if (point1.ele === undefined || point2.ele === undefined || point3.ele === undefined) {
             return 0;
         }
-        let x1 = statistics.local.data[point1._data.index].distance.total * 1000;
+        let x1 = statistics.local.distance.total[point1._data.index] * 1000;
-        let x2 = statistics.local.data[point2._data.index].distance.total * 1000;
+        let x2 = statistics.local.distance.total[point2._data.index] * 1000;
-        let x3 = statistics.local.data[point3._data.index].distance.total * 1000;
+        let x3 = statistics.local.distance.total[point3._data.index] * 1000;
         let y1 = point1.ele;
         let y2 = point2.ele;
         let y3 = point3.ele;
@@ -1691,61 +1942,57 @@ export function getElevationDistanceFunction(statistics: GPXStatistics) {
     };
 }
 
-function windowSmoothing(
+function distanceWindowSmoothing(
-    left: number,
+    points: TrackPoint[],
-    right: number,
+    distanceWindow: number,
-    distance: (index1: number, index2: number) => number,
+    accumulate: (index: number) => number,
-    window: number,
+    compute: (accumulated: number, start: number, end: number) => number,
-    compute: (start: number, end: number) => number,
+    remove?: (index: number) => number
-    callback: (value: number, index: number) => void
+): number[] {
-): void {
+    let result = [];
-    let start = left;
+
-    for (var i = left; i < right; i++) {
+    let start = 0,
-        while (start + 1 < i && distance(start, i) > window) {
+        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);
+            }
             start++;
         }
-        let end = Math.min(i + 2, right);
+        while (
-        while (end < right && distance(i, end) <= window) {
+            end < points.length &&
+            distance(points[i].getCoordinates(), points[end].getCoordinates()) <= distanceWindow
+        ) {
+            accumulated += accumulate(end);
             end++;
         }
-        callback(compute(start, end - 1), i);
+        result[i] = compute(accumulated, start, end - 1);
     }
+
+    return result;
 }
 
-function distanceWindowSmoothing(
+function distanceWindowSmoothingWithDistanceAccumulator(
-    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,
-        callback
-    );
-}
-
-function timeWindowSmoothing(
     points: TrackPoint[],
-    window: number,
+    distanceWindow: number,
-    compute: (start: number, end: number) => number,
+    compute: (accumulated: number, start: number, end: number) => number
-    callback: (value: number, index: number) => void
+): number[] {
-): void {
+    return distanceWindowSmoothing(
-    windowSmoothing(
+        points,
-        0,
+        distanceWindow,
-        points.length,
+        (index) =>
-        (index1, index2) =>
+            index > 0
-            points[index2].time?.getTime() - points[index1].time?.getTime() || 2 * window,
+                ? distance(points[index - 1].getCoordinates(), points[index].getCoordinates())
-        window,
+                : 0,
         compute,
-        callback
+        (index) => distance(points[index].getCoordinates(), points[index + 1].getCoordinates())
     );
 }
 
@@ -1797,14 +2044,14 @@ function withArtificialTimestamps(
     totalTime: number,
     lastPoint: TrackPoint | undefined,
     startTime: Date,
-    statistics: GPXStatistics
+    slope: number[]
 ): 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 * statistics.local.data[i].slope.at)));
+        let w = dist * (0.5 + 1 / (1 + Math.exp(-0.2 * slope[i])));
         weight.push(w);
         totalWeight += w;
     }

gpx/src/index.ts

@@ -1,5 +1,4 @@
 export * from './gpx';
-export * from './statistics';
 export { Coordinates, LineStyleExtension, WaypointType } from './types';
 export { parseGPX, buildGPX } from './io';
 export * from './simplify';

gpx/src/simplify.ts

@@ -3,6 +3,8 @@ import { Coordinates } from './types';
 
 export type SimplifiedTrackPoint = { point: TrackPoint; distance?: number };
 
+const earthRadius = 6371008.8;
+
 export function ramerDouglasPeucker(
     points: TrackPoint[],
     epsilon: number = 50,
@@ -59,56 +61,76 @@ function ramerDouglasPeuckerRecursive(
 }
 
 export function crossarcDistance(
-    point1: TrackPoint | Coordinates,
+    point1: TrackPoint,
-    point2: TrackPoint | Coordinates,
+    point2: TrackPoint,
     point3: TrackPoint | Coordinates
 ): number {
     return crossarc(
-        point1 instanceof TrackPoint ? point1.getCoordinates() : point1,
+        point1.getCoordinates(),
-        point2 instanceof TrackPoint ? point2.getCoordinates() : point2,
+        point2.getCoordinates(),
         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 perpendicular distance in meters
+    // Calculates the shortest distance in meters
-    // between a line segment (defined by p1 and p2) and a third point, p3.
+    // between an arc (defined by p1 and p2) and a third point, p3.
-    // Uses simple planar geometry (ignores earth curvature).
+    // Input lat1,lon1,lat2,lon2,lat3,lon3 in degrees.
 
-    // Convert to meters using approximate scaling
+    const rad = Math.PI / 180;
-    const metersPerLongitudeDegree = getMetersPerLongitudeDegree(coord1.lat);
+    const lat1 = coord1.lat * rad;
+    const lat2 = coord2.lat * rad;
+    const lat3 = coord3.lat * rad;
 
-    const x1 = coord1.lon * metersPerLongitudeDegree;
+    const lon1 = coord1.lon * rad;
-    const y1 = coord1.lat * metersPerLatitudeDegree;
+    const lon2 = coord2.lon * rad;
-    const x2 = coord2.lon * metersPerLongitudeDegree;
+    const lon3 = coord3.lon * rad;
-    const y2 = coord2.lat * metersPerLatitudeDegree;
-    const x3 = coord3.lon * metersPerLongitudeDegree;
-    const y3 = coord3.lat * metersPerLatitudeDegree;
 
-    const dx = x2 - x1;
+    // Prerequisites for the formulas
-    const dy = y2 - y1;
+    const bear12 = bearing(lat1, lon1, lat2, lon2);
-    const segmentLengthSquared = dx * dx + dy * dy;
+    const bear13 = bearing(lat1, lon1, lat3, lon3);
+    let dis13 = distance(lat1, lon1, lat3, lon3);
 
-    if (segmentLengthSquared === 0) {
+    let diff = Math.abs(bear13 - bear12);
-        // p1 and p2 are the same point
+    if (diff > Math.PI) {
-        return Math.sqrt((x3 - x1) * (x3 - x1) + (y3 - y1) * (y3 - y1));
+        diff = 2 * Math.PI - diff;
     }
 
-    // Project p3 onto the line defined by p1-p2
+    // Is relative bearing obtuse?
-    const t = Math.max(0, Math.min(1, ((x3 - x1) * dx + (y3 - y1) * dy) / segmentLengthSquared));
+    if (diff > Math.PI / 2) {
+        return dis13;
+    }
 
-    // Find the closest point on the segment
+    // Find the cross-track distance.
-    const projX = x1 + t * dx;
+    let dxt = Math.asin(Math.sin(dis13 / earthRadius) * Math.sin(bear13 - bear12)) * earthRadius;
-    const projY = y1 + t * dy;
 
-    // Return distance from p3 to the projected point
+    // Is p4 beyond the arc?
-    return Math.sqrt((x3 - projX) * (x3 - projX) + (y3 - projY) * (y3 - projY));
+    let dis12 = distance(lat1, lon1, lat2, lon2);
+    let dis14 =
+        Math.acos(Math.cos(dis13 / earthRadius) / Math.cos(dxt / earthRadius)) * earthRadius;
+    if (dis14 > dis12) {
+        return distance(lat2, lon2, lat3, lon3);
+    } else {
+        return Math.abs(dxt);
+    }
+}
+
+function distance(latA: number, lonA: number, latB: number, lonB: number): number {
+    // Finds the distance between two lat / lon points.
+    return (
+        Math.acos(
+            Math.sin(latA) * Math.sin(latB) +
+                Math.cos(latA) * Math.cos(latB) * Math.cos(lonB - lonA)
+        ) * earthRadius
+    );
+}
+
+function bearing(latA: number, lonA: number, latB: number, lonB: number): number {
+    // Finds the bearing from one lat / lon point to another.
+    return Math.atan2(
+        Math.sin(lonB - lonA) * Math.cos(latB),
+        Math.cos(latA) * Math.sin(latB) - Math.sin(latA) * Math.cos(latB) * Math.cos(lonB - lonA)
+    );
 }
 
 export function projectedPoint(
@@ -124,39 +146,56 @@ export function projectedPoint(
 }
 
 function projected(coord1: Coordinates, coord2: Coordinates, coord3: Coordinates): Coordinates {
-    // Calculates the point on the line segment defined by p1 and p2
+    // Calculates the point on the line defined by p1 and p2
     // that is closest to the third point, p3.
-    // Uses simple planar geometry (ignores earth curvature).
+    // Input lat1,lon1,lat2,lon2,lat3,lon3 in degrees.
 
-    // Convert to meters using approximate scaling
+    const rad = Math.PI / 180;
-    const metersPerLongitudeDegree = getMetersPerLongitudeDegree(coord1.lat);
+    const lat1 = coord1.lat * rad;
+    const lat2 = coord2.lat * rad;
+    const lat3 = coord3.lat * rad;
 
-    const x1 = coord1.lon * metersPerLongitudeDegree;
+    const lon1 = coord1.lon * rad;
-    const y1 = coord1.lat * metersPerLatitudeDegree;
+    const lon2 = coord2.lon * rad;
-    const x2 = coord2.lon * metersPerLongitudeDegree;
+    const lon3 = coord3.lon * rad;
-    const y2 = coord2.lat * metersPerLatitudeDegree;
-    const x3 = coord3.lon * metersPerLongitudeDegree;
-    const y3 = coord3.lat * metersPerLatitudeDegree;
 
-    const dx = x2 - x1;
+    // Prerequisites for the formulas
-    const dy = y2 - y1;
+    const bear12 = bearing(lat1, lon1, lat2, lon2);
-    const segmentLengthSquared = dx * dx + dy * dy;
+    const bear13 = bearing(lat1, lon1, lat3, lon3);
+    let dis13 = distance(lat1, lon1, lat3, lon3);
 
-    if (segmentLengthSquared === 0) {
+    let diff = Math.abs(bear13 - bear12);
-        // p1 and p2 are the same point
+    if (diff > Math.PI) {
+        diff = 2 * Math.PI - diff;
+    }
+
+    // Is relative bearing obtuse?
+    if (diff > Math.PI / 2) {
         return coord1;
     }
 
-    // Project p3 onto the line defined by p1-p2
+    // Find the cross-track distance.
-    const t = Math.max(0, Math.min(1, ((x3 - x1) * dx + (y3 - y1) * dy) / segmentLengthSquared));
+    let dxt = Math.asin(Math.sin(dis13 / earthRadius) * Math.sin(bear13 - bear12)) * earthRadius;
 
-    // Find the closest point on the segment
+    // Is p4 beyond the arc?
-    const projX = x1 + t * dx;
+    let dis12 = distance(lat1, lon1, lat2, lon2);
-    const projY = y1 + t * dy;
+    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)
+            );
 
-    // Convert back to degrees
+        return { lat: lat4 / rad, lon: lon4 / rad };
-    return {
+    }
-        lat: projY / metersPerLatitudeDegree,
-        lon: projX / metersPerLongitudeDegree,
-    };
 }

gpx/src/statistics.ts

@@ -1,391 +0,0 @@
-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
-                )
-            );
-        }
-    }
-}

package-lock.json

@@ -0,0 +1,6 @@
+{
+  "name": "gpx.studio",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {}
+}

website/components.json

@@ -1,17 +1,17 @@
 {
-    "$schema": "https://shadcn-svelte.com/schema.json",
+	"$schema": "https://shadcn-svelte.com/schema.json",
-    "style": "default",
+	"style": "default",
-    "tailwind": {
+	"tailwind": {
-        "css": "src/app.css",
+		"css": "src/app.css",
-        "baseColor": "slate"
+		"baseColor": "slate"
-    },
+	},
-    "aliases": {
+	"aliases": {
-        "components": "$lib/components",
+		"components": "$lib/components",
-        "utils": "$lib/utils",
+		"utils": "$lib/utils",
-        "ui": "$lib/components/ui",
+		"ui": "$lib/components/ui",
-        "hooks": "$lib/hooks",
+		"hooks": "$lib/hooks",
-        "lib": "$lib"
+		"lib": "$lib"
-    },
+	},
-    "typescript": true,
+	"typescript": true,
-    "registry": "https://shadcn-svelte.com/registry"
+	"registry": "https://shadcn-svelte.com/registry"
 }

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.5.1",
+                "chart.js": "^4.4.9",
                 "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.17.0",
+                "mapbox-gl": "^3.12.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.14.4",
+                "bits-ui": "^2.12.0",
                 "eslint": "^9.28.0",
                 "eslint-config-prettier": "^10.1.5",
                 "eslint-plugin-svelte": "^3.9.1",
@@ -1701,10 +1701,9 @@
             }
         },
         "node_modules/@mapbox/point-geometry": {
-            "version": "1.1.0",
+            "version": "0.1.0",
-            "resolved": "https://registry.npmjs.org/@mapbox/point-geometry/-/point-geometry-1.1.0.tgz",
+            "resolved": "https://registry.npmjs.org/@mapbox/point-geometry/-/point-geometry-0.1.0.tgz",
-            "integrity": "sha512-YGcBz1cg4ATXDCM/71L9xveh4dynfGmcLDqufR+nQQy3fKwsAZsWd/x4621/6uJaeB9mwOHE6hPeDgXz9uViUQ==",
+            "integrity": "sha512-6j56HdLTwWGO0fJPlrZtdU/B13q8Uwmo18Ck2GnGgN9PCFyKTZ3UbXeEdRFh18i9XQ92eH2VdtpJHpBD3aripQ=="
-            "license": "ISC"
         },
         "node_modules/@mapbox/polyline": {
             "version": "1.2.1",
@@ -1739,26 +1738,11 @@
             "integrity": "sha512-nMkuDXFv60aBr9soUG5q+GvZYL+2KZHVvsqFCzqnkGEf46U2fvmytHaEVc1/YZbiLn8X+eR3QzX1+dwDO1lxlw=="
         },
         "node_modules/@mapbox/vector-tile": {
-            "version": "2.0.4",
+            "version": "1.3.1",
-            "resolved": "https://registry.npmjs.org/@mapbox/vector-tile/-/vector-tile-2.0.4.tgz",
+            "resolved": "https://registry.npmjs.org/@mapbox/vector-tile/-/vector-tile-1.3.1.tgz",
-            "integrity": "sha512-AkOLcbgGTdXScosBWwmmD7cDlvOjkg/DetGva26pIRiZPdeJYjYKarIlb4uxVzi6bwHO6EWH82eZ5Nuv4T5DUg==",
+            "integrity": "sha512-MCEddb8u44/xfQ3oD+Srl/tNcQoqTw3goGk2oLsrFxOTc3dUp+kAnby3PvAeeBYSMSjSPD1nd1AJA6W49WnoUw==",
-            "license": "BSD-3-Clause",
             "dependencies": {
-                "@mapbox/point-geometry": "~1.1.0",
+                "@mapbox/point-geometry": "~0.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": {
@@ -2660,8 +2644,7 @@
         "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",
@@ -2677,6 +2660,16 @@
                 "@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",
@@ -3241,9 +3234,9 @@
             ]
         },
         "node_modules/bits-ui": {
-            "version": "2.14.4",
+            "version": "2.12.0",
-            "resolved": "https://registry.npmjs.org/bits-ui/-/bits-ui-2.14.4.tgz",
+            "resolved": "https://registry.npmjs.org/bits-ui/-/bits-ui-2.12.0.tgz",
-            "integrity": "sha512-W6kenhnbd/YVvur+DKkaVJ6GldE53eLewur5AhUCqslYQ0vjZr8eWlOfwZnMiPB+PF5HMVqf61vXBvmyrAmPWg==",
+            "integrity": "sha512-8NF4ILNyAJlIxDXpl/akGXGBV5QmZAe+8gTfPttM5P6/+LrijumcSfFXY5cr4QkXwTmLA7H5stYpbgJf2XFJvg==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
@@ -3664,9 +3657,9 @@
             }
         },
         "node_modules/chart.js": {
-            "version": "4.5.1",
+            "version": "4.4.9",
-            "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.5.1.tgz",
+            "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.4.9.tgz",
-            "integrity": "sha512-GIjfiT9dbmHRiYi6Nl2yFCq7kkwdkp1W/lp2J99rX0yo9tgJGn3lKQATztIjb5tVtevcBtIdICNWqlq5+E8/Pw==",
+            "integrity": "sha512-EyZ9wWKgpAU0fLJ43YAEIF8sr5F2W3LqbS40ZJyHIner2lY14ufqv2VMp69MAiZ2rpwxEUxEhIH/0U3xyRynxg==",
             "license": "MIT",
             "dependencies": {
                 "@kurkle/color": "^0.3.0"
@@ -4954,10 +4947,9 @@
             }
         },
         "node_modules/gl-matrix": {
-            "version": "3.4.4",
+            "version": "3.4.3",
-            "resolved": "https://registry.npmjs.org/gl-matrix/-/gl-matrix-3.4.4.tgz",
+            "resolved": "https://registry.npmjs.org/gl-matrix/-/gl-matrix-3.4.3.tgz",
-            "integrity": "sha512-latSnyDNt/8zYUB6VIJ6PCh2jBjJX6gnDsoCZ7LyW7GkqrD51EWwa9qCoGixj8YqBtETQK/xY7OmpTF8xz1DdQ==",
+            "integrity": "sha512-wcCp8vu8FT22BnvKVPjXa/ICBWRq/zjFfdofZy1WSpQZpphblv12/bOQLBC1rMM7SGOFS9ltVmKOHil5+Ml7gA=="
-            "license": "MIT"
         },
         "node_modules/glob": {
             "version": "11.0.2",
@@ -6069,55 +6061,44 @@
             }
         },
         "node_modules/mapbox-gl": {
-            "version": "3.17.0",
+            "version": "3.12.0",
-            "resolved": "https://registry.npmjs.org/mapbox-gl/-/mapbox-gl-3.17.0.tgz",
+            "resolved": "https://registry.npmjs.org/mapbox-gl/-/mapbox-gl-3.12.0.tgz",
-            "integrity": "sha512-nCrDKRlr5di6xUksUDslNWwxroJ5yv1hT8pyVFtcpWJOOKsYQxF/wOFTMie8oxMnXeFkrz1Tl1TwA1XN1yX0KA==",
+            "integrity": "sha512-DV6TRr+xoPrLSKuGiUcbyLVkoLdNaNNpn6O7+ZC27yQH7BOOIF7l6JKbTCMhfMJuZBVJfL8YRJjlMJ6MZCTggA==",
             "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": "^1.1.0",
+                "@mapbox/point-geometry": "^0.1.0",
                 "@mapbox/tiny-sdf": "^2.0.6",
                 "@mapbox/unitbezier": "^0.0.1",
-                "@mapbox/vector-tile": "^2.0.4",
+                "@mapbox/vector-tile": "^1.3.1",
                 "@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.4",
+                "gl-matrix": "^3.4.3",
                 "grid-index": "^1.1.0",
                 "kdbush": "^4.0.2",
                 "martinez-polygon-clipping": "^0.7.4",
                 "murmurhash-js": "^1.0.0",
-                "pbf": "^4.0.1",
+                "pbf": "^3.2.1",
                 "potpack": "^2.0.0",
                 "quickselect": "^3.0.0",
+                "serialize-to-js": "^3.1.2",
                 "supercluster": "^8.0.1",
-                "tinyqueue": "^3.0.0"
+                "tinyqueue": "^3.0.0",
-            }
+                "vt-pbf": "^3.1.3"
-        },
-        "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": {
@@ -7635,6 +7616,14 @@
                 "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",
@@ -9032,6 +9021,16 @@
             "integrity": "sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ==",
             "dev": true
         },
+        "node_modules/vt-pbf": {
+            "version": "3.1.3",
+            "resolved": "https://registry.npmjs.org/vt-pbf/-/vt-pbf-3.1.3.tgz",
+            "integrity": "sha512-2LzDFzt0mZKZ9IpVF2r69G9bXaP2Q2sArJCmcCgvfTdCCZzSyz4aCLoQyUilu37Ll56tCblIZrXFIjNUpGIlmA==",
+            "dependencies": {
+                "@mapbox/point-geometry": "0.1.0",
+                "@mapbox/vector-tile": "^1.3.1",
+                "pbf": "^3.2.1"
+            }
+        },
         "node_modules/which": {
             "version": "2.0.2",
             "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",

website/package.json

@@ -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 . --config ../.prettierrc --ignore-path ../.prettierignore --ignore-path ./.gitignore && eslint .",
+        "lint": "prettier --check . && eslint .",
-        "format": "prettier --write . --config ../.prettierrc --ignore-path ../.prettierignore --ignore-path ./.gitignore"
+        "format": "prettier --write ."
     },
     "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.14.4",
+        "bits-ui": "^2.12.0",
         "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.5.1",
+        "chart.js": "^4.4.9",
         "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.17.0",
+        "mapbox-gl": "^3.12.0",
         "mapillary-js": "^4.1.2",
         "png.js": "^0.2.1",
         "sanitize-html": "^2.17.0",

website/src/app.css

@@ -1,126 +1,124 @@
-@import 'tailwindcss';
+@import "tailwindcss";
-@import 'tw-animate-css';
+@import "tw-animate-css";
-
+ 
 @custom-variant dark (&:is(.dark *));
-
+ 
 :root {
-    --background: hsl(0 0% 100%) /* <- Wrap in HSL */;
+ --background: hsl(0 0% 100%) /* <- Wrap in HSL */;
-    --foreground: hsl(240 10% 3.9%);
+ --foreground: hsl(240 10% 3.9%);
-    --muted: hsl(240 4.8% 95.9%);
+ --muted: hsl(240 4.8% 95.9%);
-    --muted-foreground: hsl(240 3.8% 46.1%);
+ --muted-foreground: hsl(240 3.8% 46.1%);
-    --popover: hsl(0 0% 100%);
+ --popover: hsl(0 0% 100%);
-    --popover-foreground: hsl(240 10% 3.9%);
+ --popover-foreground: hsl(240 10% 3.9%);
-    --card: hsl(0 0% 100%);
+ --card: hsl(0 0% 100%);
-    --card-foreground: hsl(240 10% 3.9%);
+ --card-foreground: hsl(240 10% 3.9%);
-    --border: hsl(240 5.9% 90%);
+ --border: hsl(240 5.9% 90%);
-    --input: hsl(240 5.9% 90%);
+ --input: hsl(240 5.9% 90%);
-    --primary: hsl(240 5.9% 10%);
+ --primary: hsl(240 5.9% 10%);
-    --primary-foreground: hsl(0 0% 98%);
+ --primary-foreground: hsl(0 0% 98%);
-    --secondary: hsl(240 4.8% 95.9%);
+ --secondary: hsl(240 4.8% 95.9%);
-    --secondary-foreground: hsl(240 5.9% 10%);
+ --secondary-foreground: hsl(240 5.9% 10%);
-    --accent: hsl(240 4.8% 95.9%);
+ --accent: hsl(240 4.8% 95.9%);
-    --accent-foreground: hsl(240 5.9% 10%);
+ --accent-foreground: hsl(240 5.9% 10%);
-    --destructive: hsl(0 72.2% 50.6%);
+ --destructive: hsl(0 72.2% 50.6%);
-    --destructive-foreground: hsl(0 0% 98%);
+ --destructive-foreground: hsl(0 0% 98%);
-    --ring: hsl(240 10% 3.9%);
+ --ring: hsl(240 10% 3.9%);
-    --sidebar: hsl(0 0% 98%);
+ --sidebar: hsl(0 0% 98%);
-    --sidebar-foreground: hsl(240 5.3% 26.1%);
+ --sidebar-foreground: hsl(240 5.3% 26.1%);
-    --sidebar-primary: hsl(240 5.9% 10%);
+ --sidebar-primary: hsl(240 5.9% 10%);
-    --sidebar-primary-foreground: hsl(0 0% 98%);
+ --sidebar-primary-foreground: hsl(0 0% 98%);
-    --sidebar-accent: hsl(240 4.8% 95.9%);
+ --sidebar-accent: hsl(240 4.8% 95.9%);
-    --sidebar-accent-foreground: hsl(240 5.9% 10%);
+ --sidebar-accent-foreground: hsl(240 5.9% 10%);
-    --sidebar-border: hsl(220 13% 91%);
+ --sidebar-border: hsl(220 13% 91%);
-    --sidebar-ring: hsl(217.2 91.2% 59.8%);
+ --sidebar-ring: hsl(217.2 91.2% 59.8%);
 
-    --support: rgb(220 15 130);
+ --support: rgb(220 15 130);
-    --link: rgb(0 110 180);
+ --link: rgb(0 110 180);
-    --selection: hsl(240 4.8% 93%);
+ 
-
+ --radius: 0.5rem;
-    --radius: 0.5rem;
 }
-
+ 
 .dark {
-    --background: hsl(240 10% 3.9%);
+ --background: hsl(240 10% 3.9%);
-    --foreground: hsl(0 0% 98%);
+ --foreground: hsl(0 0% 98%);
-    --muted: hsl(240 3.7% 15.9%);
+ --muted: hsl(240 3.7% 15.9%);
-    --muted-foreground: hsl(240 5% 64.9%);
+ --muted-foreground: hsl(240 5% 64.9%);
-    --popover: hsl(240 10% 3.9%);
+ --popover: hsl(240 10% 3.9%);
-    --popover-foreground: hsl(0 0% 98%);
+ --popover-foreground: hsl(0 0% 98%);
-    --card: hsl(240 10% 3.9%);
+ --card: hsl(240 10% 3.9%);
-    --card-foreground: hsl(0 0% 98%);
+ --card-foreground: hsl(0 0% 98%);
-    --border: hsl(240 3.7% 15.9%);
+ --border: hsl(240 3.7% 15.9%);
-    --input: hsl(240 3.7% 15.9%);
+ --input: hsl(240 3.7% 15.9%);
-    --primary: hsl(0 0% 98%);
+ --primary: hsl(0 0% 98%);
-    --primary-foreground: hsl(240 5.9% 10%);
+ --primary-foreground: hsl(240 5.9% 10%);
-    --secondary: hsl(240 3.7% 15.9%);
+ --secondary: hsl(240 3.7% 15.9%);
-    --secondary-foreground: hsl(0 0% 98%);
+ --secondary-foreground: hsl(0 0% 98%);
-    --accent: hsl(240 3.7% 15.9%);
+ --accent: hsl(240 3.7% 15.9%);
-    --accent-foreground: hsl(0 0% 98%);
+ --accent-foreground: hsl(0 0% 98%);
-    --destructive: hsl(0 62.8% 30.6%);
+ --destructive: hsl(0 62.8% 30.6%);
-    --destructive-foreground: hsl(0 0% 98%);
+ --destructive-foreground: hsl(0 0% 98%);
-    --ring: hsl(240 4.9% 83.9%);
+ --ring: hsl(240 4.9% 83.9%);
-    --sidebar: hsl(240 5.9% 10%);
+ --sidebar: hsl(240 5.9% 10%);
-    --sidebar-foreground: hsl(240 4.8% 95.9%);
+ --sidebar-foreground: hsl(240 4.8% 95.9%);
-    --sidebar-primary: hsl(224.3 76.3% 48%);
+ --sidebar-primary: hsl(224.3 76.3% 48%);
-    --sidebar-primary-foreground: hsl(0 0% 100%);
+ --sidebar-primary-foreground: hsl(0 0% 100%);
-    --sidebar-accent: hsl(240 3.7% 15.9%);
+ --sidebar-accent: hsl(240 3.7% 15.9%);
-    --sidebar-accent-foreground: hsl(240 4.8% 95.9%);
+ --sidebar-accent-foreground: hsl(240 4.8% 95.9%);
-    --sidebar-border: hsl(240 3.7% 15.9%);
+ --sidebar-border: hsl(240 3.7% 15.9%);
-    --sidebar-ring: hsl(217.2 91.2% 59.8%);
+ --sidebar-ring: hsl(217.2 91.2% 59.8%);
 
-    --support: rgb(255 110 190);
+ --support: rgb(255 110 190);
-    --link: rgb(80 190 255);
+ --link: rgb(80 190 255);
-    --selection: hsl(240 3.7% 22%);
 }
-
+ 
 @theme inline {
-    /* Radius (for rounded-*) */
+ /* Radius (for rounded-*) */
-    --radius-sm: calc(var(--radius) - 4px);
+ --radius-sm: calc(var(--radius) - 4px);
-    --radius-md: calc(var(--radius) - 2px);
+ --radius-md: calc(var(--radius) - 2px);
-    --radius-lg: var(--radius);
+ --radius-lg: var(--radius);
-    --radius-xl: calc(var(--radius) + 4px);
+ --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);
 
-    /* Colors */
+ --breakpoint-xs: 540px;
-    --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;
+  @apply border-border;
-    }
+ }
-
+ 
-    body {
+ body {
-        @apply bg-background text-foreground;
+  @apply bg-background text-foreground;
-    }
+ }
-}
+}

website/src/hooks.server.js

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

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

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

website/src/lib/assets/layers.ts

@@ -22,7 +22,7 @@ import {
     Binoculars,
     Toilet,
 } from 'lucide-static';
-import { type RasterDEMSourceSpecification, type StyleSpecification } from 'mapbox-gl';
+import { 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/styles/topographic-v2.json?api=d01fbtg0ar23gctac5m0jgyy2ds',
+    linz: 'https://basemaps.linz.govt.nz/v1/tiles/topographic/EPSG:3857/style/topographic.json?api=d01fbtg0ar23gctac5m0jgyy2ds',
     linzTopo: {
         version: 8,
         sources: {
@@ -368,42 +368,6 @@ 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: {
@@ -835,10 +799,8 @@ export const overlayTree: LayerTreeType = {
                 waymarkedTrailsHorseRiding: true,
                 waymarkedTrailsWinter: true,
             },
-            bikerouterGravel: true,
             cyclOSMlite: true,
-            mapterhornHillshade: true,
+            bikerouterGravel: true,
-            openRailwayMap: true,
         },
         countries: {
             france: {
@@ -874,7 +836,6 @@ export const overpassTree: LayerTreeType = {
             shower: true,
             shelter: true,
             barrier: true,
-            cemetery: true,
         },
         tourism: {
             attraction: true,
@@ -921,10 +882,8 @@ export const defaultOverlays: LayerTreeType = {
                 waymarkedTrailsHorseRiding: false,
                 waymarkedTrailsWinter: false,
             },
-            bikerouterGravel: false,
             cyclOSMlite: false,
-            mapterhornHillshade: false,
+            bikerouterGravel: false,
-            openRailwayMap: false,
         },
         countries: {
             france: {
@@ -960,7 +919,6 @@ export const defaultOverpassQueries: LayerTreeType = {
             shower: false,
             shelter: false,
             barrier: false,
-            cemetery: false,
         },
         tourism: {
             attraction: false,
@@ -1058,10 +1016,8 @@ export const defaultOverlayTree: LayerTreeType = {
                 waymarkedTrailsHorseRiding: false,
                 waymarkedTrailsWinter: false,
             },
-            bikerouterGravel: false,
             cyclOSMlite: false,
-            mapterhornHillshade: false,
+            bikerouterGravel: false,
-            openRailwayMap: false,
         },
         countries: {
             france: {
@@ -1097,7 +1053,6 @@ export const defaultOverpassTree: LayerTreeType = {
             shower: false,
             shelter: false,
             barrier: false,
-            cemetery: false,
         },
         tourism: {
             attraction: false,
@@ -1144,7 +1099,9 @@ type OverpassQueryData = {
         svg: string;
         color: string;
     };
-    tags: Record<string, string | string[]> | Record<string, string | string[]>[];
+    tags:
+        | Record<string, string | boolean | string[]>
+        | Record<string, string | boolean | string[]>[];
     symbol?: string;
 };
 
@@ -1225,20 +1182,6 @@ 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,
@@ -1275,25 +1218,7 @@ export const overpassQueryData: Record<string, OverpassQueryData> = {
             color: '#000000',
         },
         tags: {
-            barrier: [
+            barrier: true,
-                '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: {
@@ -1453,18 +1378,3 @@ 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';

website/src/lib/assets/symbols.ts

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

website/src/lib/components/Footer.svelte

@@ -18,7 +18,7 @@
                     href="https://github.com/gpxstudio/gpx.studio/blob/main/LICENSE"
                     target="_blank"
                 >
-                    MIT © 2026 gpx.studio
+                    MIT © 2025 gpx.studio
                 </Button>
                 <LanguageSelect class="w-40 mt-3" />
             </div>
@@ -34,7 +34,6 @@
                         {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')}
@@ -71,6 +70,15 @@
                         <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"

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 { GPXGlobalStatistics, GPXStatisticsGroup } from 'gpx';
+    import type { GPXStatistics } from 'gpx';
     import type { Readable } from 'svelte/store';
     import { settings } from '$lib/logic/settings';
 
@@ -18,14 +18,14 @@
         orientation,
         panelSize,
     }: {
-        gpxStatistics: Readable<GPXStatisticsGroup>;
+        gpxStatistics: Readable<GPXStatistics>;
-        slicedGPXStatistics: Readable<[GPXGlobalStatistics, number, number] | undefined>;
+        slicedGPXStatistics: Readable<[GPXStatistics, number, number] | undefined>;
         orientation: 'horizontal' | 'vertical';
         panelSize: number;
     } = $props();
 
     let statistics = $derived(
-        $slicedGPXStatistics !== undefined ? $slicedGPXStatistics[0] : $gpxStatistics.global
+        $slicedGPXStatistics !== undefined ? $slicedGPXStatistics[0] : $gpxStatistics
     );
 </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.distance.total} type="distance" />
+                <WithUnits value={statistics.global.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.elevation.gain} type="elevation" />
+                <WithUnits value={statistics.global.elevation.gain} type="elevation" />
                 <MoveDownRight size="16" class="mx-1" />
-                <WithUnits value={statistics.elevation.loss} type="elevation" />
+                <WithUnits value={statistics.global.elevation.loss} type="elevation" />
             </span>
         </Tooltip>
         {#if panelSize > 120 || orientation === 'horizontal'}
@@ -64,9 +64,13 @@
             >
                 <span class="flex flex-row items-center">
                     <Zap size="16" class="mr-1" />
-                    <WithUnits value={statistics.speed.moving} type="speed" showUnits={false} />
+                    <WithUnits
+                        value={statistics.global.speed.moving}
+                        type="speed"
+                        showUnits={false}
+                    />
                     <span class="mx-1">/</span>
-                    <WithUnits value={statistics.speed.total} type="speed" />
+                    <WithUnits value={statistics.global.speed.total} type="speed" />
                 </span>
             </Tooltip>
         {/if}
@@ -79,9 +83,9 @@
             >
                 <span class="flex flex-row items-center">
                     <Timer size="16" class="mr-1" />
-                    <WithUnits value={statistics.time.moving} type="time" />
+                    <WithUnits value={statistics.global.time.moving} type="time" />
                     <span class="mx-1">/</span>
-                    <WithUnits value={statistics.time.total} type="time" />
+                    <WithUnits value={statistics.global.time.total} type="time" />
                 </span>
             </Tooltip>
         {/if}

website/src/lib/components/Logo.svelte

@@ -8,7 +8,7 @@
         ...others
     }: {
         iconOnly?: boolean;
-        company?: 'gpx.studio' | 'mapbox' | 'github' | 'crowdin' | 'facebook' | 'reddit';
+        company?: 'gpx.studio' | 'mapbox' | 'github' | 'crowdin' | 'facebook' | 'x' | 'reddit';
         [key: string]: any;
     } = $props();
 </script>
@@ -55,6 +55,16 @@
             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"

website/src/lib/components/Menu.svelte

@@ -538,7 +538,6 @@
         let targetInput =
             e &&
             e.target &&
-            e.target instanceof HTMLElement &&
             (e.target.tagName === 'INPUT' ||
                 e.target.tagName === 'TEXTAREA' ||
                 e.target.tagName === 'SELECT' ||
@@ -645,19 +644,6 @@
         } else if (e.key === 'F5') {
             $routing = !$routing;
             e.preventDefault();
-        } else if (
-            e.key === 'ArrowRight' ||
-            e.key === 'ArrowDown' ||
-            e.key === 'ArrowLeft' ||
-            e.key === 'ArrowUp'
-        ) {
-            if (!targetInput) {
-                selection.updateFromKey(
-                    e.key === 'ArrowRight' || e.key === 'ArrowDown',
-                    e.shiftKey
-                );
-                e.preventDefault();
-            }
         }
     }}
     on:dragover={(e) => e.preventDefault()}

website/src/lib/components/Nav.svelte

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

website/src/lib/components/elevation-profile/ElevationProfile.svelte

@@ -18,7 +18,7 @@
         Construction,
     } from '@lucide/svelte';
     import type { Readable, Writable } from 'svelte/store';
-    import type { GPXGlobalStatistics, GPXStatisticsGroup } from 'gpx';
+    import type { GPXStatistics } 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<GPXStatisticsGroup>;
+        gpxStatistics: Readable<GPXStatistics>;
-        slicedGPXStatistics: Writable<[GPXGlobalStatistics, number, number] | undefined>;
+        slicedGPXStatistics: Writable<[GPXStatistics, number, number] | undefined>;
         additionalDatasets: Writable<string[]>;
         elevationFill: Writable<'slope' | 'surface' | 'highway' | undefined>;
         showControls?: boolean;

website/src/lib/components/elevation-profile/elevation-profile.ts

@@ -14,16 +14,11 @@ import {
     getTemperatureWithUnits,
     getVelocityWithUnits,
 } from '$lib/units';
-import Chart, {
+import Chart from 'chart.js/auto';
-    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 { GPXGlobalStatistics, GPXStatisticsGroup } from 'gpx';
+import type { GPXStatistics } from 'gpx';
 import { mode } from 'mode-watcher';
 import { getHighwayColor, getSlopeColor, getSurfaceColor } from '$lib/assets/colors';
 
@@ -32,20 +27,6 @@ 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;
@@ -54,14 +35,14 @@ export class ElevationProfile {
     private _dragging = false;
     private _panning = false;
 
-    private _gpxStatistics: Readable<GPXStatisticsGroup>;
+    private _gpxStatistics: Readable<GPXStatistics>;
-    private _slicedGPXStatistics: Writable<[GPXGlobalStatistics, number, number] | undefined>;
+    private _slicedGPXStatistics: Writable<[GPXStatistics, number, number] | undefined>;
     private _additionalDatasets: Readable<string[]>;
     private _elevationFill: Readable<'slope' | 'surface' | 'highway' | undefined>;
 
     constructor(
-        gpxStatistics: Readable<GPXStatisticsGroup>,
+        gpxStatistics: Readable<GPXStatistics>,
-        slicedGPXStatistics: Writable<[GPXGlobalStatistics, number, number] | undefined>,
+        slicedGPXStatistics: Writable<[GPXStatistics, number, number] | undefined>,
         additionalDatasets: Readable<string[]>,
         elevationFill: Readable<'slope' | 'surface' | 'highway' | undefined>,
         canvas: HTMLCanvasElement,
@@ -109,7 +90,7 @@ export class ElevationProfile {
     }
 
     initialize() {
-        let options: ChartOptions<'line'> = {
+        let options = {
             animation: false,
             parsing: false,
             maintainAspectRatio: false,
@@ -117,8 +98,8 @@ export class ElevationProfile {
                 x: {
                     type: 'linear',
                     ticks: {
-                        callback: function (value: number | string) {
+                        callback: function (value: number) {
-                            return `${(value as number).toFixed(1).replace(/\.0+$/, '')} ${getDistanceUnits()}`;
+                            return `${value.toFixed(1).replace(/\.0+$/, '')} ${getDistanceUnits()}`;
                         },
                         align: 'inner',
                         maxRotation: 0,
@@ -127,8 +108,8 @@ export class ElevationProfile {
                 y: {
                     type: 'linear',
                     ticks: {
-                        callback: function (value: number | string) {
+                        callback: function (value: number) {
-                            return getElevationWithUnits(value as number, false);
+                            return getElevationWithUnits(value, false);
                         },
                     },
                 },
@@ -159,8 +140,8 @@ export class ElevationProfile {
                         title: () => {
                             return '';
                         },
-                        label: (context: TooltipItem<'line'>) => {
+                        label: (context: Chart.TooltipContext) => {
-                            let point = context.raw as ElevationProfilePoint;
+                            let point = context.raw;
                             if (context.datasetIndex === 0) {
                                 const map_ = get(map);
                                 if (map_ && this._marker) {
@@ -184,10 +165,10 @@ export class ElevationProfile {
                                 return `${i18n._('quantities.power')}: ${getPowerWithUnits(point.y)}`;
                             }
                         },
-                        afterBody: (contexts: TooltipItem<'line'>[]) => {
+                        afterBody: (contexts: Chart.TooltipContext[]) => {
                             let context = contexts.filter((context) => context.datasetIndex === 0);
                             if (context.length === 0) return;
-                            let point = context[0].raw as ElevationProfilePoint;
+                            let point = context[0].raw;
                             let slope = {
                                 at: point.slope.at.toFixed(1),
                                 segment: point.slope.segment.toFixed(1),
@@ -246,7 +227,6 @@ export class ElevationProfile {
                         onPanStart: () => {
                             this._panning = true;
                             this._slicedGPXStatistics.set(undefined);
-                            return true;
                         },
                         onPanComplete: () => {
                             this._panning = false;
@@ -258,13 +238,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(maxZoom / this._chart.getZoomLevel()) < 0.01
+                                Math.abs(
+                                    this._chart.getInitialScaleBounds().x.max /
+                                        this._chart.options.plugins.zoom.limits.x.minRange -
+                                        this._chart.getZoomLevel()
+                                ) < 0.01
                             ) {
                                 // Disable wheel pan if zoomed in to the max, and zooming in
                                 return false;
@@ -282,6 +262,7 @@ export class ElevationProfile {
                     },
                 },
             },
+            stacked: false,
             onResize: () => {
                 this.updateOverlay();
             },
@@ -289,7 +270,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: {
@@ -310,7 +291,7 @@ export class ElevationProfile {
                 {
                     id: 'toggleMarker',
                     events: ['mouseout'],
-                    afterEvent: (chart: Chart, args: { event: ChartEvent }) => {
+                    afterEvent: (chart: Chart, args: { event: Chart.ChartEvent }) => {
                         if (args.event.type === 'mouseout') {
                             const map_ = get(map);
                             if (map_ && this._marker) {
@@ -324,7 +305,7 @@ export class ElevationProfile {
 
         let startIndex = 0;
         let endIndex = 0;
-        const getIndex = (evt: PointerEvent) => {
+        const getIndex = (evt) => {
             if (!this._chart) {
                 return undefined;
             }
@@ -342,22 +323,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 this._chart.data.datasets[0].data.length - 1;
+                    return get(this._gpxStatistics).local.points.length - 1;
                 } else {
                     return undefined;
                 }
             }
 
-            const point = points.find((point) => (point.element as any).raw);
+            let point = points.find((point) => point.element.raw);
             if (point) {
-                return (point.element as any).raw.index;
+                return point.element.raw.index;
             } else {
                 return points[0].index;
             }
         };
 
         let dragStarted = false;
-        const onMouseDown = (evt: PointerEvent) => {
+        const onMouseDown = (evt) => {
             if (evt.shiftKey) {
                 // Panning interaction
                 return;
@@ -366,7 +347,7 @@ export class ElevationProfile {
             this._canvas.style.cursor = 'col-resize';
             startIndex = getIndex(evt);
         };
-        const onMouseMove = (evt: PointerEvent) => {
+        const onMouseMove = (evt) => {
             if (dragStarted) {
                 this._dragging = true;
                 endIndex = getIndex(evt);
@@ -375,7 +356,7 @@ export class ElevationProfile {
                         startIndex = endIndex;
                     } else if (startIndex !== endIndex) {
                         this._slicedGPXStatistics.set([
-                            get(this._gpxStatistics).sliced(
+                            get(this._gpxStatistics).slice(
                                 Math.min(startIndex, endIndex),
                                 Math.max(startIndex, endIndex)
                             ),
@@ -386,7 +367,7 @@ export class ElevationProfile {
                 }
             }
         };
-        const onMouseUp = (evt: PointerEvent) => {
+        const onMouseUp = (evt) => {
             dragStarted = false;
             this._dragging = false;
             this._canvas.style.cursor = '';
@@ -405,99 +386,85 @@ 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: datasets[0],
+            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,
+                };
+            }),
             normalized: true,
             fill: 'start',
             order: 1,
             segment: {},
         };
         this._chart.data.datasets[1] = {
-            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,
+                };
+            }),
             normalized: true,
             yAxisID: 'yspeed',
         };
         this._chart.data.datasets[2] = {
-            data: datasets[2],
+            data: data.local.points.map((point, index) => {
+                return {
+                    x: getConvertedDistance(data.local.distance.total[index]),
+                    y: point.getHeartRate(),
+                    index: index,
+                };
+            }),
             normalized: true,
             yAxisID: 'yhr',
         };
         this._chart.data.datasets[3] = {
-            data: datasets[3],
+            data: data.local.points.map((point, index) => {
+                return {
+                    x: getConvertedDistance(data.local.distance.total[index]),
+                    y: point.getCadence(),
+                    index: index,
+                };
+            }),
             normalized: true,
             yAxisID: 'ycad',
         };
         this._chart.data.datasets[4] = {
-            data: datasets[4],
+            data: data.local.points.map((point, index) => {
+                return {
+                    x: getConvertedDistance(data.local.distance.total[index]),
+                    y: getConvertedTemperature(point.getTemperature()),
+                    index: index,
+                };
+            }),
             normalized: true,
             yAxisID: 'yatemp',
         };
         this._chart.data.datasets[5] = {
-            data: datasets[5],
+            data: data.local.points.map((point, index) => {
+                return {
+                    x: getConvertedDistance(data.local.distance.total[index]),
+                    y: point.getPower(),
+                    index: index,
+                };
+            }),
             normalized: true,
             yAxisID: 'ypower',
         };
-
+        this._chart.options.scales.x['min'] = 0;
-        this._chart.options.scales!.x!['min'] = 0;
+        this._chart.options.scales.x['max'] = getConvertedDistance(data.global.distance.total);
-        this._chart.options.scales!.x!['max'] = getConvertedDistance(
-            data.global.distance.total,
-            units.distance
-        );
 
         this.setVisibility();
         this.setFill();
@@ -546,24 +513,21 @@ export class ElevationProfile {
             return;
         }
         const elevationFill = get(this._elevationFill);
-        const dataset = this._chart.data.datasets[0];
-        let segment: any = {};
         if (elevationFill === 'slope') {
-            segment = {
+            this._chart.data.datasets[0]['segment'] = {
                 backgroundColor: this.slopeFillCallback,
             };
         } else if (elevationFill === 'surface') {
-            segment = {
+            this._chart.data.datasets[0]['segment'] = {
                 backgroundColor: this.surfaceFillCallback,
             };
         } else if (elevationFill === 'highway') {
-            segment = {
+            this._chart.data.datasets[0]['segment'] = {
                 backgroundColor: this.highwayFillCallback,
             };
         } else {
-            segment = {};
+            this._chart.data.datasets[0]['segment'] = {};
         }
-        Object.assign(dataset, { segment });
     }
 
     updateOverlay() {
@@ -590,12 +554,10 @@ export class ElevationProfile {
 
                 const gpxStatistics = get(this._gpxStatistics);
                 let startPixel = this._chart.scales.x.getPixelForValue(
-                    getConvertedDistance(
+                    getConvertedDistance(gpxStatistics.local.distance.total[startIndex])
-                        gpxStatistics.getTrackPoint(startIndex)?.distance.total ?? 0
-                    )
                 );
                 let endPixel = this._chart.scales.x.getPixelForValue(
-                    getConvertedDistance(gpxStatistics.getTrackPoint(endIndex)?.distance.total ?? 0)
+                    getConvertedDistance(gpxStatistics.local.distance.total[endIndex])
                 );
 
                 selectionContext.fillRect(
@@ -613,22 +575,19 @@ export class ElevationProfile {
         }
     }
 
-    slopeFillCallback(context: ScriptableLineSegmentContext & { p0: { raw: any } }) {
+    slopeFillCallback(context) {
-        const point = context.p0.raw as ElevationProfilePoint;
+        return getSlopeColor(context.p0.raw.slope.segment);
-        return getSlopeColor(point.slope.segment);
     }
 
-    surfaceFillCallback(context: ScriptableLineSegmentContext & { p0: { raw: any } }) {
+    surfaceFillCallback(context) {
-        const point = context.p0.raw as ElevationProfilePoint;
+        return getSurfaceColor(context.p0.raw.extensions.surface);
-        return getSurfaceColor(point.extensions.surface);
     }
 
-    highwayFillCallback(context: ScriptableLineSegmentContext & { p0: { raw: any } }) {
+    highwayFillCallback(context) {
-        const point = context.p0.raw as ElevationProfilePoint;
         return getHighwayColor(
-            point.extensions.highway,
+            context.p0.raw.extensions.highway,
-            point.extensions.sac_scale,
+            context.p0.raw.extensions.sac_scale,
-            point.extensions.mtb_scale
+            context.p0.raw.extensions.mtb_scale
         );
     }
 

website/src/lib/components/embedding/Embedding.svelte

@@ -20,7 +20,6 @@
     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,
@@ -33,7 +32,6 @@
 
     const {
         currentBasemap,
-        selectedBasemapTree,
         distanceUnits,
         velocityUnits,
         temperatureUnits,
@@ -68,9 +66,6 @@
         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;

website/src/lib/components/export/Export.svelte

@@ -21,7 +21,7 @@
         SquareActivity,
     } from '@lucide/svelte';
     import { i18n } from '$lib/i18n.svelte';
-    import { GPXGlobalStatistics } from 'gpx';
+    import { GPXStatistics } 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.global;
+            let statistics = $gpxStatistics;
             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()).global);
+                            acc.mergeWith(cur.getStatisticsFor(new ListRootItem()));
                         }
                         return acc;
-                    }, new GPXGlobalStatistics());
+                    }, new GPXStatistics());
             }
             return {
-                time: statistics.time.total === 0,
+                time: statistics.global.time.total === 0,
-                hr: statistics.hr.count === 0,
+                hr: statistics.global.hr.count === 0,
-                cad: statistics.cad.count === 0,
+                cad: statistics.global.cad.count === 0,
-                atemp: statistics.atemp.count === 0,
+                atemp: statistics.global.atemp.count === 0,
-                power: statistics.power.count === 0,
+                power: statistics.global.power.count === 0,
-                extensions: Object.keys(statistics.extensions).length === 0,
+                extensions: Object.keys(statistics.global.extensions).length === 0,
             };
         }
     });

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

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

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

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

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

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

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

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

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

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

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

@@ -1,13 +1,11 @@
 <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, Earth, Mountain, Timer } from '@lucide/svelte';
+    import { Compass, 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>
@@ -37,17 +35,5 @@
             onCopy={() => trackpoint.hide?.()}
             class="mt-0.5"
         />
-        {#if trackpoint.fileId === undefined}
-            <Button
-                size="sm"
-                variant="outline"
-                class="justify-start"
-                href={`https://www.openstreetmap.org/edit?#map=${(($map?.getZoom() ?? 17) + 1).toFixed(0)}/${trackpoint.item.getLatitude().toFixed(5)}/${trackpoint.item.getLongitude().toFixed(5)}`}
-                target="_blank"
-            >
-                <Earth size="14" />
-                {i18n._('menu.edit_osm')}
-            </Button>
-        {/if}
     </Card.Content>
 </Card.Root>

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

@@ -13,8 +13,6 @@
     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,
@@ -22,9 +20,6 @@
         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 {
@@ -86,7 +81,7 @@
         </ScrollArea>
         <div class="mt-2 flex flex-col gap-1">
             <CopyCoordinates coordinates={waypoint.item.attributes} />
-            {#if $currentTool === Tool.WAYPOINT && selected}
+            {#if $currentTool === Tool.WAYPOINT}
                 <Button
                     class="p-1 has-[>svg]:px-2 h-8"
                     variant="outline"

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

@@ -3,12 +3,19 @@ import { gpxStatistics } from '$lib/logic/statistics';
 import { getConvertedDistanceToKilometers } from '$lib/units';
 import type { GeoJSONSource } from 'mapbox-gl';
 import { get } from 'svelte/store';
-import { ANCHOR_LAYER_KEY, map } from '$lib/components/map/map';
+import { map } from '$lib/components/map/map';
 import { allHidden } from '$lib/logic/hidden';
 
 const { distanceMarkers, distanceUnits } = settings;
 
-const levels = [100, 50, 25, 10, 5, 1];
+const stops = [
+    [100, 0],
+    [50, 7],
+    [25, 8, 10],
+    [10, 10],
+    [5, 11],
+    [1, 13],
+];
 
 export class DistanceMarkers {
     updateBinded: () => void = this.update.bind(this);
@@ -43,33 +50,22 @@ export class DistanceMarkers {
                         data: this.getDistanceMarkersGeoJSON(),
                     });
                 }
-                if (!map_.getLayer('distance-markers')) {
+                stops.forEach(([d, minzoom, maxzoom]) => {
-                    map_.addLayer(
+                    if (!map_.getLayer(`distance-markers-${d}`)) {
-                        {
+                        map_.addLayer({
-                            id: 'distance-markers',
+                            id: `distance-markers-${d}`,
                             type: 'symbol',
                             source: 'distance-markers',
-                            filter: [
+                            filter:
-                                'match',
+                                d === 5
-                                ['get', 'level'],
+                                    ? [
-                                100,
+                                          'any',
-                                ['>=', ['zoom'], 0],
+                                          ['==', ['get', 'level'], 5],
-                                50,
+                                          ['==', ['get', 'level'], 25],
-                                ['>=', ['zoom'], 7],
+                                      ]
-                                25,
+                                    : ['==', ['get', 'level'], d],
-                                [
+                            minzoom: minzoom,
-                                    'any',
+                            maxzoom: maxzoom ?? 24,
-                                    ['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,
@@ -80,14 +76,17 @@ export class DistanceMarkers {
                                 'text-halo-width': 2,
                                 'text-halo-color': 'white',
                             },
-                        },
+                        });
-                        ANCHOR_LAYER_KEY.distanceMarkers
+                    } else {
-                    );
+                        map_.moveLayer(`distance-markers-${d}`);
-                }
+                    }
+                });
             } else {
-                if (map_.getLayer('distance-markers')) {
+                stops.forEach(([d]) => {
-                    map_.removeLayer('distance-markers');
+                    if (map_.getLayer(`distance-markers-${d}`)) {
-                }
+                        map_.removeLayer(`distance-markers-${d}`);
+                    }
+                });
             }
         } catch (e) {
             // No reliable way to check if the map is ready to add sources and layers
@@ -102,26 +101,35 @@ export class DistanceMarkers {
     getDistanceMarkersGeoJSON(): GeoJSON.FeatureCollection {
         let statistics = get(gpxStatistics);
 
-        let features: GeoJSON.Feature[] = [];
+        let features = [];
         let currentTargetDistance = 1;
-        statistics.forEachTrackPoint((trkpt, dist) => {
+        for (let i = 0; i < statistics.local.distance.total.length; i++) {
-            if (dist >= getConvertedDistanceToKilometers(currentTargetDistance)) {
+            if (
+                statistics.local.distance.total[i] >=
+                getConvertedDistanceToKilometers(currentTargetDistance)
+            ) {
                 let distance = currentTargetDistance.toFixed(0);
-                let level = levels.find((level) => currentTargetDistance % level === 0) || 1;
+                let [level, minzoom] = stops.find(([d]) => currentTargetDistance % d === 0) ?? [
+                    0, 0,
+                ];
                 features.push({
                     type: 'Feature',
                     geometry: {
                         type: 'Point',
-                        coordinates: [trkpt.getLongitude(), trkpt.getLatitude()],
+                        coordinates: [
+                            statistics.local.points[i].getLongitude(),
+                            statistics.local.points[i].getLatitude(),
+                        ],
                     },
                     properties: {
                         distance,
                         level,
+                        minzoom,
                     },
                 } as GeoJSON.Feature);
                 currentTargetDistance += 1;
             }
-        });
+        }
 
         return {
             type: 'FeatureCollection',

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

@@ -1,6 +1,6 @@
 import { get, type Readable } from 'svelte/store';
-import mapboxgl, { type FilterSpecification } from 'mapbox-gl';
+import mapboxgl from 'mapbox-gl';
-import { ANCHOR_LAYER_KEY, map } from '$lib/components/map/map';
+import { map } from '$lib/components/map/map';
 import { waypointPopup, trackpointPopup } from './gpx-layer-popup';
 import {
     ListTrackSegmentItem,
@@ -22,7 +22,6 @@ import { fileActionManager } from '$lib/logic/file-action-manager';
 import { fileActions } from '$lib/logic/file-actions';
 import { splitAs } from '$lib/components/toolbar/tools/scissors/scissors';
 import { mapCursor, MapCursorState } from '$lib/logic/map-cursor';
-import { gpxColors } from '$lib/components/map/gpx-layer/gpx-layers';
 
 const colors = [
     '#ff0000',
@@ -44,49 +43,26 @@ for (let color of colors) {
 }
 
 // Get the color with the least amount of uses
-function getColor(fileId: string) {
+function getColor() {
     let color = colors.reduce((a, b) => (colorCount[a] <= colorCount[b] ? a : b));
     colorCount[color]++;
-    gpxColors.update((colors) => {
-        colors.set(fileId, color);
-        return colors;
-    });
     return color;
 }
 
-function replaceColor(fileId: string, oldColor: string, newColor: string) {
+function decrementColor(color: string) {
-    if (colorCount.hasOwnProperty(oldColor)) {
-        colorCount[oldColor]--;
-    }
-    colorCount[newColor]++;
-    gpxColors.update((colors) => {
-        colors.set(fileId, newColor);
-        return colors;
-    });
-}
-
-function removeColor(fileId: string, color: string) {
     if (colorCount.hasOwnProperty(color)) {
         colorCount[color]--;
     }
-    gpxColors.update((colors) => {
-        colors.delete(fileId);
-        return colors;
-    });
 }
 
-export function getSvgForSymbol(symbol?: string | undefined, layerColor?: string | undefined) {
+function getMarkerForSymbol(symbol: string | undefined, layerColor: string) {
     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"')
-        layerColor
+        .replace('height="24"', 'height="12"')
-            ? Square.replace('width="24"', 'width="12"')
+        .replace('stroke="currentColor"', 'stroke="SteelBlue"')
-                  .replace('height="24"', 'height="12"')
+        .replace('stroke-width="2"', 'stroke-width="1.5" x="9.6" y="0.4"')
-                  .replace('stroke="currentColor"', 'stroke="SteelBlue"')
+        .replace('fill="none"', `fill="${layerColor}"`)}
-                  .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"', '')
@@ -111,10 +87,9 @@ export class GPXLayer {
     fileId: string;
     file: Readable<GPXFileWithStatistics | undefined>;
     layerColor: string;
+    markers: mapboxgl.Marker[] = [];
     selected: boolean = false;
-    currentWaypointData: GeoJSON.FeatureCollection | null = null;
+    draggable: boolean;
-    draggedWaypointIndex: number | null = null;
-    draggingStartingPosition: mapboxgl.Point = new mapboxgl.Point(0, 0);
     unsubscribe: Function[] = [];
 
     updateBinded: () => void = this.update.bind(this);
@@ -123,25 +98,11 @@ 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;
         this.file = file;
-        this.layerColor = getColor(fileId);
+        this.layerColor = getColor();
         this.unsubscribe.push(
             map.subscribe(($map) => {
                 if ($map) {
@@ -164,6 +125,18 @@ 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() {
@@ -178,12 +151,10 @@ export class GPXLayer {
             file._data.style.color &&
             this.layerColor !== `#${file._data.style.color}`
         ) {
-            replaceColor(this.fileId, this.layerColor, `#${file._data.style.color}`);
+            decrementColor(this.layerColor);
             this.layerColor = `#${file._data.style.color}`;
         }
 
-        this.loadIcons();
-
         try {
             let source = _map.getSource(this.fileId) as mapboxgl.GeoJSONSource | undefined;
             if (source) {
@@ -196,23 +167,20 @@ export class GPXLayer {
             }
 
             if (!_map.getLayer(this.fileId)) {
-                _map.addLayer(
+                _map.addLayer({
-                    {
+                    id: this.fileId,
-                        id: this.fileId,
+                    type: 'line',
-                        type: 'line',
+                    source: this.fileId,
-                        source: this.fileId,
+                    layout: {
-                        layout: {
+                        'line-join': 'round',
-                            'line-join': 'round',
+                        'line-cap': 'round',
-                            'line-cap': 'round',
-                        },
-                        paint: {
-                            'line-color': ['get', 'color'],
-                            'line-width': ['get', 'width'],
-                            'line-opacity': ['get', 'opacity'],
-                        },
                     },
-                    ANCHOR_LAYER_KEY.tracks
+                    paint: {
-                );
+                        'line-color': ['get', 'color'],
+                        'line-width': ['get', 'width'],
+                        'line-opacity': ['get', 'opacity'],
+                    },
+                });
 
                 _map.on('click', this.fileId, this.layerOnClickBinded);
                 _map.on('contextmenu', this.fileId, this.layerOnContextMenuBinded);
@@ -221,59 +189,6 @@ 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,
-                        },
-                    },
-                    ANCHOR_LAYER_KEY.waypoints
-                );
-
-                _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(
@@ -298,7 +213,7 @@ export class GPXLayer {
                                 'text-halo-color': 'white',
                             },
                         },
-                        ANCHOR_LAYER_KEY.directionMarkers
+                        _map.getLayer('distance-markers-100') ? 'distance-markers-100' : undefined
                     );
                 }
             } else {
@@ -307,40 +222,151 @@ export class GPXLayer {
                 }
             }
 
-            let visibleTrackSegmentIds: string[] = [];
+            let visibleItems: [number, number][] = [];
             file.forEachSegment((segment, trackIndex, segmentIndex) => {
                 if (!segment._data.hidden) {
-                    visibleTrackSegmentIds.push(`${trackIndex}-${segmentIndex}`);
+                    visibleItems.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 + '-waypoints',
+                this.fileId,
-                ['in', ['get', 'waypointIndex'], ['literal', visibleWaypoints]],
+                [
+                    'any',
+                    ...visibleItems.map(([trackIndex, segmentIndex]) => [
+                        'all',
+                        ['==', 'trackIndex', trackIndex],
+                        ['==', 'segmentIndex', segmentIndex],
+                    ]),
+                ],
                 { 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() {
@@ -353,24 +379,6 @@ 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');
             }
@@ -380,17 +388,15 @@ 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());
 
-        removeColor(this.fileId, this.layerColor);
+        decrementColor(this.layerColor);
     }
 
     moveToFront() {
@@ -399,13 +405,10 @@ export class GPXLayer {
             return;
         }
         if (_map.getLayer(this.fileId)) {
-            _map.moveLayer(this.fileId, ANCHOR_LAYER_KEY.tracks);
+            _map.moveLayer(this.fileId);
-        }
-        if (_map.getLayer(this.fileId + '-waypoints')) {
-            _map.moveLayer(this.fileId + '-waypoints', ANCHOR_LAYER_KEY.waypoints);
         }
         if (_map.getLayer(this.fileId + '-direction')) {
-            _map.moveLayer(this.fileId + '-direction', ANCHOR_LAYER_KEY.directionMarkers);
+            _map.moveLayer(this.fileId + '-direction');
         }
     }
 
@@ -446,7 +449,7 @@ export class GPXLayer {
         }
     }
 
-    layerOnClick(e: mapboxgl.MapMouseEvent) {
+    layerOnClick(e: any) {
         if (
             get(currentTool) === Tool.ROUTING &&
             get(selection).hasAnyChildren(new ListRootItem(), true, ['waypoints'])
@@ -454,8 +457,8 @@ export class GPXLayer {
             return;
         }
 
-        let trackIndex = e.features![0].properties!.trackIndex;
+        let trackIndex = e.features[0].properties.trackIndex;
-        let segmentIndex = e.features![0].properties!.segmentIndex;
+        let segmentIndex = e.features[0].properties.segmentIndex;
 
         if (
             get(currentTool) === Tool.SCISSORS &&
@@ -463,11 +466,6 @@ 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,
@@ -504,160 +502,6 @@ 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) {
@@ -695,7 +539,6 @@ export class GPXLayer {
             }
             feature.properties.trackIndex = trackIndex;
             feature.properties.segmentIndex = segmentIndex;
-            feature.properties.trackSegmentId = `${trackIndex}-${segmentIndex}`;
 
             segmentIndex++;
             if (segmentIndex >= file.trk[trackIndex].trkseg.length) {
@@ -705,65 +548,4 @@ 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));
-            }
-        });
-    }
 }

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

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

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

@@ -34,20 +34,13 @@ export class StartEndMarkers {
         if (!map_) return;
 
         const tool = get(currentTool);
-        const statistics = get(gpxStatistics);
+        const statistics = get(slicedGPXStatistics)?.[0] ?? get(gpxStatistics);
-        const slicedStatistics = get(slicedGPXStatistics);
         const hidden = get(allHidden);
-        if (statistics.global.length > 0 && tool !== Tool.ROUTING && !hidden) {
+        if (statistics.local.points.length > 0 && tool !== Tool.ROUTING && !hidden) {
-            this.start
+            this.start.setLngLat(statistics.local.points[0].getCoordinates()).addTo(map_);
-                .setLngLat(
-                    statistics.getTrackPoint(slicedStatistics?.[1] ?? 0)!.trkpt.getCoordinates()
-                )
-                .addTo(map_);
             this.end
                 .setLngLat(
-                    statistics
+                    statistics.local.points[statistics.local.points.length - 1].getCoordinates()
-                        .getTrackPoint(slicedStatistics?.[2] ?? statistics.global.length - 1)!
-                        .trkpt.getCoordinates()
                 )
                 .addTo(map_);
         } else {

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

@@ -101,7 +101,9 @@
                                 acc: Record<string, ImportSpecification>,
                                 imprt: ImportSpecification
                             ) => {
-                                if (!['basemap', 'overlays'].includes(imprt.id)) {
+                                if (
+                                    !['basemap', 'overlays', 'glyphs-and-sprite'].includes(imprt.id)
+                                ) {
                                     acc[imprt.id] = imprt;
                                 }
                                 return acc;

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

@@ -13,7 +13,6 @@
         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';
@@ -32,7 +31,6 @@
         currentOverpassQueries,
         customLayers,
         opacities,
-        terrainSource,
     } = settings;
 
     const { isLayerFromExtension, getLayerName } = extensionAPI;
@@ -56,7 +54,7 @@
     }
 
     $effect(() => {
-        if (open && $selectedBasemapTree && $currentBasemap) {
+        if ($selectedBasemapTree && $currentBasemap) {
             if (!isSelected($selectedBasemapTree, $currentBasemap)) {
                 if (!isSelected($selectedBasemapTree, defaultBasemap)) {
                     $selectedBasemapTree = toggle($selectedBasemapTree, defaultBasemap);
@@ -67,7 +65,7 @@
     });
 
     $effect(() => {
-        if (open && $selectedOverlayTree) {
+        if ($selectedOverlayTree) {
             untrack(() => {
                 if ($currentOverlays) {
                     let overlayLayers = getLayers($currentOverlays);
@@ -88,7 +86,7 @@
     });
 
     $effect(() => {
-        if (open && $selectedOverpassTree) {
+        if ($selectedOverpassTree) {
             untrack(() => {
                 if ($currentOverpassQueries) {
                     let overlayLayers = getLayers($currentOverpassQueries);
@@ -162,7 +160,7 @@
                                     type="single"
                                     onValueChange={setOpacityFromSelection}
                                 >
-                                    <Select.Trigger class="mr-1 w-full" size="sm">
+                                    <Select.Trigger class="h-8 mr-1 w-full">
                                         {#if selectedOverlay}
                                             {#if isSelected($selectedOverlayTree, selectedOverlay)}
                                                 {#if $isLayerFromExtension(selectedOverlay)}
@@ -235,23 +233,6 @@
                             </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>

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

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

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

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

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

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

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

@@ -6,7 +6,6 @@ import { overpassQueryData } from '$lib/assets/layers';
 import { MapPopup } from '$lib/components/map/map-popup';
 import { settings } from '$lib/logic/settings';
 import { db } from '$lib/db';
-import { ANCHOR_LAYER_KEY } from '$lib/components/map/map';
 
 const { currentOverpassQueries } = settings;
 
@@ -86,28 +85,23 @@ export class OverpassLayer {
             }
 
             if (!this.map.getLayer('overpass')) {
-                this.map.addLayer(
+                this.map.addLayer({
-                    {
+                    id: 'overpass',
-                        id: 'overpass',
+                    type: 'symbol',
-                        type: 'symbol',
+                    source: 'overpass',
-                        source: 'overpass',
+                    layout: {
-                        layout: {
+                        'icon-image': ['get', 'icon'],
-                            'icon-image': ['get', 'icon'],
+                        'icon-size': 0.25,
-                            'icon-size': 0.25,
+                        'icon-padding': 0,
-                            'icon-padding': 0,
+                        'icon-allow-overlap': ['step', ['zoom'], false, 14, true],
-                            'icon-allow-overlap': ['step', ['zoom'], false, 14, true],
-                        },
                     },
-                    ANCHOR_LAYER_KEY.overpass
+                });
-                );
 
                 this.map.on('mouseenter', 'overpass', this.onHoverBinded);
                 this.map.on('click', 'overpass', this.onHoverBinded);
             }
 
-            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
         }
@@ -289,12 +283,10 @@ function getQuery(query: string) {
     }
 }
 
-function getQueryItem(tags: Record<string, string | string[]>) {
+function getQueryItem(tags: Record<string, string | boolean | string[]>) {
-    let arrayEntry = Object.entries(tags).find((entry): entry is [string, string[]] =>
+    let arrayEntry = Object.values(tags).find((value) => Array.isArray(value));
-        Array.isArray(entry[1])
-    );
     if (arrayEntry !== undefined) {
-        return arrayEntry[1]
+        return arrayEntry
             .map(
                 (val) =>
                     `nwr${Object.entries(tags)
@@ -317,7 +309,7 @@ function belongsToQuery(element: any, query: string) {
     }
 }
 
-function belongsToQueryItem(element: any, tags: Record<string, string | string[]>) {
+function belongsToQueryItem(element: any, tags: Record<string, string | boolean | string[]>) {
     return Object.entries(tags).every(([tag, value]) =>
         Array.isArray(value) ? value.includes(element.tags[tag]) : element.tags[tag] === value
     );

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

@@ -3,16 +3,8 @@ 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 {
+const { treeFileView, elevationProfile, bottomPanelSize, rightPanelSize, distanceUnits } = settings;
-    treeFileView,
-    elevationProfile,
-    bottomPanelSize,
-    rightPanelSize,
-    distanceUnits,
-    terrainSource,
-} = settings;
 
 let fitBoundsOptions: mapboxgl.MapOptions['fitBoundsOptions'] = {
     maxZoom: 15,
@@ -20,28 +12,6 @@ let fitBoundsOptions: mapboxgl.MapOptions['fitBoundsOptions'] = {
     easing: () => 1,
 };
 
-const emptySource: mapboxgl.GeoJSONSourceSpecification = {
-    type: 'geojson',
-    data: {
-        type: 'FeatureCollection',
-        features: [],
-    },
-};
-export const ANCHOR_LAYER_KEY = {
-    mapillary: 'mapillary-end',
-    tracks: 'tracks-end',
-    directionMarkers: 'direction-markers-end',
-    distanceMarkers: 'distance-markers-end',
-    interactions: 'interactions-end',
-    overpass: 'overpass-end',
-    waypoints: 'waypoints-end',
-};
-const anchorLayers: mapboxgl.LayerSpecification[] = Object.values(ANCHOR_LAYER_KEY).map((id) => ({
-    id: id,
-    type: 'symbol',
-    source: 'empty-source',
-}));
-
 export class MapboxGLMap {
     private _map: Writable<mapboxgl.Map | null> = writable(null);
     private _onLoadCallbacks: ((map: mapboxgl.Map) => void)[] = [];
@@ -51,16 +21,31 @@ export class MapboxGLMap {
         return this._map.subscribe(run, invalidate);
     }
 
-    init(language: string, hash: boolean, geocoder: boolean, geolocate: boolean) {
+    init(
+        accessToken: string,
+        language: string,
+        hash: boolean,
+        geocoder: boolean,
+        geolocate: boolean
+    ) {
         const map = new mapboxgl.Map({
             container: 'map',
             style: {
                 version: 8,
-                sources: {
+                sources: {},
-                    'empty-source': emptySource,
+                layers: [],
-                },
-                layers: anchorLayers,
                 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: '',
@@ -68,6 +53,11 @@ export class MapboxGLMap {
                     {
                         id: 'overlays',
                         url: '',
+                        data: {
+                            version: 8,
+                            sources: {},
+                            layers: [],
+                        },
                     },
                 ],
             },
@@ -144,26 +134,39 @@ 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', this.setTerrain.bind(this));
+            map.on('pitch', () => {
-            this.setTerrain();
+                if (map.getPitch() > 0) {
-        });
+                    map.setTerrain({
-        map.on('style.import.load', () => {
+                        source: 'mapbox-dem',
-            const basemap = map.getStyle().imports?.find((imprt) => imprt.id === 'basemap');
+                        exaggeration: 1,
-            if (basemap && basemap.data && basemap.data.glyphs) {
+                    });
-                map.setGlyphsUrl(basemap.data.glyphs);
+                } else {
-            }
+                    map.setTerrain(null);
+                }
+            });
         });
         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));
@@ -179,7 +182,6 @@ export class MapboxGLMap {
                 scaleControl.setUnit(units);
             })
         );
-        this._unsubscribes.push(terrainSource.subscribe(() => this.setTerrain()));
     }
 
     onLoad(callback: (map: mapboxgl.Map) => void) {
@@ -220,29 +222,6 @@ export class MapboxGLMap {
             }
         }
     }
-
-    setTerrain() {
-        const map = get(this._map);
-        if (map) {
-            const source = get(terrainSource);
-            try {
-                if (!map.getSource(source)) {
-                    map.addSource(source, terrainSources[source]);
-                }
-                if (map.getPitch() > 0) {
-                    map.setTerrain({
-                        source: source,
-                        exaggeration: 1,
-                    });
-                } else {
-                    map.setTerrain(null);
-                }
-            } catch (e) {
-                // No reliable way to check if the map is ready to add sources and layers
-                return;
-            }
-        }
-    }
 }
 
 export const map = new MapboxGLMap();

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

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

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

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

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

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

website/src/lib/components/toolbar/tools/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(true);
+    let artificial = $state(false);
 
     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!,

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 './utils.svelte';
+    import { minTolerance, ReducedGPXLayerCollection, tolerance } from './reduce.svelte';
 
     let props: { class?: string } = $props();
 

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

@@ -1,11 +1,11 @@
 import { ListItem, ListTrackSegmentItem } from '$lib/components/file-list/file-list';
-import { ANCHOR_LAYER_KEY, map } from '$lib/components/map/map';
+import { map } from '$lib/components/map/map';
 import { fileActions } from '$lib/logic/file-actions';
 import { GPXFileStateCollectionObserver, type GPXFileState } from '$lib/logic/file-state';
 import { selection } from '$lib/logic/selection';
 import { ramerDouglasPeucker, TrackPoint, type SimplifiedTrackPoint } from 'gpx';
 import type { GeoJSONSource } from 'mapbox-gl';
-import { get, writable } from 'svelte/store';
+import { get, writable, type Writable } from 'svelte/store';
 
 export const minTolerance = 0.1;
 
@@ -28,15 +28,17 @@ export class ReducedGPXLayer {
 
     update() {
         const file = this._fileState.file;
-        if (!file) {
+        const stats = this._fileState.statistics;
+        if (!file || !stats) {
             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,
-                segment.trkpt.length,
+                statistics.local.points.length,
-                ramerDouglasPeucker(segment.trkpt, minTolerance),
+                ramerDouglasPeucker(statistics.local.points, minTolerance),
             ]);
         });
     }
@@ -144,18 +146,17 @@ export class ReducedGPXLayerCollection {
             });
         }
         if (!map_.getLayer('simplified')) {
-            map_.addLayer(
+            map_.addLayer({
-                {
+                id: 'simplified',
-                    id: 'simplified',
+                type: 'line',
-                    type: 'line',
+                source: 'simplified',
-                    source: 'simplified',
+                paint: {
-                    paint: {
+                    'line-color': 'white',
-                        'line-color': 'white',
+                    'line-width': 3,
-                        'line-width': 3,
-                    },
                 },
-                ANCHOR_LAYER_KEY.interactions
+            });
-            );
+        } else {
+            map_.moveLayer('simplified');
         }
     }
 

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

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

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

@@ -793,25 +793,24 @@ 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 =
-                endAnchorStats.distance.moving - startAnchorStats.distance.moving;
+                stats.local.distance.moving[anchors[anchors.length - 1].point._data.index] -
+                stats.local.distance.moving[anchors[0].point._data.index];
 
             let newDistance = stats.global.distance.moving + replacingDistance - replacedDistance;
             let newTime = (newDistance / stats.global.speed.moving) * 3600;
 
             let remainingTime =
                 stats.global.time.moving -
-                (endAnchorStats.time.moving - startAnchorStats.time.moving);
+                (stats.local.time.moving[anchors[anchors.length - 1].point._data.index] -
+                    stats.local.time.moving[anchors[0].point._data.index]);
             let replacingTime = newTime - remainingTime;
 
             if (replacingTime <= 0) {
                 // Fallback to simple time difference
-                replacingTime = endAnchorStats.time.total - startAnchorStats.time.total;
+                replacingTime =
+                    stats.local.time.total[anchors[anchors.length - 1].point._data.index] -
+                    stats.local.time.total[anchors[0].point._data.index];
             }
 
             speed = (replacingDistance / replacingTime) * 3600;
@@ -821,7 +820,9 @@ export class RoutingControls {
                 let endIndex = anchors[anchors.length - 1].point._data.index;
                 startTime = new Date(
                     (segment.trkpt[endIndex].time?.getTime() ?? 0) -
-                        (replacingTime + endAnchorStats.time.total - endAnchorStats.time.moving) *
+                        (replacingTime +
+                            stats.local.time.total[endIndex] -
+                            stats.local.time.moving[endIndex]) *
                             1000
                 );
             }

website/src/lib/components/toolbar/tools/scissors/Scissors.svelte

@@ -26,10 +26,12 @@
 
     let validSelection = $derived(
         $selection.hasAnyChildren(new ListRootItem(), true, ['waypoints']) &&
-            $gpxStatistics.global.length > 0
+            $gpxStatistics.local.points.length > 0
     );
     let maxSliderValue = $derived(
-        validSelection && $gpxStatistics.global.length > 0 ? $gpxStatistics.global.length - 1 : 1
+        validSelection && $gpxStatistics.local.points.length > 0
+            ? $gpxStatistics.local.points.length - 1
+            : 1
     );
     let sliderValues = $derived([0, maxSliderValue]);
     let canCrop = $derived(sliderValues[0] != 0 || sliderValues[1] != maxSliderValue);
@@ -43,7 +45,7 @@
     function updateSlicedGPXStatistics() {
         if (validSelection && canCrop) {
             $slicedGPXStatistics = [
-                get(gpxStatistics).sliced(sliderValues[0], sliderValues[1]),
+                get(gpxStatistics).slice(sliderValues[0], sliderValues[1]),
                 sliderValues[0],
                 sliderValues[1],
             ];
@@ -105,7 +107,7 @@
             {i18n._('toolbar.scissors.split_as')}
         </span>
         <Select.Root bind:value={$splitAs} type="single">
-            <Select.Trigger class="w-fit grow" size="sm">
+            <Select.Trigger class="h-8 w-fit grow">
                 {i18n._('gpx.' + $splitAs)}
             </Select.Trigger>
             <Select.Content>

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

@@ -1,3 +1,5 @@
+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';
@@ -7,42 +9,20 @@ 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';
-import { ANCHOR_LAYER_KEY } from '$lib/components/map/map';
 
 export class SplitControls {
+    active: boolean = false;
     map: mapboxgl.Map;
+    controls: ControlWithMarker[] = [];
+    shownControls: ControlWithMarker[] = [];
     unsubscribes: Function[] = [];
 
-    layerOnMouseEnterBinded: (e: any) => void = this.layerOnMouseEnter.bind(this);
+    toggleControlsForZoomLevelAndBoundsBinded: () => void =
-    layerOnMouseLeaveBinded: () => void = this.layerOnMouseLeave.bind(this);
+        this.toggleControlsForZoomLevelAndBounds.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)));
@@ -51,18 +31,29 @@ export class SplitControls {
     addIfNeeded() {
         let scissors = get(currentTool) === Tool.SCISSORS;
         if (!scissors) {
-            this.remove();
+            if (this.active) {
+                this.remove();
+            }
             return;
         }
 
-        this.updateControls();
+        if (this.active) {
+            this.updateControls();
+        } else {
+            this.add();
+        }
+    }
+
+    add() {
+        this.active = true;
+
+        this.map.on('zoom', this.toggleControlsForZoomLevelAndBoundsBinded);
+        this.map.on('move', this.toggleControlsForZoomLevelAndBoundsBinded);
     }
 
     updateControls() {
-        let data: GeoJSON.FeatureCollection = {
+        // Update the markers when the files change
-            type: 'FeatureCollection',
+        let controlIndex = 0;
-            features: [],
-        };
         selection.applyToOrderedSelectedItemsFromFile((fileId, level, items) => {
             let file = fileStateCollection.getFile(fileId);
 
@@ -73,23 +64,30 @@ export class SplitControls {
                             new ListTrackSegmentItem(fileId, trackIndex, segmentIndex)
                         )
                     ) {
-                        for (let i = 1; i < segment.trkpt.length - 1; i++) {
+                        for (let point of segment.trkpt.slice(1, -1)) {
-                            let point = segment.trkpt[i];
+                            // Update the existing controls (could be improved by matching the existing controls with the new ones?)
                             if (point._data.anchor) {
-                                data.features.push({
+                                if (controlIndex < this.controls.length) {
-                                    type: 'Feature',
+                                    this.controls[controlIndex].fileId = fileId;
-                                    geometry: {
+                                    this.controls[controlIndex].point = point;
-                                        type: 'Point',
+                                    this.controls[controlIndex].segment = segment;
-                                        coordinates: [point.getLongitude(), point.getLatitude()],
+                                    this.controls[controlIndex].trackIndex = trackIndex;
-                                    },
+                                    this.controls[controlIndex].segmentIndex = segmentIndex;
-                                    properties: {
+                                    this.controls[controlIndex].marker.setLngLat(
-                                        fileId: fileId,
+                                        point.getCoordinates()
-                                        trackIndex: trackIndex,
+                                    );
-                                        segmentIndex: segmentIndex,
+                                } else {
-                                        pointIndex: i,
+                                    this.controls.push(
-                                        minZoom: point._data.zoom,
+                                        this.createControl(
-                                    },
+                                            point,
-                                });
+                                            segment,
+                                            fileId,
+                                            trackIndex,
+                                            segmentIndex
+                                        )
+                                    );
+                                }
+                                controlIndex++;
                             }
                         }
                     }
@@ -97,78 +95,86 @@ export class SplitControls {
             }
         }, false);
 
-        try {
+        while (controlIndex < this.controls.length) {
-            let source = this.map.getSource('split-controls') as mapboxgl.GeoJSONSource | undefined;
+            // Remove the extra controls
-            if (source) {
+            this.controls.pop()?.marker.remove();
-                source.setData(data);
-            } else {
-                this.map.addSource('split-controls', {
-                    type: 'geojson',
-                    data: data,
-                });
-            }
-
-            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']],
-                    },
-                    ANCHOR_LAYER_KEY.interactions
-                );
-
-                this.map.on('mouseenter', 'split-controls', this.layerOnMouseEnterBinded);
-                this.map.on('mouseleave', 'split-controls', this.layerOnMouseLeaveBinded);
-                this.map.on('click', 'split-controls', this.layerOnClickBinded);
-            }
-        } catch (e) {
-            // No reliable way to check if the map is ready to add sources and layers
         }
+
+        this.toggleControlsForZoomLevelAndBounds();
     }
 
     remove() {
-        this.map.off('mouseenter', 'split-controls', this.layerOnMouseEnterBinded);
+        this.active = false;
-        this.map.off('mouseleave', 'split-controls', this.layerOnMouseLeaveBinded);
-        this.map.off('click', 'split-controls', this.layerOnClickBinded);
 
-        try {
+        for (let control of this.controls) {
-            if (this.map.getLayer('split-controls')) {
+            control.marker.remove();
-                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
         }
+        this.map.off('zoom', this.toggleControlsForZoomLevelAndBoundsBinded);
+        this.map.off('move', this.toggleControlsForZoomLevelAndBoundsBinded);
     }
 
-    layerOnMouseEnter(e: any) {
+    toggleControlsForZoomLevelAndBounds() {
-        mapCursor.notify(MapCursorState.SPLIT_CONTROL, true);
+        // 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();
+            }
+        });
     }
 
-    layerOnMouseLeave() {
+    createControl(
-        mapCursor.notify(MapCursorState.SPLIT_CONTROL, false);
+        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"');
 
-    layerOnClick(e: mapboxgl.MapMouseEvent) {
+        let marker = new mapboxgl.Marker({
-        let coordinates = (e.features![0].geometry as GeoJSON.Point).coordinates;
+            draggable: true,
-        fileActions.split(
+            className: 'z-10',
-            get(splitAs),
+            element,
-            e.features![0].properties!.fileId,
+        }).setLngLat(point.getCoordinates());
-            e.features![0].properties!.trackIndex,
+
-            e.features![0].properties!.segmentIndex,
+        let control = {
-            { lon: coordinates[0], lat: coordinates[1] },
+            point,
-            e.features![0].properties!.pointIndex
+            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;
     }
 
     destroy() {
@@ -176,3 +182,16 @@ export class SplitControls {
         this.unsubscribes.forEach((unsubscribe) => unsubscribe());
     }
 }
+
+type Control = {
+    segment: TrackSegment;
+    fileId: string;
+    trackIndex: number;
+    segmentIndex: number;
+    point: TrackPoint;
+};
+
+type ControlWithMarker = Control & {
+    marker: mapboxgl.Marker;
+    inZoom: boolean;
+};

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

@@ -16,8 +16,6 @@
     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;
@@ -41,21 +39,6 @@
         })
     );
 
-    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];
@@ -71,7 +54,14 @@
                 latitude = parseFloat(wpt.getLatitude().toFixed(6));
             });
         } else {
-            untrack(reset);
+            untrack(() => {
+                name = '';
+                description = '';
+                link = '';
+                sym = '';
+                longitude = 0;
+                latitude = 0;
+            });
         }
     });
 
@@ -95,14 +85,14 @@
                 desc: description.length > 0 ? description : undefined,
                 cmt: description.length > 0 ? description : undefined,
                 link: link.length > 0 ? { attributes: { href: link } } : undefined,
-                sym: sym.length > 0 ? sym : undefined,
+                sym: sym,
             },
             selectedWaypoint.wpt && selectedWaypoint.fileId
                 ? new ListWaypointItem(selectedWaypoint.fileId, selectedWaypoint.wpt._data.index)
                 : undefined
         );
 
-        reset();
+        selectedWaypoint.reset();
     }
 
     function setCoordinates(e: any) {
@@ -110,37 +100,6 @@
         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);
@@ -153,10 +112,6 @@
             $map.off('click', setCoordinates);
             mapCursor.notify(MapCursorState.TOOL_WITH_CROSSHAIR, false);
         }
-        if (marker) {
-            marker.remove();
-            marker = null;
-        }
     });
 </script>
 
@@ -174,27 +129,19 @@
             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"
-                size="sm"
+                class="w-full h-8"
-                class="w-full"
                 disabled={!canCreate && !$selectedWaypoint}
             >
-                <span class="flex flex-row gap-1.5 items-center">
+                {#if symbolKey}
-                    {#if symbolKey}
+                    {i18n._(`gpx.symbol.${symbolKey}`)}
-                        {#if symbols[symbolKey].icon}
+                {:else}
-                            {@const Component = symbols[symbolKey].icon}
+                    {sym}
-                            <Component size="14" />
+                {/if}
-                        {/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]}
@@ -202,7 +149,7 @@
                         <span>
                             {#if symbol.icon}
                                 {@const Component = symbol.icon}
-                                <Component size="14" class="inline-block align-sub" />
+                                <Component size="14" class="inline-block align-sub mr-0.5" />
                             {:else}
                                 <span class="w-4 inline-block"></span>
                             {/if}
@@ -263,7 +210,7 @@
                 {i18n._('toolbar.waypoint.create')}
             {/if}
         </Button>
-        <Button variant="outline" size="icon" onclick={reset}>
+        <Button variant="outline" size="icon" onclick={() => selectedWaypoint.reset()}>
             <CircleX size="16" />
         </Button>
     </div>

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" /> Esborra
+### <FileX size="16" class="inline-block" style="margin-bottom: 2px" /> Delete
 
-Esborra l'arxiu seleccinat.
+Delete the currently selected files.
 
-### <FileX size="16" class="inline-block" style="margin-bottom: 2px" /> Esborra-ho tot
+### <FileX size="16" class="inline-block" style="margin-bottom: 2px" /> Delete all
 
-Esborra tots els fitxers.
+Delete all files.
 
 ### <Download size="16" class="inline-block" style="margin-bottom: 2px" /> Exportar...
 

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

@@ -29,11 +29,11 @@ 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" /> Smazat
+### <FileX size="16" class="inline-block" style="margin-bottom: 2px" /> Delete
 
 Smazat aktuálně vybrané soubory.
 
-### <FileX size="16" class="inline-block" style="margin-bottom: 2px" /> Smazat vše
+### <FileX size="16" class="inline-block" style="margin-bottom: 2px" /> Delete all
 
 Smazat všechny soubory.
 

website/src/lib/docs/de/home/mapbox.mdx

@@ -1,5 +1,5 @@
-Mapbox stellt einige der auf dieser Website verwendeten Karten bereit.
+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>, die **gpx.studio** unterstützt.
+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 froh und dankbar, Teil ihres <a href="https://mapbox.com/community" target="_blank">Community</a> Programms zu sein, das gemeinnützige Organisationen, Bildungseinrichtungen und Organisationen 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.
 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.

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

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

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

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

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

@@ -35,7 +35,7 @@ Supprimer les fichiers sélectionnés.
 
 ### <FileX size="16" class="inline-block" style="margin-bottom: 2px" /> Supprimer tout
 
-Supprimer tous les fichiers.
+Supprimer toutes les fichiers.
 
 ### <Download size="16" class="inline-block" style="margin-bottom: 2px" /> Exporter...
 

website/src/lib/docs/it/files-and-stats.mdx

@@ -50,7 +50,7 @@ Facendo clic destro su una scheda file, è possibile accedere alle stesse azioni
 
 Come accennato nella [sezione opzioni di visualizzazione](./menu/view), è possibile passare a un layout ad albero per l'elenco dei file.
 Questo layout è ideale per gestire un gran numero di file aperti, organizzandoli in una lista verticale sul lato destro della mappa.
-Inoltre, la vista ad albero dei file consente d'ispezionare [tracce, segmenti e punti di interesse](./gpx) all'interno dei file attraverso sezioni espandibili.
+Inoltre, la vista ad albero dei file consente di ispezionare [tracce, segmenti e punti di interesse](./gpx) all'interno dei file attraverso sezioni espandibili.
 
 Puoi anche applicare [modifiche](./menu/edit) e [strumenti](./toolbar) agli elementi interni del file.
 Inoltre, è possibile trascinare e rilasciare gli elementi per riordinarli, o spostarli nella gerarchia o anche in un altro file.
@@ -78,7 +78,7 @@ Quando si passa sopra il profilo di elevazione, un suggerimento mostrerà le sta
 Per ottenere le statistiche per una sezione specifica del profilo di elevazione, è possibile trascinare un rettangolo di selezione sul profilo.
 Fare clic sul profilo per resettare la selezione.
 
-È inoltre possibile utilizzare la rotellina del mouse per ingrandire e rimpicciolire sul profilo di elevazione, e spostarsi a sinistra e a destra trascinando il profilo tenendo premuto il tasto <kbd>Maiuscolo</kbd>.
+È inoltre possibile utilizzare la rotellina del mouse per ingrandire e rimpicciolire sul profilo di elevazione, e spostarsi a sinistra e a destra trascinando il profilo tenendo premuto il tasto <kbd>Maiusc</kbd>.
 
 <div class="h-48 w-full">
     <ElevationProfile

website/src/lib/docs/it/gpx.mdx

@@ -21,7 +21,7 @@ Queste sono organizzate in una struttura gerarchica, con le tracce stesse al liv
 - Una **traccia** è composta da una sequenza di segmenti scollegati.
   Inoltre, può contenere metadati come un **nome**, una **descrizione**, e **proprietà di visualizzazione**.
 - Un **segmento** è una sequenza di punti GPS che formano un percorso continuo.
-- Un **punto GPS** è una posizione con una latitudine, una longitudine, ed eventualmente una marcatura temporale e un'altitudine.
+- Un **punto GPS** è una posizione con una latitudine, una longitudine, ed eventualmente un timestamp e un'altitudine.
   Alcuni dispositivi memorizzano anche informazioni aggiuntive come frequenza cardiaca, cadenza, temperatura e potenza.
 
 Nella maggior parte dei casi, i file GPX contengono una singola traccia con un singolo segmento.

website/src/lib/docs/it/home/funding.mdx

@@ -5,9 +5,9 @@
 ## <HeartHandshake size="18" class="inline-block align-baseline" /> Aiuta a mantenere il sito gratuito (e senza pubblicità)
 
 Ogni volta che aggiungi o sposti i punti GPS, i nostri server calcolano il percorso migliore sulla rete stradale.
-Utilizziamo anche le API di <a href="https://mapbox.com" target="_blank">Mapbox</a> per visualizzare mappe stupende, recuperare i dati altimetrici e consentire la ricerca di luoghi.
+Utilizziamo anche le API di <a href="https://mapbox.com" target="_blank">Mapbox</a> per visualizzare mappe gradevoli, recuperare i dati altimetrici e consentire la ricerca di luoghi.
 
-Sfortunatamente, fare tutto ciò è costoso.
+Sfortunatamente, questo è costoso.
 Se ti piace utilizzare questo strumento e lo trovi utile, per favore considera di fare una piccola donazione per aiutare a mantenere il sito web gratuito e senza pubblicità.
 
 Grazie mille per il vostro supporto! ❤️

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

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

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

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

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

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

website/src/lib/docs/pl/faq.mdx

@@ -8,11 +8,11 @@ title: FAQ
 
 # { title }
 
-### Czy muszę przekazać darowiznę za korzystanie ze strony internetowej?
+### Do I need to donate to use the website?
 
 Nie.
-Strona internetowa jest darmowa i zawsze będzie (o ile będzie się zgadzał rachunek).
+The website is free to use and always will be (as long as it is financially sustainable).
-Darowizny są jednak doceniane i pomagają utrzymać funkcjonowanie strony.
+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?
 

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

@@ -8,12 +8,12 @@ title: Wprowadzenie
 
 # { title }
 
-Witamy w oficjalnym przewodniku dla **gpx.studio**!
+Welcome to the official guide for **gpx.studio**!
-Ten przewodnik przeprowadzi Cię przez wszystkie komponenty i narzędzia interfejsu, co pomoże stać się wydajnym użytkownikiem aplikacji.
+This guide will walk you through all the components and tools of the interface, helping you become a proficient user of the application.
 
 <DocsImage src="getting-started/interface" alt="The gpx.studio interface." />
 
-Jak pokazano na zrzucie ekranu powyżej, interfejs jest podzielony na cztery główne sekcje zorganizowane wokół mapy. 
+As shown in the screenshot above, the interface is divided into four main sections organized around the map. 
 Before we dive into the details of each section, let's have a quick overview of the interface.
 
 ## Menu główne
@@ -31,7 +31,7 @@ In the [dedicated section](./files-and-stats), we will explain how to select mul
 
 On the left side of the interface, you will find the [toolbar](./toolbar), which contains all the tools you can use to edit your files.
 
-## Sterowanie mapą
+## Map controls
 
-Na koniec, po prawej stronie interfejsu znajdziesz [sterowanie mapą] (./map-controls).
+Finally, on the right side of the interface, you will find the [map controls](./map-controls).
-Za pomocą tych elementów sterujących można poruszać się po mapie, powiększać i pomniejszać widok oraz przełączać się między różnymi stylami mapy.
+These controls allow you to navigate the map, zoom in and out, and switch between different map styles.

website/src/lib/docs/pl/home/funding.mdx

@@ -2,7 +2,7 @@
     import { HeartHandshake } from '@lucide/svelte';
 </script>
 
-## <HeartHandshake size="18" class="inline-block align-baseline" /> Pomóż nam utrzymać tę stronę jako bezpłatną (i wolną od reklam)
+## <HeartHandshake size="18" class="inline-block align-baseline" /> Help keep the website free (and ad-free)
 
 Za każdym razem, gdy dodasz lub przenosisz punkty GPS, nasze serwery obliczają najlepszą trasę w sieci drogowej.
 Używamy również API z <a href="https://mapbox.com" target="_blank">Mapbox</a> do wyświetlania pięknych map, pobierania danych wysokości i wyszukiwania miejsc.

website/src/lib/docs/pl/home/translation.mdx

@@ -2,11 +2,11 @@
     import { Languages } from '@lucide/svelte';
 </script>
 
-## <Languages size="18" class="inline-block align-baseline" /> Tłumaczenie
+## <Languages size="18" class="inline-block align-baseline" /> Translation
 
 Strona internetowa jest tłumaczona przez wolontariuszy na platformie do współpracy w tłumaczeniu.
-Możesz przyczynić się do rozwoju naszego projektu, dodając lub ulepszając tłumaczenia w ramach <a href="https://crowdin.com/project/gpxstudio" target="_blank">projektu Crowdin</a>.
+Możesz pomóc dodając i sprawdzając istniejące tłumaczenie w <a href="https://crowdin.com/project/gpxstudio" target="_blank">projekcie Crowdin</a>.
 
-Jeśli chciałbyś dodać język, którego nie ma na liście <a href="#contact">skontaktuj się z nami</a>.
+Jeśli chciałbyś dodać język, którego nie ma na liście <a href="#contact">skontaktuj się</a>.
 
 Każda pomoc jest bardzo mile widziana!

website/src/lib/docs/pl/map-controls.mdx

@@ -1,5 +1,5 @@
 ---
-title: Sterowanie mapą
+title: Map controls
 ---
 
 <script>
@@ -10,10 +10,10 @@ title: Sterowanie mapą
 
 # { title }
 
-Elementy sterujące mapą znajdują się po prawej stronie interfejsu.
+The map controls are located on the right side of the interface.
-Za pomocą tych elementów sterujących można poruszać się po mapie, powiększać i pomniejszać widok oraz przełączać się między różnymi stylami mapy.
+These controls allow you to navigate the map, zoom in and out, and switch between different map styles.
 
-### <Diff size="16" class="inline-block" style="margin-bottom: 2px" /> Nawigacja mapą
+### <Diff size="16" class="inline-block" style="margin-bottom: 2px" /> Map navigation
 
 The controls at the top allow you to zoom in <Plus size="16" class="inline-block" style="margin-bottom: 2px" /> and out <Minus size="16" class="inline-block" style="margin-bottom: 2px" />, and to change the orientation and tilt of the map <Compass size="16" class="inline-block" style="margin-bottom: 2px" />.
 
@@ -39,7 +39,7 @@ This only works if you have allowed your browser and <b>gpx.studio</b> to access
 
 ### <PersonStanding size="16" class="inline-block" style="margin-bottom: 2px" /> Street view
 
-Ten przycisk może być użyty do włączenia trybu street view na mapie.
+This button can be used to enable street view mode on the map.
 Depending on the street view source chosen in the [settings](./menu/settings), street view imagery can be accessed differently.
 
 - <a href="https://www.mapillary.com/" target="_blank">Mapillary</a>: the street view coverage will appear as green lines on the map. When zoomed in enough, green dots will show the exact locations where street view imagery is available. Hovering over a green dot will show the street view image at that location.

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

@@ -9,44 +9,44 @@ title: Akcje menu Plik
 
 # { title }
 
-Menu operacji na plikach zawiera zestaw funkcji, których przeznaczenie jest dość oczywiste.
+The file actions menu contains a set of pretty self-explanatory file operations.
 
-### <Plus size="16" class="inline-block" style="margin-bottom: 2px" /> Nowy
+### <Plus size="16" class="inline-block" style="margin-bottom: 2px" /> New
 
 Tworzy nowy pusty plik.
 
-### <FolderOpen size="16" class="inline-block" style="margin-bottom: 2px" /> Otwórz...
+### <FolderOpen size="16" class="inline-block" style="margin-bottom: 2px" /> Open...
 
-Otwórz pliki z komputera. 
+Open files from your computer. 
 
 <DocsNote>
 
-Można również przeciągać i upuszczać pliki bezpośrednio z systemu plików do okna.
+You can also drag and drop files directly from your file system into the window.
 
 </DocsNote>
 
-### <Copy size="16" class="inline-block" style="margin-bottom: 2px" /> Duplikuj
+### <Copy size="16" class="inline-block" style="margin-bottom: 2px" /> Duplicate
 
-Utwórz kopię aktualnie zaznaczonych plików.
+Create a copy of the currently selected files.
 
-### <FileX size="16" class="inline-block" style="margin-bottom: 2px" /> Usuń
+### <FileX size="16" class="inline-block" style="margin-bottom: 2px" /> Delete
 
-Usuń aktualnie zaznaczone pliki.
+Delete the currently selected files.
 
-### <FileX size="16" class="inline-block" style="margin-bottom: 2px" /> Usuń wszystko
+### <FileX size="16" class="inline-block" style="margin-bottom: 2px" /> Delete all
 
-Usuń wszystkie pliki.
+Delete all files.
 
-### <Download size="16" class="inline-block" style="margin-bottom: 2px" /> Eksport...
+### <Download size="16" class="inline-block" style="margin-bottom: 2px" /> Export...
 
-Otwórz okno dialogowe eksportu, aby zapisać aktualnie wybrane pliki na komputerze.
+Open the export dialog to save the currently selected files to your computer.
 
-### <Download size="16" class="inline-block" style="margin-bottom: 2px" /> Eksportuj wszystko...
+### <Download size="16" class="inline-block" style="margin-bottom: 2px" /> Export all...
 
-Otwórz okno dialogowe eksportu, aby zapisać wszystkie pliki na komputerze.
+Open the export dialog to save all files to your computer.
 
 <DocsNote type="warning">
 
-Jeśli po kliknięciu przycisku pobierania plik nie zacznie się pobierać, sprawdź ustawienia przeglądarki i upewnij się, że zezwalają one na pobieranie plików z witryny <b>gpx.studio</b>.
+If your download does not start after clicking the download button, please check your browser settings to allow downloads from <b>gpx.studio</b>.
 
 </DocsNote>

website/src/lib/docs/pl/menu/settings.mdx

@@ -11,11 +11,11 @@ title: Settings
 
 ### <Ruler size="16" class="inline-block" style="margin-bottom: 2px" /> Distance units
 
-Zmień jednostki stosowane do wyświetlania odległości w interfejsie.
+Change the units used to display distances in the interface.
 
 ### <Zap size="16" class="inline-block" style="margin-bottom: 2px" /> Velocity units
 
-Zmień jednostki używane do wyświetlania prędkości w interfejsie.
+Change the units used to display velocities in the interface.
 You can choose between distance per hour or minutes per distance, which can be more suitable for running activities.
 
 ### <Thermometer size="16" class="inline-block" style="margin-bottom: 2px" /> Temperature units
@@ -28,8 +28,8 @@ Change the language used in the interface.
 
 <DocsNote>
 
-Możesz przyczynić się do rozwoju naszego projektu, dodając lub ulepszając tłumaczenia w ramach <a href="https://crowdin.com/project/gpxstudio" target="_blank">projektu Crowdin</a>.
+Możesz pomóc dodając i sprawdzając istniejące tłumaczenie w <a href="https://crowdin.com/project/gpxstudio" target="_blank">projekcie Crowdin</a>.
-Jeśli chciałbyś dodać język, którego nie ma na liście <a href="#contact">skontaktuj się z nami</a>.
+Jeśli chciałbyś dodać język, którego nie ma na liście <a href="#contact">skontaktuj się</a>.
 Każda pomoc jest bardzo mile widziana!
 
 </DocsNote>

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

@@ -9,21 +9,21 @@ title: Akcje menu Widok
 
 # { title }
 
-To menu zawiera opcje zmiany kolejności interfejsu i widoku mapy.
+This menu provides options to rearrange the interface and the map view.
 
-### <ChartArea size="16" class="inline-block" style="margin-bottom: 2px" /> Profil wysokościowy
+### <ChartArea size="16" class="inline-block" style="margin-bottom: 2px" /> Elevation profile
 
-Ukryj profil ukształtowania terenu, aby zrobić miejsce na mapie lub pokaż go, aby sprawdzić bieżący wybór.
+Hide the elevation profile to make room for the map, or show it to inspect the current selection.
 
-### <ListTree size="16" class="inline-block" style="margin-bottom: 2px" /> Drzewo plików
+### <ListTree size="16" class="inline-block" style="margin-bottom: 2px" /> File tree
 
-Przełącz układ drzewa na [listy plików](../files-and-stats).
+Toggle the tree layout for the [file list](../files-and-stats).
 This layout is ideal for managing a large number of open files, as it organizes them into a vertical list on the right side of the map.
-Dodatkowo, widok drzewa plików umożliwia sprawdzenie [tras, segmentów, oraz punktów zainteresowania](../gpx) zawarte w plikach poprzez zwijalne sekcje.
+In addition, the file tree view enables you to inspect the [tracks, segments, and points of interest](../gpx) contained inside the files through collapsible sections.
 
-### <Map size="16" class="inline-block" style="margin-bottom: 2px" /> Przełącz na poprzednią mapę
+### <Map size="16" class="inline-block" style="margin-bottom: 2px" /> Switch to previous basemap
 
-Zmień mapę na mapę wybraną poprzednio przez [sterowanie warstwą map](../map-controls).
+Change the basemap to the one previously selected through the [map layer control](../map-controls).
 
 ### <Layers2 size="16" class="inline-block" style="margin-bottom: 2px" /> Toggle overlays
 

website/src/lib/docs/pl/toolbar/routing.mdx

@@ -1,5 +1,5 @@
 ---
-title: Planowanie i edycja trasy
+title: Route planning and editing
 ---
 
 <script>
@@ -11,11 +11,11 @@ title: Planowanie i edycja trasy
 
 # <Pencil size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
 
-Narzędzie do planowania i edycji trasy pozwala na tworzenie i edytowanie tras poprzez umieszczanie lub przesuwanie punktów kotwiczenia na mapie.
+The route planning and editing tool allows you to create and edit routes by placing or moving anchor points on the map.
 
 ## Settings
 
-Jak pokazano poniżej, okno dialogowe narzędzia zawiera kilka ustawień do kontrolowania zachowania rutingu.
+As shown below, the tool dialog contains a few settings to control the routing behavior.
 You can minimize the dialog to save space by clicking on <button><SquareArrowUpLeft size="16" class="inline-block" style="margin-bottom: 2px" /></button>.
 
 <div class="flex flex-row justify-center">

website/src/lib/docs/pl/toolbar/scissors.mdx

@@ -24,7 +24,7 @@ Validate the selection when you are satisfied with the result.
 ## Podziel
 
 To split the selected trace into two parts, click on one of the split markers displayed along the trace.
-Aby podzielić w wybranym przez Ciebie punkcie, zaznacz punkt na śladzie trasy.
+To split at a specific point of your choice, hover over the trace on the map.
 Scissors will appear at the cursor position, showing that you can split the trace at that point.
 
 You can choose to split the trace into two GPX files, or to keep the split parts in the same file as [tracks or segments](../gpx).

website/src/lib/docs/pl/toolbar/time.mdx

@@ -10,18 +10,18 @@ title: Czas
 
 # <CalendarClock size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
 
-To narzędzie pozwala na zmianę lub dodanie znaczników czasu do śladu.
+This tool allows you to change or add timestamps to a trace.
-Musisz po prostu użyć poniższego formularza i potwierdzić go po zakończeniu.
+You simply need to use the form shown below and validate it when you are done.
 
 <div class="flex flex-row justify-center">
     <Time class="text-foreground p-3 border rounded-md shadow-lg" />
 </div>
 
-Podczas edycji prędkości, czas poruszania się jest odpowiednio dostosowywany w formularzu i odwrotnie.
+When you edit the speed, the moving time is adapted accordingly in the form, and vice versa.
-Podobnie, kiedy edytujesz czas rozpoczęcia, czas zakończenia jest aktualizowany, aby zachować ten sam czas trwania i odwrotnie.
+Similarly, when you edit the start time, the end time is updated to keep the same total duration, and vice versa.
 
 <DocsNote>
 
-Gdy używasz to narzędzie z istniejącymi znacznikami czasu, zmiana czasu lub prędkości po prostu się zmieni, rozciągnij lub kompresuj je.
+When using this tool with existing timestamps, changing the time or speed will simply shift, stretch, or compress them accordingly.
 
 </DocsNote>

website/src/lib/docs/pt-BR/files-and-stats.mdx

@@ -50,7 +50,7 @@ Clicando com o botão direito em uma aba arquivo, você pode acessar as mesmas a
 
 As mentioned in the [view options section](./menu/view), you can switch to a tree layout for the files list.
 This layout is ideal for managing a large number of open files, as it organizes them into a vertical list on the right side of the map.
-Além disso, a exibição de árvore de arquivos permite que você inspecione as [faixas, segmentos, e pontos de interesse](./gpx) contidos dentro dos arquivos através de seções recolhidas.
+In addition, the file tree view enables you to inspect the [tracks, segments, and points of interest](./gpx) contained inside the files through collapsible sections.
 
 Você também pode aplicar as [ações de edição](./menu/edit) e [ferramentas](./toolbar) para itens de arquivos internos.
 Além disso, você pode arrastar e soltar os itens internos para reordená-los, ou movê-los na hierarquia ou até mesmo para outro arquivo.
@@ -105,6 +105,6 @@ Using the <kbd><ChartNoAxesColumn size="16" class="inline-block" style="margin-b
 
 - **slope** information computed from the elevation data, or
 - **surface** or **category** data coming from <a href="https://www.openstreetmap.org/" target="_blank">OpenStreetMap</a>'s <a href="https://wiki.openstreetmap.org/wiki/Key:surface" target="_blank">surface</a> and <a href="https://wiki.openstreetmap.org/wiki/Key:highway" target="_blank">highway</a> tags.
-  Isso só está disponível para arquivos criados com **gpx.studio**.
+  This is only available for files created with **gpx.studio**.
 
 If your selection includes it, you can also visualize: **speed**, **heart rate**, **cadence**, **temperature** and **power** data on the elevation profile.

website/src/lib/docs/pt-BR/menu/file.mdx

@@ -35,7 +35,7 @@ Delete the currently selected files.
 
 ### <FileX size="16" class="inline-block" style="margin-bottom: 2px" /> Delete all
 
-Apagar todos os arquivos.
+Delete all files.
 
 ### <Download size="16" class="inline-block" style="margin-bottom: 2px" /> Exportar...
 

website/src/lib/docs/uk/home/funding.mdx

@@ -2,8 +2,7 @@
     import { HeartHandshake } from '@lucide/svelte';
 </script>
 
-## <HeartHandshake size="18" class="inline-block align-baseline" /> 
+## <HeartHandshake size="18" class="inline-block align-baseline" /> Help keep the website free (and ad-free)
-Допоможіть нам залишати цей сайт безкоштовним (та без реклами)
 
 Кожного разу, коли ви додаєте або переміщуєте GPS точки, наші сервери обчислюють найкращий маршрут на мережі доріг.
 Ми також використовуємо API від <a href="https://mapbox.com" target="_blank">Mapbox</a> для зображення красивих карт, отримання даних висот та можливості пошуку місць.

website/src/lib/docs/uk/home/translation.mdx

@@ -2,7 +2,7 @@
     import { Languages } from '@lucide/svelte';
 </script>
 
-## <Languages size="18" class="inline-block align-baseline" /> Переклад
+## <Languages size="18" class="inline-block align-baseline" /> Translation
 
 Сайт перекладається волонтерами з використанням платформи для спільного перекладу.
 Ви можете зробити свій внесок, додаючи або покращуючи переклади в нашому <a href="https://crowdin.com/project/gpxstudio" target="_blank">проєкті Crowdin</a>.

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

@@ -47,6 +47,6 @@ Open the export dialog to save all files to your computer.
 
 <DocsNote type="warning">
 
-Якщо завантаження не починається після натискання кнопки завантаження, будь ласка, перевірте налаштування браузера, щоб дозволити завантаження з <b>gpx.studio</b>.
+If your download does not start after clicking the download button, please check your browser settings to allow downloads from <b>gpx.studio</b>.
 
 </DocsNote>

website/src/lib/docs/vi/home/funding.mdx

@@ -2,7 +2,7 @@
     import { HeartHandshake } from '@lucide/svelte';
 </script>
 
-## <HeartHandshake size="18" class="inline-block align-baseline" /> Hãy giúp duy trì trang web miễn phí (và không có quảng cáo)
+## <HeartHandshake size="18" class="inline-block align-baseline" /> Help keep the website free (and ad-free)
 
 Khi bạn thêm hoặc di chuyển các điểm định vị, máy chủ của chúng tôi sẽ tính toán đoạn đường tốt nhất trên mạng lưới giao thông.
 Chúng tôi cũng sử dụng các API từ <a href="https://mapbox.com" target="_blank">Mapbox</a> để hiển thị đa dạng các bản đồ, lưu trữ các dữ liệu độ cao cũng như giúp bạn có thể tìm kiếm các địa điểm khác nhau.

website/src/lib/docs/vi/home/mapbox.mdx

@@ -1,5 +1,5 @@
-Mapbox là công ty cung cấp một số bản đồ đẹp trên trang web này.
+Mapbox is the company that provides some of the beautiful maps on this website.
-Họ cũng phát triển <a href="https://github.com/mapbox/mapbox-gl-js" target="_blank">công cụ bản đồ</a> cung cấp sức mạnh cho **gpx.studio**.
+They also develop the <a href="https://github.com/mapbox/mapbox-gl-js" target="_blank">map engine</a> which powers **gpx.studio**.
 
-Chúng tôi vô cùng may mắn và biết ơn khi được tham gia chương trình <a href="https://mapbox.com/community" target="_blank">Cộng đồng</a> của họ, chương trình hỗ trợ các tổ chức phi lợi nhuận, các tổ chức giáo dục và các tổ chức tạo ra tác động tích cực.
+We are incredibly fortunate and grateful to be part of their <a href="https://mapbox.com/community" target="_blank">Community</a> program, which supports nonprofits, educational institutions, and positive impact organizations.
-Sự hợp tác này cho phép **gpx.studio** được hưởng lợi từ các công cụ của Mapbox với giá ưu đãi, góp phần đáng kể vào tính khả thi về tài chính của dự án và giúp chúng tôi mang đến trải nghiệm người dùng tốt nhất có thể.
+This partnership allows **gpx.studio** to benefit from Mapbox tools at discounted prices, greatly contributing to the financial viability of the project and enabling us to offer the best possible user experience.

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

@@ -9,8 +9,8 @@ title: Edit actions
 
 # { title }
 
-Không giống như các thao tác trên tệp, các thao tác chỉnh sửa có thể thay đổi nội dung của các tệp hiện đang được chọn.
+Unlike the file actions, the edit actions can potentially modify the content of the currently selected files.
-Hơn nữa, khi bố cục dạng cây của danh sách tệp được bật (xem [Tệp và thống kê](../files-and-stats)), chúng cũng có thể được áp dụng cho [đường đi, đoạn đường và điểm quan tâm](../gpx).
+Moreover, when the tree layout of the files list is enabled (see [Files and statistics](../files-and-stats)), they can also be applied to [tracks, segments, and points of interest](../gpx).
 Therefore, we will refer to the elements that can be modified by these actions as _file items_.
 Note that except for the undo and redo actions, the edit actions are also accessible through the context menu (right-click) of the file items.
 

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

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

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

@@ -29,13 +29,13 @@ title: 文件
 
 创建当前选中文件的副本。
 
-### <FileX size="16" class="inline-block" style="margin-bottom: 2px" /> 删除
+### <FileX size="16" class="inline-block" style="margin-bottom: 2px" /> Delete
 
-删除当前选中的文件。
+Delete the currently selected files.
 
-### <FileX size="16" class="inline-block" style="margin-bottom: 2px" /> 删除全部
+### <FileX size="16" class="inline-block" style="margin-bottom: 2px" /> Delete all
 
-删除全部文件。
+Delete all files.
 
 ### <Download size="16" class="inline-block" style="margin-bottom: 2px" /> 导出...
 

website/src/lib/i18n.svelte.ts

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

website/src/lib/logic/bounds.ts

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

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

@@ -17,6 +17,7 @@ import {
 import { i18n } from '$lib/i18n.svelte';
 import { freeze, type WritableDraft } from 'immer';
 import {
+    distance,
     GPXFile,
     parseGPX,
     Track,
@@ -29,7 +30,7 @@ import {
 } from 'gpx';
 import { get } from 'svelte/store';
 import { settings } from '$lib/logic/settings';
-import { getClosestLinePoint, getClosestTrackSegments, getElevation } from '$lib/utils';
+import { getClosestLinePoint, getElevation } from '$lib/utils';
 import { gpxStatistics } from '$lib/logic/statistics';
 import { boundsManager } from './bounds';
 
@@ -215,7 +216,7 @@ export const fileActions = {
     reverseSelection: () => {
         if (
             !get(selection).hasAnyChildren(new ListRootItem(), true, ['waypoints']) ||
-            get(gpxStatistics).global.length <= 1
+            get(gpxStatistics).local.points?.length <= 1
         ) {
             return;
         }
@@ -345,20 +346,19 @@ export const fileActions = {
                 let startTime: Date | undefined = undefined;
                 if (speed !== undefined) {
                     if (
-                        statistics.global.length > 0 &&
+                        statistics.local.points.length > 0 &&
-                        statistics.getTrackPoint(0)!.trkpt.time !== undefined
+                        statistics.local.points[0].time !== undefined
                     ) {
-                        startTime = statistics.getTrackPoint(0)!.trkpt.time;
+                        startTime = statistics.local.points[0].time;
                     } else {
-                        for (let i = 0; i < statistics.global.length; i++) {
+                        let index = statistics.local.points.findIndex(
-                            const point = statistics.getTrackPoint(i)!;
+                            (point) => point.time !== undefined
-                            if (point.trkpt.time !== undefined) {
+                        );
-                                startTime = new Date(
+                        if (index !== -1 && statistics.local.points[index].time) {
-                                    point.trkpt.time.getTime() -
+                            startTime = new Date(
-                                        (1000 * 3600 * point.distance.total) / speed
+                                statistics.local.points[index].time.getTime() -
-                                );
+                                    (1000 * 3600 * statistics.local.distance.total[index]) / speed
-                                break;
+                            );
-                            }
                         }
                     }
                 }
@@ -453,13 +453,34 @@ export const fileActions = {
             selection.applyToOrderedSelectedItemsFromFile((fileId, level, items) => {
                 if (level === ListLevel.FILE) {
                     let file = fileStateCollection.getFile(fileId);
-                    let statistics = fileStateCollection.getStatistics(fileId);
+                    if (file) {
-                    if (file && statistics) {
                         if (file.trk.length > 1) {
                             let fileIds = getFileIds(file.trk.length);
-                            let closest = file.wpt.map((wpt) =>
+                            let closest = file.wpt.map((wpt, wptIndex) => {
-                                getClosestTrackSegments(file, statistics, wpt.getCoordinates())
+                                return {
-                            );
+                                    wptIndex: wptIndex,
+                                    index: [0],
+                                    distance: Number.MAX_VALUE,
+                                };
+                            });
+                            file.trk.forEach((track, index) => {
+                                track.getSegments().forEach((segment) => {
+                                    segment.trkpt.forEach((point) => {
+                                        file.wpt.forEach((wpt, wptIndex) => {
+                                            let dist = distance(
+                                                point.getCoordinates(),
+                                                wpt.getCoordinates()
+                                            );
+                                            if (dist < closest[wptIndex].distance) {
+                                                closest[wptIndex].distance = dist;
+                                                closest[wptIndex].index = [index];
+                                            } else if (dist === closest[wptIndex].distance) {
+                                                closest[wptIndex].index.push(index);
+                                            }
+                                        });
+                                    });
+                                });
+                            });
                             file.trk.forEach((track, index) => {
                                 let newFile = file.clone();
                                 let tracks = track.trkseg.map((segment, segmentIndex) => {
@@ -474,11 +495,9 @@ export const fileActions = {
                                 newFile.replaceWaypoints(
                                     0,
                                     file.wpt.length - 1,
-                                    file.wpt.filter((wpt, wptIndex) =>
+                                    closest
-                                        closest[wptIndex].some(
+                                        .filter((c) => c.index.includes(index))
-                                            ([trackIndex, segmentIndex]) => trackIndex === index
+                                        .map((c) => file.wpt[c.wptIndex])
-                                        )
-                                    )
                                 );
                                 newFile._data.id = fileIds[index];
                                 newFile.metadata.name =
@@ -487,9 +506,29 @@ export const fileActions = {
                             });
                         } else if (file.trk.length === 1) {
                             let fileIds = getFileIds(file.trk[0].trkseg.length);
-                            let closest = file.wpt.map((wpt) =>
+                            let closest = file.wpt.map((wpt, wptIndex) => {
-                                getClosestTrackSegments(file, statistics, wpt.getCoordinates())
+                                return {
-                            );
+                                    wptIndex: wptIndex,
+                                    index: [0],
+                                    distance: Number.MAX_VALUE,
+                                };
+                            });
+                            file.trk[0].trkseg.forEach((segment, index) => {
+                                segment.trkpt.forEach((point) => {
+                                    file.wpt.forEach((wpt, wptIndex) => {
+                                        let dist = distance(
+                                            point.getCoordinates(),
+                                            wpt.getCoordinates()
+                                        );
+                                        if (dist < closest[wptIndex].distance) {
+                                            closest[wptIndex].distance = dist;
+                                            closest[wptIndex].index = [index];
+                                        } else if (dist === closest[wptIndex].distance) {
+                                            closest[wptIndex].index.push(index);
+                                        }
+                                    });
+                                });
+                            });
                             file.trk[0].trkseg.forEach((segment, index) => {
                                 let newFile = file.clone();
                                 newFile.replaceTrackSegments(0, 0, file.trk[0].trkseg.length - 1, [
@@ -498,11 +537,9 @@ export const fileActions = {
                                 newFile.replaceWaypoints(
                                     0,
                                     file.wpt.length - 1,
-                                    file.wpt.filter((wpt, wptIndex) =>
+                                    closest
-                                        closest[wptIndex].some(
+                                        .filter((c) => c.index.includes(index))
-                                            ([trackIndex, segmentIndex]) => segmentIndex === index
+                                        .map((c) => file.wpt[c.wptIndex])
-                                        )
-                                    )
                                 );
                                 newFile._data.id = fileIds[index];
                                 newFile.metadata.name = `${file.trk[0].name ?? file.metadata.name} (${index + 1})`;
@@ -807,7 +844,7 @@ export const fileActions = {
             });
         });
     },
-    addElevationToSelection: async () => {
+    addElevationToSelection: async (map: mapboxgl.Map) => {
         if (get(selection).size === 0) {
             return;
         }

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

@@ -4,12 +4,10 @@ import { get, writable, type Writable } from 'svelte/store';
 export enum MapCursorState {
     DEFAULT,
     LAYER_HOVER,
-    TOOL_WITH_CROSSHAIR,
-    WAYPOINT_HOVER,
     WAYPOINT_DRAGGING,
     TRACKPOINT_DRAGGING,
+    TOOL_WITH_CROSSHAIR,
     SCISSORS,
-    SPLIT_CONTROL,
     MAPILLARY_HOVER,
     STREET_VIEW_CROSSHAIR,
 }
@@ -18,12 +16,10 @@ const scissorsCursor = `url('data:image/svg+xml,<svg xmlns="http://www.w3.org/20
 const cursorStyles = {
     [MapCursorState.DEFAULT]: 'default',
     [MapCursorState.LAYER_HOVER]: 'pointer',
-    [MapCursorState.WAYPOINT_HOVER]: 'pointer',
     [MapCursorState.WAYPOINT_DRAGGING]: 'grabbing',
     [MapCursorState.TRACKPOINT_DRAGGING]: 'grabbing',
     [MapCursorState.TOOL_WITH_CROSSHAIR]: 'crosshair',
     [MapCursorState.SCISSORS]: scissorsCursor,
-    [MapCursorState.SPLIT_CONTROL]: 'pointer',
     [MapCursorState.MAPILLARY_HOVER]: 'pointer',
     [MapCursorState.STREET_VIEW_CROSSHAIR]: 'crosshair',
 };
@@ -34,8 +30,8 @@ export class MapCursor {
     constructor() {
         this._states = writable(new Set());
         this._states.subscribe((states) => {
-            let state = Array.from(states.values()).reduce((max, value) => {
+            let state = states.entries().reduce((max, entry) => {
-                return value > max ? value : max;
+                return entry[0] > max ? entry[0] : max;
             }, MapCursorState.DEFAULT);
             let canvas = get(map)?.getCanvas();
             if (canvas) {

website/src/lib/logic/selection.ts

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

website/src/lib/logic/settings.ts

@@ -8,7 +8,6 @@ import {
     defaultOverlayTree,
     defaultOverpassQueries,
     defaultOverpassTree,
-    defaultTerrainSource,
     type CustomLayer,
 } from '$lib/assets/layers';
 import { browser } from '$app/environment';
@@ -155,7 +154,6 @@ export const settings = {
     customLayers: new Setting<Record<string, CustomLayer>>('customLayers', {}),
     customBasemapOrder: new Setting<string[]>('customBasemapOrder', []),
     customOverlayOrder: new Setting<string[]>('customOverlayOrder', []),
-    terrainSource: new Setting('terrainSource', defaultTerrainSource),
     directionMarkers: new Setting('directionMarkers', false),
     distanceMarkers: new Setting('distanceMarkers', false),
     streetViewSource: new Setting('streetViewSource', 'mapillary'),

website/src/lib/logic/statistics-tree.ts

@@ -1,5 +1,5 @@
 import { ListItem, ListLevel } from '$lib/components/file-list/file-list';
-import { GPXFile, GPXStatistics, GPXStatisticsGroup, type Track } from 'gpx';
+import { GPXFile, GPXStatistics, type Track } from 'gpx';
 
 export class GPXStatisticsTree {
     level: ListLevel;
@@ -21,23 +21,23 @@ export class GPXStatisticsTree {
         }
     }
 
-    getStatisticsFor(item: ListItem): GPXStatisticsGroup {
+    getStatisticsFor(item: ListItem): GPXStatistics {
-        let statistics = new GPXStatisticsGroup();
+        let statistics = new GPXStatistics();
         let id = item.getIdAtLevel(this.level);
         if (id === undefined || id === 'waypoints') {
             Object.keys(this.statistics).forEach((key) => {
                 if (this.statistics[key] instanceof GPXStatistics) {
-                    statistics.add(this.statistics[key]);
+                    statistics.mergeWith(this.statistics[key]);
                 } else {
-                    statistics.add(this.statistics[key].getStatisticsFor(item));
+                    statistics.mergeWith(this.statistics[key].getStatisticsFor(item));
                 }
             });
         } else {
             let child = this.statistics[id];
             if (child instanceof GPXStatistics) {
-                statistics.add(child);
+                statistics.mergeWith(child);
             } else if (child !== undefined) {
-                statistics.add(child.getStatisticsFor(item));
+                statistics.mergeWith(child.getStatisticsFor(item));
             }
         }
         return statistics;

website/src/lib/logic/statistics.ts

@@ -1,5 +1,5 @@
 import { selection } from '$lib/logic/selection';
-import { GPXGlobalStatistics, GPXStatisticsGroup } from 'gpx';
+import { GPXStatistics } from 'gpx';
 import { fileStateCollection, GPXFileState } from '$lib/logic/file-state';
 import {
     ListFileItem,
@@ -12,7 +12,7 @@ import { settings } from '$lib/logic/settings';
 const { fileOrder } = settings;
 
 export class SelectedGPXStatistics {
-    private _statistics: Writable<GPXStatisticsGroup>;
+    private _statistics: Writable<GPXStatistics>;
     private _files: Map<
         string,
         {
@@ -22,21 +22,18 @@ export class SelectedGPXStatistics {
     >;
 
     constructor() {
-        this._statistics = writable(new GPXStatisticsGroup());
+        this._statistics = writable(new GPXStatistics());
         this._files = new Map();
         selection.subscribe(() => this.update());
         fileOrder.subscribe(() => this.update());
     }
 
-    subscribe(
+    subscribe(run: (value: GPXStatistics) => void, invalidate?: (value?: GPXStatistics) => void) {
-        run: (value: GPXStatisticsGroup) => void,
-        invalidate?: (value?: GPXStatisticsGroup) => void
-    ) {
         return this._statistics.subscribe(run, invalidate);
     }
 
     update() {
-        let statistics = new GPXStatisticsGroup();
+        let statistics = new GPXStatistics();
         selection.applyToOrderedSelectedItemsFromFile((fileId, level, items) => {
             let stats = fileStateCollection.getStatistics(fileId);
             if (stats) {
@@ -46,7 +43,7 @@ export class SelectedGPXStatistics {
                         !(item instanceof ListWaypointItem || item instanceof ListWaypointsItem) ||
                         first
                     ) {
-                        statistics.add(stats.getStatisticsFor(item));
+                        statistics.mergeWith(stats.getStatisticsFor(item));
                         first = false;
                     }
                 });
@@ -79,7 +76,7 @@ export class SelectedGPXStatistics {
 
 export const gpxStatistics = new SelectedGPXStatistics();
 
-export const slicedGPXStatistics: Writable<[GPXGlobalStatistics, number, number] | undefined> =
+export const slicedGPXStatistics: Writable<[GPXStatistics, number, number] | undefined> =
     writable(undefined);
 
 gpxStatistics.subscribe(() => {

website/src/lib/scripts/pwa-manifest.ts

@@ -1,5 +1,5 @@
 import fs from 'fs';
-import { languages } from '../languages';
+import { languages } from '$lib/languages';
 
 function localizeManifest(manifestTemplateData: any, language: string) {
     const localizedManifestFile = `static/${language}.manifest.webmanifest`;

website/src/lib/units.ts

@@ -229,9 +229,6 @@ export function getConvertedVelocity(
     }
 }
 
-export function getConvertedTemperature(
+export function getConvertedTemperature(value: number) {
-    value: number,
+    return get(temperatureUnits) === 'celsius' ? value : celsiusToFahrenheit(value);
-    targetTemperatureUnits = get(temperatureUnits)
-) {
-    return targetTemperatureUnits === 'celsius' ? value : celsiusToFahrenheit(value);
 }

website/src/lib/utils.ts

@@ -2,13 +2,11 @@ import { type ClassValue, clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { base } from '$app/paths';
 import { languages } from '$lib/languages';
-import { TrackPoint, Waypoint, type Coordinates, crossarcDistance, distance, GPXFile } from 'gpx';
+import { TrackPoint, Waypoint, type Coordinates, crossarcDistance, distance } from 'gpx';
 import mapboxgl from 'mapbox-gl';
 import { pointToTile, pointToTileFraction } from '@mapbox/tilebelt';
 import { PUBLIC_MAPBOX_TOKEN } from '$env/static/public';
 import PNGReader from 'png.js';
-import type { GPXStatisticsTree } from '$lib/logic/statistics-tree';
-import { ListTrackSegmentItem } from '$lib/components/file-list/file-list';
 
 export function cn(...inputs: ClassValue[]) {
     return twMerge(clsx(inputs));
@@ -49,59 +47,6 @@ export function getClosestLinePoint(
     return closest;
 }
 
-export function getClosestTrackSegments(
-    file: GPXFile,
-    statistics: GPXStatisticsTree,
-    point: Coordinates
-): [number, number][] {
-    let segmentBoundsDistances: [number, number, number][] = [];
-    file.forEachSegment((segment, trackIndex, segmentIndex) => {
-        let segmentStatistics = statistics.getStatisticsFor(
-            new ListTrackSegmentItem(file._data.id, trackIndex, segmentIndex)
-        );
-        let segmentBounds = segmentStatistics.global.bounds;
-        let northEast = segmentBounds.northEast;
-        let southWest = segmentBounds.southWest;
-        let bounds = new mapboxgl.LngLatBounds(southWest, northEast);
-        if (bounds.contains(point)) {
-            segmentBoundsDistances.push([0, trackIndex, segmentIndex]);
-        } else {
-            let northWest: Coordinates = { lat: northEast.lat, lon: southWest.lon };
-            let southEast: Coordinates = { lat: southWest.lat, lon: northEast.lon };
-            let distanceToBounds = Math.min(
-                crossarcDistance(northWest, northEast, point),
-                crossarcDistance(northEast, southEast, point),
-                crossarcDistance(southEast, southWest, point),
-                crossarcDistance(southWest, northWest, point)
-            );
-            segmentBoundsDistances.push([distanceToBounds, trackIndex, segmentIndex]);
-        }
-    });
-    segmentBoundsDistances.sort((a, b) => a[0] - b[0]);
-
-    let closest: { distance: number; indices: [number, number][] } = {
-        distance: Number.MAX_VALUE,
-        indices: [],
-    };
-    for (let s = 0; s < segmentBoundsDistances.length; s++) {
-        if (segmentBoundsDistances[s][0] > closest.distance) {
-            break;
-        }
-        const segment = file.getSegment(segmentBoundsDistances[s][1], segmentBoundsDistances[s][2]);
-        segment.trkpt.forEach((pt) => {
-            let dist = distance(pt.getCoordinates(), point);
-            if (dist < closest.distance) {
-                closest.distance = dist;
-                closest.indices = [[segmentBoundsDistances[s][1], segmentBoundsDistances[s][2]]];
-            } else if (dist === closest.distance) {
-                closest.indices.push([segmentBoundsDistances[s][1], segmentBoundsDistances[s][2]]);
-            }
-        });
-    }
-
-    return closest.indices;
-}
-
 export function getElevation(
     points: (TrackPoint | Waypoint | Coordinates)[],
     ELEVATION_ZOOM: number = 13,

website/src/locales/be.json

@@ -79,8 +79,7 @@
         "unhide": "Паказаць",
         "center": "Center",
         "open_in": "Адчыніць у",
-        "copy_coordinates": "Copy coordinates",
+        "copy_coordinates": "Copy coordinates"
-        "edit_osm": "Edit in OpenStreetMap"
     },
     "toolbar": {
         "routing": {
@@ -190,8 +189,6 @@
                 "from": "The start point is too far from the nearest road",
                 "via": "The via point is too far from the nearest road",
                 "to": "The end point is too far from the nearest road",
-                "distance": "The end point is too far from the start point",
-                "connection": "No connection found between the points",
                 "timeout": "Route calculation took too long, try adding points closer together"
             }
         },
@@ -284,7 +281,6 @@
             "update": "Update layer"
         },
         "opacity": "Overlay opacity",
-        "terrain": "Terrain source",
         "label": {
             "basemaps": "Basemaps",
             "overlays": "Overlays",
@@ -328,8 +324,6 @@
             "usgs": "USGS",
             "bikerouterGravel": "bikerouter.de Gravel",
             "cyclOSMlite": "CyclOSM Lite",
-            "mapterhornHillshade": "Mapterhorn Hillshade",
-            "openRailwayMap": "OpenRailwayMap",
             "swisstopoSlope": "swisstopo Slope",
             "swisstopoHiking": "swisstopo Hiking",
             "swisstopoHikingClosures": "swisstopo Hiking Closures",
@@ -358,7 +352,6 @@
             "water": "Water",
             "shower": "Shower",
             "shelter": "Shelter",
-            "cemetery": "Cemetery",
             "motorized": "Cars and Motorcycles",
             "fuel-station": "Fuel Station",
             "parking": "Parking",
@@ -382,9 +375,7 @@
             "railway-station": "Railway Station",
             "tram-stop": "Tram Stop",
             "bus-stop": "Bus Stop",
-            "ferry": "Ferry",
+            "ferry": "Ferry"
-            "mapbox-dem": "Mapbox DEM",
-            "mapterhorn": "Mapterhorn"
         }
     },
     "chart": {
@@ -484,6 +475,7 @@
         "app": "App",
         "contact": "Contact",
         "reddit": "Reddit",
+        "x": "X",
         "facebook": "Facebook",
         "github": "GitHub",
         "crowdin": "Crowdin",