New translations elevation.mdx (Serbian (Latin))

New translations elevation.mdx (Chinese Traditional, Hong Kong)
New translations elevation.mdx (Latvian)
2026-07-30 23:28:39 +00:00 · 2025-11-12 18:00:29 +01:00 · 2025-11-12 18:00:27 +01:00 · 2025-11-12 18:00:26 +01:00 · 2025-11-12 18:00:24 +01:00 · 2025-11-12 18:00:23 +01:00
635 changed files with 11169 additions and 12643 deletions
@@ -1 +1 @@
-open_collective: gpxstudio
+ko_fi: gpxstudio
@@ -1,63 +1,63 @@
 name: Deploy to GitHub Pages
 on:
-    push:
-        branches: 'main'
+  push:
+    branches: 'main'

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

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

-            - name: Build gpx
-              run: npm run build --prefix gpx
+      - name: Build gpx
+        run: npm run build --prefix gpx

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

-            - name: Create env file
-              run: |
-                  touch website/.env
-                  echo PUBLIC_MAPTILER_KEY=${{ secrets.PUBLIC_MAPTILER_KEY }} >> website/.env
-                  cat website/.env
+      - name: Create env file
+        run: |
+          touch website/.env
+          echo PUBLIC_MAPBOX_TOKEN=${{ secrets.PUBLIC_MAPBOX_TOKEN }} >> website/.env
+          cat website/.env

-            - name: Build website
-              env:
-                  BASE_PATH: ''
-              run: |
-                  npm run build --prefix website
+      - name: Build website
+        env:
+          BASE_PATH: ''
+        run: |
+          npm run build --prefix website

-            - name: Upload Artifacts
-              uses: actions/upload-pages-artifact@v4
-              with:
-                  path: 'website/build/'
+      - name: Upload Artifacts
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: 'website/build/'

-    deploy:
-        needs: build_site
-        runs-on: ubuntu-latest
+  deploy:
+    needs: build_site
+    runs-on: ubuntu-latest

-        permissions:
-            pages: write
-            id-token: write
+    permissions:
+      pages: write
+      id-token: write

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

-        steps:
-            - name: Deploy
-              id: deployment
-              uses: actions/deploy-pages@v4
+    steps:
+    - name: Deploy
+      id: deployment
+      uses: actions/deploy-pages@v4
@@ -1,3 +1,6 @@
-website/src/lib/components/ui
-website/src/lib/docs/**/*.mdx
-**/*.webmanifest
+# Ignore files for PNPM, NPM and YARN
+pnpm-lock.yaml
+package-lock.json
+yarn.lock
+src/lib/components/ui
+*.mdx
@@ -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
@@ -5,7 +5,7 @@

 [**gpx.studio**](https://gpx.studio) is an online tool for creating and editing GPX files.

-![gpx.studio screenshot](website/src/lib/assets/img/docs/getting-started/interface.webp)
+![gpx.studio screenshot](website/src/lib/assets/img/docs/getting-started/interface.png)

 This repository contains the source code of the website.

@@ -27,8 +27,8 @@ Any help is greatly appreciated!

 The code is split into two parts:

- `gpx`: a Typescript library for parsing and manipulating GPX files,
- `website`: the website itself, which is a [SvelteKit](https://kit.svelte.dev/) application.
+-   `gpx`: a Typescript library for parsing and manipulating GPX files,
+-   `website`: the website itself, which is a [SvelteKit](https://kit.svelte.dev/) application.

 You will need [Node.js](https://nodejs.org/) to build and run these two parts.

@@ -42,11 +42,11 @@ npm run build

 ### Running the website

-To be able to load the map, you will need to create your own <a href="https://cloud.maptiler.com/auth/widget?next=https://cloud.maptiler.com/maps/" target="_blank">MapTiler key</a> and store it in a `.env` file in the `website` directory.
+To be able to load the map, you will need to create your own <a href="https://account.mapbox.com/auth/signup" target="_blank">Mapbox access token</a> and store it in a `.env` file in the `website` directory.

 ```bash
 cd website
-echo PUBLIC_MAPTILER_KEY={YOUR_MAPTILER_KEY} >> .env
+echo PUBLIC_MAPBOX_TOKEN={YOUR_MAPBOX_TOKEN} >> .env
 npm install
 npm run dev
 ```
@@ -55,25 +55,25 @@ npm run dev

 This project has been made possible thanks to the following open source projects:

- Development:
-    - [Svelte](https://github.com/sveltejs/svelte) and [SvelteKit](https://github.com/sveltejs/kit) — seamless development experience
-    - [MDsveX](https://github.com/pngwn/MDsveX) — allowing a Markdown-based documentation
- Design:
-    - [shadcn-svelte](https://github.com/huntabyte/shadcn-svelte) — beautiful components
-    - [@lucide/svelte](https://github.com/lucide-icons/lucide/tree/main/packages/svelte) — beautiful icons
-    - [tailwindcss](https://github.com/tailwindlabs/tailwindcss) — easy styling
-    - [Chart.js](https://github.com/chartjs/Chart.js) — beautiful and fast charts
- Logic:
-    - [immer](https://github.com/immerjs/immer) — complex state management
-    - [Dexie.js](https://github.com/dexie/Dexie.js) — IndexedDB wrapper
-    - [fast-xml-parser](https://github.com/NaturalIntelligence/fast-xml-parser) — fast GPX file parsing
-    - [SortableJS](https://github.com/SortableJS/Sortable) — creating a sortable file tree
- Mapping:
-    - [MapLibre GL JS](https://github.com/maplibre/maplibre-gl-js) — beautiful and fast interactive map rendering
-    - [GraphHopper](https://github.com/graphhopper/graphhopper) — routing engine
-    - [OpenStreetMap](https://www.openstreetmap.org) — map data used by most of the map layers, and by the routing engine
- Search:
-    - [DocSearch](https://github.com/algolia/docsearch) — search engine for the documentation
+-   Development:
+    -   [Svelte](https://github.com/sveltejs/svelte) and [SvelteKit](https://github.com/sveltejs/kit) — seamless development experience
+    -   [MDsveX](https://github.com/pngwn/MDsveX) — allowing a Markdown-based documentation
+-   Design:
+    -   [shadcn-svelte](https://github.com/huntabyte/shadcn-svelte) — beautiful components
+    -   [@lucide/svelte](https://github.com/lucide-icons/lucide/tree/main/packages/svelte) — beautiful icons
+    -   [tailwindcss](https://github.com/tailwindlabs/tailwindcss) — easy styling
+    -   [Chart.js](https://github.com/chartjs/Chart.js) — beautiful and fast charts
+-   Logic:
+    -   [immer](https://github.com/immerjs/immer) — complex state management
+    -   [Dexie.js](https://github.com/dexie/Dexie.js) — IndexedDB wrapper
+    -   [fast-xml-parser](https://github.com/NaturalIntelligence/fast-xml-parser) — fast GPX file parsing
+    -   [SortableJS](https://github.com/SortableJS/Sortable) — creating a sortable file tree
+-   Mapping:
+    -   [Mapbox GL JS](https://github.com/mapbox/mapbox-gl-js) — beautiful and fast interactive maps
+    -   [brouter](https://github.com/abrensch/brouter) — routing engine
+    -   [OpenStreetMap](https://www.openstreetmap.org) — map data used by Mapbox and brouter
+-   Search:
+    -   [DocSearch](https://github.com/algolia/docsearch) — search engine for the documentation

 ## License

@@ -25,7 +25,7 @@
    "scripts": {
        "build": "tsc",
        "postinstall": "npm run build",
-        "lint": "prettier --check . --config ../.prettierrc && eslint .",
-        "format": "prettier --write . --config ../.prettierrc"
+        "lint": "prettier --check . && eslint .",
+        "format": "prettier --write ."
    }
 }
@@ -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
-                ? gpx.wpt.map((waypoint, index) => new Waypoint(waypoint, index))
-                : [];
+            this.wpt = gpx.wpt ? gpx.wpt.map((waypoint) => new Waypoint(waypoint)) : [];
            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.slice(0);
-        statistics.local.data = this.trkpt.map(() => new TrackPointLocalStatistics());
+        statistics.local.points = this.trkpt.map((point) => point);
+
+        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 =
-                    (points[i].time.getTime() - statistics.global.time.start.getTime()) / 1000;
+                statistics.local.time.total.push(
+                    (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.data[i].time.moving = statistics.global.time.moving;
+            statistics.local.distance.moving.push(statistics.global.distance.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,
-            (start, end) =>
+            200,
+            (accumulated, start, end) =>
                points[start].time && points[end].time
-                    ? (3600 *
-                          (statistics.local.data[end].distance.total -
-                              statistics.local.data[start].distance.total)) /
-                      Math.max(
-                          (points[end].time.getTime() - points[start].time.getTime()) / 1000,
-                          1
-                      )
-                    : undefined,
-            (value, index) => {
-                statistics.local.data[index].speed = value;
-            }
+                    ? (3600 * accumulated) /
+                      (points[end].time.getTime() - points[start].time.getTime())
+                    : undefined
        );

        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 start = simplified[i].point._data.index;
-            let end = simplified[i + 1].point._data.index;
-
-            let cumulEle = 0;
-            let currentStart = start;
-            let currentEnd = start;
-            let prevSmoothedEle = 0;
-            distanceWindowSmoothing(
-                start,
-                end + 1,
-                statistics,
-                0.1,
-                (s, e) => {
-                    for (let i = currentStart; i < s; i++) {
-                        cumulEle -= this.trkpt[i].ele ?? 0;
-                    }
-                    for (let i = currentEnd; i <= e; i++) {
-                        cumulEle += this.trkpt[i].ele ?? 0;
-                    }
-                    currentStart = s;
-                    currentEnd = e + 1;
-                    return cumulEle / (e - s + 1);
-                },
-                (smoothedEle, j) => {
-                    if (j === start) {
-                        smoothedEle = this.trkpt[start].ele ?? 0;
-                        prevSmoothedEle = smoothedEle;
-                    } else if (j === end) {
-                        smoothedEle = this.trkpt[end].ele ?? 0;
-                    }
-                    const ele = smoothedEle - prevSmoothedEle;
-                    if (ele > 0) {
-                        statistics.global.elevation.gain += ele;
-                    } else if (ele < 0) {
-                        statistics.global.elevation.loss -= ele;
-                    }
-                    prevSmoothedEle = smoothedEle;
-                    if (j < end) {
-                        statistics.local.data[j].elevation.gain = statistics.global.elevation.gain;
-                        statistics.local.data[j].elevation.loss = statistics.global.elevation.loss;
-                    }
-                }
-            );
-        }
-        if (statistics.global.length > 0) {
-            statistics.local.data[statistics.global.length - 1].elevation.gain =
-                statistics.global.elevation.gain;
-            statistics.local.data[statistics.global.length - 1].elevation.loss =
-                statistics.global.elevation.loss;
-        }
+        let slope = [];
+        let length = [];

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

-        distanceWindowSmoothing(
-            0,
-            this.trkpt.length,
-            statistics,
-            0.05,
-            (start, end) => {
-                const ele = this.trkpt[end].ele - this.trkpt[start].ele || 0;
-                const dist =
-                    statistics.local.data[end].distance.total -
-                    statistics.local.data[start].distance.total;
-                return dist > 0 ? (0.1 * ele) / dist : 0;
-            },
-            (value, index) => {
-                statistics.local.data[index].slope.at = value;
-            }
-        );
+        return [slope, length];
    }

    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 trkpt = withArtificialTimestamps(og.trkpt, totalTime, lastPoint, startTime, statistics);
+        let slope = og._computeSlope();
+        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 {
@@ -1398,7 +1368,10 @@ export class TrackPoint {
            : undefined;
    }

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

@@ -1422,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 {
@@ -1492,18 +1461,11 @@ export class TrackPoint {

    clone(): TrackPoint {
        return new TrackPoint({
-            attributes: {
-                lat: this.attributes.lat,
-                lon: this.attributes.lon,
-            },
+            attributes: cloneJSON(this.attributes),
            ele: this.ele,
            time: this.time ? new Date(this.time.getTime()) : undefined,
-            extensions: this.extensions ? cloneJSON(this.extensions) : undefined,
-            _data: {
-                index: this._data?.index,
-                anchor: this._data?.anchor,
-                zoom: this._data?.zoom,
-            },
+            extensions: cloneJSON(this.extensions),
+            _data: cloneJSON(this._data),
        });
    }
 }
@@ -1522,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.cmt = waypoint.cmt === '' ? undefined : waypoint.cmt;
-        this.desc = waypoint.desc === '' ? undefined : waypoint.desc;
-        this.link =
-            !waypoint.link ||
-            !waypoint.link.attributes ||
-            !waypoint.link.attributes.href ||
-            waypoint.link.attributes.href === ''
-                ? undefined
-                : waypoint.link;
-        this.sym = waypoint.sym === '' ? undefined : waypoint.sym;
-        this.type = waypoint.type === '' ? undefined : waypoint.type;
+        this.name = waypoint.name;
+        this.cmt = waypoint.cmt;
+        this.desc = waypoint.desc;
+        this.link = waypoint.link;
+        this.sym = waypoint.sym;
+        this.type = waypoint.type;
        if (waypoint.hasOwnProperty('_data')) {
            this._data = waypoint._data;
        }
-        if (index !== undefined) {
-            this._data.index = index;
-        }
    }

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

    clone(): Waypoint {
        return new Waypoint({
-            attributes: {
-                lat: this.attributes.lat,
-                lon: this.attributes.lon,
-            },
+            attributes: cloneJSON(this.attributes),
            ele: this.ele,
            time: this.time ? new Date(this.time.getTime()) : undefined,
            name: this.name,
@@ -1643,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,
@@ -1657,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.cos(lat1) * Math.cos(lat2) * Math.sin(dLon / 2) * Math.sin(dLon / 2);
-    const c = 2 * Math.asin(Math.sqrt(Math.min(a, 1)));
-    return earthRadius * c;
+        Math.sin(lat1) * Math.sin(lat2) +
+        Math.cos(lat1) * Math.cos(lat2) * Math.cos((coord2.lon - coord1.lon) * rad);
+    const maxMeters = earthRadius * Math.acos(Math.min(a, 1));
+    return maxMeters;
 }

 export function getElevationDistanceFunction(statistics: GPXStatistics) {
@@ -1676,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 x2 = statistics.local.data[point2._data.index].distance.total * 1000;
-        let x3 = statistics.local.data[point3._data.index].distance.total * 1000;
+        let x1 = statistics.local.distance.total[point1._data.index] * 1000;
+        let x2 = statistics.local.distance.total[point2._data.index] * 1000;
+        let x3 = statistics.local.distance.total[point3._data.index] * 1000;
        let y1 = point1.ele;
        let y2 = point2.ele;
        let y3 = point3.ele;
@@ -1692,61 +1942,57 @@ export function getElevationDistanceFunction(statistics: GPXStatistics) {
    };
 }

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

@@ -1798,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;
    }
@@ -1,5 +1,4 @@
 export * from './gpx';
-export * from './statistics';
 export { Coordinates, LineStyleExtension, WaypointType } from './types';
 export { parseGPX, buildGPX } from './io';
 export * from './simplify';
@@ -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,
-    point2: TrackPoint | Coordinates,
+    point1: TrackPoint,
+    point2: TrackPoint,
    point3: TrackPoint | Coordinates
 ): number {
    return crossarc(
-        point1 instanceof TrackPoint ? point1.getCoordinates() : point1,
-        point2 instanceof TrackPoint ? point2.getCoordinates() : point2,
+        point1.getCoordinates(),
+        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
-    // between a line segment (defined by p1 and p2) and a third point, p3.
-    // Uses simple planar geometry (ignores earth curvature).
+    // Calculates the shortest distance in meters
+    // between an arc (defined by p1 and p2) and a third point, p3.
+    // Input lat1,lon1,lat2,lon2,lat3,lon3 in degrees.

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

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

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

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

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

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

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

 export function 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 metersPerLongitudeDegree = getMetersPerLongitudeDegree(coord1.lat);
+    const rad = Math.PI / 180;
+    const lat1 = coord1.lat * rad;
+    const lat2 = coord2.lat * rad;
+    const lat3 = coord3.lat * rad;

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

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

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

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

-    // Find the closest point on the segment
-    const projX = x1 + t * dx;
-    const projY = y1 + t * dy;
+    // Is p4 beyond the arc?
+    let dis12 = distance(lat1, lon1, lat2, lon2);
+    let dis14 =
+        Math.acos(Math.cos(dis13 / earthRadius) / Math.cos(dxt / earthRadius)) * earthRadius;
+    if (dis14 > dis12) {
+        return 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: projY / metersPerLatitudeDegree,
-        lon: projX / metersPerLongitudeDegree,
-    };
+        return { lat: lat4 / rad, lon: lon4 / rad };
+    }
 }
@@ -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
-                )
-            );
-        }
-    }
-}
@@ -0,0 +1,6 @@
+{
+  "name": "gpx.studio",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {}
+}
@@ -1 +1 @@
-PUBLIC_MAPTILER_KEY=YOUR_MAPTILER_KEY
+PUBLIC_MAPBOX_TOKEN=YOUR_MAPBOX_TOKEN
@@ -1,8 +1,9 @@
 {
 	"$schema": "https://shadcn-svelte.com/schema.json",
+	"style": "default",
 	"tailwind": {
 		"css": "src/app.css",
-		"baseColor": "neutral"
+		"baseColor": "slate"
 	},
 	"aliases": {
 		"components": "$lib/components",
@@ -12,9 +13,5 @@
 		"lib": "$lib"
 	},
 	"typescript": true,
-	"registry": "https://shadcn-svelte.com/registry",
-	"style": "nova",
-	"iconLibrary": "lucide",
-	"menuColor": "default",
-	"menuAccent": "subtle"
+	"registry": "https://shadcn-svelte.com/registry"
 }
@@ -10,13 +10,11 @@
        "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 .",
-        "format": "prettier --write . --config ../.prettierrc --ignore-path ../.prettierignore --ignore-path ./.gitignore"
+        "lint": "prettier --check . && eslint .",
+        "format": "prettier --write ."
    },
    "devDependencies": {
-        "@fontsource-variable/inter": "^5.2.8",
-        "@internationalized/date": "^3.12.0",
-        "@lucide/svelte": "^1.7.0",
+        "@lucide/svelte": "^0.544.0",
        "@sveltejs/adapter-static": "^3.0.8",
        "@sveltejs/enhanced-img": "^0.6.0",
        "@sveltejs/kit": "^2.21.2",
@@ -25,15 +23,15 @@
        "@types/eslint": "^9.6.1",
        "@types/events": "^3.0.3",
        "@types/file-saver": "^2.0.7",
-        "@types/mapbox__sphericalmercator": "^1.2.3",
        "@types/mapbox__tilebelt": "^1.0.4",
+        "@types/mapbox-gl": "^3.4.1",
        "@types/node": "^22.15.30",
+        "@types/png.js": "^0.2.3",
        "@types/sanitize-html": "^2.16.0",
        "@types/sortablejs": "^1.15.8",
        "@typescript-eslint/eslint-plugin": "^8.33.1",
        "@typescript-eslint/parser": "^8.33.1",
-        "bits-ui": "^2.17.2",
-        "clsx": "^2.1.1",
+        "bits-ui": "^2.12.0",
        "eslint": "^9.28.0",
        "eslint-config-prettier": "^10.1.5",
        "eslint-plugin-svelte": "^3.9.1",
@@ -46,37 +44,41 @@
        "postcss": "^8.4.47",
        "prettier": "^3.5.3",
        "prettier-plugin-svelte": "^3.4.0",
-        "shadcn-svelte": "^1.2.7",
        "svelte": "^5.33.18",
        "svelte-check": "^4.0.0",
        "svelte-dnd-action": "^0.9.65",
-        "svelte-sonner": "^1.1.0",
-        "tailwind-merge": "^3.5.0",
-        "tailwind-variants": "^3.2.2",
+        "svelte-sonner": "^1.0.5",
+        "tailwind-variants": "^3.1.1",
        "tailwindcss": "^4.1.8",
        "tslib": "^2.8.1",
        "tsx": "^4.19.1",
-        "tw-animate-css": "^1.4.0",
+        "tw-animate-css": "^1.3.4",
        "typescript": "^5.8.3",
        "vaul-svelte": "^1.0.0-next.7",
-        "vite": "^6.3.5"
+        "vite": "^6.3.5",
+        "vite-plugin-node-polyfills": "^0.23.0"
    },
    "type": "module",
    "dependencies": {
        "@docsearch/js": "^3.9.0",
+        "@internationalized/date": "^3.8.2",
+        "@mapbox/mapbox-gl-geocoder": "^5.0.3",
        "@mapbox/sphericalmercator": "^2.0.1",
        "@mapbox/tilebelt": "^2.0.2",
-        "@maplibre/maplibre-gl-geocoder": "^1.9.4",
-        "chart.js": "^4.5.1",
+        "@types/mapbox__sphericalmercator": "^1.2.3",
+        "chart.js": "^4.4.9",
        "chartjs-plugin-zoom": "^2.2.0",
+        "clsx": "^2.1.1",
        "dexie": "^4.0.11",
        "file-saver": "^2.0.5",
        "gpx": "file:../gpx",
        "immer": "^10.1.1",
        "jszip": "^3.10.1",
+        "mapbox-gl": "^3.12.0",
        "mapillary-js": "^4.1.2",
-        "maplibre-gl": "^5.21.1",
+        "png.js": "^0.2.1",
        "sanitize-html": "^2.17.0",
-        "sortablejs": "^1.15.6"
+        "sortablejs": "^1.15.6",
+        "tailwind-merge": "^3.3.0"
    }
 }
@@ -1,164 +1,124 @@
-@import 'tailwindcss';
-@import 'tw-animate-css';
-@import "shadcn-svelte/tailwind.css";
-@import "@fontsource-variable/inter";
+@import "tailwindcss";
+@import "tw-animate-css";
 
@custom-variant dark (&:is(.dark *));
 
 :root {
-    --background: oklch(1 0 0);
-    --foreground: oklch(0.145 0 0);
-    --muted: oklch(0.97 0 0);
-    --muted-foreground: oklch(0.556 0 0);
-    --popover: oklch(1 0 0);
-    --popover-foreground: oklch(0.145 0 0);
-    --card: oklch(1 0 0);
-    --card-foreground: oklch(0.145 0 0);
-    --border: oklch(0.922 0 0);
-    --input: oklch(0.922 0 0);
-    --primary: oklch(0.205 0 0);
-    --primary-foreground: oklch(0.985 0 0);
-    --secondary: oklch(0.97 0 0);
-    --secondary-foreground: oklch(0.205 0 0);
-    --accent: oklch(0.97 0 0);
-    --accent-foreground: oklch(0.205 0 0);
-    --destructive: oklch(0.577 0.245 27.325);
-    --destructive-foreground: hsl(0 0% 98%);
-    --ring: oklch(0.708 0 0);
-    --sidebar: oklch(0.985 0 0);
-    --sidebar-foreground: oklch(0.145 0 0);
-    --sidebar-primary: oklch(0.205 0 0);
-    --sidebar-primary-foreground: oklch(0.985 0 0);
-    --sidebar-accent: oklch(0.97 0 0);
-    --sidebar-accent-foreground: oklch(0.205 0 0);
-    --sidebar-border: oklch(0.922 0 0);
-    --sidebar-ring: oklch(0.708 0 0);
+ --background: hsl(0 0% 100%) /* <- Wrap in HSL */;
+ --foreground: hsl(240 10% 3.9%);
+ --muted: hsl(240 4.8% 95.9%);
+ --muted-foreground: hsl(240 3.8% 46.1%);
+ --popover: hsl(0 0% 100%);
+ --popover-foreground: hsl(240 10% 3.9%);
+ --card: hsl(0 0% 100%);
+ --card-foreground: hsl(240 10% 3.9%);
+ --border: hsl(240 5.9% 90%);
+ --input: hsl(240 5.9% 90%);
+ --primary: hsl(240 5.9% 10%);
+ --primary-foreground: hsl(0 0% 98%);
+ --secondary: hsl(240 4.8% 95.9%);
+ --secondary-foreground: hsl(240 5.9% 10%);
+ --accent: hsl(240 4.8% 95.9%);
+ --accent-foreground: hsl(240 5.9% 10%);
+ --destructive: hsl(0 72.2% 50.6%);
+ --destructive-foreground: hsl(0 0% 98%);
+ --ring: hsl(240 10% 3.9%);
+ --sidebar: hsl(0 0% 98%);
+ --sidebar-foreground: hsl(240 5.3% 26.1%);
+ --sidebar-primary: hsl(240 5.9% 10%);
+ --sidebar-primary-foreground: hsl(0 0% 98%);
+ --sidebar-accent: hsl(240 4.8% 95.9%);
+ --sidebar-accent-foreground: hsl(240 5.9% 10%);
+ --sidebar-border: hsl(220 13% 91%);
+ --sidebar-ring: hsl(217.2 91.2% 59.8%);

-    --support: rgb(220 15 130);
-    --link: rgb(0 110 180);
-    --selection: hsl(240 4.8% 93%);
+ --support: rgb(220 15 130);
+ --link: rgb(0 110 180);
 
-    --radius: 0.5rem;
-
-    --chart-1: oklch(0.87 0 0);
-
-    --chart-2: oklch(0.556 0 0);
-
-    --chart-3: oklch(0.439 0 0);
-
-    --chart-4: oklch(0.371 0 0);
-
-    --chart-5: oklch(0.269 0 0);
+ --radius: 0.5rem;
 }
 
 .dark {
-    --background: oklch(0.145 0 0);
-    --foreground: oklch(0.985 0 0);
-    --muted: oklch(0.269 0 0);
-    --muted-foreground: oklch(0.708 0 0);
-    --popover: oklch(0.205 0 0);
-    --popover-foreground: oklch(0.985 0 0);
-    --card: oklch(0.205 0 0);
-    --card-foreground: oklch(0.985 0 0);
-    --border: oklch(1 0 0 / 10%);
-    --input: oklch(1 0 0 / 15%);
-    --primary: oklch(0.922 0 0);
-    --primary-foreground: oklch(0.205 0 0);
-    --secondary: oklch(0.269 0 0);
-    --secondary-foreground: oklch(0.985 0 0);
-    --accent: oklch(0.269 0 0);
-    --accent-foreground: oklch(0.985 0 0);
-    --destructive: oklch(0.704 0.191 22.216);
-    --destructive-foreground: hsl(0 0% 98%);
-    --ring: oklch(0.556 0 0);
-    --sidebar: oklch(0.205 0 0);
-    --sidebar-foreground: oklch(0.985 0 0);
-    --sidebar-primary: oklch(0.488 0.243 264.376);
-    --sidebar-primary-foreground: oklch(0.985 0 0);
-    --sidebar-accent: oklch(0.269 0 0);
-    --sidebar-accent-foreground: oklch(0.985 0 0);
-    --sidebar-border: oklch(1 0 0 / 10%);
-    --sidebar-ring: oklch(0.556 0 0);
+ --background: hsl(240 10% 3.9%);
+ --foreground: hsl(0 0% 98%);
+ --muted: hsl(240 3.7% 15.9%);
+ --muted-foreground: hsl(240 5% 64.9%);
+ --popover: hsl(240 10% 3.9%);
+ --popover-foreground: hsl(0 0% 98%);
+ --card: hsl(240 10% 3.9%);
+ --card-foreground: hsl(0 0% 98%);
+ --border: hsl(240 3.7% 15.9%);
+ --input: hsl(240 3.7% 15.9%);
+ --primary: hsl(0 0% 98%);
+ --primary-foreground: hsl(240 5.9% 10%);
+ --secondary: hsl(240 3.7% 15.9%);
+ --secondary-foreground: hsl(0 0% 98%);
+ --accent: hsl(240 3.7% 15.9%);
+ --accent-foreground: hsl(0 0% 98%);
+ --destructive: hsl(0 62.8% 30.6%);
+ --destructive-foreground: hsl(0 0% 98%);
+ --ring: hsl(240 4.9% 83.9%);
+ --sidebar: hsl(240 5.9% 10%);
+ --sidebar-foreground: hsl(240 4.8% 95.9%);
+ --sidebar-primary: hsl(224.3 76.3% 48%);
+ --sidebar-primary-foreground: hsl(0 0% 100%);
+ --sidebar-accent: hsl(240 3.7% 15.9%);
+ --sidebar-accent-foreground: hsl(240 4.8% 95.9%);
+ --sidebar-border: hsl(240 3.7% 15.9%);
+ --sidebar-ring: hsl(217.2 91.2% 59.8%);

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

-    --breakpoint-xs: 540px;
-
-    --font-sans: 'Inter Variable', sans-serif;
-
-    --color-chart-5: var(--chart-5);
-
-    --color-chart-4: var(--chart-4);
-
-    --color-chart-3: var(--chart-3);
-
-    --color-chart-2: var(--chart-2);
-
-    --color-chart-1: var(--chart-1);
-
-    --radius-2xl: calc(var(--radius) * 1.8);
-
-    --radius-3xl: calc(var(--radius) * 2.2);
-
-    --radius-4xl: calc(var(--radius) * 2.6);
+ --breakpoint-xs: 540px;
 }
 
@layer base {
-    * {
-        @apply border-border outline-ring/50;
-    }
+ * {
+  @apply border-border;
+ }
 
-    body {
-        @apply bg-background text-foreground;
-    }
-	html {
-		@apply font-sans;
-    }
+ body {
+  @apply bg-background text-foreground;
+ }
 }
@@ -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}" />
@@ -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",
@@ -22,39 +22,15 @@ import {
    Binoculars,
    Toilet,
 } from 'lucide-static';
-import { type RasterDEMSourceSpecification, type StyleSpecification } from 'maplibre-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';
 import bikerouterGravel from './custom/bikerouter-gravel.json';

-export const maptilerKeyPlaceHolder = 'MAPTILER_KEY';
-
 export const basemaps: { [key: string]: string | StyleSpecification } = {
-    topo: 'https://raw.githubusercontent.com/gpxstudio/styles/refs/heads/main/topo.json',
-    satellite: 'https://raw.githubusercontent.com/gpxstudio/styles/refs/heads/main/satellite.json',
-    esriSatellite: {
-        version: 8,
-        sources: {
-            esriSatellite: {
-                type: 'raster',
-                tiles: [
-                    'https://services.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/WMTS/tile/1.0.0/World_Imagery/default/default028mm/{z}/{y}/{x}.jpg',
-                ],
-                tileSize: 256,
-                maxzoom: 19,
-                attribution:
-                    '© <a href="https://www.esri.com/" target="_blank">Esri</a>, Vantor, Earthstar Geographics, and the GIS User Community',
-            },
-        },
-        layers: [
-            {
-                id: 'esriSatellite',
-                type: 'raster',
-                source: 'esriSatellite',
-            },
-        ],
-    },
+    mapboxOutdoors: 'mapbox://styles/mapbox/outdoors-v12',
+    mapboxSatellite: 'mapbox://styles/mapbox/satellite-streets-v12',
    openStreetMap: {
        version: 8,
        sources: {
@@ -169,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: {
@@ -392,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: {
@@ -797,9 +737,8 @@ export type LayerTreeType = { [key: string]: LayerTreeType | boolean };
 export const basemapTree: LayerTreeType = {
    basemaps: {
        world: {
-            topo: true,
-            satellite: true,
-            esriSatellite: true,
+            mapboxOutdoors: true,
+            mapboxSatellite: true,
            openStreetMap: true,
            openTopoMap: true,
            openHikingMap: true,
@@ -860,10 +799,8 @@ export const overlayTree: LayerTreeType = {
                waymarkedTrailsHorseRiding: true,
                waymarkedTrailsWinter: true,
            },
-            bikerouterGravel: true,
            cyclOSMlite: true,
-            mapterhornHillshade: true,
-            openRailwayMap: true,
+            bikerouterGravel: true,
        },
        countries: {
            france: {
@@ -899,7 +836,6 @@ export const overpassTree: LayerTreeType = {
            shower: true,
            shelter: true,
            barrier: true,
-            cemetery: true,
        },
        tourism: {
            attraction: true,
@@ -932,7 +868,7 @@ export const overpassTree: LayerTreeType = {
 };

 // Default basemap used
-export const defaultBasemap = 'topo';
+export const defaultBasemap = 'mapboxOutdoors';

 // Default overlays used (none)
 export const defaultOverlays: LayerTreeType = {
@@ -946,10 +882,8 @@ export const defaultOverlays: LayerTreeType = {
                waymarkedTrailsHorseRiding: false,
                waymarkedTrailsWinter: false,
            },
-            bikerouterGravel: false,
            cyclOSMlite: false,
-            mapterhornHillshade: false,
-            openRailwayMap: false,
+            bikerouterGravel: false,
        },
        countries: {
            france: {
@@ -985,7 +919,6 @@ export const defaultOverpassQueries: LayerTreeType = {
            shower: false,
            shelter: false,
            barrier: false,
-            cemetery: false,
        },
        tourism: {
            attraction: false,
@@ -1021,9 +954,8 @@ export const defaultOverpassQueries: LayerTreeType = {
 export const defaultBasemapTree: LayerTreeType = {
    basemaps: {
        world: {
-            topo: true,
-            satellite: true,
-            esriSatellite: false,
+            mapboxOutdoors: true,
+            mapboxSatellite: true,
            openStreetMap: true,
            openTopoMap: true,
            openHikingMap: true,
@@ -1084,10 +1016,8 @@ export const defaultOverlayTree: LayerTreeType = {
                waymarkedTrailsHorseRiding: false,
                waymarkedTrailsWinter: false,
            },
-            bikerouterGravel: false,
            cyclOSMlite: false,
-            mapterhornHillshade: false,
-            openRailwayMap: false,
+            bikerouterGravel: false,
        },
        countries: {
            france: {
@@ -1123,7 +1053,6 @@ export const defaultOverpassTree: LayerTreeType = {
            shower: false,
            shelter: false,
            barrier: false,
-            cemetery: false,
        },
        tourism: {
            attraction: false,
@@ -1162,7 +1091,7 @@ export type CustomLayer = {
    maxZoom: number;
    layerType: 'basemap' | 'overlay';
    resourceType: 'raster' | 'vector';
-    value: string | maplibregl.StyleSpecification;
+    value: string | {};
 };

 type OverpassQueryData = {
@@ -1170,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;
 };

@@ -1251,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,
@@ -1301,25 +1218,7 @@ export const overpassQueryData: Record<string, OverpassQueryData> = {
            color: '#000000',
        },
        tags: {
-            barrier: [
-                'bar',
-                'barrier_board',
-                'block',
-                'chain',
-                'cycle_barrier',
-                'gate',
-                'hampshire_gate',
-                'horse_stile',
-                'kissing_gate',
-                'lift_gate',
-                'motorcycle_barrier',
-                'sliding_beam',
-                'sliding_gate',
-                'stile',
-                'swing_gate',
-                'turnstile',
-                'wicket_gate',
-            ],
+            barrier: true,
        },
    },
    attraction: {
@@ -1479,13 +1378,3 @@ export const overpassQueryData: Record<string, OverpassQueryData> = {
        symbol: 'Anchor',
    },
 };
-
-export const terrainSources: { [key: string]: RasterDEMSourceSpecification } = {
-    mapterhorn: {
-        type: 'raster-dem',
-        url: 'https://tiles.gpx.studio/mapterhorn.json',
-        encoding: 'terrarium',
-    },
-};
-
-export const defaultTerrainSource = 'mapterhorn';
@@ -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: {
-        value: 'Crossing',
-        icon: X,
-        iconSvg: XSvg,
-    },
+    crossing: { value: 'Crossing' },
    department_store: {
        value: 'Department Store',
        icon: ShoppingBasket,
@@ -64,9 +64,3 @@
 </svelte:head>

 <div id="docsearch" class={props.class ?? ''}></div>
-
-<style>
-    #docsearch :global(button) {
-        margin-left: 0px;
-    }
-</style>
@@ -26,7 +26,7 @@
    <Tooltip.Root>
        <Tooltip.Trigger>
            {#snippet child({ props })}
-                <Button {...props} {variant} class="bg-inherit {className}" {onclick}>
+                <Button {...props} {variant} class={className} {onclick}>
                    {@render children()}
                </Button>
            {/snippet}
@@ -1,118 +1,124 @@
 <script lang="ts">
    import { Button } from '$lib/components/ui/button';
    import LanguageSelect from '$lib/components/LanguageSelect.svelte';
-    import ModeSwitch from '$lib/components/ModeSwitch.svelte';
    import Logo from '$lib/components/Logo.svelte';
    import { AtSign, BookOpenText, Heart, House, Map } from '@lucide/svelte';
    import { i18n } from '$lib/i18n.svelte';
    import { getURLForLanguage } from '$lib/utils';
 </script>

-<footer class="w-full px-12 py-10 border-t flex flex-col items-center">
-    <div class="w-full max-w-5xl flex flex-row flex-wrap justify-between gap-x-10 gap-y-6">
-        <div class="grow flex flex-col items-start">
-            <Logo class="h-8" width="153" />
-            <Button
-                variant="link"
-                class="h-6 px-0 has-[>svg]:px-0 text-muted-foreground"
-                href="https://github.com/gpxstudio/gpx.studio/blob/main/LICENSE"
-                target="_blank"
-            >
-                MIT © 2026 gpx.studio
-            </Button>
-            <div class="mt-3 flex flex-row gap-1.5">
-                <LanguageSelect />
-                <ModeSwitch />
+<footer class="w-full">
+    <div class="mx-6 border-t">
+        <div class="mx-12 py-10 flex flex-row flex-wrap justify-between gap-x-10 gap-y-6">
+            <div class="grow flex flex-col items-start">
+                <Logo class="h-8" width="153" />
+                <Button
+                    variant="link"
+                    class="h-6 px-0 has-[>svg]:px-0 text-muted-foreground"
+                    href="https://github.com/gpxstudio/gpx.studio/blob/main/LICENSE"
+                    target="_blank"
+                >
+                    MIT © 2025 gpx.studio
+                </Button>
+                <LanguageSelect class="w-40 mt-3" />
            </div>
-        </div>
-        <div class="grow max-w-2xl flex flex-row flex-wrap justify-between gap-x-10 gap-y-6">
-            <div class="flex flex-col items-start gap-1">
-                <span class="font-semibold">{i18n._('homepage.website')}</span>
-                <Button
-                    variant="link"
-                    class="h-6 px-0 has-[>svg]:px-0 text-muted-foreground"
-                    href={getURLForLanguage(i18n.lang, '/')}
-                >
-                    <House size="16" />
-                    {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')}
-                >
-                    <Map size="16" />
-                    {i18n._('homepage.app')}
-                </Button>
-                <Button
-                    variant="link"
-                    class="h-6 px-0 has-[>svg]:px-0 text-muted-foreground"
-                    href={getURLForLanguage(i18n.lang, '/help')}
-                >
-                    <BookOpenText size="16" />
-                    {i18n._('menu.help')}
-                </Button>
-            </div>
-            <div class="flex flex-col items-start gap-1" id="contact">
-                <span class="font-semibold">{i18n._('homepage.contact')}</span>
-                <Button
-                    variant="link"
-                    class="h-6 px-0 has-[>svg]:px-0 text-muted-foreground"
-                    href="https://www.reddit.com/r/gpxstudio/"
-                    target="_blank"
-                >
-                    <Logo company="reddit" class="h-4 fill-muted-foreground" />
-                    {i18n._('homepage.reddit')}
-                </Button>
-                <Button
-                    variant="link"
-                    class="h-6 px-0 has-[>svg]:px-0 text-muted-foreground"
-                    href="https://facebook.com/gpx.studio"
-                    target="_blank"
-                >
-                    <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="mailto:hello@gpx.studio"
-                    target="_blank"
-                >
-                    <AtSign size="16" />
-                    {i18n._('homepage.email')}
-                </Button>
-            </div>
-            <div class="flex flex-col items-start gap-1">
-                <span class="font-semibold">{i18n._('homepage.contribute')}</span>
-                <Button
-                    variant="link"
-                    class="h-6 px-0 has-[>svg]:px-0 text-muted-foreground"
-                    href="https://opencollective.com/gpxstudio"
-                    target="_blank"
-                >
-                    <Heart size="16" />
-                    {i18n._('menu.donate')}
-                </Button>
-                <Button
-                    variant="link"
-                    class="h-6 px-0 has-[>svg]:px-0 text-muted-foreground"
-                    href="https://crowdin.com/project/gpxstudio"
-                    target="_blank"
-                >
-                    <Logo company="crowdin" class="h-4 fill-muted-foreground" />
-                    {i18n._('homepage.crowdin')}
-                </Button>
-                <Button
-                    variant="link"
-                    class="h-6 px-0 has-[>svg]:px-0 text-muted-foreground"
-                    href="https://github.com/gpxstudio/gpx.studio"
-                    target="_blank"
-                >
-                    <Logo company="github" class="h-4 fill-muted-foreground" />
-                    {i18n._('homepage.github')}
-                </Button>
+            <div class="grow max-w-2xl flex flex-row flex-wrap justify-between gap-x-10 gap-y-6">
+                <div class="flex flex-col items-start gap-1">
+                    <span class="font-semibold">{i18n._('homepage.website')}</span>
+                    <Button
+                        variant="link"
+                        class="h-6 px-0 has-[>svg]:px-0 text-muted-foreground"
+                        href={getURLForLanguage(i18n.lang, '/')}
+                    >
+                        <House size="16" />
+                        {i18n._('homepage.home')}
+                    </Button>
+                    <Button
+                        variant="link"
+                        class="h-6 px-0 has-[>svg]:px-0 text-muted-foreground"
+                        href={getURLForLanguage(i18n.lang, '/app')}
+                    >
+                        <Map size="16" />
+                        {i18n._('homepage.app')}
+                    </Button>
+                    <Button
+                        variant="link"
+                        class="h-6 px-0 has-[>svg]:px-0 text-muted-foreground"
+                        href={getURLForLanguage(i18n.lang, '/help')}
+                    >
+                        <BookOpenText size="16" />
+                        {i18n._('menu.help')}
+                    </Button>
+                </div>
+                <div class="flex flex-col items-start gap-1" id="contact">
+                    <span class="font-semibold">{i18n._('homepage.contact')}</span>
+                    <Button
+                        variant="link"
+                        class="h-6 px-0 has-[>svg]:px-0 text-muted-foreground"
+                        href="https://www.reddit.com/r/gpxstudio/"
+                        target="_blank"
+                    >
+                        <Logo company="reddit" class="h-4 fill-muted-foreground" />
+                        {i18n._('homepage.reddit')}
+                    </Button>
+                    <Button
+                        variant="link"
+                        class="h-6 px-0 has-[>svg]:px-0 text-muted-foreground"
+                        href="https://facebook.com/gpx.studio"
+                        target="_blank"
+                    >
+                        <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"
+                        href="mailto:hello@gpx.studio"
+                        target="_blank"
+                    >
+                        <AtSign size="16" />
+                        {i18n._('homepage.email')}
+                    </Button>
+                </div>
+                <div class="flex flex-col items-start gap-1">
+                    <span class="font-semibold">{i18n._('homepage.contribute')}</span>
+                    <Button
+                        variant="link"
+                        class="h-6 px-0 has-[>svg]:px-0 text-muted-foreground"
+                        href="https://ko-fi.com/gpxstudio"
+                        target="_blank"
+                    >
+                        <Heart size="16" />
+                        {i18n._('menu.donate')}
+                    </Button>
+                    <Button
+                        variant="link"
+                        class="h-6 px-0 has-[>svg]:px-0 text-muted-foreground"
+                        href="https://crowdin.com/project/gpxstudio"
+                        target="_blank"
+                    >
+                        <Logo company="crowdin" class="h-4 fill-muted-foreground" />
+                        {i18n._('homepage.crowdin')}
+                    </Button>
+                    <Button
+                        variant="link"
+                        class="h-6 px-0 has-[>svg]:px-0 text-muted-foreground"
+                        href="https://github.com/gpxstudio/gpx.studio"
+                        target="_blank"
+                    >
+                        <Logo company="github" class="h-4 fill-muted-foreground" />
+                        {i18n._('homepage.github')}
+                    </Button>
+                </div>
            </div>
        </div>
    </div>
@@ -6,87 +6,88 @@
    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';

    const { velocityUnits } = settings;

-    let panelHeight: number = $state(0);
-    let panelWidth: number = $state(0);
-
    let {
        gpxStatistics,
        slicedGPXStatistics,
        orientation,
+        panelSize,
    }: {
-        gpxStatistics: Readable<GPXStatisticsGroup>;
-        slicedGPXStatistics: Readable<[GPXGlobalStatistics, number, number] | undefined>;
+        gpxStatistics: Readable<GPXStatistics>;
+        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>

 <Card.Root
    class="h-full {orientation === 'vertical'
-        ? 'min-w-40 sm:min-w-44'
-        : 'w-full h-fit my-1'} ring-0 p-0 text-sm sm:text-base bg-transparent"
+        ? 'min-w-40 sm:min-w-44 text-sm sm:text-base'
+        : 'w-full'} border-none shadow-none p-0"
 >
-    <Card.Content class="h-full p-0">
-        <div
-            bind:clientHeight={panelHeight}
-            bind:clientWidth={panelWidth}
-            class="flex {orientation === 'vertical'
-                ? 'flex-col h-full justify-center'
-                : 'flex-row w-full justify-evenly'} gap-4"
-        >
-            <Tooltip label={i18n._('quantities.distance')}>
+    <Card.Content
+        class="h-full flex {orientation === 'vertical'
+            ? 'flex-col justify-center'
+            : 'flex-row w-full justify-between'} gap-4  p-0"
+    >
+        <Tooltip label={i18n._('quantities.distance')}>
+            <span class="flex flex-row items-center">
+                <Ruler size="16" class="mr-1" />
+                <WithUnits value={statistics.global.distance.total} type="distance" />
+            </span>
+        </Tooltip>
+        <Tooltip label={i18n._('quantities.elevation_gain_loss')}>
+            <span class="flex flex-row items-center">
+                <MoveUpRight size="16" class="mr-1" />
+                <WithUnits value={statistics.global.elevation.gain} type="elevation" />
+                <MoveDownRight size="16" class="mx-1" />
+                <WithUnits value={statistics.global.elevation.loss} type="elevation" />
+            </span>
+        </Tooltip>
+        {#if panelSize > 120 || orientation === 'horizontal'}
+            <Tooltip
+                class={orientation === 'horizontal' ? 'hidden xs:block' : ''}
+                label="{$velocityUnits === 'speed'
+                    ? i18n._('quantities.speed')
+                    : i18n._('quantities.pace')} ({i18n._('quantities.moving')} / {i18n._(
+                    'quantities.total'
+                )})"
+            >
                <span class="flex flex-row items-center">
-                    <Ruler size="16" class="mr-1" />
-                    <WithUnits value={statistics.distance.total} type="distance" />
+                    <Zap size="16" class="mr-1" />
+                    <WithUnits
+                        value={statistics.global.speed.moving}
+                        type="speed"
+                        showUnits={false}
+                    />
+                    <span class="mx-1">/</span>
+                    <WithUnits value={statistics.global.speed.total} type="speed" />
                </span>
            </Tooltip>
-            <Tooltip label={i18n._('quantities.elevation_gain_loss')}>
+        {/if}
+        {#if panelSize > 160 || orientation === 'horizontal'}
+            <Tooltip
+                class={orientation === 'horizontal' ? 'hidden md:block' : ''}
+                label="{i18n._('quantities.time')} ({i18n._('quantities.moving')} / {i18n._(
+                    'quantities.total'
+                )})"
+            >
                <span class="flex flex-row items-center">
-                    <MoveUpRight size="16" class="mr-1" />
-                    <WithUnits value={statistics.elevation.gain} type="elevation" />
-                    <MoveDownRight size="16" class="mx-1" />
-                    <WithUnits value={statistics.elevation.loss} type="elevation" />
+                    <Timer size="16" class="mr-1" />
+                    <WithUnits value={statistics.global.time.moving} type="time" />
+                    <span class="mx-1">/</span>
+                    <WithUnits value={statistics.global.time.total} type="time" />
                </span>
            </Tooltip>
-            {#if panelHeight > 120 || (orientation === 'horizontal' && panelWidth > 450)}
-                <Tooltip
-                    label="{$velocityUnits === 'speed'
-                        ? i18n._('quantities.speed')
-                        : i18n._('quantities.pace')} ({i18n._('quantities.moving')} / {i18n._(
-                        'quantities.total'
-                    )})"
-                >
-                    <span class="flex flex-row items-center">
-                        <Zap size="16" class="mr-1" />
-                        <WithUnits value={statistics.speed.moving} type="speed" showUnits={false} />
-                        <span class="mx-1">/</span>
-                        <WithUnits value={statistics.speed.total} type="speed" />
-                    </span>
-                </Tooltip>
-            {/if}
-            {#if panelHeight > 150 || (orientation === 'horizontal' && panelWidth > 620)}
-                <Tooltip
-                    label="{i18n._('quantities.time')} ({i18n._('quantities.moving')} / {i18n._(
-                        'quantities.total'
-                    )})"
-                >
-                    <span class="flex flex-row items-center">
-                        <Timer size="16" class="mr-1" />
-                        <WithUnits value={statistics.time.moving} type="time" />
-                        <span class="mx-1">/</span>
-                        <WithUnits value={statistics.time.total} type="time" />
-                    </span>
-                </Tooltip>
-            {/if}
-        </div>
+        {/if}
    </Card.Content>
 </Card.Root>
@@ -14,12 +14,12 @@
    } = $props();
 </script>

-<div class="text-[13px] bg-secondary rounded border flex flex-row items-center p-2 {className}">
+<div class="text-sm bg-secondary rounded border flex flex-row items-center p-2 {className}">
    <CircleQuestionMark size="16" class="w-4 mr-2 shrink-0 grow-0" />
    <div>
        {@render children()}
        {#if link}
-            <a href={link} target="_blank" class="text-[13px] text-link hover:underline">
+            <a href={link} target="_blank" class="text-sm text-link hover:underline">
                {i18n._('menu.more')}
            </a>
        {/if}
@@ -5,10 +5,16 @@
    import { getURLForLanguage } from '$lib/utils';
    import { Languages } from '@lucide/svelte';
    import { i18n } from '$lib/i18n.svelte';
+
+    let {
+        class: className = '',
+    }: {
+        class?: string;
+    } = $props();
 </script>

 <Select.Root type="single" value={i18n.lang}>
-    <Select.Trigger class="w-[180px] px-2" aria-label={i18n._('menu.language')}>
+    <Select.Trigger class="min-w-[180px] {className}" aria-label={i18n._('menu.language')}>
        <Languages size="16" />
        <span class="mr-auto">
            {languages[i18n.lang]}
@@ -8,7 +8,7 @@
        ...others
    }: {
        iconOnly?: boolean;
-        company?: 'gpx.studio' | 'github' | 'crowdin' | 'facebook' | 'reddit';
+        company?: 'gpx.studio' | 'mapbox' | 'github' | 'crowdin' | 'facebook' | 'x' | 'reddit';
        [key: string]: any;
    } = $props();
 </script>
@@ -19,6 +19,12 @@
        alt="Logo of gpx.studio."
        {...others}
    />
+{:else if company === 'mapbox'}
+    <img
+        src="{base}/mapbox-logo-{mode.current === 'dark' ? 'white' : 'black'}.svg"
+        alt="Logo of Mapbox."
+        {...others}
+    />
 {:else if company === 'github'}
    <svg
        role="img"
@@ -49,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"
@@ -43,8 +43,6 @@
        BookOpenText,
        ChartArea,
        Maximize,
-        Maximize2,
-        Minimize2,
    } from '@lucide/svelte';
    import { map } from '$lib/components/map/map';
    import { editMetadata } from '$lib/components/file-list/metadata/utils.svelte';
@@ -72,7 +70,7 @@
    import { copied, selection } from '$lib/logic/selection';
    import { allHidden } from '$lib/logic/hidden';
    import { boundsManager } from '$lib/logic/bounds';
-    import { tick, onMount } from 'svelte';
+    import { tick } from 'svelte';
    import { allowedPastes } from '$lib/components/file-list/sortable-file-list';

    const {
@@ -107,23 +105,6 @@
    }

    let layerSettingsOpen = $state(false);
-    let fullscreen = $state(false);
-
-    function toggleFullscreen() {
-        if (!document.fullscreenElement) {
-            document.documentElement.requestFullscreen?.();
-        } else {
-            document.exitFullscreen?.();
-        }
-    }
-
-    onMount(() => {
-        const handler = () => {
-            fullscreen = document.fullscreenElement !== null;
-        };
-        document.addEventListener('fullscreenchange', handler);
-        return () => document.removeEventListener('fullscreenchange', handler);
-    });
 </script>

 <div class="absolute md:top-2 left-0 right-0 z-20 flex flex-row justify-center pointer-events-none">
@@ -394,18 +375,8 @@
                    <Menubar.Item inset onclick={() => map.toggle3D()}>
                        <Box size="16" />
                        {i18n._('menu.toggle_3d')}
-                        <Shortcut key={i18n._('menu.right_click_drag')} />
+                        <Shortcut key="{i18n._('menu.ctrl')} {i18n._('menu.drag')}" />
                    </Menubar.Item>
-                    <Menubar.Separator />
-                    <Menubar.CheckboxItem checked={fullscreen} onCheckedChange={toggleFullscreen}>
-                        {#if fullscreen}
-                            <Minimize2 size="16" />
-                        {:else}
-                            <Maximize2 size="16" />
-                        {/if}
-                        {i18n._('menu.fullscreen')}
-                        <Shortcut key="F11" />
-                    </Menubar.CheckboxItem>
                </Menubar.Content>
            </Menubar.Menu>
            <Menubar.Menu>
@@ -418,7 +389,7 @@
                <Menubar.Content class="border-none">
                    <Menubar.Sub>
                        <Menubar.SubTrigger>
-                            <Ruler size="16" />{i18n._('menu.distance_units')}
+                            <Ruler size="16" class="mr-2" />{i18n._('menu.distance_units')}
                        </Menubar.SubTrigger>
                        <Menubar.SubContent>
                            <Menubar.RadioGroup bind:value={$distanceUnits}>
@@ -436,7 +407,7 @@
                    </Menubar.Sub>
                    <Menubar.Sub>
                        <Menubar.SubTrigger>
-                            <Zap size="16" />{i18n._('menu.velocity_units')}
+                            <Zap size="16" class="mr-2" />{i18n._('menu.velocity_units')}
                        </Menubar.SubTrigger>
                        <Menubar.SubContent>
                            <Menubar.RadioGroup bind:value={$velocityUnits}>
@@ -451,7 +422,7 @@
                    </Menubar.Sub>
                    <Menubar.Sub>
                        <Menubar.SubTrigger>
-                            <Thermometer size="16" />{i18n._('menu.temperature_units')}
+                            <Thermometer size="16" class="mr-2" />{i18n._('menu.temperature_units')}
                        </Menubar.SubTrigger>
                        <Menubar.SubContent>
                            <Menubar.RadioGroup bind:value={$temperatureUnits}>
@@ -467,7 +438,7 @@
                    <Menubar.Separator />
                    <Menubar.Sub>
                        <Menubar.SubTrigger>
-                            <Languages size="16" />
+                            <Languages size="16" class="mr-2" />
                            {i18n._('menu.language')}
                        </Menubar.SubTrigger>
                        <Menubar.SubContent>
@@ -483,9 +454,9 @@
                    <Menubar.Sub>
                        <Menubar.SubTrigger>
                            {#if mode.current === 'light' || !mode.current}
-                                <Sun size="16" />
+                                <Sun size="16" class="mr-2" />
                            {:else}
-                                <Moon size="16" />
+                                <Moon size="16" class="mr-2" />
                            {/if}
                            {i18n._('menu.mode')}
                        </Menubar.SubTrigger>
@@ -508,7 +479,7 @@
                    <Menubar.Separator />
                    <Menubar.Sub>
                        <Menubar.SubTrigger>
-                            <PersonStanding size="16" />
+                            <PersonStanding size="16" class="mr-2" />
                            {i18n._('menu.street_view_source')}
                        </Menubar.SubTrigger>
                        <Menubar.SubContent>
@@ -529,12 +500,12 @@
                </Menubar.Content>
            </Menubar.Menu>
        </Menubar.Root>
-        <div class="h-fit flex flex-row items-center">
+        <div class="h-fit flex flex-row items-center ml-1 gap-1">
            <Button
                variant="ghost"
                href="./help"
                target="_blank"
-                class="cursor-default h-fit rounded-md px-3 py-0.5"
+                class="cursor-default h-fit rounded-sm px-3 py-0.5"
                aria-label={i18n._('menu.help')}
            >
                <BookOpenText size="18" class="md:hidden" />
@@ -544,9 +515,9 @@
            </Button>
            <Button
                variant="ghost"
-                href="https://opencollective.com/gpxstudio"
+                href="https://ko-fi.com/gpxstudio"
                target="_blank"
-                class="cursor-default h-fit rounded-md font-bold text-support hover:text-support px-3 py-0.5"
+                class="cursor-default h-fit rounded-sm font-bold text-support hover:text-support px-3 py-0.5"
                aria-label={i18n._('menu.donate')}
            >
                <HeartHandshake size="18" class="md:hidden" />
@@ -567,7 +538,6 @@
        let targetInput =
            e &&
            e.target &&
-            e.target instanceof HTMLElement &&
            (e.target.tagName === 'INPUT' ||
                e.target.tagName === 'TEXTAREA' ||
                e.target.tagName === 'SELECT' ||
@@ -674,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()}
@@ -12,7 +12,7 @@
 </script>

 <Button
-    variant="outline"
+    variant="ghost"
    size="icon"
    class={className}
    onclick={() => {
@@ -1,30 +1,28 @@
 <script lang="ts">
    import Logo from '$lib/components/Logo.svelte';
    import { Button } from '$lib/components/ui/button';
+    import AlgoliaDocSearch from '$lib/components/AlgoliaDocSearch.svelte';
+    import ModeSwitch from '$lib/components/ModeSwitch.svelte';
    import { BookOpenText, House, Map } from '@lucide/svelte';
    import { i18n } from '$lib/i18n.svelte';
    import { getURLForLanguage } from '$lib/utils';
 </script>

-<nav class="sticky top-0 w-full px-12 py-2 bg-background z-50 flex flex-col items-center border-b">
-    <div class="w-full max-w-5xl flex flex-row items-center gap-4 sm:gap-8">
-        <a
-            href={getURLForLanguage(i18n.lang, '/')}
-            class="shrink-0 translate-y-0.25 justify-self-start"
-        >
-            <Logo class="h-8 xs:hidden" iconOnly={true} width="26" />
-            <Logo class="h-8 hidden xs:block" width="153" />
+<nav class="w-full sticky top-0 bg-background z-50">
+    <div class="mx-6 py-2 flex flex-row items-center border-b gap-4 sm:gap-8">
+        <a href={getURLForLanguage(i18n.lang, '/')} class="shrink-0 translate-y-0.5">
+            <Logo class="h-8 sm:hidden" iconOnly={true} width="26" />
+            <Logo class="h-8 hidden sm:block" width="153" />
        </a>
        <Button
            variant="link"
-            class="text-base px-0 has-[>svg]:px-0 ml-auto"
+            class="text-base px-0 has-[>svg]:px-0"
            href={getURLForLanguage(i18n.lang, '/')}
        >
            <House size="18" />
            {i18n._('homepage.home')}
        </Button>
        <Button
-            data-sveltekit-reload
            variant="link"
            class="text-base px-0 has-[>svg]:px-0"
            href={getURLForLanguage(i18n.lang, '/app')}
@@ -40,5 +38,7 @@
            <BookOpenText size="18" />
            {i18n._('menu.help')}
        </Button>
+        <AlgoliaDocSearch class="ml-auto" />
+        <ModeSwitch class="hidden xs:inline-flex" />
    </div>
 </nav>
@@ -35,7 +35,7 @@
            <Button
                variant="ghost"
                size="icon"
-                class="w-full flex flex-row gap-1 border-none {side === 'right'
+                class="w-full flex flex-row gap-1 {side === 'right'
                    ? 'justify-between'
                    : 'justify-start pl-1'} h-fit {nohover
                    ? 'hover:bg-background'
@@ -62,7 +62,7 @@
        <Button
            variant="ghost"
            size="icon"
-            class="w-full flex flex-row gap-1 border-none {side === 'right'
+            class="w-full flex flex-row gap-1 {side === 'right'
                ? 'justify-between'
                : 'justify-start pl-1'} h-fit {nohover ? 'hover:bg-background' : ''}"
        >
@@ -19,7 +19,7 @@
        @apply text-foreground;
        @apply text-3xl;
        @apply font-semibold;
-        @apply mb-3;
+        @apply mb-3 pt-6;
    }

    :global(.markdown h2) {
@@ -12,7 +12,7 @@
    <div class="rounded-md overflow-hidden overflow-clip shadow-xl mx-auto">
        {#if src === 'getting-started/interface'}
            <enhanced:img
-                src="/src/lib/assets/img/docs/getting-started/interface.webp"
+                src="/src/lib/assets/img/docs/getting-started/interface.png"
                {alt}
                class="w-full max-w-3xl"
            />
@@ -20,13 +20,13 @@
            <enhanced:img
                src="/src/lib/assets/img/docs/tools/routing.png"
                {alt}
-                class="w-full max-w-lg"
+                class="w-full max-w-3xl"
            />
        {:else if src === 'tools/split'}
            <enhanced:img
                src="/src/lib/assets/img/docs/tools/split.png"
                {alt}
-                class="w-full max-w-lg"
+                class="w-full max-w-3xl"
            />
        {/if}
    </div>
@@ -1,10 +1,10 @@
 <script lang="ts">
-    import topoMap from '$lib/assets/img/docs/maps/topo.png?enhanced';
-    import waymarkedMap from '$lib/assets/img/docs/maps/waymarked.png?enhanced';
+    import mapboxOutdoorsMap from '$lib/assets/img/home/mapbox-outdoors.png?enhanced';
+    import waymarkedMap from '$lib/assets/img/home/waymarked.png?enhanced';
 </script>

 <div class="relative h-80 aspect-square rounded-2xl shadow-xl overflow-clip">
-    <enhanced:img src={topoMap} alt="Topo map screenshot." class="absolute" />
+    <enhanced:img src={mapboxOutdoorsMap} alt="Mapbox Outdoors map screenshot." class="absolute" />
    <enhanced:img
        src={waymarkedMap}
        alt="Waymarked Trails map screenshot."
@@ -18,7 +18,7 @@
        Construction,
    } from '@lucide/svelte';
    import type { Readable, Writable } from 'svelte/store';
-    import type { Coordinates, 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';
@@ -28,14 +28,12 @@
    let {
        gpxStatistics,
        slicedGPXStatistics,
-        hoveredPoint,
        additionalDatasets,
        elevationFill,
        showControls = true,
    }: {
-        gpxStatistics: Readable<GPXStatisticsGroup>;
-        slicedGPXStatistics: Writable<[GPXGlobalStatistics, number, number] | undefined>;
-        hoveredPoint: Writable<Coordinates | null>;
+        gpxStatistics: Readable<GPXStatistics>;
+        slicedGPXStatistics: Writable<[GPXStatistics, number, number] | undefined>;
        additionalDatasets: Writable<string[]>;
        elevationFill: Writable<'slope' | 'surface' | 'highway' | undefined>;
        showControls?: boolean;
@@ -49,7 +47,6 @@
        elevationProfile = new ElevationProfile(
            gpxStatistics,
            slicedGPXStatistics,
-            hoveredPoint,
            additionalDatasets,
            elevationFill,
            canvas,
@@ -64,35 +61,37 @@
    });
 </script>

-<div class="h-full grow min-w-0 min-h-0 relative">
+<div class="h-full grow min-w-0 relative py-2">
    <canvas bind:this={overlay} class="w-full h-full absolute pointer-events-none"></canvas>
    <canvas bind:this={canvas} class="w-full h-full absolute"></canvas>
    {#if showControls}
-        <div class="absolute bottom-9 right-2.5">
+        <div class="absolute bottom-10 right-1.5">
            <Popover.Root>
                <Popover.Trigger>
                    <ButtonWithTooltip
                        label={i18n._('chart.settings')}
                        variant="outline"
                        side="left"
-                        class="w-7 h-7 p-0 flex justify-center opacity-70 hover:opacity-100 transition-opacity duration-300 bg-background"
+                        class="w-7 h-7 p-0 flex justify-center opacity-70 hover:opacity-100 transition-opacity duration-300 hover:bg-background"
                    >
                        <ChartNoAxesColumn size="18" />
                    </ButtonWithTooltip>
                </Popover.Trigger>
                <Popover.Content
-                    class="w-fit p-0 flex flex-col gap-0 overflow-hidden"
+                    class="w-fit p-0 flex flex-col"
                    side="top"
                    align="end"
                    sideOffset={-32}
                >
                    <ToggleGroup.Root
-                        class="flex flex-col w-full border-none"
+                        class="flex flex-col items-start gap-0 p-1 w-full border-none"
                        type="single"
-                        size="sm"
                        bind:value={$elevationFill}
                    >
-                        <ToggleGroup.Item value="slope" class="w-full flex flex-row justify-start">
+                        <ToggleGroup.Item
+                            class="p-0 pr-1.5 h-6 w-full gap-1.5 rounded flex justify-start data-[state=on]:bg-background data-[state=on]:hover:bg-accent hover:bg-accent hover:text-foreground"
+                            value="slope"
+                        >
                            <div class="w-6 flex justify-center items-center">
                                {#if $elevationFill === 'slope'}
                                    <Circle class="size-1.5 fill-current text-current" />
@@ -102,8 +101,9 @@
                            {i18n._('quantities.slope')}
                        </ToggleGroup.Item>
                        <ToggleGroup.Item
+                            class="p-0 pr-1.5 h-6 w-full gap-1.5 rounded flex justify-start data-[state=on]:bg-background data-[state=on]:hover:bg-accent hover:bg-accent hover:text-foreground"
                            value="surface"
-                            class="w-full flex flex-row justify-start"
+                            variant="outline"
                        >
                            <div class="w-6 flex justify-center items-center">
                                {#if $elevationFill === 'surface'}
@@ -114,8 +114,9 @@
                            {i18n._('quantities.surface')}
                        </ToggleGroup.Item>
                        <ToggleGroup.Item
+                            class="p-0 pr-1.5 h-6 w-full gap-1.5 rounded flex justify-start data-[state=on]:bg-background data-[state=on]:hover:bg-accent hover:bg-accent hover:text-foreground"
                            value="highway"
-                            class="w-full flex flex-row justify-start"
+                            variant="outline"
                        >
                            <div class="w-6 flex justify-center items-center">
                                {#if $elevationFill === 'highway'}
@@ -128,12 +129,14 @@
                    </ToggleGroup.Root>
                    <Separator />
                    <ToggleGroup.Root
-                        class="flex flex-col gap-0"
+                        class="flex flex-col items-start gap-0 p-1"
                        type="multiple"
-                        size="sm"
                        bind:value={$additionalDatasets}
                    >
-                        <ToggleGroup.Item value="speed" class="w-full flex flex-row justify-start">
+                        <ToggleGroup.Item
+                            class="p-0 pr-1.5 h-6 w-full gap-1.5 rounded flex justify-start data-[state=on]:bg-background data-[state=on]:hover:bg-accent hover:bg-accent hover:text-foreground"
+                            value="speed"
+                        >
                            <div class="w-6 flex justify-center items-center">
                                {#if $additionalDatasets.includes('speed')}
                                    <Check size="14" />
@@ -144,7 +147,10 @@
                                ? i18n._('quantities.speed')
                                : i18n._('quantities.pace')}
                        </ToggleGroup.Item>
-                        <ToggleGroup.Item value="hr" class="w-full flex flex-row justify-start">
+                        <ToggleGroup.Item
+                            class="p-0 pr-1.5 h-6 w-full gap-1.5 rounded flex justify-start data-[state=on]:bg-background data-[state=on]:hover:bg-accent hover:bg-accent hover:text-foreground"
+                            value="hr"
+                        >
                            <div class="w-6 flex justify-center items-center">
                                {#if $additionalDatasets.includes('hr')}
                                    <Check size="14" />
@@ -153,7 +159,10 @@
                            <HeartPulse size="15" />
                            {i18n._('quantities.heartrate')}
                        </ToggleGroup.Item>
-                        <ToggleGroup.Item value="cad" class="w-full flex flex-row justify-start">
+                        <ToggleGroup.Item
+                            class="p-0 pr-1.5 h-6 w-full gap-1.5 rounded flex justify-start data-[state=on]:bg-background data-[state=on]:hover:bg-accent hover:bg-accent hover:text-foreground"
+                            value="cad"
+                        >
                            <div class="w-6 flex justify-center items-center">
                                {#if $additionalDatasets.includes('cad')}
                                    <Check size="14" />
@@ -162,7 +171,10 @@
                            <Orbit size="15" />
                            {i18n._('quantities.cadence')}
                        </ToggleGroup.Item>
-                        <ToggleGroup.Item value="atemp" class="w-full flex flex-row justify-start">
+                        <ToggleGroup.Item
+                            class="p-0 pr-1.5 h-6 w-full gap-1.5 rounded flex justify-start data-[state=on]:bg-background data-[state=on]:hover:bg-accent hover:bg-accent hover:text-foreground"
+                            value="atemp"
+                        >
                            <div class="w-6 flex justify-center items-center">
                                {#if $additionalDatasets.includes('atemp')}
                                    <Check size="14" />
@@ -171,7 +183,10 @@
                            <Thermometer size="15" />
                            {i18n._('quantities.temperature')}
                        </ToggleGroup.Item>
-                        <ToggleGroup.Item value="power" class="w-full flex flex-row justify-start">
+                        <ToggleGroup.Item
+                            class="p-0 pr-1.5 h-6 w-full gap-1.5 rounded flex justify-start data-[state=on]:bg-background data-[state=on]:hover:bg-accent hover:bg-accent hover:text-foreground"
+                            value="power"
+                        >
                            <div class="w-6 flex justify-center items-center">
                                {#if $additionalDatasets.includes('power')}
                                    <Check size="14" />
@@ -14,14 +14,11 @@ import {
    getTemperatureWithUnits,
    getVelocityWithUnits,
 } from '$lib/units';
-import Chart, {
-    type ChartEvent,
-    type ChartOptions,
-    type ScriptableLineSegmentContext,
-    type TooltipItem,
-} from 'chart.js/auto';
+import Chart from 'chart.js/auto';
+import mapboxgl from 'mapbox-gl';
 import { get, type Readable, type Writable } from 'svelte/store';
-import type { Coordinates, GPXGlobalStatistics, GPXStatisticsGroup } from 'gpx';
+import { map } from '$lib/components/map/map';
+import type { GPXStatistics } from 'gpx';
 import { mode } from 'mode-watcher';
 import { getHighwayColor, getSlopeColor, getSurfaceColor } from '$lib/assets/colors';

@@ -30,37 +27,22 @@ 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: Coordinates;
-    index: number;
-}
-
 export class ElevationProfile {
    private _chart: Chart | null = null;
    private _canvas: HTMLCanvasElement;
    private _overlay: HTMLCanvasElement;
+    private _marker: mapboxgl.Marker | null = null;
    private _dragging = false;
    private _panning = false;

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

    constructor(
-        gpxStatistics: Readable<GPXStatisticsGroup>,
-        slicedGPXStatistics: Writable<[GPXGlobalStatistics, number, number] | undefined>,
-        hoveredPoint: Writable<Coordinates | null>,
+        gpxStatistics: Readable<GPXStatistics>,
+        slicedGPXStatistics: Writable<[GPXStatistics, number, number] | undefined>,
        additionalDatasets: Readable<string[]>,
        elevationFill: Readable<'slope' | 'surface' | 'highway' | undefined>,
        canvas: HTMLCanvasElement,
@@ -68,12 +50,17 @@ export class ElevationProfile {
    ) {
        this._gpxStatistics = gpxStatistics;
        this._slicedGPXStatistics = slicedGPXStatistics;
-        this._hoveredPoint = hoveredPoint;
        this._additionalDatasets = additionalDatasets;
        this._elevationFill = elevationFill;
        this._canvas = canvas;
        this._overlay = overlay;

+        let element = document.createElement('div');
+        element.className = 'h-4 w-4 rounded-full bg-cyan-500 border-2 border-white';
+        this._marker = new mapboxgl.Marker({
+            element,
+        });
+
        import('chartjs-plugin-zoom').then((module) => {
            Chart.register(module.default);
            this.initialize();
@@ -103,7 +90,7 @@ export class ElevationProfile {
    }

    initialize() {
-        let options: ChartOptions<'line'> = {
+        let options = {
            animation: false,
            parsing: false,
            maintainAspectRatio: false,
@@ -111,8 +98,8 @@ export class ElevationProfile {
                x: {
                    type: 'linear',
                    ticks: {
-                        callback: function (value: number | string) {
-                            return `${(value as number).toFixed(1).replace(/\.0+$/, '')} ${getDistanceUnits()}`;
+                        callback: function (value: number) {
+                            return `${value.toFixed(1).replace(/\.0+$/, '')} ${getDistanceUnits()}`;
                        },
                        align: 'inner',
                        maxRotation: 0,
@@ -121,8 +108,8 @@ export class ElevationProfile {
                y: {
                    type: 'linear',
                    ticks: {
-                        callback: function (value: number | string) {
-                            return getElevationWithUnits(value as number, false);
+                        callback: function (value: number) {
+                            return getElevationWithUnits(value, false);
                        },
                    },
                },
@@ -153,13 +140,17 @@ export class ElevationProfile {
                        title: () => {
                            return '';
                        },
-                        label: (context: TooltipItem<'line'>) => {
-                            let point = context.raw as ElevationProfilePoint;
+                        label: (context: Chart.TooltipContext) => {
+                            let point = context.raw;
                            if (context.datasetIndex === 0) {
-                                if (this._dragging) {
-                                    this._hoveredPoint.set(null);
-                                } else {
-                                    this._hoveredPoint.set(point.coordinates);
+                                const map_ = get(map);
+                                if (map_ && this._marker) {
+                                    if (this._dragging) {
+                                        this._marker.remove();
+                                    } else {
+                                        this._marker.setLngLat(point.coordinates);
+                                        this._marker.addTo(map_);
+                                    }
                                }
                                return `${i18n._('quantities.elevation')}: ${getElevationWithUnits(point.y, false)}`;
                            } else if (context.datasetIndex === 1) {
@@ -174,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),
@@ -236,7 +227,6 @@ export class ElevationProfile {
                        onPanStart: () => {
                            this._panning = true;
                            this._slicedGPXStatistics.set(undefined);
-                            return true;
                        },
                        onPanComplete: () => {
                            this._panning = false;
@@ -248,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;
@@ -272,6 +262,7 @@ export class ElevationProfile {
                    },
                },
            },
+            stacked: false,
            onResize: () => {
                this.updateOverlay();
            },
@@ -279,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: {
@@ -300,9 +291,12 @@ 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') {
-                            this._hoveredPoint.set(null);
+                            const map_ = get(map);
+                            if (map_ && this._marker) {
+                                this._marker.remove();
+                            }
                        }
                    },
                },
@@ -311,7 +305,7 @@ export class ElevationProfile {

        let startIndex = 0;
        let endIndex = 0;
-        const getIndex = (evt: PointerEvent) => {
+        const getIndex = (evt) => {
            if (!this._chart) {
                return undefined;
            }
@@ -329,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;
@@ -353,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);
@@ -362,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)
                            ),
@@ -373,7 +367,7 @@ export class ElevationProfile {
                }
            }
        };
-        const onMouseUp = (evt: PointerEvent) => {
+        const onMouseUp = (evt) => {
            dragStarted = false;
            this._dragging = false;
            this._canvas.style.cursor = '';
@@ -392,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!['max'] = getConvertedDistance(
-            data.global.distance.total,
-            units.distance
-        );
+        this._chart.options.scales.x['min'] = 0;
+        this._chart.options.scales.x['max'] = getConvertedDistance(data.global.distance.total);

        this.setVisibility();
        this.setFill();
@@ -533,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() {
@@ -577,12 +554,10 @@ export class ElevationProfile {

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

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

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

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

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

@@ -624,5 +596,8 @@ export class ElevationProfile {
            this._chart.destroy();
            this._chart = null;
        }
+        if (this._marker) {
+            this._marker.remove();
+        }
    }
 }
@@ -16,11 +16,10 @@
    import { setMode } from 'mode-watcher';
    import { settings } from '$lib/logic/settings';
    import { fileStateCollection } from '$lib/logic/file-state';
-    import { gpxStatistics, hoveredPoint, slicedGPXStatistics } from '$lib/logic/statistics';
+    import { gpxStatistics, slicedGPXStatistics } from '$lib/logic/statistics';
    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;
@@ -102,7 +97,7 @@
    <div class="grow relative">
        <Map
            class="h-full {$fileStateCollection.size > 1 ? 'horizontal' : ''}"
-            maptilerKey={options.key}
+            accessToken={options.token}
            geocoder={false}
            geolocate={true}
            hash={useHash}
@@ -117,19 +112,19 @@
        {/if}
    </div>
    <div
-        class="{options.elevation.show ? '' : 'h-10'} flex flex-row gap-2 p-2 sm:px-4"
+        class="{options.elevation.show ? '' : 'h-10'} flex flex-row gap-2 px-2 sm:px-4"
        style={options.elevation.show ? `height: ${options.elevation.height}px` : ''}
    >
        <GPXStatistics
            {gpxStatistics}
            {slicedGPXStatistics}
+            panelSize={options.elevation.height}
            orientation={options.elevation.show ? 'vertical' : 'horizontal'}
        />
        {#if options.elevation.show}
            <ElevationProfile
                {gpxStatistics}
                {slicedGPXStatistics}
-                {hoveredPoint}
                {additionalDatasets}
                {elevationFill}
                showControls={options.elevation.controls}
@@ -22,7 +22,7 @@
        getCleanedEmbeddingOptions,
        getMergedEmbeddingOptions,
    } from './embedding';
-    import { PUBLIC_MAPTILER_KEY } from '$env/static/public';
+    import { PUBLIC_MAPBOX_TOKEN } from '$env/static/public';
    import Embedding from './Embedding.svelte';
    import { onDestroy } from 'svelte';
    import { base } from '$app/paths';
@@ -32,7 +32,7 @@
    let options = $state(
        getMergedEmbeddingOptions(
            {
-                key: 'YOUR_MAPTILER_KEY',
+                token: 'YOUR_MAPBOX_TOKEN',
                theme: mode.current,
            },
            defaultEmbeddingOptions
@@ -46,10 +46,10 @@
    let iframeOptions = $derived(
        getMergedEmbeddingOptions(
            {
-                key:
-                    options.key.length === 0 || options.key === 'YOUR_MAPTILER_KEY'
-                        ? PUBLIC_MAPTILER_KEY
-                        : options.key,
+                token:
+                    options.token.length === 0 || options.token === 'YOUR_MAPBOX_TOKEN'
+                        ? PUBLIC_MAPBOX_TOKEN
+                        : options.token,
                files: files.split(',').filter((url) => url.length > 0),
                ids: driveIds.split(',').filter((id) => id.length > 0),
                elevation: {
@@ -102,8 +102,8 @@
    </Card.Header>
    <Card.Content>
        <fieldset class="flex flex-col gap-3">
-            <Label for="key">{i18n._('embedding.maptiler_key')}</Label>
-            <Input id="key" type="text" class="h-8" bind:value={options.key} />
+            <Label for="token">{i18n._('embedding.mapbox_token')}</Label>
+            <Input id="token" type="text" class="h-8" bind:value={options.token} />
            <Label for="file_urls">{i18n._('embedding.file_urls')}</Label>
            <Input id="file_urls" type="text" class="h-8" bind:value={files} />
            <Label for="drive_ids">{i18n._('embedding.drive_ids')}</Label>
@@ -1,8 +1,8 @@
-import { PUBLIC_MAPTILER_KEY } from '$env/static/public';
+import { PUBLIC_MAPBOX_TOKEN } from '$env/static/public';
 import { basemaps } from '$lib/assets/layers';

 export type EmbeddingOptions = {
-    key: string;
+    token: string;
    files: string[];
    ids: string[];
    basemap: string;
@@ -26,10 +26,10 @@ export type EmbeddingOptions = {
 };

 export const defaultEmbeddingOptions = {
-    key: '',
+    token: '',
    files: [],
    ids: [],
-    basemap: 'topo',
+    basemap: 'mapboxOutdoors',
    elevation: {
        show: true,
        height: 170,
@@ -90,9 +90,6 @@ export function getCleanedEmbeddingOptions(
            delete cleanedOptions[key];
        }
    }
-    if (cleanedOptions['key'] && cleanedOptions['key'] === PUBLIC_MAPTILER_KEY) {
-        delete cleanedOptions['key'];
-    }
    return cleanedOptions;
 }

@@ -110,7 +107,7 @@ export function getURLForGoogleDriveFile(fileId: string): string {

 export function convertOldEmbeddingOptions(options: URLSearchParams): any {
    let newOptions: any = {
-        key: PUBLIC_MAPTILER_KEY,
+        token: PUBLIC_MAPBOX_TOKEN,
        files: [],
        ids: [],
    };
@@ -125,7 +122,9 @@ export function convertOldEmbeddingOptions(options: URLSearchParams): any {
    }
    if (options.has('source')) {
        let basemap = options.get('source')!;
-        if (basemap === 'otm') {
+        if (basemap === 'satellite') {
+            newOptions.basemap = 'mapboxSatellite';
+        } else if (basemap === 'otm') {
            newOptions.basemap = 'openTopoMap';
        } else if (basemap === 'ohm') {
            newOptions.basemap = 'openHikingMap';
@@ -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,
-                hr: statistics.hr.count === 0,
-                cad: statistics.cad.count === 0,
-                atemp: statistics.atemp.count === 0,
-                power: statistics.power.count === 0,
-                extensions: Object.keys(statistics.extensions).length === 0,
+                time: statistics.global.time.total === 0,
+                hr: statistics.global.hr.count === 0,
+                cad: statistics.global.cad.count === 0,
+                atemp: statistics.global.atemp.count === 0,
+                power: statistics.global.power.count === 0,
+                extensions: Object.keys(statistics.global.extensions).length === 0,
            };
        }
    });
@@ -100,11 +100,7 @@
                </span>
            </div>
            <div class="w-full flex flex-row flex-wrap gap-2">
-                <Button
-                    class="bg-support grow"
-                    href="https://opencollective.com/gpxstudio"
-                    target="_blank"
-                >
+                <Button class="bg-support grow" href="https://ko-fi.com/gpxstudio" target="_blank">
                    {i18n._('menu.support_button')}
                    <span>🙏</span>
                </Button>
@@ -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 hover:bg-background;
+        @apply bg-accent;
+        @apply hover:bg-muted;
    }

    .horizontal :global(.sortable-selected button) {
@@ -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 (
-                    style &&
-                    style['gpx_style:color'] &&
-                    !colors.includes(style['gpx_style:color'])
-                ) {
-                    colors.push(style['gpx_style:color']);
+                if (style) {
+                    if (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());
-                    if (defaultColor) {
-                        colors.push(defaultColor);
+                    let layer = gpxLayers.getLayer(item.getFileId());
+                    if (layer) {
+                        colors.push(layer.layerColor);
                    }
                }
            }
        }
-        return colors;
+        nodeColors = colors;
    });

    let symbolKey = $derived(node instanceof Waypoint ? getSymbolKey(node.sym) : undefined);
@@ -114,10 +125,10 @@
    <ContextMenu.Trigger class="grow truncate">
        <Button
            variant="ghost"
-            class="relative w-full p-0 overflow-hidden border-none focus-visible:ring-0 focus-visible:ring-offset-0 flex flex-row {orientation ===
+            class="relative w-full p-0 overflow-hidden focus-visible:ring-0 focus-visible:ring-offset-0 {orientation ===
            'vertical'
-                ? 'h-7'
-                : 'h-9 px-1.5'} pointer-events-auto"
+                ? 'h-fit'
+                : 'h-9 px-1.5 shadow-md'} pointer-events-auto"
        >
            {#if item instanceof ListFileItem || item instanceof ListTrackItem}
                <MetadataDialog bind:open={openEditMetadata} {node} {item} />
@@ -126,7 +137,7 @@
            {#if item.level === ListLevel.FILE || item.level === ListLevel.TRACK}
                <div
                    class="absolute {orientation === 'vertical'
-                        ? 'top-0 bottom-0 right-0 w-1'
+                        ? 'top-0 bottom-0 right-1 w-1'
                        : 'top-0 h-1 left-0 right-0'}"
                    style="background:linear-gradient(to {orientation === 'vertical'
                        ? 'bottom'
@@ -139,7 +150,7 @@
                ></div>
            {/if}
            <span
-                class="grow text-left truncate ml-1 flex flex-row items-center {hidden
+                class="w-full text-left truncate py-1 flex flex-row items-center {hidden
                    ? 'text-muted-foreground'
                    : ''} {$cut && $copied?.some((i) => i.getFullId() === item.getFullId())
                    ? 'text-muted-foreground'
@@ -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(),
@@ -5,16 +5,6 @@

    map.onLoad((map_) => {
        map_.on('contextmenu', (e) => {
-            if (
-                map_.queryRenderedFeatures(e.point, {
-                    layers: map_
-                        .getLayersOrder()
-                        .filter((layerId) => layerId.startsWith('routing-controls')),
-                }).length
-            ) {
-                // Clicked on routing control, ignoring
-                return;
-            }
            trackpointPopup?.setItem({
                item: new TrackPoint({
                    attributes: {
@@ -1,25 +1,30 @@
 <script lang="ts">
    import { onDestroy, onMount } from 'svelte';
+    import mapboxgl from 'mapbox-gl';
+    import 'mapbox-gl/dist/mapbox-gl.css';
+    import '@mapbox/mapbox-gl-geocoder/dist/mapbox-gl-geocoder.css';
    import { Button } from '$lib/components/ui/button';
    import { i18n } from '$lib/i18n.svelte';
+    import { PUBLIC_MAPBOX_TOKEN } from '$env/static/public';
    import { page } from '$app/state';
    import { map } from '$lib/components/map/map';
-    import { PUBLIC_MAPTILER_KEY } from '$env/static/public';

    let {
-        maptilerKey = PUBLIC_MAPTILER_KEY,
+        accessToken = PUBLIC_MAPBOX_TOKEN,
        geolocate = true,
        geocoder = true,
        hash = true,
        class: className = '',
    }: {
-        maptilerKey?: string;
+        accessToken?: string;
        geolocate?: boolean;
        geocoder?: boolean;
        hash?: boolean;
        class?: string;
    } = $props();

+    mapboxgl.accessToken = accessToken;
+
    let webgl2Supported = $state(true);
    let embeddedApp = $state(false);

@@ -43,7 +48,7 @@
            language = 'en';
        }

-        map.init(maptilerKey, language, hash, geocoder, geolocate);
+        map.init(PUBLIC_MAPBOX_TOKEN, language, hash, geocoder, geolocate);
    });

    onDestroy(() => {
@@ -76,21 +81,21 @@
 <style lang="postcss">
    @reference "../../../app.css";

-    div :global(.maplibregl-map) {
+    div :global(.mapboxgl-map) {
        @apply font-sans;
    }

-    div :global(.maplibregl-ctrl-top-right > .maplibregl-ctrl) {
+    div :global(.mapboxgl-ctrl-top-right > .mapboxgl-ctrl) {
        @apply shadow-md;
        @apply bg-background;
        @apply text-foreground;
    }

-    div :global(.maplibregl-ctrl-icon) {
+    div :global(.mapboxgl-ctrl-icon) {
        @apply dark:brightness-[4.7];
    }

-    div :global(.maplibregl-ctrl-geocoder) {
+    div :global(.mapboxgl-ctrl-geocoder) {
        @apply flex;
        @apply flex-row;
        @apply w-fit;
@@ -105,45 +110,36 @@
        @apply text-foreground;
    }

-    div :global(.maplibregl-ctrl-geocoder .suggestions > li > a) {
+    div :global(.mapboxgl-ctrl-geocoder .suggestions > li > a) {
        @apply text-foreground;
        @apply hover:text-accent-foreground;
        @apply hover:bg-accent;
    }

-    div :global(.maplibregl-ctrl-geocoder .suggestions > .active > a) {
+    div :global(.mapboxgl-ctrl-geocoder .suggestions > .active > a) {
        @apply bg-background;
    }

-    div :global(.maplibregl-ctrl-geocoder--button) {
+    div :global(.mapboxgl-ctrl-geocoder--button) {
        @apply bg-transparent;
        @apply hover:bg-transparent;
    }

-    div :global(.maplibregl-ctrl-geocoder--icon) {
+    div :global(.mapboxgl-ctrl-geocoder--icon) {
        @apply fill-foreground;
        @apply hover:fill-accent-foreground;
    }

-    div :global(.maplibregl-ctrl-geocoder--icon-search) {
+    div :global(.mapboxgl-ctrl-geocoder--icon-search) {
        @apply relative;
        @apply top-0;
        @apply left-0;
+        @apply my-2;
        @apply w-[29px];
    }

-    div :global(.maplibregl-ctrl-geocoder--icon-loading) {
-        @apply -mt-1;
-        @apply mb-0;
-    }
-
-    div :global(.maplibregl-ctrl-geocoder--icon-close) {
-        @apply my-0;
-    }
-
-    div :global(.maplibregl-ctrl-geocoder--input) {
+    div :global(.mapboxgl-ctrl-geocoder--input) {
        @apply relative;
-        @apply h-8;
        @apply w-64;
        @apply py-0;
        @apply pl-2;
@@ -153,12 +149,12 @@
        @apply text-foreground;
    }

-    div :global(.maplibregl-ctrl-geocoder--collapsed .maplibregl-ctrl-geocoder--input) {
+    div :global(.mapboxgl-ctrl-geocoder--collapsed .mapboxgl-ctrl-geocoder--input) {
        @apply w-0;
        @apply p-0;
    }

-    div :global(.maplibregl-ctrl-top-right) {
+    div :global(.mapboxgl-ctrl-top-right) {
        @apply z-40;
        @apply flex;
        @apply flex-col;
@@ -167,76 +163,77 @@
        @apply overflow-hidden;
    }

-    .horizontal :global(.maplibregl-ctrl-bottom-left) {
+    .horizontal :global(.mapboxgl-ctrl-bottom-left) {
        @apply bottom-[42px];
    }

-    .horizontal :global(.maplibregl-ctrl-bottom-right) {
+    .horizontal :global(.mapboxgl-ctrl-bottom-right) {
        @apply bottom-[42px];
    }

-    div :global(.maplibregl-ctrl-attrib) {
+    div :global(.mapboxgl-ctrl-attrib) {
        @apply dark:bg-transparent;
    }

-    div :global(.maplibregl-compact-show.maplibregl-ctrl-attrib) {
+    div :global(.mapboxgl-compact-show.mapboxgl-ctrl-attrib) {
        @apply dark:bg-background;
    }

-    div :global(.maplibregl-ctrl-attrib-button) {
+    div :global(.mapboxgl-ctrl-attrib-button) {
        @apply dark:bg-foreground;
    }

-    div :global(.maplibregl-compact-show .maplibregl-ctrl-attrib-button) {
+    div :global(.mapboxgl-compact-show .mapboxgl-ctrl-attrib-button) {
        @apply dark:bg-foreground;
    }

-    div :global(.maplibregl-ctrl-attrib a) {
+    div :global(.mapboxgl-ctrl-attrib a) {
        @apply text-foreground;
    }

-    div :global(.maplibregl-popup) {
+    div :global(.mapboxgl-popup) {
+        @apply w-fit;
        @apply z-50;
    }

-    div :global(.maplibregl-popup-content) {
+    div :global(.mapboxgl-popup-content) {
        @apply p-0;
        @apply bg-transparent;
        @apply shadow-none;
    }

-    div :global(.maplibregl-popup-anchor-top .maplibregl-popup-tip) {
+    div :global(.mapboxgl-popup-anchor-top .mapboxgl-popup-tip) {
        @apply border-b-background;
    }

-    div :global(.maplibregl-popup-anchor-top-left .maplibregl-popup-tip) {
+    div :global(.mapboxgl-popup-anchor-top-left .mapboxgl-popup-tip) {
        @apply border-b-background;
    }

-    div :global(.maplibregl-popup-anchor-top-right .maplibregl-popup-tip) {
+    div :global(.mapboxgl-popup-anchor-top-right .mapboxgl-popup-tip) {
        @apply border-b-background;
    }

-    div :global(.maplibregl-popup-anchor-bottom .maplibregl-popup-tip) {
+    div :global(.mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip) {
        @apply border-t-background;
        @apply drop-shadow-md;
    }

-    div :global(.maplibregl-popup-anchor-bottom-left .maplibregl-popup-tip) {
+    div :global(.mapboxgl-popup-anchor-bottom-left .mapboxgl-popup-tip) {
        @apply border-t-background;
        @apply drop-shadow-md;
    }

-    div :global(.maplibregl-popup-anchor-bottom-right .maplibregl-popup-tip) {
+    div :global(.mapboxgl-popup-anchor-bottom-right .mapboxgl-popup-tip) {
        @apply border-t-background;
        @apply drop-shadow-md;
    }

-    div :global(.maplibregl-popup-anchor-left .maplibregl-popup-tip) {
+    div :global(.mapboxgl-popup-anchor-left .mapboxgl-popup-tip) {
        @apply border-r-background;
    }

-    div :global(.maplibregl-popup-anchor-right .maplibregl-popup-tip) {
+    div :global(.mapboxgl-popup-anchor-right .mapboxgl-popup-tip) {
        @apply border-l-background;
    }
 </style>
@@ -17,7 +17,7 @@
    let control: CustomControl | null = null;

    onMount(() => {
-        map.onLoad((map: maplibregl.Map) => {
+        map.onLoad((map: mapboxgl.Map) => {
            if (position.includes('right')) container.classList.add('float-right');
            else container.classList.add('float-left');
            container.classList.remove('hidden');
@@ -1,4 +1,4 @@
-import { type Map, type IControl } from 'maplibre-gl';
+import { type Map, type IControl } from 'mapbox-gl';

 export default class CustomControl implements IControl {
    _map: Map | undefined;
@@ -16,7 +16,7 @@
 </script>

 <Button
-    class="justify-start {className}"
+    class="p-1 has-[>svg]:px-2 h-8 justify-start {className}"
    variant="outline"
    onclick={() => {
        navigator.clipboard.writeText(
@@ -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_);
    });

@@ -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,16 +35,5 @@
            onCopy={() => trackpoint.hide?.()}
            class="mt-0.5"
        />
-        {#if trackpoint.fileId === undefined}
-            <Button
-                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>
@@ -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,8 +81,9 @@
        </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"
                    onclick={() => {
                        if (waypoint.fileId) {
@@ -1,15 +1,21 @@
 import { settings } from '$lib/logic/settings';
 import { gpxStatistics } from '$lib/logic/statistics';
 import { getConvertedDistanceToKilometers } from '$lib/units';
+import type { GeoJSONSource } from 'mapbox-gl';
 import { get } from 'svelte/store';
 import { map } from '$lib/components/map/map';
 import { allHidden } from '$lib/logic/hidden';
-import type { GeoJSONSource } from 'maplibre-gl';
-import { ANCHOR_LAYER_KEY } from '$lib/components/map/style';

 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);
@@ -23,7 +29,7 @@ export class DistanceMarkers {
        this.unsubscribes.push(
            map.subscribe((map_) => {
                if (map_) {
-                    map_.on('style.load', this.updateBinded);
+                    map_.on('style.import.load', this.updateBinded);
                }
            })
        );
@@ -44,33 +50,22 @@ export class DistanceMarkers {
                        data: this.getDistanceMarkersGeoJSON(),
                    });
                }
-                if (!map_.getLayer('distance-markers')) {
-                    map_.addLayer(
-                        {
-                            id: 'distance-markers',
+                stops.forEach(([d, minzoom, maxzoom]) => {
+                    if (!map_.getLayer(`distance-markers-${d}`)) {
+                        map_.addLayer({
+                            id: `distance-markers-${d}`,
                            type: 'symbol',
                            source: 'distance-markers',
-                            filter: [
-                                'match',
-                                ['get', 'level'],
-                                100,
-                                ['>=', ['zoom'], 0],
-                                50,
-                                ['>=', ['zoom'], 7],
-                                25,
-                                [
-                                    'any',
-                                    ['all', ['>=', ['zoom'], 8], ['<=', ['zoom'], 9]],
-                                    ['>=', ['zoom'], 11],
-                                ],
-                                10,
-                                ['>=', ['zoom'], 10],
-                                5,
-                                ['>=', ['zoom'], 11],
-                                1,
-                                ['>=', ['zoom'], 13],
-                                false,
-                            ],
+                            filter:
+                                d === 5
+                                    ? [
+                                          'any',
+                                          ['==', ['get', 'level'], 5],
+                                          ['==', ['get', 'level'], 25],
+                                      ]
+                                    : ['==', ['get', 'level'], d],
+                            minzoom: minzoom,
+                            maxzoom: maxzoom ?? 24,
                            layout: {
                                'text-field': ['get', 'distance'],
                                'text-size': 14,
@@ -81,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')) {
-                    map_.removeLayer('distance-markers');
-                }
+                stops.forEach(([d]) => {
+                    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
@@ -103,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) => {
-            if (dist >= getConvertedDistanceToKilometers(currentTargetDistance)) {
+        for (let i = 0; i < statistics.local.distance.total.length; i++) {
+            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',
@@ -3,14 +3,13 @@ import { MapPopup } from '$lib/components/map/map-popup';
 export let waypointPopup: MapPopup | null = null;
 export let trackpointPopup: MapPopup | null = null;

-export function createPopups(map: maplibregl.Map) {
+export function createPopups(map: mapboxgl.Map) {
    removePopups();
    waypointPopup = new MapPopup(map, {
        closeButton: false,
        focusAfterOpen: false,
        maxWidth: undefined,
        offset: {
-            center: [0, 0],
            top: [0, 0],
            'top-left': [0, 0],
            'top-right': [0, 0],
@@ -1,10 +1,5 @@
 import { get, type Readable } from 'svelte/store';
-import maplibregl, {
-    type GeoJSONSource,
-    type FilterSpecification,
-    type MapLayerMouseEvent,
-    type MapLayerTouchEvent,
-} from 'maplibre-gl';
+import mapboxgl from 'mapbox-gl';
 import { map } from '$lib/components/map/map';
 import { waypointPopup, trackpointPopup } from './gpx-layer-popup';
 import {
@@ -15,7 +10,7 @@ import {
    ListFileItem,
    ListRootItem,
 } from '$lib/components/file-list/file-list';
-import { getClosestLinePoint, getElevation, loadSVGIcon } from '$lib/utils';
+import { getClosestLinePoint, getElevation } from '$lib/utils';
 import { selectedWaypoint } from '$lib/components/toolbar/tools/waypoint/waypoint';
 import { MapPin, Square } from 'lucide-static';
 import { getSymbolKey, symbols } from '$lib/assets/symbols';
@@ -27,8 +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 { ANCHOR_LAYER_KEY } from '$lib/components/map/style';
-import { gpxColors } from '$lib/components/map/gpx-layer/gpx-layers';

 const colors = [
    '#ff0000',
@@ -50,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) {
-    if (colorCount.hasOwnProperty(oldColor)) {
-        colorCount[oldColor]--;
-    }
-    colorCount[newColor]++;
-    gpxColors.update((colors) => {
-        colors.set(fileId, newColor);
-        return colors;
-    });
-}
-
-function removeColor(fileId: string, color: string) {
+function decrementColor(color: string) {
    if (colorCount.hasOwnProperty(color)) {
        colorCount[color]--;
    }
-    gpxColors.update((colors) => {
-        colors.delete(fileId);
-        return colors;
-    });
 }

-export function getSvgForSymbol(symbol?: string | undefined, layerColor?: string | undefined) {
+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">
-    ${
-        layerColor
-            ? Square.replace('width="24"', 'width="12"')
-                  .replace('height="24"', 'height="12"')
-                  .replace('stroke="currentColor"', 'stroke="SteelBlue"')
-                  .replace('stroke-width="2"', 'stroke-width="1.5" x="9.6" y="0.4"')
-                  .replace('fill="none"', `fill="${layerColor}"`)
-            : ''
-    }
+    ${Square.replace('width="24"', 'width="12"')
+        .replace('height="24"', 'height="12"')
+        .replace('stroke="currentColor"', 'stroke="SteelBlue"')
+        .replace('stroke-width="2"', 'stroke-width="1.5" x="9.6" y="0.4"')
+        .replace('fill="none"', `fill="${layerColor}"`)}
    ${MapPin.replace('width="24"', '')
        .replace('height="24"', '')
        .replace('stroke="currentColor"', '')
@@ -117,41 +87,26 @@ export class GPXLayer {
    fileId: string;
    file: Readable<GPXFileWithStatistics | undefined>;
    layerColor: string;
+    markers: mapboxgl.Marker[] = [];
    selected: boolean = false;
-    currentWaypointData: GeoJSON.FeatureCollection | null = null;
-    draggedWaypointIndex: number | null = null;
-    draggingStartingPosition: maplibregl.Point = new maplibregl.Point(0, 0);
+    draggable: boolean;
    unsubscribe: Function[] = [];

    updateBinded: () => void = this.update.bind(this);
    layerOnMouseEnterBinded: (e: any) => void = this.layerOnMouseEnter.bind(this);
    layerOnMouseLeaveBinded: () => void = this.layerOnMouseLeave.bind(this);
    layerOnMouseMoveBinded: (e: any) => void = this.layerOnMouseMove.bind(this);
-    layerOnClickBinded: (e: MapLayerMouseEvent) => void = this.layerOnClick.bind(this);
-    layerOnContextMenuBinded: (e: MapLayerMouseEvent) => void = this.layerOnContextMenu.bind(this);
-    waypointLayerOnMouseEnterBinded: (e: MapLayerMouseEvent) => void =
-        this.waypointLayerOnMouseEnter.bind(this);
-    waypointLayerOnMouseLeaveBinded: (e: MapLayerMouseEvent) => void =
-        this.waypointLayerOnMouseLeave.bind(this);
-    waypointLayerOnClickBinded: (e: MapLayerMouseEvent) => void =
-        this.waypointLayerOnClick.bind(this);
-    waypointLayerOnMouseDownBinded: (e: MapLayerMouseEvent) => void =
-        this.waypointLayerOnMouseDown.bind(this);
-    waypointLayerOnTouchStartBinded: (e: MapLayerTouchEvent) => void =
-        this.waypointLayerOnTouchStart.bind(this);
-    waypointLayerOnMouseMoveBinded: (e: MapLayerMouseEvent | MapLayerTouchEvent) => void =
-        this.waypointLayerOnMouseMove.bind(this);
-    waypointLayerOnMouseUpBinded: (e: MapLayerMouseEvent | MapLayerTouchEvent) => void =
-        this.waypointLayerOnMouseUp.bind(this);
+    layerOnClickBinded: (e: any) => void = this.layerOnClick.bind(this);
+    layerOnContextMenuBinded: (e: any) => void = this.layerOnContextMenu.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) {
-                    $map.on('style.load', this.updateBinded);
+                    $map.on('style.import.load', this.updateBinded);
                    this.update();
                }
            })
@@ -170,13 +125,24 @@ 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() {
        const _map = get(map);
-        const layerEventManager = map.layerEventManager;
        let file = get(this.file)?.file;
-        if (!_map || !layerEventManager || !file) {
+        if (!_map || !file) {
            return;
        }

@@ -185,14 +151,12 @@ 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 GeoJSONSource | undefined;
+            let source = _map.getSource(this.fileId) as mapboxgl.GeoJSONSource | undefined;
            if (source) {
                source.setData(this.getGeoJSON());
            } else {
@@ -203,45 +167,28 @@ export class GPXLayer {
            }

            if (!_map.getLayer(this.fileId)) {
-                _map.addLayer(
-                    {
-                        id: this.fileId,
-                        type: 'line',
-                        source: this.fileId,
-                        layout: {
-                            'line-join': 'round',
-                            'line-cap': 'round',
-                        },
-                        paint: {
-                            'line-color': ['get', 'color'],
-                            'line-width': ['get', 'width'],
-                            'line-opacity': ['get', 'opacity'],
-                        },
+                _map.addLayer({
+                    id: this.fileId,
+                    type: 'line',
+                    source: this.fileId,
+                    layout: {
+                        'line-join': 'round',
+                        'line-cap': 'round',
                    },
-                    ANCHOR_LAYER_KEY.tracks
-                );
+                    paint: {
+                        'line-color': ['get', 'color'],
+                        'line-width': ['get', 'width'],
+                        'line-opacity': ['get', 'opacity'],
+                    },
+                });

-                layerEventManager.on('click', this.fileId, this.layerOnClickBinded);
-                layerEventManager.on('contextmenu', this.fileId, this.layerOnContextMenuBinded);
-                layerEventManager.on('mouseenter', this.fileId, this.layerOnMouseEnterBinded);
-                layerEventManager.on('mouseleave', this.fileId, this.layerOnMouseLeaveBinded);
-                layerEventManager.on('mousemove', this.fileId, this.layerOnMouseMoveBinded);
+                _map.on('click', this.fileId, this.layerOnClickBinded);
+                _map.on('contextmenu', this.fileId, this.layerOnContextMenuBinded);
+                _map.on('mouseenter', this.fileId, this.layerOnMouseEnterBinded);
+                _map.on('mouseleave', this.fileId, this.layerOnMouseLeaveBinded);
+                _map.on('mousemove', this.fileId, this.layerOnMouseMoveBinded);
            }

-            let visibleTrackSegmentIds: string[] = [];
-            file.forEachSegment((segment, trackIndex, segmentIndex) => {
-                if (!segment._data.hidden) {
-                    visibleTrackSegmentIds.push(`${trackIndex}-${segmentIndex}`);
-                }
-            });
-            const segmentFilter: FilterSpecification = [
-                'in',
-                ['get', 'trackSegmentId'],
-                ['literal', visibleTrackSegmentIds],
-            ];
-
-            _map.setFilter(this.fileId, segmentFilter, { validate: false });
-
            if (get(directionMarkers)) {
                if (!_map.getLayer(this.fileId + '-direction')) {
                    _map.addLayer(
@@ -251,7 +198,7 @@ export class GPXLayer {
                            source: this.fileId,
                            layout: {
                                'text-field': '»',
-                                'text-offset': [0, -0.06],
+                                'text-offset': [0, -0.1],
                                'text-keep-upright': false,
                                'text-max-angle': 361,
                                'text-allow-overlap': true,
@@ -261,140 +208,177 @@ export class GPXLayer {
                            },
                            paint: {
                                'text-color': 'white',
+                                'text-opacity': 0.7,
                                'text-halo-width': 0.2,
                                'text-halo-color': 'white',
                            },
                        },
-                        ANCHOR_LAYER_KEY.directionMarkers
+                        _map.getLayer('distance-markers-100') ? 'distance-markers-100' : undefined
                    );
                }
-
-                _map.setFilter(this.fileId + '-direction', segmentFilter, { validate: false });
            } else {
                if (_map.getLayer(this.fileId + '-direction')) {
                    _map.removeLayer(this.fileId + '-direction');
                }
            }

-            let waypointSource = _map.getSource(this.fileId + '-waypoints') as
-                | GeoJSONSource
-                | undefined;
-            this.currentWaypointData = this.getWaypointsGeoJSON();
-            if (waypointSource) {
-                waypointSource.setData(this.currentWaypointData);
-            } else {
-                _map.addSource(this.fileId + '-waypoints', {
-                    type: 'geojson',
-                    data: this.currentWaypointData,
-                    promoteId: 'waypointIndex',
-                });
-            }
-
-            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
-                );
-
-                layerEventManager.on(
-                    'mouseenter',
-                    this.fileId + '-waypoints',
-                    this.waypointLayerOnMouseEnterBinded
-                );
-                layerEventManager.on(
-                    'mouseleave',
-                    this.fileId + '-waypoints',
-                    this.waypointLayerOnMouseLeaveBinded
-                );
-                layerEventManager.on(
-                    'click',
-                    this.fileId + '-waypoints',
-                    this.waypointLayerOnClickBinded
-                );
-                layerEventManager.on(
-                    'mousedown',
-                    this.fileId + '-waypoints',
-                    this.waypointLayerOnMouseDownBinded
-                );
-                layerEventManager.on(
-                    'touchstart',
-                    this.fileId + '-waypoints',
-                    this.waypointLayerOnTouchStartBinded
-                );
-            }
-
-            let visibleWaypoints: number[] = [];
-            file.wpt.forEach((waypoint, waypointIndex) => {
-                if (!waypoint._data.hidden) {
-                    visibleWaypoints.push(waypointIndex);
+            let visibleItems: [number, number][] = [];
+            file.forEachSegment((segment, trackIndex, segmentIndex) => {
+                if (!segment._data.hidden) {
+                    visibleItems.push([trackIndex, segmentIndex]);
                }
            });

            _map.setFilter(
-                this.fileId + '-waypoints',
-                ['in', ['get', 'waypointIndex'], ['literal', visibleWaypoints]],
+                this.fileId,
+                [
+                    '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() {
        const _map = get(map);
-
        if (_map) {
-            _map.off('style.load', this.updateBinded);
-        }
+            _map.off('click', this.fileId, this.layerOnClickBinded);
+            _map.off('contextmenu', this.fileId, this.layerOnContextMenuBinded);
+            _map.off('mouseenter', this.fileId, this.layerOnMouseEnterBinded);
+            _map.off('mouseleave', this.fileId, this.layerOnMouseLeaveBinded);
+            _map.off('mousemove', this.fileId, this.layerOnMouseMoveBinded);
+            _map.off('style.import.load', this.updateBinded);

-        const layerEventManager = map.layerEventManager;
-        if (layerEventManager) {
-            layerEventManager.off('click', this.fileId, this.layerOnClickBinded);
-            layerEventManager.off('contextmenu', this.fileId, this.layerOnContextMenuBinded);
-            layerEventManager.off('mouseenter', this.fileId, this.layerOnMouseEnterBinded);
-            layerEventManager.off('mouseleave', this.fileId, this.layerOnMouseLeaveBinded);
-            layerEventManager.off('mousemove', this.fileId, this.layerOnMouseMoveBinded);
-
-            layerEventManager.off(
-                'mouseenter',
-                this.fileId + '-waypoints',
-                this.waypointLayerOnMouseEnterBinded
-            );
-            layerEventManager.off(
-                'mouseleave',
-                this.fileId + '-waypoints',
-                this.waypointLayerOnMouseLeaveBinded
-            );
-            layerEventManager.off(
-                'click',
-                this.fileId + '-waypoints',
-                this.waypointLayerOnClickBinded
-            );
-            layerEventManager.off(
-                'mousedown',
-                this.fileId + '-waypoints',
-                this.waypointLayerOnMouseDownBinded
-            );
-            layerEventManager.off(
-                'touchstart',
-                this.fileId + '-waypoints',
-                this.waypointLayerOnTouchStartBinded
-            );
-        }
-
-        if (_map) {
            if (_map.getLayer(this.fileId + '-direction')) {
                _map.removeLayer(this.fileId + '-direction');
            }
@@ -404,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() {
@@ -423,13 +405,10 @@ export class GPXLayer {
            return;
        }
        if (_map.getLayer(this.fileId)) {
-            _map.moveLayer(this.fileId, ANCHOR_LAYER_KEY.tracks);
-        }
-        if (_map.getLayer(this.fileId + '-waypoints')) {
-            _map.moveLayer(this.fileId + '-waypoints', ANCHOR_LAYER_KEY.waypoints);
+            _map.moveLayer(this.fileId);
        }
        if (_map.getLayer(this.fileId + '-direction')) {
-            _map.moveLayer(this.fileId + '-direction', ANCHOR_LAYER_KEY.directionMarkers);
+            _map.moveLayer(this.fileId + '-direction');
        }
    }

@@ -470,7 +449,7 @@ export class GPXLayer {
        }
    }

-    layerOnClick(e: MapLayerMouseEvent) {
+    layerOnClick(e: any) {
        if (
            get(currentTool) === Tool.ROUTING &&
            get(selection).hasAnyChildren(new ListRootItem(), true, ['waypoints'])
@@ -478,8 +457,8 @@ export class GPXLayer {
            return;
        }

-        let trackIndex = e.features![0].properties!.trackIndex;
-        let segmentIndex = e.features![0].properties!.segmentIndex;
+        let trackIndex = e.features[0].properties.trackIndex;
+        let segmentIndex = e.features[0].properties.segmentIndex;

        if (
            get(currentTool) === Tool.SCISSORS &&
@@ -487,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,
@@ -528,179 +502,6 @@ export class GPXLayer {
        }
    }

-    waypointLayerOnMouseEnter(e: MapLayerMouseEvent) {
-        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: MapLayerMouseEvent) {
-        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: MapLayerMouseEvent) {
-        if (get(currentTool) !== Tool.WAYPOINT || !this.selected) {
-            return;
-        }
-        const _map = get(map);
-        if (!_map) {
-            return;
-        }
-
-        e.preventDefault();
-        _map.dragPan.disable();
-
-        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: MapLayerTouchEvent) {
-        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.dragPan.disable();
-
-        _map.on('touchmove', this.waypointLayerOnMouseMoveBinded);
-        _map.once('touchend', this.waypointLayerOnMouseUpBinded);
-    }
-
-    waypointLayerOnMouseMove(e: MapLayerMouseEvent | MapLayerTouchEvent) {
-        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
-            | GeoJSONSource
-            | undefined;
-        if (waypointSource) {
-            waypointSource.updateData({
-                update: [
-                    {
-                        id: this.draggedWaypointIndex,
-                        newGeometry: {
-                            type: 'Point',
-                            coordinates: [e.lngLat.lng, e.lngLat.lat],
-                        },
-                    },
-                ],
-            });
-        }
-    }
-
-    waypointLayerOnMouseUp(e: MapLayerMouseEvent | MapLayerTouchEvent) {
-        mapCursor.notify(MapCursorState.WAYPOINT_DRAGGING, false);
-
-        const _map = get(map);
-        if (!_map) {
-            return;
-        }
-
-        _map.dragPan.enable();
-
-        _map.off('mousemove', this.waypointLayerOnMouseMoveBinded);
-        _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) {
@@ -738,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) {
@@ -748,52 +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}`;
-            loadSVGIcon(_map, iconId, getSvgForSymbol(symbol, this.layerColor));
-        });
-    }
 }
@@ -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>());
@@ -1,40 +1,30 @@
 import { currentTool, Tool } from '$lib/components/toolbar/tools';
-import { gpxStatistics, hoveredPoint, slicedGPXStatistics } from '$lib/logic/statistics';
-import type { GeoJSONSource } from 'maplibre-gl';
+import { gpxStatistics, slicedGPXStatistics } from '$lib/logic/statistics';
+import mapboxgl from 'mapbox-gl';
 import { get } from 'svelte/store';
 import { map } from '$lib/components/map/map';
 import { allHidden } from '$lib/logic/hidden';
-import { ANCHOR_LAYER_KEY } from '$lib/components/map/style';
-import { loadSVGIcon } from '$lib/utils';
-
-const startMarkerSVG = `<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
-  <circle cx="8" cy="8" r="6" fill="#22c55e" stroke="white" stroke-width="1.5"/>
-</svg>`;
-
-const endMarkerSVG = `<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
-  <defs>
-    <pattern id="checkerboard" x="0" y="0" width="5" height="5" patternUnits="userSpaceOnUse">
-      <rect x="0" y="0" width="2.5" height="2.5" fill="white"/>
-      <rect x="2.5" y="2.5" width="2.5" height="2.5" fill="white"/>
-      <rect x="2.5" y="0" width="2.5" height="2.5" fill="black"/>
-      <rect x="0" y="2.5" width="2.5" height="2.5" fill="black"/>
-    </pattern>
-  </defs>
-  <circle cx="8" cy="8" r="6" fill="url(#checkerboard)" stroke="white" stroke-width="1.5"/>
-</svg>`;
-const hoverMarkerSVG = `<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
-  <circle cx="8" cy="8" r="6" fill="#00b8db" stroke="white" stroke-width="1.5"/>
-</svg>`;

 export class StartEndMarkers {
+    start: mapboxgl.Marker;
+    end: mapboxgl.Marker;
    updateBinded: () => void = this.update.bind(this);
    unsubscribes: (() => void)[] = [];

    constructor() {
-        map.onLoad((map_) => map_.on('style.load', this.updateBinded));
+        let startElement = document.createElement('div');
+        let endElement = document.createElement('div');
+        startElement.className = `h-4 w-4 rounded-full bg-green-500 border-2 border-white`;
+        endElement.className = `h-4 w-4 rounded-full border-2 border-white`;
+        endElement.style.background =
+            'repeating-conic-gradient(#fff 0 90deg, #000 0 180deg) 0 0/8px 8px round';
+
+        this.start = new mapboxgl.Marker({ element: startElement });
+        this.end = new mapboxgl.Marker({ element: endElement });
+
+        map.onLoad(() => this.update());
        this.unsubscribes.push(gpxStatistics.subscribe(this.updateBinded));
        this.unsubscribes.push(slicedGPXStatistics.subscribe(this.updateBinded));
-        this.unsubscribes.push(hoveredPoint.subscribe(this.updateBinded));
        this.unsubscribes.push(currentTool.subscribe(this.updateBinded));
        this.unsubscribes.push(allHidden.subscribe(this.updateBinded));
    }
@@ -43,115 +33,26 @@ export class StartEndMarkers {
        const map_ = get(map);
        if (!map_) return;

-        this.loadIcons();
-
        const tool = get(currentTool);
-        const statistics = get(gpxStatistics);
-        const slicedStatistics = get(slicedGPXStatistics);
-        const hovered = get(hoveredPoint);
+        const statistics = get(slicedGPXStatistics)?.[0] ?? get(gpxStatistics);
        const hidden = get(allHidden);
-        if (!hidden) {
-            const data: GeoJSON.FeatureCollection = {
-                type: 'FeatureCollection',
-                features: [],
-            };
-
-            if (statistics.global.length > 0 && tool !== Tool.ROUTING) {
-                const start = statistics
-                    .getTrackPoint(slicedStatistics?.[1] ?? 0)!
-                    .trkpt.getCoordinates();
-                const end = statistics
-                    .getTrackPoint(slicedStatistics?.[2] ?? statistics.global.length - 1)!
-                    .trkpt.getCoordinates();
-                data.features.push({
-                    type: 'Feature',
-                    geometry: {
-                        type: 'Point',
-                        coordinates: [start.lon, start.lat],
-                    },
-                    properties: {
-                        icon: 'start-marker',
-                    },
-                });
-                data.features.push({
-                    type: 'Feature',
-                    geometry: {
-                        type: 'Point',
-                        coordinates: [end.lon, end.lat],
-                    },
-                    properties: {
-                        icon: 'end-marker',
-                    },
-                });
-            }
-
-            if (hovered) {
-                data.features.push({
-                    type: 'Feature',
-                    geometry: {
-                        type: 'Point',
-                        coordinates: [hovered.lon, hovered.lat],
-                    },
-                    properties: {
-                        icon: 'hover-marker',
-                    },
-                });
-            }
-
-            let source = map_.getSource('start-end-markers') as GeoJSONSource | undefined;
-            if (source) {
-                source.setData(data);
-            } else {
-                map_.addSource('start-end-markers', {
-                    type: 'geojson',
-                    data: data,
-                });
-            }
-
-            if (!map_.getLayer('start-end-markers')) {
-                map_.addLayer(
-                    {
-                        id: 'start-end-markers',
-                        type: 'symbol',
-                        source: 'start-end-markers',
-                        layout: {
-                            'icon-image': ['get', 'icon'],
-                            'icon-size': 0.2,
-                            'icon-allow-overlap': true,
-                        },
-                    },
-                    ANCHOR_LAYER_KEY.startEndMarkers
-                );
-            }
+        if (statistics.local.points.length > 0 && tool !== Tool.ROUTING && !hidden) {
+            this.start.setLngLat(statistics.local.points[0].getCoordinates()).addTo(map_);
+            this.end
+                .setLngLat(
+                    statistics.local.points[statistics.local.points.length - 1].getCoordinates()
+                )
+                .addTo(map_);
        } else {
-            if (map_.getLayer('start-end-markers')) {
-                map_.removeLayer('start-end-markers');
-            }
-            if (map_.getSource('start-end-markers')) {
-                map_.removeSource('start-end-markers');
-            }
+            this.start.remove();
+            this.end.remove();
        }
    }

    remove() {
        this.unsubscribes.forEach((unsubscribe) => unsubscribe());

-        const map_ = get(map);
-        if (!map_) return;
-
-        if (map_.getLayer('start-end-markers')) {
-            map_.removeLayer('start-end-markers');
-        }
-        if (map_.getSource('start-end-markers')) {
-            map_.removeSource('start-end-markers');
-        }
-    }
-
-    loadIcons() {
-        const map_ = get(map);
-        if (!map_) return;
-        loadSVGIcon(map_, 'start-marker', startMarkerSVG);
-        loadSVGIcon(map_, 'end-marker', endMarkerSVG);
-        loadSVGIcon(map_, 'hover-marker', hoverMarkerSVG);
+        this.start.remove();
+        this.end.remove();
    }
 }
@@ -20,8 +20,9 @@
    import { i18n } from '$lib/i18n.svelte';
    import { defaultBasemap, type CustomLayer } from '$lib/assets/layers';
    import { onMount } from 'svelte';
-    import { remove } from './utils';
+    import { customBasemapUpdate, isSelected, remove } from './utils';
    import { settings } from '$lib/logic/settings';
+    import { map } from '$lib/components/map/map';
    import { dndzone } from 'svelte-dnd-action';

    const {
@@ -41,8 +42,13 @@
    let maxZoom: number = $state(20);
    let layerType: 'basemap' | 'overlay' = $state('basemap');
    let resourceType: 'raster' | 'vector' = $derived.by(() => {
-        if (tileUrls[0].length > 0 && tileUrls[0].includes('.json')) {
-            return 'vector';
+        if (tileUrls[0].length > 0) {
+            if (
+                tileUrls[0].includes('.json') ||
+                (tileUrls[0].includes('api.mapbox.com/styles') && !tileUrls[0].includes('tiles'))
+            ) {
+                return 'vector';
+            }
        }
        return 'raster';
    });
@@ -128,8 +134,8 @@
                ],
            };
        }
-        addLayer(layerId);
        $customLayers[layerId] = layer;
+        addLayer(layerId);
        selectedLayerId = undefined;
        setDataFromSelectedLayer();
    }
@@ -152,7 +158,9 @@
                return $tree;
            });

-            if ($currentBasemap !== layerId) {
+            if ($currentBasemap === layerId) {
+                $customBasemapUpdate++;
+            } else {
                $currentBasemap = layerId;
            }

@@ -168,6 +176,14 @@
                return $tree;
            });

+            if ($map && $currentOverlays && isSelected($currentOverlays, layerId)) {
+                try {
+                    $map.removeImport(layerId);
+                } catch (e) {
+                    // No reliable way to check if the map is ready to remove sources and layers
+                }
+            }
+
            currentOverlays.update(($overlays) => {
                if (!$overlays.overlays.hasOwnProperty('custom')) {
                    $overlays.overlays['custom'] = {};
@@ -232,127 +248,120 @@

 <div class="flex flex-col">
    {#if $customBasemapOrder.length > 0}
-        <div class="px-3 py-2">
-            <div class="flex flex-row items-center gap-1 font-semibold mb-2">
-                <Map size="16" />
-                {i18n._('layers.label.basemaps')}
-            </div>
-            <div
-                class="ml-1.5 flex flex-col gap-1"
-                use:dndzone={{
-                    items: customBasemapItems,
-                    type: 'basemap',
-                    dropTargetStyle: {},
-                    transformDraggedElement: (element) => {
-                        if (element) {
-                            element.style.opacity = '0.5';
-                        }
-                    },
-                }}
-                onconsider={(e) => {
-                    customBasemapItems = e.detail.items;
-                }}
-                onfinalize={(e) => {
-                    customBasemapItems = e.detail.items;
-                    $customBasemapOrder = customBasemapItems.map((item) => item.id);
-                    $selectedBasemapTree.basemaps['custom'] = customBasemapItems.reduce(
-                        (acc, item) => {
-                            acc[item.id] = true;
-                            return acc;
-                        },
-                        {}
-                    );
-                }}
-            >
-                {#each customBasemapItems as item (item.id)}
-                    <div class="flex flex-row items-center gap-1">
-                        <Move size="12" />
-                        <span class="grow">{item.name}</span>
-                        <Button
-                            variant="outline"
-                            size="icon-sm"
-                            onclick={() => (selectedLayerId = item.id)}
-                            class="p-1 h-7"
-                        >
-                            <Pencil size="16" />
-                        </Button>
-                        <Button
-                            variant="outline"
-                            size="icon-sm"
-                            onclick={() => deleteLayer(item.id)}
-                            class="p-1 h-7"
-                        >
-                            <Trash2 size="16" />
-                        </Button>
-                    </div>
-                {/each}
+        <div class="flex flex-row items-center gap-1 font-semibold mb-2">
+            <Map size="16" />
+            {i18n._('layers.label.basemaps')}
+            <div class="grow">
+                <Separator />
            </div>
        </div>
-        <Separator />
    {/if}
+    <div
+        class="ml-1.5 flex flex-col gap-1 {$customBasemapOrder.length > 0 ? 'mb-2' : ''}"
+        use:dndzone={{
+            items: customBasemapItems,
+            type: 'basemap',
+            dropTargetStyle: {},
+            transformDraggedElement: (element) => {
+                if (element) {
+                    element.style.opacity = '0.5';
+                }
+            },
+        }}
+        onconsider={(e) => {
+            customBasemapItems = e.detail.items;
+        }}
+        onfinalize={(e) => {
+            customBasemapItems = e.detail.items;
+            $customBasemapOrder = customBasemapItems.map((item) => item.id);
+            $selectedBasemapTree.basemaps['custom'] = customBasemapItems.reduce((acc, item) => {
+                acc[item.id] = true;
+                return acc;
+            }, {});
+        }}
+    >
+        {#each customBasemapItems as item (item.id)}
+            <div class="flex flex-row items-center gap-2">
+                <Move size="12" />
+                <span class="grow">{item.name}</span>
+                <Button
+                    variant="outline"
+                    size="icon-sm"
+                    onclick={() => (selectedLayerId = item.id)}
+                    class="p-1 h-7"
+                >
+                    <Pencil size="16" />
+                </Button>
+                <Button
+                    variant="outline"
+                    size="icon-sm"
+                    onclick={() => deleteLayer(item.id)}
+                    class="p-1 h-7"
+                >
+                    <Trash2 size="16" />
+                </Button>
+            </div>
+        {/each}
+    </div>
    {#if $customOverlayOrder.length > 0}
-        <div class="px-3 py-2">
-            <div class="flex flex-row items-center gap-1 font-semibold mb-2">
-                <Layers2 size="16" />
-                {i18n._('layers.label.overlays')}
-                <div class="grow"></div>
-            </div>
-            <div
-                class="ml-1.5 flex flex-col gap-1"
-                use:dndzone={{
-                    items: customOverlayItems,
-                    type: 'overlay',
-                    dropTargetStyle: {},
-                    transformDraggedElement: (element) => {
-                        if (element) {
-                            element.style.opacity = '0.5';
-                        }
-                    },
-                }}
-                onconsider={(e) => {
-                    customOverlayItems = e.detail.items;
-                }}
-                onfinalize={(e) => {
-                    customOverlayItems = e.detail.items;
-                    $customOverlayOrder = customOverlayItems.map((item) => item.id);
-                    $selectedOverlayTree.overlays['custom'] = customOverlayItems.reduce(
-                        (acc, item) => {
-                            acc[item.id] = true;
-                            return acc;
-                        },
-                        {}
-                    );
-                }}
-            >
-                {#each customOverlayItems as item (item.id)}
-                    <div class="flex flex-row items-center gap-1">
-                        <Move size="12" />
-                        <span class="grow">{item.name}</span>
-                        <Button
-                            variant="outline"
-                            size="icon-sm"
-                            onclick={() => (selectedLayerId = item.id)}
-                            class="p-1 h-7"
-                        >
-                            <Pencil size="16" />
-                        </Button>
-                        <Button
-                            variant="outline"
-                            size="icon-sm"
-                            onclick={() => deleteLayer(item.id)}
-                            class="p-1 h-7"
-                        >
-                            <Trash2 size="16" />
-                        </Button>
-                    </div>
-                {/each}
+        <div class="flex flex-row items-center gap-1 font-semibold mb-2">
+            <Layers2 size="16" />
+            {i18n._('layers.label.overlays')}
+            <div class="grow">
+                <Separator />
            </div>
        </div>
-        <Separator />
    {/if}
-    <Card.Root class="py-0 gap-0 shadow-none ring-0">
+    <div
+        class="ml-1.5 flex flex-col gap-1 {$customOverlayOrder.length > 0 ? 'mb-2' : ''}"
+        use:dndzone={{
+            items: customOverlayItems,
+            type: 'overlay',
+            dropTargetStyle: {},
+            transformDraggedElement: (element) => {
+                if (element) {
+                    element.style.opacity = '0.5';
+                }
+            },
+        }}
+        onconsider={(e) => {
+            customOverlayItems = e.detail.items;
+        }}
+        onfinalize={(e) => {
+            customOverlayItems = e.detail.items;
+            $customOverlayOrder = customOverlayItems.map((item) => item.id);
+            $selectedOverlayTree.overlays['custom'] = customOverlayItems.reduce((acc, item) => {
+                acc[item.id] = true;
+                return acc;
+            }, {});
+        }}
+    >
+        {#each customOverlayItems as item (item.id)}
+            <div class="flex flex-row items-center gap-2">
+                <Move size="12" />
+                <span class="grow">{item.name}</span>
+                <Button
+                    variant="outline"
+                    size="icon-sm"
+                    onclick={() => (selectedLayerId = item.id)}
+                    class="p-1 h-7"
+                >
+                    <Pencil size="16" />
+                </Button>
+                <Button
+                    variant="outline"
+                    size="icon-sm"
+                    onclick={() => deleteLayer(item.id)}
+                    class="p-1 h-7"
+                >
+                    <Trash2 size="16" />
+                </Button>
+            </div>
+        {/each}
+    </div>
+    <Card.Root class="py-0 gap-0 shadow-none">
        <Card.Header class="p-3">
-            <Card.Title class="text-sm font-semibold">
+            <Card.Title class="text-base">
                {#if selectedLayerId}
                    {i18n._('layers.custom_layers.edit')}
                {:else}
@@ -360,7 +369,7 @@
                {/if}
            </Card.Title>
        </Card.Header>
-        <Card.Content class="px-3 py-2">
+        <Card.Content class="p-3 pt-0">
            <fieldset class="flex flex-col gap-2">
                <Label for="name">{i18n._('menu.metadata.name')}</Label>
                <Input bind:value={name} id="name" class="h-8" />
@@ -417,7 +426,7 @@
                    </div>
                </RadioGroup.Root>
                {#if selectedLayerId}
-                    <div class="mt-2 flex flex-row gap-1">
+                    <div class="mt-2 flex flex-row gap-2">
                        <Button variant="outline" onclick={createLayer} class="grow">
                            <Save size="16" />
                            {i18n._('layers.custom_layers.update')}
@@ -5,8 +5,12 @@
    import { Separator } from '$lib/components/ui/separator';
    import { ScrollArea } from '$lib/components/ui/scroll-area/index.js';
    import { Layers } from '@lucide/svelte';
+    import { basemaps, defaultBasemap, overlays } from '$lib/assets/layers';
    import { settings } from '$lib/logic/settings';
    import { map } from '$lib/components/map/map';
+    import { customBasemapUpdate, getLayers } from './utils';
+    import type { ImportSpecification, StyleSpecification } from 'mapbox-gl';
+    import { untrack } from 'svelte';

    let container: HTMLDivElement;
    let overpassLayer: OverpassLayer;
@@ -19,14 +23,127 @@
        selectedBasemapTree,
        selectedOverlayTree,
        selectedOverpassTree,
+        customLayers,
+        opacities,
    } = settings;

-    map.onLoad((_map: maplibregl.Map) => {
+    function setStyle() {
+        if (!$map) {
+            return;
+        }
+        let basemap = basemaps.hasOwnProperty($currentBasemap)
+            ? basemaps[$currentBasemap]
+            : ($customLayers[$currentBasemap]?.value ?? basemaps[defaultBasemap]);
+        $map.removeImport('basemap');
+        if (typeof basemap === 'string') {
+            $map.addImport({ id: 'basemap', url: basemap }, 'overlays');
+        } else {
+            $map.addImport(
+                {
+                    id: 'basemap',
+                    url: '',
+                    data: basemap as StyleSpecification,
+                },
+                'overlays'
+            );
+        }
+    }
+
+    $effect(() => {
+        if ($map && ($currentBasemap || $customBasemapUpdate)) {
+            untrack(() => setStyle());
+        }
+    });
+
+    function addOverlay(id: string) {
+        if (!$map) {
+            return;
+        }
+        try {
+            let overlay = $customLayers.hasOwnProperty(id) ? $customLayers[id].value : overlays[id];
+            if (typeof overlay === 'string') {
+                $map.addImport({ id, url: overlay });
+            } else {
+                if ($opacities.hasOwnProperty(id)) {
+                    overlay = {
+                        ...overlay,
+                        layers: (overlay as StyleSpecification).layers.map((layer) => {
+                            if (layer.type === 'raster') {
+                                if (!layer.paint) {
+                                    layer.paint = {};
+                                }
+                                layer.paint['raster-opacity'] = $opacities[id];
+                            }
+                            return layer;
+                        }),
+                    };
+                }
+                $map.addImport({
+                    id,
+                    url: '',
+                    data: overlay as StyleSpecification,
+                });
+            }
+        } catch (e) {
+            // No reliable way to check if the map is ready to add sources and layers
+        }
+    }
+
+    function updateOverlays() {
+        if ($map && $currentOverlays && $opacities) {
+            let overlayLayers = getLayers($currentOverlays);
+            try {
+                let activeOverlays =
+                    $map
+                        .getStyle()
+                        .imports?.reduce(
+                            (
+                                acc: Record<string, ImportSpecification>,
+                                imprt: ImportSpecification
+                            ) => {
+                                if (
+                                    !['basemap', 'overlays', 'glyphs-and-sprite'].includes(imprt.id)
+                                ) {
+                                    acc[imprt.id] = imprt;
+                                }
+                                return acc;
+                            },
+                            {}
+                        ) || {};
+                let toRemove = Object.keys(activeOverlays).filter((id) => !overlayLayers[id]);
+                toRemove.forEach((id) => {
+                    $map?.removeImport(id);
+                });
+                let toAdd = Object.entries(overlayLayers)
+                    .filter(([id, selected]) => selected && !activeOverlays.hasOwnProperty(id))
+                    .map(([id]) => id);
+                toAdd.forEach((id) => {
+                    addOverlay(id);
+                });
+            } catch (e) {
+                // No reliable way to check if the map is ready to add sources and layers
+            }
+        }
+    }
+
+    $effect(() => {
+        if ($map && $currentOverlays && $opacities) {
+            untrack(() => updateOverlays());
+        }
+    });
+
+    map.onLoad((_map: mapboxgl.Map) => {
        if (overpassLayer) {
            overpassLayer.remove();
        }
-        overpassLayer = new OverpassLayer(_map, map.layerEventManager!);
+        overpassLayer = new OverpassLayer(_map);
        overpassLayer.add();
+        let first = true;
+        _map.on('style.import.load', () => {
+            if (!first) return;
+            first = false;
+            updateOverlays();
+        });
    });

    let open = $state(false);
@@ -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);
@@ -121,7 +119,7 @@
                <Accordion.Root class="flex flex-col" bind:value={accordionValue} type="single">
                    <Accordion.Item value="layer-selection" class="flex flex-col">
                        <Accordion.Trigger>{i18n._('layers.selection')}</Accordion.Trigger>
-                        <Accordion.Content class="grow flex flex-col border rounded-md mb-1.5">
+                        <Accordion.Content class="grow flex flex-col border rounded">
                            <div class="py-2 pl-3 pr-2">
                                <LayerTree
                                    layerTree={basemapTree}
@@ -152,9 +150,7 @@
                    </Accordion.Item>
                    <Accordion.Item value="overlay-opacity">
                        <Accordion.Trigger>{i18n._('layers.opacity')}</Accordion.Trigger>
-                        <Accordion.Content
-                            class="flex flex-col gap-3 overflow-visible border rounded-md px-3 py-2 mb-1.5"
-                        >
+                        <Accordion.Content class="flex flex-col gap-3 overflow-visible">
                            <div class="flex flex-row gap-6 items-center">
                                <Label>
                                    {i18n._('layers.custom_layers.overlay')}
@@ -164,16 +160,16 @@
                                    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)}
                                                    {$getLayerName(selectedOverlay)}
-                                                {:else if $customLayers.hasOwnProperty(selectedOverlay)}
-                                                    {$customLayers[selectedOverlay].name}
                                                {:else}
                                                    {i18n._(`layers.label.${selectedOverlay}`)}
                                                {/if}
+                                            {:else if $customLayers.hasOwnProperty(selectedOverlay)}
+                                                {$customLayers[selectedOverlay].name}
                                            {/if}
                                        {/if}
                                    </Select.Trigger>
@@ -215,9 +211,7 @@
                                                    isSelected($currentOverlays, selectedOverlay)
                                                ) {
                                                    try {
-                                                        if ($map.getLayer(selectedOverlay)) {
-                                                            $map.removeLayer(selectedOverlay);
-                                                        }
+                                                        $map.removeImport(selectedOverlay);
                                                    } catch (e) {
                                                        // No reliable way to check if the map is ready to remove sources and layers
                                                    }
@@ -233,27 +227,10 @@
                    <Accordion.Item value="custom-layers">
                        <Accordion.Trigger>{i18n._('layers.custom_layers.title')}</Accordion.Trigger
                        >
-                        <Accordion.Content
-                            class="flex flex-col overflow-visible border rounded-md p-0 mb-1.5"
-                        >
-                            <CustomLayers />
-                        </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>
+                            <ScrollArea>
+                                <CustomLayers />
+                            </ScrollArea>
                        </Accordion.Content>
                    </Accordion.Item>
                </Accordion.Root>
@@ -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">
@@ -54,27 +54,28 @@

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

@@ -84,17 +75,10 @@ export class ExtensionAPI {
            ],
        };

-        if (!overlayTree.overlays.hasOwnProperty(overlay.extensionName)) {
-            overlayTree.overlays[overlay.extensionName] = {};
-        }
-
-        overlayTree.overlays[overlay.extensionName][overlay.id] = true;
+        overlayTree.overlays.world[overlay.id] = true;

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

@@ -103,17 +87,14 @@ export class ExtensionAPI {
        if (current && isSelected(current, overlay.id)) {
            show = true;
            try {
-                get(map)?.removeLayer(overlay.id);
+                get(map)?.removeImport(overlay.id);
            } catch (e) {
                // No reliable way to check if the map is ready to remove sources and layers
            }
        }

        currentOverlays.update((current) => {
-            if (!current.overlays.hasOwnProperty(overlay.extensionName)) {
-                current.overlays[overlay.extensionName] = {};
-            }
-            current.overlays[overlay.extensionName][overlay.id] = show;
+            current.overlays.world[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);
    });
@@ -6,10 +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 type { GeoJSONSource } from 'maplibre-gl';
-import { ANCHOR_LAYER_KEY } from '$lib/components/map/style';
-import type { MapLayerEventManager } from '$lib/components/map/map-layer-event-manager';
-import { loadSVGIcon } from '$lib/utils';

 const { currentOverpassQueries } = settings;

@@ -28,8 +24,7 @@ export class OverpassLayer {
    minZoom = 12;
    queryZoom = 12;
    expirationTime = 7 * 24 * 3600 * 1000;
-    map: maplibregl.Map;
-    layerEventManager: MapLayerEventManager;
+    map: mapboxgl.Map;
    popup: MapPopup;

    currentQueries: Set<string> = new Set();
@@ -40,9 +35,8 @@ export class OverpassLayer {
    updateBinded = this.update.bind(this);
    onHoverBinded = this.onHover.bind(this);

-    constructor(map: maplibregl.Map, layerEventManager: MapLayerEventManager) {
+    constructor(map: mapboxgl.Map) {
        this.map = map;
-        this.layerEventManager = layerEventManager;
        this.popup = new MapPopup(map, {
            closeButton: false,
            focusAfterOpen: false,
@@ -53,7 +47,7 @@ export class OverpassLayer {

    add() {
        this.map.on('moveend', this.queryIfNeededBinded);
-        this.map.on('style.load', this.updateBinded);
+        this.map.on('style.import.load', this.updateBinded);
        this.unsubscribes.push(data.subscribe(this.updateBinded));
        this.unsubscribes.push(
            currentOverpassQueries.subscribe(() => {
@@ -77,17 +71,10 @@ export class OverpassLayer {
    update() {
        this.loadIcons();

-        const fullData = get(data);
-        const queries = getCurrentQueries();
-        const d: GeoJSON.FeatureCollection = {
-            type: 'FeatureCollection',
-            features: fullData.features.filter((feature) =>
-                queries.includes(feature.properties!.query)
-            ),
-        };
+        let d = get(data);

        try {
-            let source = this.map.getSource('overpass') as GeoJSONSource | undefined;
+            let source = this.map.getSource('overpass') as mapboxgl.GeoJSONSource | undefined;
            if (source) {
                source.setData(d);
            } else {
@@ -98,24 +85,23 @@ export class OverpassLayer {
            }

            if (!this.map.getLayer('overpass')) {
-                this.map.addLayer(
-                    {
-                        id: 'overpass',
-                        type: 'symbol',
-                        source: 'overpass',
-                        layout: {
-                            'icon-image': ['get', 'icon'],
-                            'icon-size': 0.25,
-                            'icon-padding': 0,
-                            'icon-allow-overlap': ['step', ['zoom'], false, 14, true],
-                        },
+                this.map.addLayer({
+                    id: 'overpass',
+                    type: 'symbol',
+                    source: 'overpass',
+                    layout: {
+                        'icon-image': ['get', 'icon'],
+                        'icon-size': 0.25,
+                        'icon-padding': 0,
+                        'icon-allow-overlap': ['step', ['zoom'], false, 14, true],
                    },
-                    ANCHOR_LAYER_KEY.overpass
-                );
+                });

-                this.layerEventManager.on('mouseenter', 'overpass', this.onHoverBinded);
-                this.layerEventManager.on('click', 'overpass', this.onHoverBinded);
+                this.map.on('mouseenter', 'overpass', this.onHoverBinded);
+                this.map.on('click', 'overpass', this.onHoverBinded);
            }
+
+            this.map.setFilter('overpass', ['in', 'query', ...getCurrentQueries()]);
        } catch (e) {
            // No reliable way to check if the map is ready to add sources and layers
        }
@@ -123,9 +109,7 @@ export class OverpassLayer {

    remove() {
        this.map.off('moveend', this.queryIfNeededBinded);
-        this.map.off('style.load', this.updateBinded);
-        this.layerEventManager.off('mouseenter', 'overpass', this.onHoverBinded);
-        this.layerEventManager.off('click', 'overpass', this.onHoverBinded);
+        this.map.off('style.import.load', this.updateBinded);
        this.unsubscribes.forEach((unsubscribe) => unsubscribe());

        try {
@@ -258,16 +242,27 @@ export class OverpassLayer {
    loadIcons() {
        let currentQueries = getCurrentQueries();
        currentQueries.forEach((query) => {
-            loadSVGIcon(
-                this.map,
-                `overpass-${query}`,
-                `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40">
+            if (!this.map.hasImage(`overpass-${query}`)) {
+                let icon = new Image(100, 100);
+                icon.onload = () => {
+                    if (!this.map.hasImage(`overpass-${query}`)) {
+                        this.map.addImage(`overpass-${query}`, 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="${overpassQueryData[query].icon.color}" />
                    <g transform="translate(8 8)">
                    ${overpassQueryData[query].icon.svg.replace('stroke="currentColor"', 'stroke="white"')}
                    </g>
-                </svg>`
-            );
+                </svg>
+            `);
+            }
        });
    }
 }
@@ -288,12 +283,10 @@ function getQuery(query: string) {
    }
 }

-function getQueryItem(tags: Record<string, string | string[]>) {
-    let arrayEntry = Object.entries(tags).find((entry): entry is [string, string[]] =>
-        Array.isArray(entry[1])
-    );
+function getQueryItem(tags: Record<string, string | boolean | string[]>) {
+    let arrayEntry = Object.values(tags).find((value) => Array.isArray(value));
    if (arrayEntry !== undefined) {
-        return arrayEntry[1]
+        return arrayEntry
            .map(
                (val) =>
                    `nwr${Object.entries(tags)
@@ -316,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
    );
@@ -1,4 +1,5 @@
 import type { LayerTreeType } from '$lib/assets/layers';
+import { writable } from 'svelte/store';

 export function anySelectedLayer(node: LayerTreeType) {
    return (
@@ -75,3 +76,5 @@ export function removeAll(node: LayerTreeType, ids: string[]) {
    });
    return node;
 }
+
+export const customBasemapUpdate = writable(0);
@@ -1,282 +0,0 @@
-import { fileStateCollection } from '$lib/logic/file-state';
-import maplibregl from 'maplibre-gl';
-
-type MapLayerMouseEventListener = (e: maplibregl.MapLayerMouseEvent) => void;
-type MapLayerTouchEventListener = (e: maplibregl.MapLayerTouchEvent) => void;
-type MapLayerListener = {
-    features: maplibregl.MapGeoJSONFeature[];
-    mousemoves: MapLayerMouseEventListener[];
-    mouseenters: MapLayerMouseEventListener[];
-    mouseleaves: MapLayerMouseEventListener[];
-    mousedowns: MapLayerMouseEventListener[];
-    clicks: MapLayerMouseEventListener[];
-    contextmenus: MapLayerMouseEventListener[];
-    touchstarts: MapLayerTouchEventListener[];
-};
-
-export class MapLayerEventManager {
-    private _map: maplibregl.Map;
-    private _listeners: Record<string, MapLayerListener> = {};
-
-    constructor(map: maplibregl.Map) {
-        this._map = map;
-        this._map.on('mousemove', this._handleMouseMove.bind(this));
-        this._map.on('click', this._handleMouseClick.bind(this, 'click'));
-        this._map.on('contextmenu', this._handleMouseClick.bind(this, 'contextmenu'));
-        this._map.on('mousedown', this._handleMouseClick.bind(this, 'mousedown'));
-        this._map.on('touchstart', this._handleTouchStart.bind(this));
-    }
-
-    on(
-        eventType:
-            | 'mousemove'
-            | 'mouseenter'
-            | 'mouseleave'
-            | 'mousedown'
-            | 'click'
-            | 'contextmenu'
-            | 'touchstart',
-
-        layerId: string,
-        listener: MapLayerMouseEventListener | MapLayerTouchEventListener
-    ) {
-        if (!this._listeners[layerId]) {
-            this._listeners[layerId] = {
-                features: [],
-                mousemoves: [],
-                mouseenters: [],
-                mouseleaves: [],
-                mousedowns: [],
-                clicks: [],
-                contextmenus: [],
-                touchstarts: [],
-            };
-        }
-        switch (eventType) {
-            case 'mousemove':
-                this._listeners[layerId].mousemoves.push(listener as MapLayerMouseEventListener);
-                break;
-            case 'mouseenter':
-                this._listeners[layerId].mouseenters.push(listener as MapLayerMouseEventListener);
-                break;
-            case 'mouseleave':
-                this._listeners[layerId].mouseleaves.push(listener as MapLayerMouseEventListener);
-                break;
-            case 'mousedown':
-                this._listeners[layerId].mousedowns.push(listener as MapLayerMouseEventListener);
-                break;
-            case 'click':
-                this._listeners[layerId].clicks.push(listener as MapLayerMouseEventListener);
-                break;
-            case 'contextmenu':
-                this._listeners[layerId].contextmenus.push(listener as MapLayerMouseEventListener);
-                break;
-            case 'touchstart':
-                this._listeners[layerId].touchstarts.push(listener as MapLayerTouchEventListener);
-                break;
-        }
-    }
-
-    off(
-        eventType:
-            | 'mousemove'
-            | 'mouseenter'
-            | 'mouseleave'
-            | 'mousedown'
-            | 'click'
-            | 'contextmenu'
-            | 'touchstart',
-        layerId: string,
-        listener: MapLayerMouseEventListener | MapLayerTouchEventListener
-    ) {
-        if (this._listeners[layerId]) {
-            switch (eventType) {
-                case 'mousemove':
-                    this._listeners[layerId].mousemoves = this._listeners[
-                        layerId
-                    ].mousemoves.filter((l) => l !== listener);
-                    break;
-                case 'mouseenter':
-                    this._listeners[layerId].mouseenters = this._listeners[
-                        layerId
-                    ].mouseenters.filter((l) => l !== listener);
-                    break;
-                case 'mouseleave':
-                    this._listeners[layerId].mouseleaves = this._listeners[
-                        layerId
-                    ].mouseleaves.filter((l) => l !== listener);
-                    break;
-                case 'mousedown':
-                    this._listeners[layerId].mousedowns = this._listeners[
-                        layerId
-                    ].mousedowns.filter((l) => l !== listener);
-                    break;
-                case 'click':
-                    this._listeners[layerId].clicks = this._listeners[layerId].clicks.filter(
-                        (l) => l !== listener
-                    );
-                    break;
-                case 'contextmenu':
-                    this._listeners[layerId].contextmenus = this._listeners[
-                        layerId
-                    ].contextmenus.filter((l) => l !== listener);
-                    break;
-                case 'touchstart':
-                    this._listeners[layerId].touchstarts = this._listeners[
-                        layerId
-                    ].touchstarts.filter((l) => l !== listener);
-                    break;
-            }
-            if (
-                this._listeners[layerId].mousemoves.length === 0 &&
-                this._listeners[layerId].mouseenters.length === 0 &&
-                this._listeners[layerId].mouseleaves.length === 0 &&
-                this._listeners[layerId].mousedowns.length === 0 &&
-                this._listeners[layerId].clicks.length === 0 &&
-                this._listeners[layerId].contextmenus.length === 0 &&
-                this._listeners[layerId].touchstarts.length === 0
-            ) {
-                delete this._listeners[layerId];
-            }
-        }
-    }
-
-    private _handleMouseMove(e: maplibregl.MapMouseEvent) {
-        if (e.originalEvent.buttons > 0) return;
-        const featuresByLayer = this._getRenderedFeaturesByLayer(e);
-        Object.keys(this._listeners).forEach((layerId) => {
-            const features = featuresByLayer[layerId] || [];
-            const listener = this._listeners[layerId];
-            if ((features.length == 0) != (listener.features.length == 0)) {
-                if (features.length > 0) {
-                    if (listener.mouseenters.length > 0) {
-                        const event = new maplibregl.MapMouseEvent(
-                            'mouseenter',
-                            e.target,
-                            e.originalEvent,
-                            {
-                                features: featuresByLayer[layerId]!,
-                            }
-                        );
-                        listener.mouseenters.forEach((l) => l(event));
-                    }
-                } else {
-                    if (listener.mouseleaves.length > 0) {
-                        const event = new maplibregl.MapMouseEvent(
-                            'mouseleave',
-                            e.target,
-                            e.originalEvent
-                        );
-                        listener.mouseleaves.forEach((l) => l(event));
-                    }
-                }
-            }
-            if (features.length > 0 && listener.mousemoves.length > 0) {
-                const event = new maplibregl.MapMouseEvent('mousemove', e.target, e.originalEvent, {
-                    features: featuresByLayer[layerId]!,
-                });
-                listener.mousemoves.forEach((l) => l(event));
-            }
-            listener.features = features;
-        });
-    }
-
-    private _handleMouseClick(type: string, e: maplibregl.MapMouseEvent) {
-        const featuresByLayer = this._getRenderedFeaturesByLayer(e);
-        Object.keys(this._listeners).forEach((layerId) => {
-            const features = featuresByLayer[layerId] || [];
-            const listener = this._listeners[layerId];
-            if (features.length > 0) {
-                if (type === 'click' && listener.clicks.length > 0) {
-                    const event = new maplibregl.MapMouseEvent('click', e.target, e.originalEvent, {
-                        features: features,
-                    });
-                    listener.clicks.forEach((l) => l(event));
-                } else if (type === 'contextmenu' && listener.contextmenus.length > 0) {
-                    const event = new maplibregl.MapMouseEvent(
-                        'contextmenu',
-                        e.target,
-                        e.originalEvent,
-                        {
-                            features: features,
-                        }
-                    );
-                    listener.contextmenus.forEach((l) => l(event));
-                } else if (type === 'mousedown' && listener.mousedowns.length > 0) {
-                    const event = new maplibregl.MapMouseEvent(
-                        'mousedown',
-                        e.target,
-                        e.originalEvent,
-                        {
-                            features: features,
-                        }
-                    );
-                    listener.mousedowns.forEach((l) => l(event));
-                }
-            }
-        });
-    }
-
-    private _handleTouchStart(e: maplibregl.MapTouchEvent) {
-        const featuresByLayer = this._getRenderedFeaturesByLayer(e);
-        Object.keys(this._listeners).forEach((layerId) => {
-            const features = featuresByLayer[layerId] || [];
-            const listener = this._listeners[layerId];
-            if (features.length > 0) {
-                const event: maplibregl.MapLayerTouchEvent = new maplibregl.MapTouchEvent(
-                    'touchstart',
-                    e.target,
-                    e.originalEvent
-                );
-                event.features = featuresByLayer[layerId]!;
-                listener.touchstarts.forEach((l) => l(event));
-            }
-        });
-    }
-
-    private _getBounds(point: maplibregl.Point) {
-        const delta = 30;
-        return new maplibregl.LngLatBounds(
-            this._map.unproject([point.x - delta, point.y + delta]),
-            this._map.unproject([point.x + delta, point.y - delta])
-        );
-    }
-
-    private _filterLayersIntersectingBounds(
-        layerIds: string[],
-        bounds: maplibregl.LngLatBounds
-    ): string[] {
-        let result = layerIds.filter((layerId) => {
-            if (!this._map.getLayer(layerId)) return false;
-            const fileId = layerId.replace('-waypoints', '');
-            if (fileId === layerId) {
-                return fileStateCollection.getStatistics(fileId)?.intersectsBBox(bounds) ?? true;
-            } else {
-                return (
-                    fileStateCollection.getStatistics(fileId)?.intersectsWaypointBBox(bounds) ??
-                    true
-                );
-            }
-        });
-        return result;
-    }
-
-    private _getRenderedFeaturesByLayer(e: maplibregl.MapMouseEvent | maplibregl.MapTouchEvent) {
-        const layerIds = this._filterLayersIntersectingBounds(
-            Object.keys(this._listeners),
-            this._getBounds(e.point)
-        );
-        const features =
-            layerIds.length > 0
-                ? this._map.queryRenderedFeatures(e.point, { layers: layerIds })
-                : [];
-        const featuresByLayer: Record<string, maplibregl.MapGeoJSONFeature[]> = {};
-        features.forEach((f) => {
-            if (!featuresByLayer[f.layer.id]) {
-                featuresByLayer[f.layer.id] = [];
-            }
-            featuresByLayer[f.layer.id].push(f);
-        });
-        return featuresByLayer;
-    }
-}
@@ -1,5 +1,5 @@
 import { TrackPoint, Waypoint } from 'gpx';
-import maplibregl from 'maplibre-gl';
+import mapboxgl from 'mapbox-gl';
 import { mount, tick, unmount } from 'svelte';
 import { get, writable, type Writable } from 'svelte/store';
 import MapPopupComponent from '$lib/components/map/MapPopup.svelte';
@@ -11,15 +11,15 @@ export type PopupItem<T = Waypoint | TrackPoint | any> = {
 };

 export class MapPopup {
-    map: maplibregl.Map;
-    popup: maplibregl.Popup;
+    map: mapboxgl.Map;
+    popup: mapboxgl.Popup;
    item: Writable<PopupItem | null> = writable(null);
    component: ReturnType<typeof mount>;
    maybeHideBinded = this.maybeHide.bind(this);

-    constructor(map: maplibregl.Map, options?: maplibregl.PopupOptions) {
+    constructor(map: mapboxgl.Map, options?: mapboxgl.PopupOptions) {
        this.map = map;
-        this.popup = new maplibregl.Popup(options);
+        this.popup = new mapboxgl.Popup(options);
        this.component = mount(MapPopupComponent, {
            target: document.body,
            props: {
@@ -51,7 +51,7 @@ export class MapPopup {
        this.map.on('mousemove', this.maybeHideBinded);
    }

-    maybeHide(e: maplibregl.MapMouseEvent) {
+    maybeHide(e: mapboxgl.MapMouseEvent) {
        const item = get(this.item);
        if (item === null) {
            this.hide();
@@ -75,10 +75,10 @@ export class MapPopup {
    getCoordinates() {
        const item = get(this.item);
        if (item === null) {
-            return new maplibregl.LngLat(0, 0);
+            return new mapboxgl.LngLat(0, 0);
        }
        return item.item instanceof Waypoint || item.item instanceof TrackPoint
            ? item.item.getCoordinates()
-            : new maplibregl.LngLat(item.item.lon, item.item.lat);
+            : new mapboxgl.LngLat(item.item.lon, item.item.lat);
    }
 }
@@ -1,80 +1,100 @@
-import maplibregl from 'maplibre-gl';
-import 'maplibre-gl/dist/maplibre-gl.css';
-import MaplibreGeocoder, {
-    type MaplibreGeocoderFeatureResults,
-} from '@maplibre/maplibre-gl-geocoder';
-import '@maplibre/maplibre-gl-geocoder/dist/maplibre-gl-geocoder.css';
+import mapboxgl from 'mapbox-gl';
+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 { ANCHOR_LAYER_KEY, StyleManager } from '$lib/components/map/style';
-import { MapLayerEventManager } from '$lib/components/map/map-layer-event-manager';

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

-let fitBoundsOptions: maplibregl.MapOptions['fitBoundsOptions'] = {
+let fitBoundsOptions: mapboxgl.MapOptions['fitBoundsOptions'] = {
    maxZoom: 15,
    linear: true,
    easing: () => 1,
 };

-export class MapLibreGLMap {
-    private _maptilerKey: string = '';
-    private _map: maplibregl.Map | null = null;
-    private _mapStore: Writable<maplibregl.Map | null> = writable(null);
-    private _styleManager: StyleManager | null = null;
-    private _onLoadCallbacks: ((map: maplibregl.Map) => void)[] = [];
+export class MapboxGLMap {
+    private _map: Writable<mapboxgl.Map | null> = writable(null);
+    private _onLoadCallbacks: ((map: mapboxgl.Map) => void)[] = [];
    private _unsubscribes: (() => void)[] = [];
-    private callOnLoadBinded: () => void = this.callOnLoad.bind(this);
-    public layerEventManager: MapLayerEventManager | null = null;

-    subscribe(run: (value: maplibregl.Map | null) => void, invalidate?: () => void) {
-        return this._mapStore.subscribe(run, invalidate);
+    subscribe(run: (value: mapboxgl.Map | null) => void, invalidate?: () => void) {
+        return this._map.subscribe(run, invalidate);
    }

    init(
-        maptilerKey: string,
+        accessToken: string,
        language: string,
        hash: boolean,
        geocoder: boolean,
        geolocate: boolean
    ) {
-        this._maptilerKey = maptilerKey;
-        this._styleManager = new StyleManager(this._mapStore, this._maptilerKey);
-        const map = new maplibregl.Map({
+        const map = new mapboxgl.Map({
            container: 'map',
            style: {
                version: 8,
-                projection: {
-                    type: 'globe',
-                },
                sources: {},
                layers: [],
+                imports: [
+                    {
+                        id: 'glyphs-and-sprite', // make Mapbox glyphs and sprite available to other styles
+                        url: '',
+                        data: {
+                            version: 8,
+                            sources: {},
+                            layers: [],
+                            glyphs: 'mapbox://fonts/mapbox/{fontstack}/{range}.pbf',
+                            sprite: `https://api.mapbox.com/styles/v1/mapbox/outdoors-v12/sprite?access_token=${accessToken}`,
+                        },
+                    },
+                    {
+                        id: 'basemap',
+                        url: '',
+                    },
+                    {
+                        id: 'overlays',
+                        url: '',
+                        data: {
+                            version: 8,
+                            sources: {},
+                            layers: [],
+                        },
+                    },
+                ],
            },
+            projection: 'globe',
            zoom: 0,
            hash: hash,
+            language,
+            attributionControl: false,
+            logoPosition: 'bottom-right',
            boxZoom: false,
-            maxPitch: 90,
        });
-        this.layerEventManager = new MapLayerEventManager(map);
        map.addControl(
-            new maplibregl.NavigationControl({
+            new mapboxgl.AttributionControl({
+                compact: true,
+            })
+        );
+        map.addControl(
+            new mapboxgl.NavigationControl({
                visualizePitch: true,
            })
        );
        if (geocoder) {
-            let geocoder = new MaplibreGeocoder(
-                {
-                    forwardGeocode: async (config) => {
-                        const results: MaplibreGeocoderFeatureResults = {
-                            features: [],
-                            type: 'FeatureCollection',
-                        };
-                        try {
-                            const request = `https://nominatim.openstreetmap.org/search?format=json&q=${config.query}&limit=5&accept-language=${language}`;
-                            const response = await fetch(request);
-                            const geojson = await response.json();
-                            results.features = geojson.map((result: any) => {
+            let geocoder = new MapboxGeocoder({
+                mapboxgl: mapboxgl,
+                enableEventLogging: false,
+                collapsed: true,
+                flyTo: fitBoundsOptions,
+                language,
+                localGeocoder: () => [],
+                localGeocoderOnly: true,
+                externalGeocoder: (query: string) =>
+                    fetch(
+                        `https://nominatim.openstreetmap.org/search?format=json&q=${query}&limit=5&accept-language=${language}`
+                    )
+                        .then((response) => response.json())
+                        .then((data) => {
+                            return data.map((result: any) => {
                                return {
                                    type: 'Feature',
                                    geometry: {
@@ -84,43 +104,74 @@ export class MapLibreGLMap {
                                    place_name: result.display_name,
                                };
                            });
-                        } catch (e) {}
-                        return results;
-                    },
-                },
-                {
-                    maplibregl: maplibregl,
-                    enableEventLogging: false,
-                    collapsed: true,
-                    flyTo: fitBoundsOptions,
-                    language,
+                        }),
+            });
+            let onKeyDown = geocoder._onKeyDown;
+            geocoder._onKeyDown = (e: KeyboardEvent) => {
+                // Trigger search on Enter key only
+                if (e.key === 'Enter') {
+                    onKeyDown.apply(geocoder, [{ target: geocoder._inputEl }]);
+                } else if (geocoder._typeahead.data.length > 0) {
+                    geocoder._typeahead.clear();
                }
-            );
+            };
            map.addControl(geocoder);
        }
        if (geolocate) {
            map.addControl(
-                new maplibregl.GeolocateControl({
+                new mapboxgl.GeolocateControl({
                    positionOptions: {
                        enableHighAccuracy: true,
                    },
                    fitBoundsOptions,
                    trackUserLocation: true,
+                    showUserHeading: true,
                })
            );
        }
-        const scaleControl = new maplibregl.ScaleControl({
+        const scaleControl = new mapboxgl.ScaleControl({
            unit: get(distanceUnits),
        });
        map.addControl(scaleControl);
+        map.on('style.load', () => {
+            map.addSource('mapbox-dem', {
+                type: 'raster-dem',
+                url: 'mapbox://mapbox.mapbox-terrain-dem-v1',
+                tileSize: 512,
+                maxzoom: 14,
+            });
+            if (map.getPitch() > 0) {
+                map.setTerrain({
+                    source: 'mapbox-dem',
+                    exaggeration: 1,
+                });
+            }
+            map.setFog({
+                color: 'rgb(186, 210, 235)',
+                'high-color': 'rgb(36, 92, 223)',
+                'horizon-blend': 0.1,
+                'space-color': 'rgb(156, 240, 255)',
+            });
+            map.on('pitch', () => {
+                if (map.getPitch() > 0) {
+                    map.setTerrain({
+                        source: 'mapbox-dem',
+                        exaggeration: 1,
+                    });
+                } else {
+                    map.setTerrain(null);
+                }
+            });
+        });
        map.on('load', () => {
-            this._map = map;
-            this._mapStore.set(map); // only set the store after the map has loaded
+            this._map.set(map); // only set the store after the map has loaded
            window._map = map; // entry point for extensions
            this.resize();
            scaleControl.setUnit(get(distanceUnits));
+
+            this._onLoadCallbacks.forEach((callback) => callback(map));
+            this._onLoadCallbacks = [];
        });
-        map.on('style.load', this.callOnLoadBinded);

        this._unsubscribes.push(treeFileView.subscribe(() => this.resize()));
        this._unsubscribes.push(elevationProfile.subscribe(() => this.resize()));
@@ -133,48 +184,44 @@ export class MapLibreGLMap {
        );
    }

+    onLoad(callback: (map: mapboxgl.Map) => void) {
+        const map = get(this._map);
+        if (map) {
+            callback(map);
+        } else {
+            this._onLoadCallbacks.push(callback);
+        }
+    }
+
    destroy() {
-        if (this._map) {
-            this._map.remove();
-            this._mapStore.set(null);
+        const map = get(this._map);
+        if (map) {
+            map.remove();
+            this._map.set(null);
        }
        this._unsubscribes.forEach((unsubscribe) => unsubscribe());
        this._unsubscribes = [];
    }

    resize() {
-        if (this._map) {
+        const map = get(this._map);
+        if (map) {
            tick().then(() => {
-                this._map?.resize();
+                map.resize();
            });
        }
    }

    toggle3D() {
-        if (this._map) {
-            if (this._map.getPitch() === 0) {
-                this._map.easeTo({ pitch: 70 });
+        const map = get(this._map);
+        if (map) {
+            if (map.getPitch() === 0) {
+                map.easeTo({ pitch: 70 });
            } else {
-                this._map.easeTo({ pitch: 0 });
+                map.easeTo({ pitch: 0 });
            }
        }
    }
-
-    onLoad(callback: (map: maplibregl.Map) => void) {
-        if (this._map) {
-            callback(this._map);
-        } else {
-            this._onLoadCallbacks.push(callback);
-        }
-    }
-
-    callOnLoad() {
-        if (this._map && this._map.getLayer(ANCHOR_LAYER_KEY.overlays)) {
-            this._onLoadCallbacks.forEach((callback) => callback(this._map!));
-            this._onLoadCallbacks = [];
-            this._map.off('style.load', this.callOnLoadBinded);
-        }
-    }
 }

-export const map = new MapLibreGLMap();
+export const map = new MapboxGLMap();
@@ -20,14 +20,9 @@
    let container: HTMLElement;

    onMount(() => {
-        map.onLoad((map_: maplibregl.Map) => {
-            googleRedirect = new GoogleRedirect(map_);
-            mapillaryLayer = new MapillaryLayer(
-                map_,
-                map.layerEventManager!,
-                container,
-                mapillaryOpen
-            );
+        map.onLoad((map: mapboxgl.Map) => {
+            googleRedirect = new GoogleRedirect(map);
+            mapillaryLayer = new MapillaryLayer(map, container, mapillaryOpen);
        });
    });

@@ -53,7 +48,7 @@
 <CustomControl class="w-[29px] h-[29px] shrink-0">
    <ButtonWithTooltip
        variant="ghost"
-        class="w-full h-full border-none rounded-sm"
+        class="w-full h-full"
        side="left"
        label={i18n._('menu.toggle_street_view')}
        onclick={() => {
@@ -1,10 +1,11 @@
 import { mapCursor, MapCursorState } from '$lib/logic/map-cursor';
+import type mapboxgl from 'mapbox-gl';

 export class GoogleRedirect {
-    map: maplibregl.Map;
+    map: mapboxgl.Map;
    enabled = false;

-    constructor(map: maplibregl.Map) {
+    constructor(map: mapboxgl.Map) {
        this.map = map;
    }

@@ -24,7 +25,7 @@ export class GoogleRedirect {
        this.map.off('click', this.openStreetView);
    }

-    openStreetView(e: maplibregl.MapMouseEvent) {
+    openStreetView(e: mapboxgl.MapMouseEvent) {
        window.open(
            `https://www.google.com/maps/@?api=1&map_action=pano&viewpoint=${e.lngLat.lat},${e.lngLat.lng}`
        );
@@ -1,9 +1,7 @@
-import maplibregl, { type LayerSpecification, type VectorSourceSpecification } from 'maplibre-gl';
+import mapboxgl, { type LayerSpecification, type VectorSourceSpecification } from 'mapbox-gl';
 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/style';
-import type { MapLayerEventManager } from '$lib/components/map/map-layer-event-manager';

 const mapillarySource: VectorSourceSpecification = {
    type: 'vector',
@@ -43,9 +41,8 @@ const mapillaryImageLayer: LayerSpecification = {
 };

 export class MapillaryLayer {
-    map: maplibregl.Map;
-    layerEventManager: MapLayerEventManager;
-    marker: maplibregl.Marker;
+    map: mapboxgl.Map;
+    marker: mapboxgl.Marker;
    viewer: Viewer;

    active = false;
@@ -55,14 +52,8 @@ export class MapillaryLayer {
    onMouseEnterBinded = this.onMouseEnter.bind(this);
    onMouseLeaveBinded = this.onMouseLeave.bind(this);

-    constructor(
-        map: maplibregl.Map,
-        layerEventManager: MapLayerEventManager,
-        container: HTMLElement,
-        popupOpen: { value: boolean }
-    ) {
+    constructor(map: mapboxgl.Map, container: HTMLElement, popupOpen: { value: boolean }) {
        this.map = map;
-        this.layerEventManager = layerEventManager;

        this.viewer = new Viewer({
            accessToken: 'MLY|4381405525255083|3204871ec181638c3c31320490f03011',
@@ -70,12 +61,15 @@ export class MapillaryLayer {
        });

        const element = document.createElement('div');
-        element.className = 'maplibregl-user-location maplibregl-user-location-show-heading';
+        element.className = 'mapboxgl-user-location mapboxgl-user-location-show-heading';
        const dot = document.createElement('div');
-        dot.className = 'maplibregl-user-location-dot';
+        dot.className = 'mapboxgl-user-location-dot';
+        const heading = document.createElement('div');
+        heading.className = 'mapboxgl-user-location-heading';
        element.appendChild(dot);
+        element.appendChild(heading);

-        this.marker = new maplibregl.Marker({
+        this.marker = new mapboxgl.Marker({
            rotationAlignment: 'map',
            element,
        });
@@ -105,20 +99,20 @@ 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.layerEventManager.on('mouseenter', 'mapillary-image', this.onMouseEnterBinded);
-        this.layerEventManager.on('mouseleave', 'mapillary-image', this.onMouseLeaveBinded);
+        this.map.on('mouseenter', 'mapillary-image', this.onMouseEnterBinded);
+        this.map.on('mouseleave', 'mapillary-image', this.onMouseLeaveBinded);
    }

    remove() {
        this.map.off('style.load', this.addBinded);
-        this.layerEventManager.off('mouseenter', 'mapillary-image', this.onMouseEnterBinded);
-        this.layerEventManager.off('mouseleave', 'mapillary-image', this.onMouseLeaveBinded);
+        this.map.off('mouseenter', 'mapillary-image', this.onMouseEnterBinded);
+        this.map.off('mouseleave', 'mapillary-image', this.onMouseLeaveBinded);

        if (this.map.getLayer('mapillary-image')) {
            this.map.removeLayer('mapillary-image');
@@ -140,7 +134,7 @@ export class MapillaryLayer {
        this.popupOpen.value = false;
    }

-    onMouseEnter(e: maplibregl.MapLayerMouseEvent) {
+    onMouseEnter(e: mapboxgl.MapMouseEvent) {
        if (
            e.features &&
            e.features.length > 0 &&
@@ -1,263 +0,0 @@
-import { settings } from '$lib/logic/settings';
-import { get, type Writable } from 'svelte/store';
-import {
-    basemaps,
-    defaultBasemap,
-    maptilerKeyPlaceHolder,
-    overlays,
-    terrainSources,
-} from '$lib/assets/layers';
-import { getLayers } from '$lib/components/map/layer-control/utils';
-import { i18n } from '$lib/i18n.svelte';
-
-const { currentBasemap, currentOverlays, customLayers, opacities, terrainSource, distanceUnits } =
-    settings;
-
-const emptySource: maplibregl.GeoJSONSourceSpecification = {
-    type: 'geojson',
-    data: {
-        type: 'FeatureCollection',
-        features: [],
-    },
-};
-export const ANCHOR_LAYER_KEY = {
-    overlays: 'overlays-end',
-    mapillary: 'mapillary-end',
-    tracks: 'tracks-end',
-    directionMarkers: 'direction-markers-end',
-    distanceMarkers: 'distance-markers-end',
-    startEndMarkers: 'start-end-markers-end',
-    interactions: 'interactions-end',
-    overpass: 'overpass-end',
-    waypoints: 'waypoints-end',
-    routingControls: 'routing-controls-end',
-};
-const anchorLayers: maplibregl.LayerSpecification[] = Object.values(ANCHOR_LAYER_KEY).map((id) => ({
-    id: id,
-    type: 'symbol',
-    source: 'empty-source',
-}));
-
-export class StyleManager {
-    private _map: Writable<maplibregl.Map | null>;
-    private _maptilerKey: string;
-    private _pastOverlays: Set<string> = new Set();
-
-    constructor(map: Writable<maplibregl.Map | null>, maptilerKey: string) {
-        this._map = map;
-        this._maptilerKey = maptilerKey;
-        this._map.subscribe((map_) => {
-            if (map_) {
-                this.updateBasemap();
-                map_.on('style.load', () => this.updateOverlays());
-                map_.on('pitch', () => this.updateTerrain());
-            }
-        });
-        currentBasemap.subscribe(() => this.updateBasemap());
-        currentOverlays.subscribe(() => this.updateOverlays());
-        opacities.subscribe(() => this.updateOverlays());
-        terrainSource.subscribe(() => this.updateTerrain());
-        customLayers.subscribe(() => this.updateBasemap());
-        distanceUnits.subscribe(() => {
-            if (get(currentBasemap) === 'topo') this.updateBasemap();
-        });
-    }
-
-    updateBasemap() {
-        const map_ = get(this._map);
-        if (!map_) return;
-        let basemap = get(currentBasemap);
-        this.buildStyle(basemap).then((style) => {
-            if (get(currentBasemap) === basemap) map_.setStyle(style);
-        });
-    }
-
-    async buildStyle(basemap: string): Promise<maplibregl.StyleSpecification> {
-        const custom = get(customLayers);
-
-        const style: maplibregl.StyleSpecification = {
-            version: 8,
-            projection: {
-                type: 'globe',
-            },
-            sources: {
-                'empty-source': emptySource,
-            },
-            layers: [],
-        };
-
-        const basemapInfo = basemaps[basemap] ?? custom[basemap]?.value ?? basemaps[defaultBasemap];
-
-        let basemapStyle = basemaps.openStreetMap as maplibregl.StyleSpecification;
-        try {
-            basemapStyle = await this.get(basemapInfo);
-            for (const source in basemapStyle.sources) {
-                const src = basemapStyle.sources[source];
-                if (
-                    src &&
-                    typeof src === 'object' &&
-                    'url' in src &&
-                    typeof src.url === 'string' &&
-                    src.url.includes(maptilerKeyPlaceHolder)
-                ) {
-                    src.url = src.url.replace(maptilerKeyPlaceHolder, this._maptilerKey);
-                }
-            }
-        } catch (e) {
-            console.error(e.message);
-        }
-        this.merge(style, basemapStyle);
-
-        const terrain = this.getCurrentTerrain();
-        style.sources[terrain.source] = terrainSources[terrain.source];
-        style.terrain = terrain.exaggeration > 0 ? terrain : undefined;
-
-        style.layers.push(...anchorLayers);
-
-        return style;
-    }
-
-    async updateOverlays() {
-        const map_ = get(this._map);
-        if (!map_) return;
-        if (!map_.getSource('empty-source')) return;
-
-        const custom = get(customLayers);
-        const overlayOpacities = get(opacities);
-        try {
-            const layers = getLayers(get(currentOverlays) ?? {});
-            for (let overlay in layers) {
-                if (!layers[overlay]) {
-                    if (this._pastOverlays.has(overlay)) {
-                        const overlayInfo = custom[overlay]?.value ?? overlays[overlay];
-                        try {
-                            const overlayStyle = await this.get(overlayInfo);
-                            for (let layer of overlayStyle.layers ?? []) {
-                                if (map_.getLayer(layer.id)) {
-                                    map_.removeLayer(layer.id);
-                                }
-                            }
-                        } catch (e) {
-                            // Should not happen
-                        }
-                        this._pastOverlays.delete(overlay);
-                    }
-                } else {
-                    const overlayInfo = custom[overlay]?.value ?? overlays[overlay];
-                    try {
-                        const overlayStyle = await this.get(overlayInfo);
-                        const opacity = overlayOpacities[overlay];
-
-                        for (let sourceId in overlayStyle.sources) {
-                            if (!map_.getSource(sourceId)) {
-                                map_.addSource(sourceId, overlayStyle.sources[sourceId]);
-                            }
-                        }
-
-                        for (let layer of overlayStyle.layers ?? []) {
-                            if (!map_.getLayer(layer.id)) {
-                                if (opacity !== undefined) {
-                                    if (layer.type === 'raster') {
-                                        if (!layer.paint) {
-                                            layer.paint = {};
-                                        }
-                                        layer.paint['raster-opacity'] = opacity;
-                                    } else if (layer.type === 'hillshade') {
-                                        if (!layer.paint) {
-                                            layer.paint = {};
-                                        }
-                                        layer.paint['hillshade-exaggeration'] = opacity / 2;
-                                    }
-                                }
-                                map_.addLayer(layer, ANCHOR_LAYER_KEY.overlays);
-                            }
-                        }
-                        this._pastOverlays.add(overlay);
-                    } catch (e) {
-                        console.error(e.message);
-                    }
-                }
-            }
-        } catch (e) {}
-    }
-
-    updateTerrain() {
-        const map_ = get(this._map);
-        if (!map_) return;
-
-        const mapTerrain = map_.getTerrain();
-        const terrain = this.getCurrentTerrain();
-        if (JSON.stringify(mapTerrain) !== JSON.stringify(terrain)) {
-            if (terrain.exaggeration > 0) {
-                if (!map_.getSource(terrain.source)) {
-                    map_.addSource(terrain.source, terrainSources[terrain.source]);
-                }
-                map_.setTerrain(terrain);
-            } else {
-                map_.setTerrain(null);
-            }
-        }
-    }
-
-    async get(
-        styleInfo: maplibregl.StyleSpecification | string
-    ): Promise<maplibregl.StyleSpecification> {
-        if (typeof styleInfo === 'string') {
-            let styleUrl = styleInfo as string;
-            const response = await fetch(styleUrl, { cache: 'force-cache' });
-            if (!response.ok) {
-                throw new Error(`HTTP error fetching style "${styleInfo}": ${response.status}`);
-            }
-            const style = await response.json();
-            return style;
-        } else {
-            return styleInfo;
-        }
-    }
-
-    merge(style: maplibregl.StyleSpecification, other: maplibregl.StyleSpecification) {
-        style.sources = { ...style.sources, ...other.sources };
-        const units = get(distanceUnits);
-        for (let layer of other.layers ?? []) {
-            if ('source' in layer) {
-                if (layer.source == 'contours_m' && units === 'imperial') continue;
-                if (layer.source == 'contours_ft' && units !== 'imperial') continue;
-            }
-            if (layer.type === 'symbol' && layer.layout && layer.layout['text-field']) {
-                const textField = layer.layout['text-field'];
-                if (
-                    Array.isArray(textField) &&
-                    textField.length == 4 &&
-                    Array.isArray(textField[3]) &&
-                    textField[3][0] === 'coalesce' &&
-                    Array.isArray(textField[3][1]) &&
-                    textField[3][1][0] === 'get' &&
-                    typeof textField[3][1][1] === 'string' &&
-                    textField[3][1][1].startsWith('name')
-                ) {
-                    layer.layout['text-field'] = [
-                        'coalesce',
-                        ['get', `name:${i18n.lang}`],
-                        ['get', 'name'],
-                    ];
-                }
-            }
-            style.layers.push(layer);
-        }
-        if (other.sprite && !style.sprite) {
-            style.sprite = other.sprite;
-        }
-        if (other.glyphs && !style.glyphs) {
-            style.glyphs = other.glyphs;
-        }
-    }
-
-    getCurrentTerrain() {
-        const terrain = get(terrainSource);
-        const map_ = get(this._map);
-        return {
-            source: terrain,
-            exaggeration: !map_ || map_.getPitch() === 0 ? 0 : 1,
-        };
-    }
-}
@@ -11,7 +11,7 @@
    import Clean from '$lib/components/toolbar/tools/Clean.svelte';
    import Reduce from '$lib/components/toolbar/tools/reduce/Reduce.svelte';
    import RoutingControlPopup from '$lib/components/toolbar/tools/routing/RoutingControlPopup.svelte';
-    import maplibregl from 'maplibre-gl';
+    import mapboxgl from 'mapbox-gl';
    import { settings } from '$lib/logic/settings';

    let {
@@ -23,11 +23,11 @@
    const { minimizeRoutingMenu } = settings;

    let popupElement: HTMLDivElement | undefined = $state(undefined);
-    let popup: maplibregl.Popup | undefined = $derived.by(() => {
+    let popup: mapboxgl.Popup | undefined = $derived.by(() => {
        if (!popupElement) {
            return undefined;
        }
-        let popup = new maplibregl.Popup({
+        let popup = new mapboxgl.Popup({
            closeButton: false,
            maxWidth: undefined,
        });
@@ -16,11 +16,10 @@
    import { getURLForLanguage } from '$lib/utils';
    import { Trash2 } from '@lucide/svelte';
    import { map } from '$lib/components/map/map';
-    import type { GeoJSONSource } from 'maplibre-gl';
+    import type { GeoJSONSource } from 'mapbox-gl';
    import { selection } from '$lib/logic/selection';
    import { fileActions } from '$lib/logic/file-actions';
    import { mapCursor, MapCursorState } from '$lib/logic/map-cursor';
-    import { ANCHOR_LAYER_KEY } from '$lib/components/map/style';

    let props: {
        class?: string;
@@ -29,7 +28,7 @@
    let cleanType = $state(CleanType.INSIDE);
    let deleteTrackpoints = $state(true);
    let deleteWaypoints = $state(true);
-    let rectangleCoordinates: maplibregl.LngLat[] = $state([]);
+    let rectangleCoordinates: mapboxgl.LngLat[] = $state([]);

    $effect(() => {
        if ($map) {
@@ -64,18 +63,15 @@
                    });
                }
                if (!$map.getLayer('rectangle')) {
-                    $map.addLayer(
-                        {
-                            id: 'rectangle',
-                            type: 'fill',
-                            source: 'rectangle',
-                            paint: {
-                                'fill-color': 'SteelBlue',
-                                'fill-opacity': 0.5,
-                            },
+                    $map.addLayer({
+                        id: 'rectangle',
+                        type: 'fill',
+                        source: 'rectangle',
+                        paint: {
+                            'fill-color': 'SteelBlue',
+                            'fill-opacity': 0.5,
                        },
-                        ANCHOR_LAYER_KEY.interactions
-                    );
+                    });
                }
            }
        }
@@ -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';
@@ -17,9 +18,13 @@
 <div class="flex flex-col gap-3 w-full max-w-80 {props.class ?? ''}">
    <Button
        variant="outline"
-        class="whitespace-normal h-fit min-h-8 py-1"
+        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')}
@@ -76,7 +76,7 @@
    {/if}
    <Button
        variant="outline"
-        class="whitespace-normal h-fit min-h-8 py-1"
+        class="whitespace-normal h-fit"
        disabled={(mergeType === MergeType.TRACES && !canMergeTraces) ||
            (mergeType === MergeType.CONTENTS && !canMergeContents)}
        onclick={() => {
@@ -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());
@@ -185,8 +185,8 @@

 <div class="flex flex-col gap-3 w-full max-w-80 {props.class ?? ''}">
    <fieldset class="flex flex-col gap-2">
-        <div class="flex flex-row gap-1.5 justify-center">
-            <div class="flex flex-col gap-1 grow">
+        <div class="flex flex-row gap-2 justify-center">
+            <div class="flex flex-col gap-2 grow">
                <Label for="speed" class="flex flex-row">
                    <Zap size="16" />
                    {#if $velocityUnits === 'speed'}
@@ -239,7 +239,7 @@
                    {/if}
                </div>
            </div>
-            <div class="flex flex-col gap-1 grow">
+            <div class="flex flex-col gap-2 grow">
                <Label for="duration" class="flex flex-row">
                    <Timer size="16" />
                    {i18n._('toolbar.time.total_time')}
@@ -253,61 +253,57 @@
                />
            </div>
        </div>
-        <div class="flex flex-col gap-1">
-            <Label class="flex flex-row">
-                <CirclePlay size="16" />
-                {i18n._('toolbar.time.start')}
-            </Label>
-            <div class="flex flex-row gap-1.5">
-                <DatePicker
-                    bind:value={startDate}
-                    disabled={!canUpdate}
-                    locale={i18n.lang}
-                    placeholder={i18n._('toolbar.time.pick_date')}
-                    class="w-fit grow"
-                    onchange={() => {
-                        untrack(() => updateEnd());
-                    }}
-                />
-                <Input
-                    type="time"
-                    step={1}
-                    disabled={!canUpdate}
-                    bind:value={startTime}
-                    class="w-fit"
-                    onchange={() => {
-                        untrack(() => updateEnd());
-                    }}
-                />
-            </div>
+        <Label class="flex flex-row">
+            <CirclePlay size="16" />
+            {i18n._('toolbar.time.start')}
+        </Label>
+        <div class="flex flex-row gap-2">
+            <DatePicker
+                bind:value={startDate}
+                disabled={!canUpdate}
+                locale={i18n.lang}
+                placeholder={i18n._('toolbar.time.pick_date')}
+                class="w-fit grow"
+                onchange={() => {
+                    untrack(() => updateEnd());
+                }}
+            />
+            <Input
+                type="time"
+                step={1}
+                disabled={!canUpdate}
+                bind:value={startTime}
+                class="w-fit"
+                onchange={() => {
+                    untrack(() => updateEnd());
+                }}
+            />
        </div>
-        <div class="flex flex-col gap-1">
-            <Label class="flex flex-row">
-                <CircleStop size="16" />
-                {i18n._('toolbar.time.end')}
-            </Label>
-            <div class="flex flex-row gap-1.5">
-                <DatePicker
-                    bind:value={endDate}
-                    disabled={!canUpdate}
-                    locale={i18n.lang}
-                    placeholder={i18n._('toolbar.time.pick_date')}
-                    class="w-fit grow"
-                    onchange={() => {
-                        untrack(() => updateStart());
-                    }}
-                />
-                <Input
-                    type="time"
-                    step={1}
-                    disabled={!canUpdate}
-                    bind:value={endTime}
-                    class="w-fit"
-                    onchange={() => {
-                        untrack(() => updateStart());
-                    }}
-                />
-            </div>
+        <Label class="flex flex-row">
+            <CircleStop size="16" />
+            {i18n._('toolbar.time.end')}
+        </Label>
+        <div class="flex flex-row gap-2">
+            <DatePicker
+                bind:value={endDate}
+                disabled={!canUpdate}
+                locale={i18n.lang}
+                placeholder={i18n._('toolbar.time.pick_date')}
+                class="w-fit grow"
+                onchange={() => {
+                    untrack(() => updateStart());
+                }}
+            />
+            <Input
+                type="time"
+                step={1}
+                disabled={!canUpdate}
+                bind:value={endTime}
+                class="w-fit"
+                onchange={() => {
+                    untrack(() => updateStart());
+                }}
+            />
        </div>
        {#if $gpxStatistics.global.time.moving === 0 || $gpxStatistics.global.time.moving === undefined}
            <div class="mt-0.5 flex flex-row gap-1 items-center">
@@ -318,11 +314,11 @@
            </div>
        {/if}
    </fieldset>
-    <div class="flex flex-row gap-1.5 items-center">
+    <div class="flex flex-row gap-2 items-center">
        <Button
            variant="outline"
            disabled={!canUpdate}
-            class="grow shrink whitespace-normal h-fit min-h-8 py-1"
+            class="grow whitespace-normal h-fit"
            onclick={() => {
                let effectiveSpeed = getSpeed();
                if (
@@ -350,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!
@@ -363,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!,
@@ -378,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!,
@@ -10,11 +10,11 @@
    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();

-    let sliderValue = $state(50);
+    let sliderValue = $state([50]);
    const maxTolerance = 10000;

    let validSelection = $derived(
@@ -25,7 +25,7 @@

    $effect(() => {
        tolerance.set(
-            minTolerance * 2 ** (sliderValue / (100 / Math.log2(maxTolerance / minTolerance)))
+            minTolerance * 2 ** (sliderValue[0] / (100 / Math.log2(maxTolerance / minTolerance)))
        );
    });

@@ -36,7 +36,7 @@

 <div class="flex flex-col gap-3 w-full max-w-80 {props.class ?? ''}">
    <div class="p-2">
-        <Slider bind:value={sliderValue} min={0} max={100} step={1} type="single" />
+        <Slider bind:value={sliderValue} min={0} max={100} step={1} type="multiple" />
    </div>
    <Label class="flex flex-row justify-between">
        <span>{i18n._('toolbar.reduce.tolerance')}</span>
@@ -1,12 +1,11 @@
 import { ListItem, ListTrackSegmentItem } from '$lib/components/file-list/file-list';
 import { map } from '$lib/components/map/map';
-import { ANCHOR_LAYER_KEY } from '$lib/components/map/style';
 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 'maplibre-gl';
-import { get, writable } from 'svelte/store';
+import type { GeoJSONSource } from 'mapbox-gl';
+import { get, writable, type Writable } from 'svelte/store';

 export const minTolerance = 0.1;

@@ -29,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,
-                ramerDouglasPeucker(segment.trkpt, minTolerance),
+                statistics.local.points.length,
+                ramerDouglasPeucker(statistics.local.points, minTolerance),
            ]);
        });
    }
@@ -145,27 +146,23 @@ export class ReducedGPXLayerCollection {
            });
        }
        if (!map_.getLayer('simplified')) {
-            map_.addLayer(
-                {
-                    id: 'simplified',
-                    type: 'line',
-                    source: 'simplified',
-                    paint: {
-                        'line-color': 'white',
-                        'line-width': 3,
-                    },
+            map_.addLayer({
+                id: 'simplified',
+                type: 'line',
+                source: 'simplified',
+                paint: {
+                    'line-color': 'white',
+                    'line-width': 3,
                },
-                ANCHOR_LAYER_KEY.interactions
-            );
+            });
+        } else {
+            map_.moveLayer('simplified');
        }
    }

    reduce() {
        let itemsAndPoints = new Map<ListItem, TrackPoint[]>();
        this._simplified.forEach(([item, maxPts, points], itemFullId) => {
-            if (!get(selection).hasAnyParent(item)) {
-                return;
-            }
            itemsAndPoints.set(
                item,
                points
@@ -21,7 +21,7 @@
        SquareArrowUpLeft,
        SquareArrowOutDownRight,
    } from '@lucide/svelte';
-    import { routingProfiles } from '$lib/components/toolbar/tools/routing/routing';
+    import { brouterProfiles } from '$lib/components/toolbar/tools/routing/routing';
    import { i18n } from '$lib/i18n.svelte';
    import { slide } from 'svelte/transition';
    import {
@@ -51,7 +51,7 @@
    }: {
        minimized?: boolean;
        minimizable?: boolean;
-        popup?: maplibregl.Popup;
+        popup?: mapboxgl.Popup;
        popupElement?: HTMLDivElement;
        class?: string;
    } = $props();
@@ -163,11 +163,11 @@
                            {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>
-                                {#each Object.keys(routingProfiles) as profile}
+                                {#each Object.keys(brouterProfiles) as profile}
                                    <Select.Item value={profile}
                                        >{i18n._(
                                            `toolbar.routing.activities.${profile}`
@@ -191,16 +191,16 @@
            <ButtonWithTooltip
                label={i18n._('toolbar.routing.reverse.tooltip')}
                variant="outline"
-                class="gap-1 text-xs px-1.5 py-1.5 h-fit"
+                class="gap-1 text-xs"
                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')}
                variant="outline"
-                class="gap-1 text-xs px-1.5 py-1.5 h-fit"
+                class="gap-1 text-xs"
                disabled={!validSelection}
                onclick={() => {
                    const selected = selection.getOrderedSelection();
@@ -231,19 +231,19 @@
                    }
                }}
            >
-                <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')}
                variant="outline"
-                class="gap-1 text-xs px-1.5 py-1.5 h-fit"
+                class="gap-1 text-xs"
                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-1 items-end justify-between">
+        <div class="w-full flex flex-row gap-2 items-end justify-between">
            <Help link={getURLForLanguage(i18n.lang, '/help/toolbar/routing')}>
                {#if !validSelection}
                    {i18n._('toolbar.routing.help_no_file')}
@@ -6,213 +6,37 @@ import { get } from 'svelte/store';

 const { routing, routingProfile, privateRoads } = settings;

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

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

-const graphhopperDetails = ['road_class', 'surface', 'hike_rating', 'mtb_rating'];
-const hikeRatingToSACScale: { [key: string]: string } = {
-    '1': 'hiking',
-    '2': 'mountain_hiking',
-    '3': 'demanding_mountain_hiking',
-    '4': 'alpine_hiking',
-    '5': 'demanding_alpine_hiking',
-    '6': 'difficult_alpine_hiking',
-};
-const mtbRatingToScale: { [key: string]: string } = {
-    '1': '0',
-    '2': '1',
-    '3': '2',
-    '4': '3',
-    '5': '4',
-    '6': '5',
-    '7': '6',
-};
-
-const graphhopperBlockPrivateCustomModels: { [key: string]: any } = {
-    bike: {
-        priority: [
-            {
-                if: 'bike_road_access == PRIVATE',
-                multiply_by: '0.0',
-            },
-        ],
-    },
-    racingbike: {
-        priority: [
-            {
-                if: 'bike_road_access == PRIVATE',
-                multiply_by: '0.0',
-            },
-        ],
-    },
-    gravelbike: {
-        priority: [
-            {
-                if: 'bike_road_access == PRIVATE',
-                multiply_by: '0.0',
-            },
-        ],
-    },
-    mtb: {
-        priority: [
-            {
-                if: 'bike_road_access == PRIVATE',
-                multiply_by: '0.0',
-            },
-        ],
-    },
-    foot: {
-        priority: [
-            {
-                if: 'foot_road_access == PRIVATE',
-                multiply_by: '0.0',
-            },
-        ],
-    },
-    motorcycle: {
-        priority: [
-            {
-                if: 'road_access == PRIVATE',
-                multiply_by: '0.0',
-            },
-        ],
-    },
-};
-async function getGraphHopperRoute(
+async function getRoute(
    points: Coordinates[],
-    graphHopperProfile: string,
+    brouterProfile: string,
    privateRoads: boolean
 ): Promise<TrackPoint[]> {
-    let response = await fetch('https://graphhopper.gpx.studio/route', {
-        method: 'POST',
-        headers: {
-            'Content-Type': 'application/json',
-        },
-        body: JSON.stringify({
-            points: points.map((point) => [point.lon, point.lat]),
-            profile: graphHopperProfile,
-            elevation: true,
-            points_encoded: false,
-            details: graphhopperDetails,
-            custom_model: privateRoads
-                ? {}
-                : graphhopperBlockPrivateCustomModels[graphHopperProfile] || {},
-        }),
-    });
-
-    if (!response.ok) {
-        const error = await response.json();
-        if (error.message.includes('Cannot find point 0')) {
-            throw new Error('toolbar.routing.error.from');
-        } else if (error.message.includes('Cannot find point 1')) {
-            if (points.length == 3) {
-                throw new Error('toolbar.routing.error.via');
-            } else {
-                throw new Error('toolbar.routing.error.to');
-            }
-        } else if (error.hints[0].details.includes('PointDistanceExceededException')) {
-            throw new Error('toolbar.routing.error.distance');
-        } else if (error.hints[0].details.includes('ConnectionNotFoundException')) {
-            throw new Error('toolbar.routing.error.connection');
-        } else {
-            throw new Error(error.message);
-        }
-    }
-
-    let json = await response.json();
-
-    let route: TrackPoint[] = [];
-    let coordinates = json.paths[0].points.coordinates;
-    let details = json.paths[0].details;
-
-    for (let i = 0; i < coordinates.length; i++) {
-        route.push(
-            new TrackPoint({
-                attributes: {
-                    lat: coordinates[i][1],
-                    lon: coordinates[i][0],
-                },
-                ele: coordinates[i][2] ?? (i > 0 ? route[i - 1].ele : 0),
-                extensions: {},
-            })
-        );
-    }
-
-    for (let key of graphhopperDetails) {
-        let detail = details[key];
-        for (let i = 0; i < detail.length; i++) {
-            for (let j = detail[i][0]; j < detail[i][1] + (i == detail.length - 1); j++) {
-                if (detail[i][2] !== undefined && detail[i][2] !== 'missing') {
-                    if (key === 'road_class') {
-                        route[j].setExtension('highway', detail[i][2]);
-                    } else if (key === 'hike_rating') {
-                        const sacScale = hikeRatingToSACScale[detail[i][2]];
-                        if (sacScale) {
-                            route[j].setExtension('sac_scale', sacScale);
-                        }
-                    } else if (key === 'mtb_rating') {
-                        const mtbScale = mtbRatingToScale[detail[i][2]];
-                        if (mtbScale) {
-                            route[j].setExtension('mtb_scale', mtbScale);
-                        }
-                    } else if (key === 'surface' && detail[i][2] !== 'other') {
-                        route[j].setExtension('surface', detail[i][2]);
-                    }
-                }
-            }
-        }
-    }
-
-    return route;
-}
-
-async function getBRouterRoute(
-    points: Coordinates[],
-    brouterProfile: string
-): Promise<TrackPoint[]> {
-    let url = `https://brouter.de/brouter?lonlats=${points.map((point) => `${point.lon.toFixed(8)},${point.lat.toFixed(8)}`).join('|')}&profile=${brouterProfile}&format=geojson&alternativeidx=0`;
+    let url = `https://brouter.gpx.studio?lonlats=${points.map((point) => `${point.lon.toFixed(8)},${point.lat.toFixed(8)}`).join('|')}&profile=${brouterProfile + (privateRoads ? '-private' : '')}&format=geojson&alternativeidx=0`;

    let response = await fetch(url);

+    // Check if the response is ok
    if (!response.ok) {
-        const error = await response.text();
-        if (error.includes('from-position not mapped in existing datafile')) {
-            throw new Error('toolbar.routing.error.from');
-        } else if (error.includes('via1-position not mapped in existing datafile')) {
-            throw new Error('toolbar.routing.error.via');
-        } else if (error.includes('to-position not mapped in existing datafile')) {
-            throw new Error('toolbar.routing.error.to');
-        } else if (error.includes('Time-out')) {
-            throw new Error('toolbar.routing.error.timeout');
-        } else {
-            throw new Error(error);
-        }
+        throw new Error(`${await response.text()}`);
    }

    let geojson = await response.json();
@@ -228,13 +52,14 @@ async function getBRouterRoute(
    let tags = messageIdx < messages.length ? getTags(messages[messageIdx][tagIdx]) : {};

    for (let i = 0; i < coordinates.length; i++) {
+        let coord = coordinates[i];
        route.push(
            new TrackPoint({
                attributes: {
-                    lat: coordinates[i][1],
-                    lon: coordinates[i][0],
+                    lat: coord[1],
+                    lon: coord[0],
                },
-                ele: coordinates[i][2] ?? (i > 0 ? route[i - 1].ele : 0),
+                ele: coord[2] ?? (i > 0 ? route[i - 1].ele : 0),
            })
        );

@@ -2,21 +2,15 @@ import { ramerDouglasPeucker, type GPXFile, type TrackSegment } from 'gpx';

 const earthRadius = 6371008.8;

-export const MIN_ANCHOR_ZOOM = 0;
-export const MAX_ANCHOR_ZOOM = 22;
-
 export function getZoomLevelForDistance(latitude: number, distance?: number): number {
    if (distance === undefined) {
-        return MIN_ANCHOR_ZOOM;
+        return 0;
    }

    const rad = Math.PI / 180;
    const lat = latitude * rad;

-    return Math.min(
-        MAX_ANCHOR_ZOOM,
-        Math.max(MIN_ANCHOR_ZOOM, Math.round(Math.log2((earthRadius * Math.cos(lat)) / distance)))
-    );
+    return Math.min(22, Math.max(0, Math.log2((earthRadius * Math.cos(lat)) / distance)));
 }

 export function updateAnchorPoints(file: GPXFile) {
@@ -26,24 +26,26 @@

    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);

    onMount(() => {
        if ($map) {
-            splitControls = new SplitControls($map, map.layerEventManager!);
+            splitControls = new SplitControls($map);
        }
    });

    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>
@@ -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,34 +9,19 @@ 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 type { GeoJSONSource } from 'maplibre-gl';
-import { ANCHOR_LAYER_KEY } from '$lib/components/map/style';
-import type { MapLayerEventManager } from '$lib/components/map/map-layer-event-manager';
-import { loadSVGIcon } from '$lib/utils';

 export class SplitControls {
-    map: maplibregl.Map;
-    layerEventManager: MapLayerEventManager;
+    active: boolean = false;
+    map: mapboxgl.Map;
+    controls: ControlWithMarker[] = [];
+    shownControls: ControlWithMarker[] = [];
    unsubscribes: Function[] = [];

-    layerOnMouseEnterBinded: (e: any) => void = this.layerOnMouseEnter.bind(this);
-    layerOnMouseLeaveBinded: () => void = this.layerOnMouseLeave.bind(this);
-    layerOnClickBinded: (e: any) => void = this.layerOnClick.bind(this);
+    toggleControlsForZoomLevelAndBoundsBinded: () => void =
+        this.toggleControlsForZoomLevelAndBounds.bind(this);

-    constructor(map: maplibregl.Map, layerEventManager: MapLayerEventManager) {
+    constructor(map: mapboxgl.Map) {
        this.map = map;
-        this.layerEventManager = layerEventManager;
-        loadSVGIcon(
-            this.map,
-            'split-control',
-            `<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)));
@@ -44,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 = {
-            type: 'FeatureCollection',
-            features: [],
-        };
+        // Update the markers when the files change
+        let controlIndex = 0;
        selection.applyToOrderedSelectedItemsFromFile((fileId, level, items) => {
            let file = fileStateCollection.getFile(fileId);

@@ -66,23 +64,30 @@ export class SplitControls {
                            new ListTrackSegmentItem(fileId, trackIndex, segmentIndex)
                        )
                    ) {
-                        for (let i = 1; i < segment.trkpt.length - 1; i++) {
-                            let point = segment.trkpt[i];
+                        for (let point of segment.trkpt.slice(1, -1)) {
+                            // Update the existing controls (could be improved by matching the existing controls with the new ones?)
                            if (point._data.anchor) {
-                                data.features.push({
-                                    type: 'Feature',
-                                    geometry: {
-                                        type: 'Point',
-                                        coordinates: [point.getLongitude(), point.getLatitude()],
-                                    },
-                                    properties: {
-                                        fileId: fileId,
-                                        trackIndex: trackIndex,
-                                        segmentIndex: segmentIndex,
-                                        pointIndex: i,
-                                        minZoom: point._data.zoom,
-                                    },
-                                });
+                                if (controlIndex < this.controls.length) {
+                                    this.controls[controlIndex].fileId = fileId;
+                                    this.controls[controlIndex].point = point;
+                                    this.controls[controlIndex].segment = segment;
+                                    this.controls[controlIndex].trackIndex = trackIndex;
+                                    this.controls[controlIndex].segmentIndex = segmentIndex;
+                                    this.controls[controlIndex].marker.setLngLat(
+                                        point.getCoordinates()
+                                    );
+                                } else {
+                                    this.controls.push(
+                                        this.createControl(
+                                            point,
+                                            segment,
+                                            fileId,
+                                            trackIndex,
+                                            segmentIndex
+                                        )
+                                    );
+                                }
+                                controlIndex++;
                            }
                        }
                    }
@@ -90,86 +95,86 @@ export class SplitControls {
            }
        }, false);

-        try {
-            let source = this.map.getSource('split-controls') as GeoJSONSource | undefined;
-            if (source) {
-                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.layerEventManager.on(
-                    'mouseenter',
-                    'split-controls',
-                    this.layerOnMouseEnterBinded
-                );
-                this.layerEventManager.on(
-                    'mouseleave',
-                    'split-controls',
-                    this.layerOnMouseLeaveBinded
-                );
-                this.layerEventManager.on('click', 'split-controls', this.layerOnClickBinded);
-            }
-        } catch (e) {
-            // No reliable way to check if the map is ready to add sources and layers
+        while (controlIndex < this.controls.length) {
+            // Remove the extra controls
+            this.controls.pop()?.marker.remove();
        }
+
+        this.toggleControlsForZoomLevelAndBounds();
    }

    remove() {
-        this.layerEventManager.off('mouseenter', 'split-controls', this.layerOnMouseEnterBinded);
-        this.layerEventManager.off('mouseleave', 'split-controls', this.layerOnMouseLeaveBinded);
-        this.layerEventManager.off('click', 'split-controls', this.layerOnClickBinded);
+        this.active = false;

-        try {
-            if (this.map.getLayer('split-controls')) {
-                this.map.removeLayer('split-controls');
-            }
-
-            if (this.map.getSource('split-controls')) {
-                this.map.removeSource('split-controls');
-            }
-        } catch (e) {
-            // No reliable way to check if the map is ready to remove sources and layers
+        for (let control of this.controls) {
+            control.marker.remove();
        }
+        this.map.off('zoom', this.toggleControlsForZoomLevelAndBoundsBinded);
+        this.map.off('move', this.toggleControlsForZoomLevelAndBoundsBinded);
    }

-    layerOnMouseEnter(e: any) {
-        mapCursor.notify(MapCursorState.SPLIT_CONTROL, true);
+    toggleControlsForZoomLevelAndBounds() {
+        // Show markers only if they are in the current zoom level and bounds
+        this.shownControls.splice(0, this.shownControls.length);
+
+        let southWest = this.map.unproject([0, this.map.getCanvas().height]);
+        let northEast = this.map.unproject([this.map.getCanvas().width, 0]);
+        let bounds = new mapboxgl.LngLatBounds(southWest, northEast);
+
+        let zoom = this.map.getZoom();
+        this.controls.forEach((control) => {
+            control.inZoom = control.point._data.zoom <= zoom;
+            if (control.inZoom && bounds.contains(control.marker.getLngLat())) {
+                control.marker.addTo(this.map);
+                this.shownControls.push(control);
+            } else {
+                control.marker.remove();
+            }
+        });
    }

-    layerOnMouseLeave() {
-        mapCursor.notify(MapCursorState.SPLIT_CONTROL, false);
-    }
+    createControl(
+        point: TrackPoint,
+        segment: TrackSegment,
+        fileId: string,
+        trackIndex: number,
+        segmentIndex: number
+    ): ControlWithMarker {
+        let element = document.createElement('div');
+        element.className = `h-6 w-6 p-0.5 rounded-full bg-white border-2 border-black cursor-pointer`;
+        element.innerHTML = Scissors.replace('width="24"', '')
+            .replace('height="24"', '')
+            .replace('stroke="currentColor"', 'stroke="black"');

-    layerOnClick(e: maplibregl.MapLayerMouseEvent) {
-        let coordinates = (e.features![0].geometry as GeoJSON.Point).coordinates;
-        fileActions.split(
-            get(splitAs),
-            e.features![0].properties!.fileId,
-            e.features![0].properties!.trackIndex,
-            e.features![0].properties!.segmentIndex,
-            { lon: coordinates[0], lat: coordinates[1] },
-            e.features![0].properties!.pointIndex
-        );
+        let marker = new mapboxgl.Marker({
+            draggable: true,
+            className: 'z-10',
+            element,
+        }).setLngLat(point.getCoordinates());
+
+        let control = {
+            point,
+            segment,
+            fileId,
+            trackIndex,
+            segmentIndex,
+            marker,
+            inZoom: false,
+        };
+
+        marker.getElement().addEventListener('click', (e) => {
+            e.stopPropagation();
+            fileActions.split(
+                get(splitAs),
+                control.fileId,
+                control.trackIndex,
+                control.segmentIndex,
+                control.point.getCoordinates(),
+                control.point._data.index
+            );
+        });
+
+        return control;
    }

    destroy() {
@@ -177,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;
+};
@@ -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 maplibregl from 'maplibre-gl';
-    import { getSvgForSymbol } from '$lib/components/map/gpx-layer/gpx-layer';

    let props: {
        class?: string;
@@ -41,21 +39,6 @@
        })
    );

-    let marker: maplibregl.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 maplibregl.Marker({
-                        element,
-                        anchor: 'bottom',
-                    })
-                        .setLngLat([longitude, latitude])
-                        .addTo($map);
-                }
-            }
-        } else {
-            if (marker) {
-                marker.remove();
-                marker = null;
-            }
-        }
-    });
-
    onMount(() => {
        if ($map) {
            $map.on('click', setCoordinates);
@@ -153,81 +112,62 @@
            $map.off('click', setCoordinates);
            mapCursor.notify(MapCursorState.TOOL_WITH_CROSSHAIR, false);
        }
-        if (marker) {
-            marker.remove();
-            marker = null;
-        }
    });
 </script>

 <div class="flex flex-col gap-3 w-full max-w-96 {props.class ?? ''}">
-    <fieldset class="flex flex-col gap-1.5">
-        <div class="flex flex-col gap-1">
-            <Label for="name">{i18n._('menu.metadata.name')}</Label>
-            <Input
-                bind:value={name}
-                id="name"
-                class="font-semibold"
+    <fieldset class="flex flex-col gap-2">
+        <Label for="name">{i18n._('menu.metadata.name')}</Label>
+        <Input
+            bind:value={name}
+            id="name"
+            class="font-semibold h-8"
+            disabled={!canCreate && !$selectedWaypoint}
+        />
+        <Label for="description">{i18n._('menu.metadata.description')}</Label>
+        <Textarea
+            bind:value={description}
+            id="description"
+            disabled={!canCreate && !$selectedWaypoint}
+        />
+        <Label for="symbol">{i18n._('toolbar.waypoint.icon')}</Label>
+        <Select.Root bind:value={sym} type="single">
+            <Select.Trigger
+                id="symbol"
+                class="w-full h-8"
                disabled={!canCreate && !$selectedWaypoint}
-            />
-        </div>
-        <div class="flex flex-col gap-1">
-            <Label for="description">{i18n._('menu.metadata.description')}</Label>
-            <Textarea
-                bind:value={description}
-                id="description"
-                disabled={!canCreate && !$selectedWaypoint}
-                class="min-h-8 h-8 py-1 px-3 text-sm"
-            />
-        </div>
-        <div class="flex flex-col gap-1">
-            <Label for="symbol">{i18n._('toolbar.waypoint.icon')}</Label>
-            <Select.Root bind:value={sym} type="single">
-                <Select.Trigger
-                    id="symbol"
-                    class="w-full"
-                    disabled={!canCreate && !$selectedWaypoint}
-                >
-                    <span class="flex flex-row gap-1.5 items-center">
-                        {#if symbolKey}
-                            {#if symbols[symbolKey].icon}
-                                {@const Component = symbols[symbolKey].icon}
-                                <Component size="14" />
+            >
+                {#if symbolKey}
+                    {i18n._(`gpx.symbol.${symbolKey}`)}
+                {:else}
+                    {sym}
+                {/if}
+            </Select.Trigger>
+            <Select.Content class="max-h-60 overflow-y-scroll">
+                {#each sortedSymbols as [key, symbol]}
+                    <Select.Item value={symbol.value}>
+                        <span>
+                            {#if symbol.icon}
+                                {@const Component = symbol.icon}
+                                <Component size="14" class="inline-block align-sub mr-0.5" />
+                            {:else}
+                                <span class="w-4 inline-block"></span>
                            {/if}
-                            {i18n._(`gpx.symbol.${symbolKey}`)}
-                        {:else}
-                            {sym}
-                        {/if}
-                    </span>
-                </Select.Trigger>
-                <Select.Content class="max-h-60">
-                    {#each sortedSymbols as [key, symbol]}
-                        <Select.Item value={symbol.value}>
-                            <span>
-                                {#if symbol.icon}
-                                    {@const Component = symbol.icon}
-                                    <Component size="14" class="inline-block align-sub" />
-                                {:else}
-                                    <span class="w-4 inline-block"></span>
-                                {/if}
-                                {i18n._(`gpx.symbol.${key}`)}
-                            </span>
-                        </Select.Item>
-                    {/each}
-                </Select.Content>
-            </Select.Root>
-        </div>
-        <div class="flex flex-col gap-1">
-            <Label for="link">{i18n._('toolbar.waypoint.link')}</Label>
-            <Input
-                bind:value={link}
-                id="link"
-                class="h-8"
-                disabled={!canCreate && !$selectedWaypoint}
-            />
-        </div>
-        <div class="flex flex-row gap-1.5">
-            <div class="grow flex flex-col gap-1">
+                            {i18n._(`gpx.symbol.${key}`)}
+                        </span>
+                    </Select.Item>
+                {/each}
+            </Select.Content>
+        </Select.Root>
+        <Label for="link">{i18n._('toolbar.waypoint.link')}</Label>
+        <Input
+            bind:value={link}
+            id="link"
+            class="h-8"
+            disabled={!canCreate && !$selectedWaypoint}
+        />
+        <div class="flex flex-row gap-2">
+            <div class="grow flex flex-col gap-2">
                <Label for="latitude">{i18n._('toolbar.waypoint.latitude')}</Label>
                <Input
                    bind:value={latitude}
@@ -240,7 +180,7 @@
                    disabled={!canCreate && !$selectedWaypoint}
                />
            </div>
-            <div class="grow flex flex-col gap-1">
+            <div class="grow flex flex-col gap-2">
                <Label for="longitude">{i18n._('toolbar.waypoint.longitude')}</Label>
                <Input
                    bind:value={longitude}
@@ -255,11 +195,11 @@
            </div>
        </div>
    </fieldset>
-    <div class="flex flex-row gap-1.5 items-center">
+    <div class="flex flex-row gap-2 items-center">
        <Button
            variant="outline"
            disabled={!canCreate && !$selectedWaypoint}
-            class="grow shrink h-fit min-h-8 whitespace-normal py-1"
+            class="grow whitespace-normal h-fit"
            onclick={createOrUpdateWaypoint}
        >
            {#if $selectedWaypoint}
@@ -270,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>
@@ -13,15 +13,10 @@
 <AccordionPrimitive.Content
 	bind:ref
 	data-slot="accordion-content"
-	class="data-open:animate-accordion-down data-closed:animate-accordion-up text-sm overflow-hidden"
+	class="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
 	{...restProps}
 >
-	<div
-		class={cn(
-			"pt-0 pb-2.5 [&_a]:hover:text-foreground [&_a]:underline [&_a]:underline-offset-3 [&_p:not(:last-child)]:mb-4",
-			className
-		)}
-	>
+	<div class={cn("pb-4 pt-0", className)}>
 		{@render children?.()}
 	</div>
 </AccordionPrimitive.Content>
@@ -12,6 +12,6 @@
 <AccordionPrimitive.Item
 	bind:ref
 	data-slot="accordion-item"
-	class={cn("not-last:border-b", className)}
+	class={cn("border-b last:border-b-0", className)}
 	{...restProps}
 />
--- a/Show More
+++ b/Show More