better handle time updates with weird original data

* New translations en.json (Turkish)

* New translations en.json (Polish)

* New translations en.json (Polish)

* New translations gpx.mdx (Hungarian)

* New translations poi.mdx (Hungarian)

* New translations clean.mdx (Polish)

* New translations translation.mdx (Danish)

.github/workflows/deploy.yml

@@ -36,7 +36,7 @@ jobs:
 
       - name: Build website
         env:
-          BASE_PATH: '/${{ github.event.repository.name }}'
+          BASE_PATH: ''
         run: |
           npm run build --prefix website
 

.prettierrc

@@ -0,0 +1,16 @@
+{
+	"useTabs": false,
+	"tabWidth": 4,
+	"singleQuote": true,
+	"trailingComma": "es5",
+	"printWidth": 100,
+	"overrides": [
+    {
+      "files": "**/*.svelte",
+      "options": {
+        "plugins": ["prettier-plugin-svelte"],
+		"parser": "svelte"
+      }
+    }
+  ]
+}

.vscode/extensions.json

@@ -0,0 +1,7 @@
+{
+    "recommendations": [
+      "esbenp.prettier-vscode",
+      "svelte.svelte-vscode"
+    ]
+  }
+  

.vscode/settings.json

@@ -0,0 +1,13 @@
+{
+    "editor.formatOnSave": true,
+    "[javascript]": {
+      "editor.defaultFormatter": "esbenp.prettier-vscode"
+    },
+    "[typescript]": {
+      "editor.defaultFormatter": "esbenp.prettier-vscode"
+    },
+    "[svelte]": {
+      "editor.defaultFormatter": "svelte.svelte-vscode"
+    }
+  }
+  

README.md

@@ -3,11 +3,11 @@
   <img alt="Logo of gpx.studio." src="website/static/logo.svg">
 </picture>
 
-**gpx.studio** is an online tool for creating and editing GPX files.
+[**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.png)
 
-This repository contains the source code of the new website, currently available [here](https://gpx.studio/gpx.studio).
+This repository contains the source code of the website.
 
 ## Contributing
 
@@ -72,6 +72,8 @@ This project has been made possible thanks to the following open source projects
   - [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
 

gpx/.prettierignore

@@ -0,0 +1 @@
+package-lock.json

gpx/package.json

@@ -11,16 +11,21 @@
     },
     "private": true,
     "dependencies": {
-        "fast-xml-parser": "^4.4.0",
+        "fast-xml-parser": "^4.5.0",
         "immer": "^10.1.1",
         "ts-node": "^10.9.2"
     },
-    "scripts": {
-        "build": "tsc"
-    },
     "devDependencies": {
         "@types/geojson": "^7946.0.14",
-        "@types/node": "^20.14.6",
-        "typescript": "^5.4.5"
+        "@types/node": "^20.16.10",
+        "@typescript-eslint/parser": "^8.22.0",
+        "prettier": "^3.4.2",
+        "typescript": "^5.6.2"
+    },
+    "scripts": {
+        "build": "tsc",
+        "postinstall": "npm run build",
+        "lint": "prettier --check . && eslint .",
+        "format": "prettier --write ."
     }
-}
+}

gpx/src/index.ts

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

gpx/src/io.ts

@@ -1,14 +1,40 @@
-import { XMLParser, XMLBuilder } from "fast-xml-parser";
-import { GPXFileType } from "./types";
-import { GPXFile } from "./gpx";
+import { XMLParser, XMLBuilder } from 'fast-xml-parser';
+import { GPXFileType } from './types';
+import { GPXFile } from './gpx';
+
+const attributesWithNamespace = {
+    RoutePointExtension: 'gpxx:RoutePointExtension',
+    rpt: 'gpxx:rpt',
+    TrackPointExtension: 'gpxtpx:TrackPointExtension',
+    PowerExtension: 'gpxpx:PowerExtension',
+    atemp: 'gpxtpx:atemp',
+    hr: 'gpxtpx:hr',
+    cad: 'gpxtpx:cad',
+    Extensions: 'gpxtpx:Extensions',
+    PowerInWatts: 'gpxpx:PowerInWatts',
+    power: 'gpxpx:PowerExtension',
+    line: 'gpx_style:line',
+    color: 'gpx_style:color',
+    opacity: 'gpx_style:opacity',
+    width: 'gpx_style:width',
+};
 
 export function parseGPX(gpxData: string): GPXFile {
     const parser = new XMLParser({
         ignoreAttributes: false,
-        attributeNamePrefix: "",
+        attributeNamePrefix: '',
         attributesGroupName: 'attributes',
+        removeNSPrefix: true,
         isArray(name: string) {
-            return name === 'trk' || name === 'trkseg' || name === 'trkpt' || name === 'wpt' || name === 'rte' || name === 'rtept' || name === 'gpxx:rpt';
+            return (
+                name === 'trk' ||
+                name === 'trkseg' ||
+                name === 'trkpt' ||
+                name === 'wpt' ||
+                name === 'rte' ||
+                name === 'rtept' ||
+                name === 'gpxx:rpt'
+            );
         },
         attributeValueProcessor(attrName, attrValue, jPath) {
             if (attrName === 'lat' || attrName === 'lon') {
@@ -17,9 +43,8 @@ export function parseGPX(gpxData: string): GPXFile {
             return attrValue;
         },
         transformTagName(tagName: string) {
-            if (tagName === 'power') {
-                // Transform the simple <power> tag to the more complex <gpxpx:PowerExtension> tag, the nested <gpxpx:PowerInWatts> tag is then handled by the tagValueProcessor
-                return 'gpxpx:PowerExtension';
+            if (attributesWithNamespace[tagName]) {
+                return attributesWithNamespace[tagName];
             }
             return tagName;
         },
@@ -34,7 +59,14 @@ export function parseGPX(gpxData: string): GPXFile {
                     return new Date(tagValue);
                 }
 
-                if (tagName === 'gpxtpx:hr' || tagName === 'gpxtpx:cad' || tagName === 'gpxtpx:atemp' || tagName === 'gpxpx:PowerInWatts' || tagName === 'opacity' || tagName === 'weight') {
+                if (
+                    tagName === 'gpxtpx:atemp' ||
+                    tagName === 'gpxtpx:hr' ||
+                    tagName === 'gpxtpx:cad' ||
+                    tagName === 'gpxpx:PowerInWatts' ||
+                    tagName === 'gpx_style:opacity' ||
+                    tagName === 'gpx_style:width'
+                ) {
                     return parseFloat(tagValue);
                 }
 
@@ -42,7 +74,7 @@ export function parseGPX(gpxData: string): GPXFile {
                     // Finish the transformation of the simple <power> tag to the more complex <gpxpx:PowerExtension> tag
                     // Note that this only targets the transformed <power> tag, since it must be a leaf node
                     return {
-                        'gpxpx:PowerInWatts': parseFloat(tagValue)
+                        'gpxpx:PowerInWatts': parseFloat(tagValue),
                     };
                 }
             }
@@ -54,7 +86,7 @@ export function parseGPX(gpxData: string): GPXFile {
     const parsed: GPXFileType = parser.parse(gpxData).gpx;
 
     // @ts-ignore
-    if (parsed.metadata === "") {
+    if (parsed.metadata === '') {
         parsed.metadata = {};
     }
 
@@ -64,49 +96,67 @@ export function parseGPX(gpxData: string): GPXFile {
 export function buildGPX(file: GPXFile, exclude: string[]): string {
     const gpx = file.toGPXFileType(exclude);
 
+    let lastDate = undefined;
     const builder = new XMLBuilder({
         format: true,
         ignoreAttributes: false,
-        attributeNamePrefix: "",
+        attributeNamePrefix: '',
         attributesGroupName: 'attributes',
         suppressEmptyNode: true,
-        tagValueProcessor: (tagName: string, tagValue: unknown): string => {
+        tagValueProcessor: (tagName: string, tagValue: unknown): string | undefined => {
             if (tagValue instanceof Date) {
+                if (isNaN(tagValue.getTime())) {
+                    return lastDate?.toISOString();
+                }
+                lastDate = tagValue;
                 return tagValue.toISOString();
             }
             return tagValue.toString();
         },
     });
 
-    gpx.attributes.creator = gpx.attributes.creator ?? 'https://gpx.studio';
+    if (!gpx.attributes) gpx.attributes = {};
+    gpx.attributes['creator'] = gpx.attributes['creator'] ?? 'https://gpx.studio';
     gpx.attributes['version'] = '1.1';
     gpx.attributes['xmlns'] = 'http://www.topografix.com/GPX/1/1';
     gpx.attributes['xmlns:xsi'] = 'http://www.w3.org/2001/XMLSchema-instance';
-    gpx.attributes['xsi:schemaLocation'] = 'http://www.topografix.com/GPX/1/1 http://www.topografix.com/GPX/1/1/gpx.xsd http://www.garmin.com/xmlschemas/GpxExtensions/v3 http://www.garmin.com/xmlschemas/GpxExtensionsv3.xsd http://www.garmin.com/xmlschemas/TrackPointExtension/v1 http://www.garmin.com/xmlschemas/TrackPointExtensionv1.xsd http://www.garmin.com/xmlschemas/PowerExtension/v1 http://www.garmin.com/xmlschemas/PowerExtensionv1.xsd http://www.topografix.com/GPX/gpx_style/0/2 http://www.topografix.com/GPX/gpx_style/0/2/gpx_style.xsd';
+    gpx.attributes['xsi:schemaLocation'] =
+        'http://www.topografix.com/GPX/1/1 http://www.topografix.com/GPX/1/1/gpx.xsd http://www.garmin.com/xmlschemas/GpxExtensions/v3 http://www.garmin.com/xmlschemas/GpxExtensionsv3.xsd http://www.garmin.com/xmlschemas/TrackPointExtension/v1 http://www.garmin.com/xmlschemas/TrackPointExtensionv1.xsd http://www.garmin.com/xmlschemas/PowerExtension/v1 http://www.garmin.com/xmlschemas/PowerExtensionv1.xsd http://www.topografix.com/GPX/gpx_style/0/2 http://www.topografix.com/GPX/gpx_style/0/2/gpx_style.xsd';
     gpx.attributes['xmlns:gpxtpx'] = 'http://www.garmin.com/xmlschemas/TrackPointExtension/v1';
     gpx.attributes['xmlns:gpxx'] = 'http://www.garmin.com/xmlschemas/GpxExtensions/v3';
     gpx.attributes['xmlns:gpxpx'] = 'http://www.garmin.com/xmlschemas/PowerExtension/v1';
     gpx.attributes['xmlns:gpx_style'] = 'http://www.topografix.com/GPX/gpx_style/0/2';
-    gpx.metadata.author = {
-        name: 'gpx.studio',
-        link: {
-            attributes: {
-                href: 'https://gpx.studio',
-            }
-        }
-    };
 
     if (gpx.trk.length === 1 && (gpx.trk[0].name === undefined || gpx.trk[0].name === '')) {
         gpx.trk[0].name = gpx.metadata.name;
     }
 
     return builder.build({
-        "?xml": {
+        '?xml': {
             attributes: {
-                version: "1.0",
-                encoding: "UTF-8",
-            }
+                version: '1.0',
+                encoding: 'UTF-8',
+            },
         },
-        gpx
+        gpx: removeEmptyElements(gpx),
     });
-}
+}
+
+function removeEmptyElements(obj: GPXFileType): GPXFileType {
+    for (const key in obj) {
+        if (
+            obj[key] === null ||
+            obj[key] === undefined ||
+            obj[key] === '' ||
+            (Array.isArray(obj[key]) && obj[key].length === 0)
+        ) {
+            delete obj[key];
+        } else if (typeof obj[key] === 'object' && !(obj[key] instanceof Date)) {
+            removeEmptyElements(obj[key]);
+            if (Object.keys(obj[key]).length === 0) {
+                delete obj[key];
+            }
+        }
+    }
+    return obj;
+}

gpx/src/simplify.ts

@@ -1,33 +1,48 @@
-import { TrackPoint } from "./gpx";
-import { Coordinates } from "./types";
+import { TrackPoint } from './gpx';
+import { Coordinates } from './types';
 
-export type SimplifiedTrackPoint = { point: TrackPoint, distance?: number };
+export type SimplifiedTrackPoint = { point: TrackPoint; distance?: number };
 
 const earthRadius = 6371008.8;
 
-export function ramerDouglasPeucker(points: TrackPoint[], epsilon: number = 50, measure: (a: TrackPoint, b: TrackPoint, c: TrackPoint) => number = crossarcDistance): SimplifiedTrackPoint[] {
+export function ramerDouglasPeucker(
+    points: TrackPoint[],
+    epsilon: number = 50,
+    measure: (a: TrackPoint, b: TrackPoint, c: TrackPoint) => number = crossarcDistance
+): SimplifiedTrackPoint[] {
     if (points.length == 0) {
         return [];
     } else if (points.length == 1) {
-        return [{
-            point: points[0]
-        }];
+        return [
+            {
+                point: points[0],
+            },
+        ];
     }
 
-    let simplified = [{
-        point: points[0]
-    }];
+    let simplified = [
+        {
+            point: points[0],
+        },
+    ];
     ramerDouglasPeuckerRecursive(points, epsilon, measure, 0, points.length - 1, simplified);
     simplified.push({
-        point: points[points.length - 1]
+        point: points[points.length - 1],
     });
     return simplified;
 }
 
-function ramerDouglasPeuckerRecursive(points: TrackPoint[], epsilon: number, measure: (a: TrackPoint, b: TrackPoint, c: TrackPoint) => number, start: number, end: number, simplified: SimplifiedTrackPoint[]) {
+function ramerDouglasPeuckerRecursive(
+    points: TrackPoint[],
+    epsilon: number,
+    measure: (a: TrackPoint, b: TrackPoint, c: TrackPoint) => number,
+    start: number,
+    end: number,
+    simplified: SimplifiedTrackPoint[]
+) {
     let largest = {
         index: 0,
-        distance: 0
+        distance: 0,
     };
 
     for (let i = start + 1; i < end; i++) {
@@ -45,12 +60,20 @@ function ramerDouglasPeuckerRecursive(points: TrackPoint[], epsilon: number, mea
     }
 }
 
-export function crossarcDistance(point1: TrackPoint, point2: TrackPoint, point3: TrackPoint | Coordinates): number {
-    return crossarc(point1.getCoordinates(), point2.getCoordinates(), point3 instanceof TrackPoint ? point3.getCoordinates() : point3);
+export function crossarcDistance(
+    point1: TrackPoint,
+    point2: TrackPoint,
+    point3: TrackPoint | Coordinates
+): number {
+    return crossarc(
+        point1.getCoordinates(),
+        point2.getCoordinates(),
+        point3 instanceof TrackPoint ? point3.getCoordinates() : point3
+    );
 }
 
 function crossarc(coord1: Coordinates, coord2: Coordinates, coord3: Coordinates): number {
-    // Calculates the shortest distance in meters 
+    // 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.
 
@@ -74,7 +97,7 @@ function crossarc(coord1: Coordinates, coord2: Coordinates, coord3: Coordinates)
     }
 
     // Is relative bearing obtuse?
-    if (diff > (Math.PI / 2)) {
+    if (diff > Math.PI / 2) {
         return dis13;
     }
 
@@ -83,7 +106,8 @@ function crossarc(coord1: Coordinates, coord2: Coordinates, coord3: Coordinates)
 
     // 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;
+    let dis14 =
+        Math.acos(Math.cos(dis13 / earthRadius) / Math.cos(dxt / earthRadius)) * earthRadius;
     if (dis14 > dis12) {
         return distance(lat2, lon2, lat3, lon3);
     } else {
@@ -93,12 +117,85 @@ function crossarc(coord1: Coordinates, coord2: Coordinates, coord3: Coordinates)
 
 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;
+    return (
+        Math.acos(
+            Math.sin(latA) * Math.sin(latB) +
+                Math.cos(latA) * Math.cos(latB) * Math.cos(lonB - lonA)
+        ) * earthRadius
+    );
 }
 
-
 function bearing(latA: number, lonA: number, latB: number, lonB: number): number {
     // Finds the bearing from one lat / lon point to another.
-    return Math.atan2(Math.sin(lonB - lonA) * Math.cos(latB),
-        Math.cos(latA) * Math.sin(latB) - Math.sin(latA) * Math.cos(latB) * Math.cos(lonB - lonA));
-}
+    return 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(
+    point1: TrackPoint,
+    point2: TrackPoint,
+    point3: TrackPoint | Coordinates
+): Coordinates {
+    return projected(
+        point1.getCoordinates(),
+        point2.getCoordinates(),
+        point3 instanceof TrackPoint ? point3.getCoordinates() : point3
+    );
+}
+
+function projected(coord1: Coordinates, coord2: Coordinates, coord3: Coordinates): Coordinates {
+    // Calculates the point on the line defined by p1 and p2
+    // that is closest to the third point, p3.
+    // Input lat1,lon1,lat2,lon2,lat3,lon3 in degrees.
+
+    const rad = Math.PI / 180;
+    const lat1 = coord1.lat * rad;
+    const lat2 = coord2.lat * rad;
+    const lat3 = coord3.lat * rad;
+
+    const lon1 = coord1.lon * rad;
+    const lon2 = coord2.lon * rad;
+    const lon3 = coord3.lon * rad;
+
+    // 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);
+
+    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;
+    }
+
+    // Find the cross-track distance.
+    let dxt = Math.asin(Math.sin(dis13 / earthRadius) * Math.sin(bear13 - bear12)) * earthRadius;
+
+    // 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)
+            );
+
+        return { lat: lat4 / rad, lon: lon4 / rad };
+    }
+}

gpx/src/types.ts

@@ -58,8 +58,8 @@ export type TrackType = {
     src?: string;
     link?: Link;
     type?: string;
-    trkseg: TrackSegmentType[];
     extensions?: TrackExtensions;
+    trkseg: TrackSegmentType[];
 };
 
 export type TrackExtensions = {
@@ -67,9 +67,9 @@ export type TrackExtensions = {
 };
 
 export type LineStyleExtension = {
-    color?: string;
-    opacity?: number;
-    weight?: number;
+    'gpx_style:color'?: string;
+    'gpx_style:opacity'?: number;
+    'gpx_style:width'?: number;
 };
 
 export type TrackSegmentType = {
@@ -89,17 +89,15 @@ export type TrackPointExtensions = {
 };
 
 export type TrackPointExtension = {
+    'gpxtpx:atemp'?: number;
     'gpxtpx:hr'?: number;
     'gpxtpx:cad'?: number;
-    'gpxtpx:atemp'?: number;
-    'gpxtpx:Extensions'?: {
-        surface?: string;
-    };
-}
+    'gpxtpx:Extensions'?: Record<string, string>;
+};
 
 export type PowerExtension = {
     'gpxpx:PowerInWatts'?: number;
-}
+};
 
 export type Author = {
     name?: string;
@@ -116,12 +114,12 @@ export type RouteType = {
     type?: string;
     extensions?: TrackExtensions;
     rtept: WaypointType[];
-}
+};
 
 export type RoutePointExtension = {
     'gpxx:rpt'?: GPXXRoutePoint[];
-}
+};
 
 export type GPXXRoutePoint = {
     attributes: Coordinates;
-}
+};

gpx/test-data/with_routes.gpx

@@ -0,0 +1,253 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<gpx xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+    xmlns="http://www.topografix.com/GPX/1/1" xsi:schemaLocation="http://www.topografix.com/GPX/1/1 http://www.topografix.com/GPX/1/1/gpx.xsd http://www.garmin.com/xmlschemas/GpxExtensions/v3 http://www.garmin.com/xmlschemas/GpxExtensionsv3.xsd http://www.garmin.com/xmlschemas/TrackPointExtension/v1 http://www.garmin.com/xmlschemas/TrackPointExtensionv1.xsd http://www.topografix.com/GPX/gpx_style/0/2 http://www.topografix.com/GPX/gpx_style/0/2/gpx_style.xsd"
+    xmlns:gpxtpx="http://www.garmin.com/xmlschemas/TrackPointExtension/v1"
+    xmlns:gpxx="http://www.garmin.com/xmlschemas/GpxExtensions/v3"
+    xmlns:gpx_style="http://www.topografix.com/GPX/gpx_style/0/2" version="1.1" creator="https://gpx.studio">
+    <metadata>
+        <name>with_routes</name>
+        <author>
+            <name>gpx.studio</name>
+            <link href="https://gpx.studio"></link>
+        </author>
+    </metadata>
+    <rte>
+        <name>route 1</name>
+        <type>Cycling</type>
+        <rtept lat="50.790867" lon="4.404968">
+            <ele>109.0</ele>
+        </rtept>
+        <rtept lat="50.790714" lon="4.405036">
+            <ele>110.8</ele>
+        </rtept>
+        <rtept lat="50.790336" lon="4.405259">
+            <ele>110.3</ele>
+        </rtept>
+        <rtept lat="50.790165" lon="4.405331">
+            <ele>110.0</ele>
+        </rtept>
+        <rtept lat="50.790008" lon="4.405359">
+            <ele>110.3</ele>
+        </rtept>
+        <rtept lat="50.789818" lon="4.405359">
+            <ele>109.3</ele>
+        </rtept>
+        <rtept lat="50.789409" lon="4.40534">
+            <ele>107.0</ele>
+        </rtept>
+        <rtept lat="50.789105" lon="4.405411">
+            <ele>106.0</ele>
+        </rtept>
+        <rtept lat="50.788799" lon="4.405527">
+            <ele>108.5</ele>
+        </rtept>
+        <rtept lat="50.788645" lon="4.405606">
+            <ele>109.8</ele>
+        </rtept>
+        <rtept lat="50.7885" lon="4.405711">
+            <ele>110.8</ele>
+        </rtept>
+        <rtept lat="50.78822" lon="4.405959">
+            <ele>112.0</ele>
+        </rtept>
+        <rtept lat="50.787956" lon="4.406092">
+            <ele>112.8</ele>
+        </rtept>
+        <rtept lat="50.787814" lon="4.406143">
+            <ele>113.5</ele>
+        </rtept>
+        <rtept lat="50.787674" lon="4.406177">
+            <ele>114.3</ele>
+        </rtept>
+        <rtept lat="50.787451" lon="4.406199">
+            <ele>115.3</ele>
+        </rtept>
+        <rtept lat="50.787297" lon="4.406177">
+            <ele>114.8</ele>
+        </rtept>
+        <rtept lat="50.78716" lon="4.406098">
+            <ele>114.3</ele>
+        </rtept>
+        <rtept lat="50.787045" lon="4.405984">
+            <ele>114.3</ele>
+        </rtept>
+        <rtept lat="50.786683" lon="4.405653">
+            <ele>114.5</ele>
+        </rtept>
+        <rtept lat="50.786538" lon="4.405543">
+            <ele>115.0</ele>
+        </rtept>
+        <rtept lat="50.78635" lon="4.405441">
+            <ele>115.8</ele>
+        </rtept>
+        <rtept lat="50.786275" lon="4.40542">
+            <ele>115.8</ele>
+        </rtept>
+        <rtept lat="50.786182" lon="4.405435">
+            <ele>116.0</ele>
+        </rtept>
+        <rtept lat="50.786121" lon="4.405475">
+            <ele>115.8</ele>
+        </rtept>
+        <rtept lat="50.786042" lon="4.405558">
+            <ele>115.5</ele>
+        </rtept>
+        <rtept lat="50.785821" lon="4.405925">
+            <ele>114.5</ele>
+        </rtept>
+        <rtept lat="50.785672" lon="4.406119">
+            <ele>112.5</ele>
+        </rtept>
+        <rtept lat="50.785516" lon="4.406256">
+            <ele>110.8</ele>
+        </rtept>
+        <rtept lat="50.785384" lon="4.406364">
+            <ele>109.0</ele>
+        </rtept>
+        <rtept lat="50.785126" lon="4.406475">
+            <ele>106.3</ele>
+        </rtept>
+        <rtept lat="50.784697" lon="4.406537">
+            <ele>104.3</ele>
+        </rtept>
+        <rtept lat="50.784591" lon="4.40657">
+            <ele>104.0</ele>
+        </rtept>
+        <rtept lat="50.784507" lon="4.406612">
+            <ele>103.8</ele>
+        </rtept>
+        <rtept lat="50.784435" lon="4.40669">
+            <ele>103.3</ele>
+        </rtept>
+        <rtept lat="50.784209" lon="4.407148">
+            <ele>103.5</ele>
+        </rtept>
+        <rtept lat="50.784162" lon="4.407257">
+            <ele>103.8</ele>
+        </rtept>
+        <rtept lat="50.784077" lon="4.407372">
+            <ele>104.8</ele>
+        </rtept>
+        <rtept lat="50.784006" lon="4.407435">
+            <ele>105.8</ele>
+        </rtept>
+        <rtept lat="50.783924" lon="4.407471">
+            <ele>106.8</ele>
+        </rtept>
+        <rtept lat="50.783837" lon="4.407486">
+            <ele>107.8</ele>
+        </rtept>
+        <rtept lat="50.783771" lon="4.407472">
+            <ele>108.5</ele>
+        </rtept>
+        <rtept lat="50.783697" lon="4.407428">
+            <ele>109.3</ele>
+        </rtept>
+        <rtept lat="50.783626" lon="4.407363">
+            <ele>110.0</ele>
+        </rtept>
+        <rtept lat="50.783548" lon="4.407274">
+            <ele>110.5</ele>
+        </rtept>
+        <rtept lat="50.783458" lon="4.407134">
+            <ele>110.8</ele>
+        </rtept>
+        <rtept lat="50.783123" lon="4.406435">
+            <ele>111.8</ele>
+        </rtept>
+        <rtept lat="50.782982" lon="4.406168">
+            <ele>112.8</ele>
+        </rtept>
+        <rtept lat="50.782871" lon="4.406044">
+            <ele>113.3</ele>
+        </rtept>
+    </rte>
+    <rte>
+        <name>route 2</name>
+        <type>Cycling</type>
+        <rtept lat="50.782212" lon="4.406377">
+            <ele>115.5</ele>
+        </rtept>
+        <rtept lat="50.782175" lon="4.406413">
+            <ele>115.8</ele>
+        </rtept>
+        <rtept lat="50.781749" lon="4.407018">
+            <ele>118.5</ele>
+        </rtept>
+        <rtept lat="50.781654" lon="4.407316">
+            <ele>119.5</ele>
+        </rtept>
+        <rtept lat="50.781563" lon="4.407764">
+            <ele>121.3</ele>
+        </rtept>
+        <rtept lat="50.781487" lon="4.407984">
+            <ele>122.0</ele>
+        </rtept>
+        <rtept lat="50.781422" lon="4.408216">
+            <ele>122.8</ele>
+        </rtept>
+        <rtept lat="50.781395" lon="4.408508">
+            <ele>123.5</ele>
+        </rtept>
+        <rtept lat="50.781399" lon="4.409114">
+            <ele>126.3</ele>
+        </rtept>
+        <rtept lat="50.781367" lon="4.409428">
+            <ele>128.0</ele>
+        </rtept>
+        <rtept lat="50.781286" lon="4.409607">
+            <ele>129.0</ele>
+        </rtept>
+        <rtept lat="50.78116" lon="4.409789">
+            <ele>130.0</ele>
+        </rtept>
+        <rtept lat="50.780804" lon="4.409993">
+            <ele>130.8</ele>
+        </rtept>
+        <rtept lat="50.780389" lon="4.410334">
+            <ele>131.8</ele>
+        </rtept>
+        <rtept lat="50.780232" lon="4.410563">
+            <ele>132.3</ele>
+        </rtept>
+        <rtept lat="50.780094" lon="4.410827">
+            <ele>132.8</ele>
+        </rtept>
+        <rtept lat="50.779723" lon="4.411582">
+            <ele>135.8</ele>
+        </rtept>
+        <rtept lat="50.779591" lon="4.411791">
+            <ele>135.5</ele>
+        </rtept>
+        <rtept lat="50.779125" lon="4.412435">
+            <ele>132.5</ele>
+        </rtept>
+        <rtept lat="50.778676" lon="4.412979">
+            <ele>134.0</ele>
+        </rtept>
+        <rtept lat="50.778194" lon="4.413466">
+            <ele>136.8</ele>
+        </rtept>
+        <rtept lat="50.777427" lon="4.414302">
+            <ele>137.5</ele>
+        </rtept>
+        <rtept lat="50.777165" lon="4.414736">
+            <ele>137.3</ele>
+        </rtept>
+        <rtept lat="50.776927" lon="4.415201">
+            <ele>137.5</ele>
+        </rtept>
+        <rtept lat="50.776778" lon="4.415613">
+            <ele>137.3</ele>
+        </rtept>
+        <rtept lat="50.776553" lon="4.416425">
+            <ele>134.8</ele>
+        </rtept>
+        <rtept lat="50.776326" lon="4.417304">
+            <ele>132.3</ele>
+        </rtept>
+        <rtept lat="50.776129" lon="4.418383">
+            <ele>129.5</ele>
+        </rtept>
+    </rte>
+</gpx>

gpx/test-data/with_style.gpx

@@ -16,9 +16,9 @@
         <type>Cycling</type>
         <extensions>
             <gpx_style:line>
-                <color>#2d3ee9</color>
-                <opacity>0.5</opacity>
-                <weight>6</weight>
+                <gpx_style:color>2d3ee9</gpx_style:color>
+                <gpx_style:opacity>0.5</gpx_style:opacity>
+                <gpx_style:width>6</gpx_style:width>
             </gpx_style:line>
         </extensions>
         <trkseg>

gpx/tsconfig.json

@@ -4,9 +4,7 @@
         "target": "ES2015",
         "declaration": true,
         "outDir": "./dist",
-        "moduleResolution": "node",
+        "moduleResolution": "node"
     },
-    "include": [
-        "src"
-    ],
-}
+    "include": ["src"]
+}

website/.eslintrc.cjs

@@ -1,31 +1,31 @@
 /** @type { import("eslint").Linter.Config } */
 module.exports = {
-	root: true,
-	extends: [
-		'eslint:recommended',
-		'plugin:@typescript-eslint/recommended',
-		'plugin:svelte/recommended',
-		'prettier'
-	],
-	parser: '@typescript-eslint/parser',
-	plugins: ['@typescript-eslint'],
-	parserOptions: {
-		sourceType: 'module',
-		ecmaVersion: 2020,
-		extraFileExtensions: ['.svelte']
-	},
-	env: {
-		browser: true,
-		es2017: true,
-		node: true
-	},
-	overrides: [
-		{
-			files: ['*.svelte'],
-			parser: 'svelte-eslint-parser',
-			parserOptions: {
-				parser: '@typescript-eslint/parser'
-			}
-		}
-	]
+    root: true,
+    extends: [
+        'eslint:recommended',
+        'plugin:@typescript-eslint/recommended',
+        'plugin:svelte/recommended',
+        'prettier',
+    ],
+    parser: '@typescript-eslint/parser',
+    plugins: ['@typescript-eslint'],
+    parserOptions: {
+        sourceType: 'module',
+        ecmaVersion: 2020,
+        extraFileExtensions: ['.svelte'],
+    },
+    env: {
+        browser: true,
+        es2017: true,
+        node: true,
+    },
+    overrides: [
+        {
+            files: ['*.svelte'],
+            parser: 'svelte-eslint-parser',
+            parserOptions: {
+                parser: '@typescript-eslint/parser',
+            },
+        },
+    ],
 };

website/.prettierignore

@@ -2,3 +2,5 @@
 pnpm-lock.yaml
 package-lock.json
 yarn.lock
+src/lib/components/ui
+*.mdx

website/.prettierrc

@@ -1,8 +0,0 @@
-{
-	"useTabs": true,
-	"singleQuote": true,
-	"trailingComma": "none",
-	"printWidth": 100,
-	"plugins": ["prettier-plugin-svelte"],
-	"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
-}

website/components.json

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

website/package.json

@@ -13,61 +13,70 @@
         "format": "prettier --write ."
     },
     "devDependencies": {
-        "@sveltejs/adapter-auto": "^3.2.2",
-        "@sveltejs/adapter-static": "^3.0.2",
-        "@sveltejs/enhanced-img": "^0.3.0",
-        "@sveltejs/kit": "^2.5.17",
-        "@sveltejs/vite-plugin-svelte": "^3.1.1",
-        "@types/eslint": "^8.56.10",
+        "@sveltejs/adapter-auto": "^3.2.5",
+        "@sveltejs/adapter-static": "^3.0.5",
+        "@sveltejs/enhanced-img": "^0.3.8",
+        "@sveltejs/kit": "^2.6.1",
+        "@sveltejs/vite-plugin-svelte": "^3.1.2",
+        "@types/eslint": "^8.56.12",
         "@types/events": "^3.0.3",
+        "@types/file-saver": "^2.0.7",
         "@types/mapbox__mapbox-gl-geocoder": "^5.0.0",
-        "@types/mapbox-gl": "^3.1.0",
-        "@types/node": "^20.14.6",
-        "@types/sanitize-html": "^2.11.0",
+        "@types/mapbox__tilebelt": "^1.0.4",
+        "@types/mapbox-gl": "^3.4.0",
+        "@types/node": "^20.16.10",
+        "@types/png.js": "^0.2.3",
+        "@types/sanitize-html": "^2.13.0",
         "@types/sortablejs": "^1.15.8",
-        "@typescript-eslint/eslint-plugin": "^7.13.1",
-        "@typescript-eslint/parser": "^7.13.1",
-        "autoprefixer": "^10.4.19",
-        "eslint": "^8.57.0",
+        "@typescript-eslint/eslint-plugin": "^7.18.0",
+        "@typescript-eslint/parser": "^7.18.0",
+        "autoprefixer": "^10.4.20",
+        "eslint": "^8.57.1",
         "eslint-config-prettier": "^9.1.0",
-        "eslint-plugin-svelte": "^2.40.0",
+        "eslint-plugin-svelte": "^2.44.1",
         "events": "^3.3.0",
-        "glob": "^10.4.3",
+        "glob": "^10.4.5",
         "mdsvex": "^0.11.2",
-        "postcss": "^8.4.38",
-        "prettier": "^3.3.2",
-        "prettier-plugin-svelte": "^3.2.4",
-        "svelte": "^4.2.18",
-        "svelte-check": "^3.8.1",
-        "tailwindcss": "^3.4.4",
-        "tslib": "^2.6.3",
-        "tsx": "^4.15.7",
-        "typescript": "^5.4.5",
-        "vite": "^5.3.1"
+        "postcss": "^8.4.47",
+        "prettier": "^3.3.3",
+        "prettier-plugin-svelte": "^3.2.7",
+        "svelte": "^4.2.19",
+        "svelte-check": "^3.8.6",
+        "tailwindcss": "^3.4.13",
+        "tslib": "^2.7.0",
+        "tsx": "^4.19.1",
+        "typescript": "^5.6.2",
+        "vite": "^5.4.8",
+        "vite-plugin-node-polyfills": "^0.22.0"
     },
     "type": "module",
     "dependencies": {
-        "@internationalized/date": "^3.5.4",
-        "@mapbox/mapbox-gl-geocoder": "^5.0.2",
+        "@docsearch/js": "^3.6.2",
+        "@internationalized/date": "^3.5.5",
+        "@mapbox/mapbox-gl-geocoder": "^5.0.3",
         "@mapbox/sphericalmercator": "^1.2.0",
+        "@mapbox/tilebelt": "^1.0.2",
         "@types/mapbox__sphericalmercator": "^1.2.3",
-        "bits-ui": "^0.21.12",
-        "chart.js": "^4.4.3",
+        "bits-ui": "^0.21.15",
+        "chart.js": "^4.4.4",
         "chartjs-plugin-zoom": "^2.0.1",
         "clsx": "^2.1.1",
-        "dexie": "^4.0.7",
+        "dexie": "^4.0.8",
+        "file-saver": "^2.0.5",
         "gpx": "file:../gpx",
         "immer": "^10.1.1",
-        "lucide-static": "^0.427.0",
-        "lucide-svelte": "^0.427.0",
-        "mapbox-gl": "^3.4.0",
+        "jszip": "^3.10.1",
+        "lucide-static": "^0.460.0",
+        "lucide-svelte": "^0.460.1",
+        "mapbox-gl": "^3.9.1",
         "mapillary-js": "^4.1.2",
         "mode-watcher": "^0.3.1",
+        "png.js": "^0.2.1",
         "sanitize-html": "^2.13.0",
-        "sortablejs": "^1.15.2",
+        "sortablejs": "^1.15.3",
         "svelte-i18n": "^4.0.0",
-        "svelte-sonner": "^0.3.24",
-        "tailwind-merge": "^2.3.0",
+        "svelte-sonner": "^0.3.28",
+        "tailwind-merge": "^2.5.2",
         "tailwind-variants": "^0.2.1"
     }
 }

website/postcss.config.js

@@ -1,6 +1,6 @@
 export default {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-}
+    plugins: {
+        tailwindcss: {},
+        autoprefixer: {},
+    },
+};

website/src/app.d.ts

@@ -1,13 +1,13 @@
 // See https://kit.svelte.dev/docs/types#app
 // for information about these interfaces
 declare global {
-	namespace App {
-		// interface Error {}
-		// interface Locals {}
-		// interface PageData {}
-		// interface PageState {}
-		// interface Platform {}
-	}
+    namespace App {
+        // interface Error {}
+        // interface Locals {}
+        // interface PageData {}
+        // interface PageState {}
+        // interface Platform {}
+    }
 }
 
 export {};

website/src/app.html

@@ -1,15 +1,13 @@
 <!doctype html>
-<html lang="en">
+<html>
+    <head>
+        <meta charset="utf-8" />
+        <link rel="icon" href="%sveltekit.assets%/favicon.png" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        %sveltekit.head%
+    </head>
 
-<head>
-    <meta charset="utf-8" />
-    <link rel="icon" href="%sveltekit.assets%/favicon.png" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
-    %sveltekit.head%
-</head>
-
-<body data-sveltekit-preload-data="hover">
-    <div style="display: contents">%sveltekit.body%</div>
-</body>
-
-</html>
+    <body data-sveltekit-preload-data="hover">
+        <div style="display: contents">%sveltekit.body%</div>
+    </body>
+</html>

website/src/app.pcss

@@ -1,82 +1,86 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
- 
+
 @layer base {
-  :root {
-    --background: 0 0% 100%;
-    --foreground: 222.2 84% 4.9%;
- 
-    --muted: 210 40% 96.1%;
-    --muted-foreground: 215.4 16.3% 46.9%;
- 
-    --popover: 0 0% 100%;
-    --popover-foreground: 222.2 84% 4.9%;
- 
-    --card: 0 0% 100%;
-    --card-foreground: 222.2 84% 4.9%;
- 
-    --border: 214.3 31.8% 91.4%;
-    --input: 214.3 31.8% 91.4%;
- 
-    --primary: 222.2 47.4% 11.2%;
-    --primary-foreground: 210 40% 98%;
- 
-    --secondary: 210 40% 96.1%;
-    --secondary-foreground: 222.2 47.4% 11.2%;
- 
-    --accent: 210 40% 92%;
-    --accent-foreground: 222.2 47.4% 11.2%;
- 
-    --destructive: 0 72.2% 50.6%;
-    --destructive-foreground: 210 40% 98%;
+    :root {
+        --background: 0 0% 100%;
+        --foreground: 222.2 84% 4.9%;
 
-    --support: 220 15 130;
- 
-    --ring: 222.2 84% 4.9%;
- 
-    --radius: 0.5rem;
-  }
- 
-  .dark {
-    --background: 222.2 84% 4.9%;
-    --foreground: 210 40% 98%;
- 
-    --muted: 217.2 32.6% 17.5%;
-    --muted-foreground: 215 20.2% 65.1%;
- 
-    --popover: 222.2 84% 4.9%;
-    --popover-foreground: 210 40% 98%;
- 
-    --card: 222.2 84% 4.9%;
-    --card-foreground: 210 40% 98%;
- 
-    --border: 217.2 32.6% 17.5%;
-    --input: 217.2 32.6% 17.5%;
- 
-    --primary: 210 40% 98%;
-    --primary-foreground: 222.2 47.4% 11.2%;
- 
-    --secondary: 217.2 32.6% 17.5%;
-    --secondary-foreground: 210 40% 98%;
- 
-    --accent: 217.2 32.6% 30%;
-    --accent-foreground: 210 40% 98%;
- 
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 210 40% 98%;
+        --muted: 210 40% 96.1%;
+        --muted-foreground: 215.4 16.3% 45%;
 
-    --support: 255 110 190;
- 
-    --ring: hsl(212.7,26.8%,83.9);
-  }
+        --popover: 0 0% 100%;
+        --popover-foreground: 222.2 84% 4.9%;
+
+        --card: 0 0% 100%;
+        --card-foreground: 222.2 84% 4.9%;
+
+        --border: 214.3 31.8% 91.4%;
+        --input: 214.3 31.8% 91.4%;
+
+        --primary: 222.2 47.4% 11.2%;
+        --primary-foreground: 210 40% 98%;
+
+        --secondary: 210 40% 96.1%;
+        --secondary-foreground: 222.2 47.4% 11.2%;
+
+        --accent: 210 40% 92%;
+        --accent-foreground: 222.2 47.4% 11.2%;
+
+        --destructive: 0 72.2% 50.6%;
+        --destructive-foreground: 210 40% 98%;
+
+        --support: 220 15 130;
+
+        --link: 0 110 180;
+
+        --ring: 222.2 84% 4.9%;
+
+        --radius: 0.5rem;
+    }
+
+    .dark {
+        --background: 222.2 84% 4.9%;
+        --foreground: 210 40% 98%;
+
+        --muted: 217.2 32.6% 17.5%;
+        --muted-foreground: 215 20.2% 65.1%;
+
+        --popover: 222.2 84% 4.9%;
+        --popover-foreground: 210 40% 98%;
+
+        --card: 222.2 84% 4.9%;
+        --card-foreground: 210 40% 98%;
+
+        --border: 217.2 32.6% 17.5%;
+        --input: 217.2 32.6% 17.5%;
+
+        --primary: 210 40% 98%;
+        --primary-foreground: 222.2 47.4% 11.2%;
+
+        --secondary: 217.2 32.6% 17.5%;
+        --secondary-foreground: 210 40% 98%;
+
+        --accent: 217.2 32.6% 30%;
+        --accent-foreground: 210 40% 98%;
+
+        --destructive: 0 62.8% 30.6%;
+        --destructive-foreground: 210 40% 98%;
+
+        --support: 255 110 190;
+
+        --link: 80 190 255;
+
+        --ring: hsl(212.7, 26.8%, 83.9);
+    }
 }
- 
+
 @layer base {
-  * {
-    @apply border-border;
-  }
-  body {
-    @apply bg-background text-foreground;
-  }
-}
+    * {
+        @apply border-border;
+    }
+    body {
+        @apply bg-background text-foreground;
+    }
+}

website/src/hooks.server.js

@@ -0,0 +1,54 @@
+import { base } from '$app/paths';
+import { languages } from '$lib/languages';
+import { getURLForLanguage } from '$lib/utils';
+
+export async function handle({ event, resolve }) {
+    const language = event.params.language ?? 'en';
+    const strings = await import(`./locales/${language}.json`);
+
+    const path = event.url.pathname;
+    const page = event.route.id?.replace('/[[language]]', '').split('/')[1] ?? 'home';
+
+    let title = strings.metadata[`${page}_title`];
+    const description = strings.metadata[`description`];
+
+    if (page === 'help' && event.params.guide) {
+        const [guide, subguide] = event.params.guide.split('/');
+        const guideModule = subguide
+            ? await import(`./lib/docs/${language}/${guide}/${subguide}.mdx`)
+            : await import(`./lib/docs/${language}/${guide}.mdx`);
+        title = `${title} | ${guideModule.metadata.title}`;
+    }
+
+    const htmlTag = `<html lang="${language}" translate="no">`;
+
+    let headTag = `<head>
+    <title>gpx.studio — ${title}</title>
+    <meta name="description" content="${description}" />
+    <meta property="og:title" content="gpx.studio — ${title}" />
+    <meta property="og:description" content="${description}" />
+    <meta name="twitter:title" content="gpx.studio — ${title}" />
+    <meta name="twitter:description" content="${description}" />
+    <meta property="og:image" content="https://gpx.studio${base}/og_logo.png" />
+    <meta property="og:url" content="https://gpx.studio/" />
+    <meta property="og:type" content="website" />
+    <meta property="og:site_name" content="gpx.studio" />
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:image" content="https://gpx.studio${base}/og_logo.png" />
+    <meta name="twitter:url" content="https://gpx.studio/" />
+    <meta name="twitter:site" content="@gpxstudio" />
+    <meta name="twitter:creator" content="@gpxstudio" />
+    <link rel="alternate" hreflang="x-default" href="https://gpx.studio${getURLForLanguage('en', path)}" />`;
+
+    for (let lang of Object.keys(languages)) {
+        headTag += `   <link rel="alternate" hreflang="${lang}" href="https://gpx.studio${getURLForLanguage(lang, path)}" />
+`;
+    }
+
+    const response = await resolve(event, {
+        transformPageChunk: ({ html }) =>
+            html.replace('<html>', htmlTag).replace('<head>', headTag),
+    });
+
+    return response;
+}

website/src/lib/assets/colors.ts

@@ -0,0 +1,171 @@
+export const surfaceColors: { [key: string]: string } = {
+    missing: '#d1d1d1',
+    paved: '#8c8c8c',
+    unpaved: '#6b443a',
+    asphalt: '#8c8c8c',
+    concrete: '#8c8c8c',
+    cobblestone: '#ffd991',
+    paving_stones: '#8c8c8c',
+    sett: '#ffd991',
+    metal: '#8c8c8c',
+    wood: '#6b443a',
+    compacted: '#ffffa8',
+    fine_gravel: '#ffffa8',
+    gravel: '#ffffa8',
+    pebblestone: '#ffffa8',
+    rock: '#ffd991',
+    dirt: '#ffffa8',
+    ground: '#6b443a',
+    earth: '#6b443a',
+    mud: '#6b443a',
+    sand: '#ffffc4',
+    grass: '#61b55c',
+    grass_paver: '#61b55c',
+    clay: '#6b443a',
+    stone: '#ffd991',
+};
+
+export function getSurfaceColor(surface: string): string {
+    return surfaceColors[surface] ? surfaceColors[surface] : surfaceColors.missing;
+}
+
+export const highwayColors: { [key: string]: string } = {
+    missing: '#d1d1d1',
+    motorway: '#ff4d33',
+    motorway_link: '#ff4d33',
+    trunk: '#ff5e4d',
+    trunk_link: '#ff947f',
+    primary: '#ff6e5c',
+    primary_link: '#ff6e5c',
+    secondary: '#ff8d7b',
+    secondary_link: '#ff8d7b',
+    tertiary: '#ffd75f',
+    tertiary_link: '#ffd75f',
+    unclassified: '#f1f2a5',
+    road: '#f1f2a5',
+    residential: '#73b2ff',
+    living_street: '#73b2ff',
+    service: '#9c9cd9',
+    track: '#a8e381',
+    footway: '#a8e381',
+    path: '#a8e381',
+    pedestrian: '#a8e381',
+    cycleway: '#9de2ff',
+    construction: '#e09a4a',
+    bridleway: '#946f43',
+    raceway: '#ff0000',
+    rest_area: '#9c9cd9',
+    services: '#9c9cd9',
+    corridor: '#474747',
+    elevator: '#474747',
+    steps: '#474747',
+    bus_stop: '#8545a3',
+    busway: '#8545a3',
+    via_ferrata: '#474747',
+};
+
+export const sacScaleColors: { [key: string]: string } = {
+    hiking: '#007700',
+    mountain_hiking: '#1843ad',
+    demanding_mountain_hiking: '#ffff00',
+    alpine_hiking: '#ff9233',
+    demanding_alpine_hiking: '#ff0000',
+    difficult_alpine_hiking: '#000000',
+};
+
+export const mtbScaleColors: { [key: string]: string } = {
+    '0-': '#007700',
+    '0': '#007700',
+    '0+': '#007700',
+    '1-': '#1843ad',
+    '1': '#1843ad',
+    '1+': '#1843ad',
+    '2-': '#ffff00',
+    '2': '#ffff00',
+    '2+': '#ffff00',
+    '3': '#ff0000',
+    '4': '#00ff00',
+    '5': '#000000',
+    '6': '#b105eb',
+};
+
+function createPattern(
+    backgroundColor: string,
+    sacScaleColor: string | undefined,
+    mtbScaleColor: string | undefined,
+    size: number = 16,
+    lineWidth: number = 4
+) {
+    let canvas = document.createElement('canvas');
+    canvas.width = size;
+    canvas.height = size;
+    let ctx = canvas.getContext('2d');
+    if (ctx) {
+        ctx.fillStyle = backgroundColor;
+        ctx.fillRect(0, 0, size, size);
+        ctx.lineWidth = lineWidth;
+
+        const halfSize = size / 2;
+        const halfLineWidth = lineWidth / 2;
+        if (sacScaleColor) {
+            ctx.strokeStyle = sacScaleColor;
+            ctx.beginPath();
+            ctx.moveTo(halfSize - halfLineWidth, -halfLineWidth);
+            ctx.lineTo(size + halfLineWidth, halfSize + halfLineWidth);
+            ctx.stroke();
+            ctx.beginPath();
+            ctx.moveTo(-halfLineWidth, halfSize - halfLineWidth);
+            ctx.lineTo(halfSize + halfLineWidth, size + halfLineWidth);
+            ctx.stroke();
+        }
+        if (mtbScaleColor) {
+            ctx.strokeStyle = mtbScaleColor;
+            ctx.beginPath();
+            ctx.moveTo(halfSize - halfLineWidth, size + halfLineWidth);
+            ctx.lineTo(size + halfLineWidth, halfSize - halfLineWidth);
+            ctx.stroke();
+            ctx.beginPath();
+            ctx.moveTo(-halfLineWidth, halfSize + halfLineWidth);
+            ctx.lineTo(halfSize + halfLineWidth, -halfLineWidth);
+            ctx.stroke();
+        }
+    }
+    return ctx?.createPattern(canvas, 'repeat') || backgroundColor;
+}
+
+const patterns: Record<string, string | CanvasPattern> = {};
+export function getHighwayColor(
+    highway: string,
+    sacScale: string | undefined,
+    mtbScale: string | undefined
+) {
+    let backgroundColor = highwayColors[highway] ? highwayColors[highway] : highwayColors.missing;
+    let sacScaleColor = sacScale ? sacScaleColors[sacScale] : undefined;
+    let mtbScaleColor = mtbScale ? mtbScaleColors[mtbScale] : undefined;
+    if (sacScale || mtbScale) {
+        let patternId = `${backgroundColor}-${[sacScale, mtbScale].filter((x) => x).join('-')}`;
+        if (!patterns[patternId]) {
+            patterns[patternId] = createPattern(backgroundColor, sacScaleColor, mtbScaleColor);
+        }
+        return patterns[patternId];
+    }
+    return backgroundColor;
+}
+
+const maxSlope = 20;
+export function getSlopeColor(slope: number): string {
+    if (slope > maxSlope) {
+        slope = maxSlope;
+    } else if (slope < -maxSlope) {
+        slope = -maxSlope;
+    }
+
+    let v = slope / maxSlope;
+    v = 1 / (1 + Math.exp(-6 * v));
+    v = v - 0.5;
+
+    let hue = ((0.5 - v) * 120).toString(10);
+    let lightness = 90 - Math.abs(v) * 70;
+
+    return `hsl(${hue},70%,${lightness}%)`;
+}

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

@@ -0,0 +1,864 @@
+{
+    "_info": "Taken from https://github.com/mjaschen/gravel-overlay, with prior authorization from the author (https://github.com/gpxstudio/gpx.studio/issues/32#issuecomment-2320219804).",
+    "version": 8,
+    "name": "Gravel Overlay",
+    "metadata": {
+        "mapbox:autocomposite": false,
+        "mapbox:type": "template",
+        "maputnik:renderer": "mbgljs",
+        "openmaptiles:version": "3.x",
+        "openmaptiles:mapbox:owner": "openmaptiles",
+        "openmaptiles:mapbox:source:url": "mapbox://openmaptiles.4qljc88t"
+    },
+    "sources": {
+        "openmaptiles": {
+            "type": "vector",
+            "url": "https://tiles.bikerouter.de/services/gravel/"
+        }
+    },
+    "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",
+            "type": "background",
+            "layout": {
+                "visibility": "none"
+            },
+            "paint": {
+                "background-color": "rgba(145, 211, 164, 1)"
+            }
+        },
+        {
+            "id": "debug_rail",
+            "type": "line",
+            "source": "openmaptiles",
+            "source-layer": "transportation",
+            "filter": ["all", ["==", "$type", "LineString"], ["in", "class", "rail"]],
+            "layout": {
+                "visibility": "none"
+            },
+            "paint": {
+                "line-color": "rgba(144, 144, 144, 1)"
+            }
+        },
+        {
+            "id": "debug_road",
+            "type": "line",
+            "source": "openmaptiles",
+            "source-layer": "transportation",
+            "filter": [
+                "all",
+                ["==", "$type", "LineString"],
+                [
+                    "in",
+                    "class",
+                    "motorway",
+                    "trunk",
+                    "primary",
+                    "secondary",
+                    "tertiary",
+                    "minor",
+                    "residential",
+                    "track",
+                    "path"
+                ]
+            ],
+            "layout": {
+                "visibility": "none"
+            },
+            "paint": {
+                "line-color": "rgba(204, 204, 204, 1)",
+                "line-width": {
+                    "stops": [
+                        [10, 0.5],
+                        [12, 1]
+                    ]
+                }
+            }
+        },
+        {
+            "id": "tr_X_g45-bg",
+            "type": "line",
+            "source": "openmaptiles",
+            "source-layer": "transportation",
+            "minzoom": 10,
+            "filter": [
+                "all",
+                ["==", ["geometry-type"], "LineString"],
+                ["match", ["get", "class"], ["track"], true, false],
+                [
+                    "any",
+                    ["match", ["get", "tracktype"], ["grade5"], true, false],
+                    [
+                        "all",
+                        ["match", ["get", "tracktype"], ["grade4"], true, false],
+                        ["match", ["get", "surface"], ["dirt", "grass", "mud", "sand"], true, false]
+                    ]
+                ]
+            ],
+            "layout": {
+                "line-cap": "square",
+                "line-join": "bevel",
+                "visibility": "visible"
+            },
+            "paint": {
+                "line-color": "rgba(255, 0, 0, 0.7)",
+                "line-width": {
+                    "base": 1.55,
+                    "stops": [
+                        [10, 0.4],
+                        [12, 1.3],
+                        [14, 1.7]
+                    ]
+                },
+                "line-dasharray": [1],
+                "line-offset": {
+                    "stops": [
+                        [12, 0],
+                        [13, 1.8],
+                        [15, 3],
+                        [16, 4]
+                    ],
+                    "base": 1.55
+                }
+            }
+        },
+        {
+            "id": "tr_X_g45",
+            "type": "line",
+            "source": "openmaptiles",
+            "source-layer": "transportation",
+            "minzoom": 10,
+            "filter": [
+                "all",
+                ["==", ["geometry-type"], "LineString"],
+                ["match", ["get", "class"], ["track"], true, false],
+                [
+                    "any",
+                    ["match", ["get", "tracktype"], ["grade5"], true, false],
+                    [
+                        "all",
+                        ["match", ["get", "tracktype"], ["grade4"], true, false],
+                        ["match", ["get", "surface"], ["dirt", "grass", "mud", "sand"], true, false]
+                    ]
+                ]
+            ],
+            "layout": {
+                "line-cap": "square",
+                "line-join": "bevel",
+                "visibility": "visible"
+            },
+            "paint": {
+                "line-color": "rgba(255, 255, 0, 0.7)",
+                "line-width": {
+                    "base": 1.55,
+                    "stops": [
+                        [10, 0.4],
+                        [12, 1.3],
+                        [14, 1.7]
+                    ]
+                },
+                "line-dasharray": [2, 2],
+                "line-offset": {
+                    "stops": [
+                        [12, 0],
+                        [13, 1.8],
+                        [15, 3],
+                        [16, 4]
+                    ],
+                    "base": 1.55
+                }
+            }
+        },
+        {
+            "id": "tr_B_g3",
+            "type": "line",
+            "source": "openmaptiles",
+            "source-layer": "transportation",
+            "minzoom": 10,
+            "filter": [
+                "all",
+                ["==", ["geometry-type"], "LineString"],
+                ["==", ["get", "class"], "track"],
+                ["match", ["get", "tracktype"], ["grade3"], true, false],
+                [
+                    "any",
+                    ["match", ["get", "smoothness"], ["bad", "good", "intermediate"], true, false],
+                    [
+                        "match",
+                        ["get", "surface"],
+                        ["compacted", "fine_gravel", "gravel"],
+                        true,
+                        false
+                    ]
+                ]
+            ],
+            "layout": {
+                "line-cap": "butt",
+                "line-join": "miter",
+                "visibility": "visible"
+            },
+            "paint": {
+                "line-color": "rgba(235, 6, 158, 1)",
+                "line-width": {
+                    "base": 1.55,
+                    "stops": [
+                        [10, 0.4],
+                        [12, 1.3],
+                        [14, 1.7]
+                    ]
+                },
+                "line-offset": {
+                    "stops": [
+                        [12, 0],
+                        [13, 2],
+                        [15, 4],
+                        [16, 5]
+                    ],
+                    "base": 1.55
+                },
+                "line-dasharray": [3, 1.5]
+            }
+        },
+        {
+            "id": "tr_A_g2-plain-case",
+            "type": "line",
+            "source": "openmaptiles",
+            "source-layer": "transportation",
+            "minzoom": 10,
+            "filter": [
+                "all",
+                ["==", ["geometry-type"], "LineString"],
+                ["==", ["get", "class"], "track"],
+                ["match", ["get", "tracktype"], ["grade2"], true, false],
+                ["!", ["has", "surface"]],
+                ["!", ["has", "smoothness"]]
+            ],
+            "layout": {
+                "line-cap": "butt",
+                "line-join": "miter",
+                "visibility": "visible"
+            },
+            "paint": {
+                "line-color": "rgba(255, 255, 255, 0.6)",
+                "line-width": {
+                    "base": 1.55,
+                    "stops": [
+                        [10, 0.8],
+                        [12, 3],
+                        [14, 4]
+                    ]
+                },
+                "line-offset": {
+                    "stops": [
+                        [12, 0],
+                        [13, 1.5],
+                        [15, 3],
+                        [16, 4]
+                    ],
+                    "base": 1.55
+                }
+            }
+        },
+        {
+            "id": "tr_A_g2-plain",
+            "type": "line",
+            "source": "openmaptiles",
+            "source-layer": "transportation",
+            "minzoom": 10,
+            "filter": [
+                "all",
+                ["==", ["geometry-type"], "LineString"],
+                ["==", ["get", "class"], "track"],
+                ["match", ["get", "tracktype"], ["grade2"], true, false],
+                ["!", ["has", "surface"]],
+                ["!", ["has", "smoothness"]]
+            ],
+            "layout": {
+                "line-cap": "butt",
+                "line-join": "miter",
+                "visibility": "visible"
+            },
+            "paint": {
+                "line-color": "rgba(235, 6, 158, 0.6)",
+                "line-width": {
+                    "base": 1.55,
+                    "stops": [
+                        [10, 0.5],
+                        [12, 1.5],
+                        [14, 2]
+                    ]
+                },
+                "line-offset": {
+                    "stops": [
+                        [12, 0],
+                        [13, 1.5],
+                        [15, 3],
+                        [16, 4]
+                    ],
+                    "base": 1.55
+                },
+                "line-dasharray": [5, 1]
+            }
+        },
+        {
+            "id": "tr_A_g2-case",
+            "type": "line",
+            "source": "openmaptiles",
+            "source-layer": "transportation",
+            "minzoom": 10,
+            "filter": [
+                "all",
+                ["==", ["geometry-type"], "LineString"],
+                ["==", ["get", "class"], "track"],
+                ["match", ["get", "tracktype"], ["grade2"], true, false],
+                [
+                    "any",
+                    [
+                        "match",
+                        ["get", "surface"],
+                        ["compacted", "fine_gravel", "gravel"],
+                        true,
+                        false
+                    ],
+                    ["match", ["get", "smoothness"], ["bad", "good", "intermediate"], true, false]
+                ]
+            ],
+            "layout": {
+                "line-cap": "butt",
+                "line-join": "miter",
+                "visibility": "visible"
+            },
+            "paint": {
+                "line-color": "rgba(255, 255, 255, 1)",
+                "line-width": {
+                    "base": 1.55,
+                    "stops": [
+                        [10, 0.8],
+                        [12, 3],
+                        [14, 4]
+                    ]
+                },
+                "line-offset": {
+                    "stops": [
+                        [12, 0],
+                        [13, 2],
+                        [15, 4],
+                        [16, 5]
+                    ],
+                    "base": 1.55
+                }
+            }
+        },
+        {
+            "id": "tr_A_g2",
+            "type": "line",
+            "source": "openmaptiles",
+            "source-layer": "transportation",
+            "minzoom": 10,
+            "filter": [
+                "all",
+                ["==", ["geometry-type"], "LineString"],
+                ["==", ["get", "class"], "track"],
+                ["match", ["get", "tracktype"], ["grade2"], true, false],
+                [
+                    "any",
+                    [
+                        "match",
+                        ["get", "surface"],
+                        ["compacted", "fine_gravel", "gravel"],
+                        true,
+                        false
+                    ],
+                    ["match", ["get", "smoothness"], ["bad", "good", "intermediate"], true, false]
+                ]
+            ],
+            "layout": {
+                "line-cap": "butt",
+                "line-join": "miter",
+                "visibility": "visible"
+            },
+            "paint": {
+                "line-color": "rgba(235, 6, 158, 1)",
+                "line-width": {
+                    "base": 1.55,
+                    "stops": [
+                        [10, 0.5],
+                        [12, 1.5],
+                        [14, 2]
+                    ]
+                },
+                "line-offset": {
+                    "stops": [
+                        [12, 0],
+                        [13, 2],
+                        [15, 4],
+                        [16, 5]
+                    ],
+                    "base": 1.55
+                }
+            }
+        },
+        {
+            "id": "p_X-bg",
+            "type": "line",
+            "source": "openmaptiles",
+            "source-layer": "transportation",
+            "minzoom": 10,
+            "filter": [
+                "all",
+                ["==", "$type", "LineString"],
+                ["in", "class", "path"],
+                ["in", "smoothness", "very_bad", "horrible", "very_horrible", "impassable"],
+                ["!in", "tracktype", "grade5", "grade4"]
+            ],
+            "layout": {
+                "line-cap": "square",
+                "line-join": "bevel",
+                "visibility": "visible"
+            },
+            "paint": {
+                "line-color": "rgba(255, 0, 0, 0.7)",
+                "line-width": {
+                    "base": 1.55,
+                    "stops": [
+                        [10, 0.4],
+                        [12, 1.1],
+                        [14, 1.5]
+                    ]
+                },
+                "line-offset": {
+                    "stops": [
+                        [12, 0],
+                        [13, 1.8],
+                        [15, 3],
+                        [16, 4]
+                    ],
+                    "base": 1.55
+                }
+            }
+        },
+        {
+            "id": "p_X",
+            "type": "line",
+            "source": "openmaptiles",
+            "source-layer": "transportation",
+            "minzoom": 10,
+            "filter": [
+                "all",
+                ["==", "$type", "LineString"],
+                ["in", "class", "path"],
+                ["in", "smoothness", "very_bad", "horrible", "very_horrible", "impassable"],
+                ["!in", "tracktype", "grade5", "grade4"]
+            ],
+            "layout": {
+                "line-cap": "square",
+                "line-join": "bevel",
+                "visibility": "visible"
+            },
+            "paint": {
+                "line-color": "rgba(255, 255, 0, 0.7)",
+                "line-width": {
+                    "base": 1.55,
+                    "stops": [
+                        [10, 0.4],
+                        [12, 1.1],
+                        [14, 1.5]
+                    ]
+                },
+                "line-dasharray": [2, 2],
+                "line-offset": {
+                    "stops": [
+                        [12, 0],
+                        [13, 1.8],
+                        [15, 3],
+                        [16, 4]
+                    ],
+                    "base": 1.55
+                }
+            }
+        },
+        {
+            "id": "p_B",
+            "type": "line",
+            "source": "openmaptiles",
+            "source-layer": "transportation",
+            "minzoom": 10,
+            "filter": [
+                "all",
+                ["==", "$type", "LineString"],
+                ["==", "class", "path"],
+                ["in", "smoothness", "good", "intermediate", "bad"],
+                [
+                    "!in",
+                    "surface",
+                    "gravel",
+                    "fine_gravel",
+                    "compacted",
+                    "cobblestone",
+                    "sett",
+                    "unhewn_cobblestone",
+                    "paving_stones"
+                ],
+                ["!in", "bicycle", "no"],
+                ["!in", "access", "no"]
+            ],
+            "layout": {
+                "line-cap": "butt",
+                "line-join": "miter",
+                "visibility": "visible"
+            },
+            "paint": {
+                "line-color": "rgba(235, 6, 158, 1)",
+                "line-width": {
+                    "base": 1.55,
+                    "stops": [
+                        [10, 0.4],
+                        [12, 1.1],
+                        [14, 1.5]
+                    ]
+                },
+                "line-offset": {
+                    "stops": [
+                        [12, 0],
+                        [13, 2],
+                        [15, 4],
+                        [16, 5]
+                    ],
+                    "base": 1.55
+                },
+                "line-dasharray": [1.5, 1]
+            }
+        },
+        {
+            "id": "p_A-case",
+            "type": "line",
+            "metadata": {
+                "maputnik:comment": "Gravel surface with ok-ish smoothness"
+            },
+            "source": "openmaptiles",
+            "source-layer": "transportation",
+            "minzoom": 10,
+            "filter": [
+                "all",
+                ["==", ["geometry-type"], "LineString"],
+                ["==", ["get", "class"], "path"],
+                [
+                    "any",
+                    ["match", ["get", "surface"], ["compacted", "fine_gravel"], true, false],
+                    [
+                        "all",
+                        ["match", ["get", "surface"], ["gravel"], true, false],
+                        [
+                            "match",
+                            ["get", "smoothness"],
+                            ["bad", "good", "intermediate"],
+                            true,
+                            false
+                        ]
+                    ]
+                ],
+                ["match", ["get", "bicycle"], ["no"], false, true],
+                ["match", ["get", "access"], ["no"], false, true]
+            ],
+            "layout": {
+                "line-cap": "butt",
+                "line-join": "miter",
+                "visibility": "visible"
+            },
+            "paint": {
+                "line-color": "rgba(255, 255, 255, 1)",
+                "line-width": {
+                    "base": 1.55,
+                    "stops": [
+                        [10, 0.7],
+                        [12, 2.5],
+                        [14, 3.2]
+                    ]
+                },
+                "line-offset": {
+                    "stops": [
+                        [12, 0],
+                        [13, 2],
+                        [15, 4],
+                        [16, 5]
+                    ],
+                    "base": 1.55
+                }
+            }
+        },
+        {
+            "id": "p_A",
+            "type": "line",
+            "metadata": {
+                "maputnik:comment": "Gravel surface with ok-ish smoothness"
+            },
+            "source": "openmaptiles",
+            "source-layer": "transportation",
+            "minzoom": 10,
+            "filter": [
+                "all",
+                ["==", ["geometry-type"], "LineString"],
+                ["==", ["get", "class"], "path"],
+                [
+                    "any",
+                    ["match", ["get", "surface"], ["compacted", "fine_gravel"], true, false],
+                    [
+                        "all",
+                        ["match", ["get", "surface"], ["gravel"], true, false],
+                        [
+                            "match",
+                            ["get", "smoothness"],
+                            ["bad", "good", "intermediate"],
+                            true,
+                            false
+                        ]
+                    ]
+                ],
+                ["match", ["get", "bicycle"], ["no"], false, true],
+                ["match", ["get", "access"], ["no"], false, true]
+            ],
+            "layout": {
+                "line-cap": "butt",
+                "line-join": "miter",
+                "visibility": "visible"
+            },
+            "paint": {
+                "line-color": "rgba(235, 6, 158, 1)",
+                "line-width": {
+                    "base": 1.55,
+                    "stops": [
+                        [10, 0.5],
+                        [12, 1.5],
+                        [14, 2]
+                    ]
+                },
+                "line-offset": {
+                    "stops": [
+                        [12, 0],
+                        [13, 2],
+                        [15, 4],
+                        [16, 5]
+                    ],
+                    "base": 1.55
+                }
+            }
+        },
+        {
+            "id": "r_X_cobbles-case",
+            "type": "line",
+            "source": "openmaptiles",
+            "source-layer": "transportation",
+            "minzoom": 10,
+            "filter": [
+                "all",
+                ["==", "$type", "LineString"],
+                ["in", "class", "minor", "service", "track", "path", "residential"],
+                ["in", "surface", "sett", "cobblestone", "unhewn_cobblestone"],
+                ["!in", "service", "driveway"]
+            ],
+            "layout": {
+                "line-cap": "butt",
+                "line-join": "miter",
+                "visibility": "visible"
+            },
+            "paint": {
+                "line-color": "rgba(0, 0, 0, 1)",
+                "line-width": {
+                    "base": 1.55,
+                    "stops": [
+                        [10, 0.5],
+                        [12, 1.5],
+                        [14, 2]
+                    ]
+                }
+            }
+        },
+        {
+            "id": "r_X_cobbles",
+            "type": "line",
+            "source": "openmaptiles",
+            "source-layer": "transportation",
+            "minzoom": 10,
+            "filter": [
+                "all",
+                ["==", "$type", "LineString"],
+                ["in", "class", "minor", "service", "track", "path", "residential"],
+                ["in", "surface", "sett", "cobblestone", "unhewn_cobblestone"],
+                ["!in", "service", "driveway"]
+            ],
+            "layout": {
+                "line-cap": "butt",
+                "line-join": "miter",
+                "visibility": "visible"
+            },
+            "paint": {
+                "line-color": "rgba(245, 255, 0, 1)",
+                "line-width": {
+                    "base": 1.55,
+                    "stops": [
+                        [10, 0.5],
+                        [12, 1.5],
+                        [14, 2]
+                    ]
+                },
+                "line-dasharray": [1.5, 1]
+            }
+        },
+        {
+            "id": "r_X-bg",
+            "type": "line",
+            "source": "openmaptiles",
+            "source-layer": "transportation",
+            "minzoom": 10,
+            "filter": [
+                "all",
+                ["==", "$type", "LineString"],
+                ["in", "class", "minor"],
+                ["in", "smoothness", "very_bad", "horrible", "very_horrible", "impassable"],
+                ["!in", "surface", "sett", "cobblestone", "unhewn_cobblestone"]
+            ],
+            "layout": {
+                "line-cap": "square",
+                "line-join": "bevel",
+                "visibility": "visible"
+            },
+            "paint": {
+                "line-color": "rgba(255, 0, 0, 0.7)",
+                "line-width": {
+                    "base": 1.55,
+                    "stops": [
+                        [10, 0.4],
+                        [12, 1.1],
+                        [14, 1.5]
+                    ]
+                }
+            }
+        },
+        {
+            "id": "r_X",
+            "type": "line",
+            "source": "openmaptiles",
+            "source-layer": "transportation",
+            "minzoom": 10,
+            "filter": [
+                "all",
+                ["==", "$type", "LineString"],
+                ["in", "class", "minor"],
+                ["in", "smoothness", "very_bad", "horrible", "very_horrible", "impassable"],
+                ["!in", "surface", "sett", "cobblestone", "unhewn_cobblestone"]
+            ],
+            "layout": {
+                "line-cap": "square",
+                "line-join": "bevel",
+                "visibility": "visible"
+            },
+            "paint": {
+                "line-color": "rgba(255, 255, 0, 0.7)",
+                "line-width": {
+                    "base": 1.55,
+                    "stops": [
+                        [10, 0.4],
+                        [12, 1.1],
+                        [14, 1.5]
+                    ]
+                },
+                "line-dasharray": [2, 2]
+            }
+        },
+        {
+            "id": "r_A_case",
+            "type": "line",
+            "source": "openmaptiles",
+            "source-layer": "transportation",
+            "minzoom": 10,
+            "filter": [
+                "all",
+                ["==", "$type", "LineString"],
+                ["in", "class", "minor", "residential", "service"],
+                ["in", "surface", "gravel", "compacted", "fine_gravel"],
+                ["!in", "service", "driveway", "parking_aisle", "drive-through", "emergency_access"]
+            ],
+            "layout": {
+                "line-cap": "square",
+                "line-join": "bevel",
+                "visibility": "visible"
+            },
+            "paint": {
+                "line-color": "rgba(255, 255, 255, 1)",
+                "line-width": {
+                    "base": 1.55,
+                    "stops": [
+                        [10, 0.8],
+                        [12, 3],
+                        [14, 4]
+                    ]
+                }
+            }
+        },
+        {
+            "id": "r_A",
+            "type": "line",
+            "source": "openmaptiles",
+            "source-layer": "transportation",
+            "minzoom": 10,
+            "filter": [
+                "all",
+                ["==", "$type", "LineString"],
+                ["in", "class", "minor", "residential", "service"],
+                ["in", "surface", "gravel", "compacted", "fine_gravel"],
+                ["!in", "service", "driveway", "parking_aisle", "drive-through", "emergency_access"]
+            ],
+            "layout": {
+                "line-cap": "square",
+                "line-join": "bevel",
+                "visibility": "visible"
+            },
+            "paint": {
+                "line-color": "rgba(235, 6, 158, 1)",
+                "line-width": {
+                    "base": 1.55,
+                    "stops": [
+                        [10, 0.5],
+                        [12, 1.5],
+                        [14, 2]
+                    ]
+                }
+            }
+        },
+        {
+            "id": "cemetery",
+            "type": "symbol",
+            "source": "openmaptiles",
+            "source-layer": "landuse",
+            "filter": ["all", ["==", "class", "cemetery"]],
+            "layout": {
+                "icon-image": "cemetery_11",
+                "icon-rotation-alignment": "map",
+                "icon-size": 1.5
+            }
+        },
+        {
+            "id": "drinking_water",
+            "type": "symbol",
+            "source": "openmaptiles",
+            "source-layer": "poi",
+            "minzoom": 9,
+            "maxzoom": 20,
+            "filter": [
+                "any",
+                ["==", "class", "drinking_water"],
+                ["==", "subclass", "drinking_water"]
+            ],
+            "layout": {
+                "icon-image": "drinking_water_11",
+                "visibility": "visible",
+                "icon-rotation-alignment": "map",
+                "icon-size": 1.4
+            }
+        }
+    ],
+    "id": "basic",
+    "owner": "Marcus Jaschen"
+}

website/src/lib/assets/surfaces.ts

@@ -1,31 +0,0 @@
-export const surfaceColors: { [key: string]: string } = {
-    'missing': '#d1d1d1',
-    'paved': '#8c8c8c',
-    'unpaved': '#6b443a',
-    'asphalt': '#8c8c8c',
-    'concrete': '#8c8c8c',
-    'chipseal': '#8c8c8c',
-    'cobblestone': '#ffd991',
-    'unhewn_cobblestone': '#ffd991',
-    'paving_stones': '#8c8c8c',
-    'stepping_stones': '#c7b2db',
-    'sett': '#ffd991',
-    'metal': '#8c8c8c',
-    'wood': '#6b443a',
-    'compacted': '#ffffa8',
-    'fine_gravel': '#ffffa8',
-    'gravel': '#ffffa8',
-    'pebblestone': '#ffffa8',
-    'rock': '#ffd991',
-    'dirt': '#ffffa8',
-    'ground': '#6b443a',
-    'earth': '#6b443a',
-    'snow': '#bdfffc',
-    'ice': '#bdfffc',
-    'salt': '#b6c0f2',
-    'mud': '#6b443a',
-    'sand': '#ffffc4',
-    'woodchips': '#6b443a',
-    'grass': '#61b55c',
-    'grass_paver': '#61b55c'
-}

website/src/lib/assets/symbols.ts

@@ -1,6 +1,67 @@
-import { Landmark, Icon, Shell, Bike, Building, Tent, Car, Wrench, ShoppingBasket, Droplet, DoorOpen, Trees, Fuel, Home, Info, TreeDeciduous, CircleParking, Cross, Utensils, Construction, BrickWall, ShowerHead, Mountain, Phone, TrainFront, Bed, Binoculars, TriangleAlert, Anchor } from "lucide-svelte";
-import { Landmark as LandmarkSvg, Shell as ShellSvg, Bike as BikeSvg, Building as BuildingSvg, Tent as TentSvg, Car as CarSvg, Wrench as WrenchSvg, ShoppingBasket as ShoppingBasketSvg, Droplet as DropletSvg, DoorOpen as DoorOpenSvg, Trees as TreesSvg, Fuel as FuelSvg, Home as HomeSvg, Info as InfoSvg, TreeDeciduous as TreeDeciduousSvg, CircleParking as CircleParkingSvg, Cross as CrossSvg, Utensils as UtensilsSvg, Construction as ConstructionSvg, BrickWall as BrickWallSvg, ShowerHead as ShowerHeadSvg, Mountain as MountainSvg, Phone as PhoneSvg, TrainFront as TrainFrontSvg, Bed as BedSvg, Binoculars as BinocularsSvg, TriangleAlert as TriangleAlertSvg, Anchor as AnchorSvg } from "lucide-static";
-import type { ComponentType } from "svelte";
+import {
+    Landmark,
+    Icon,
+    Shell,
+    Bike,
+    Building,
+    Tent,
+    Car,
+    Wrench,
+    ShoppingBasket,
+    Droplet,
+    DoorOpen,
+    Trees,
+    Fuel,
+    Home,
+    Info,
+    TreeDeciduous,
+    CircleParking,
+    Cross,
+    Utensils,
+    Construction,
+    BrickWall,
+    ShowerHead,
+    Mountain,
+    Phone,
+    TrainFront,
+    Bed,
+    Binoculars,
+    TriangleAlert,
+    Anchor,
+    Toilet,
+} from 'lucide-svelte';
+import {
+    Landmark as LandmarkSvg,
+    Shell as ShellSvg,
+    Bike as BikeSvg,
+    Building as BuildingSvg,
+    Tent as TentSvg,
+    Car as CarSvg,
+    Wrench as WrenchSvg,
+    ShoppingBasket as ShoppingBasketSvg,
+    Droplet as DropletSvg,
+    DoorOpen as DoorOpenSvg,
+    Trees as TreesSvg,
+    Fuel as FuelSvg,
+    Home as HomeSvg,
+    Info as InfoSvg,
+    TreeDeciduous as TreeDeciduousSvg,
+    CircleParking as CircleParkingSvg,
+    Cross as CrossSvg,
+    Utensils as UtensilsSvg,
+    Construction as ConstructionSvg,
+    BrickWall as BrickWallSvg,
+    ShowerHead as ShowerHeadSvg,
+    Mountain as MountainSvg,
+    Phone as PhoneSvg,
+    TrainFront as TrainFrontSvg,
+    Bed as BedSvg,
+    Binoculars as BinocularsSvg,
+    TriangleAlert as TriangleAlertSvg,
+    Anchor as AnchorSvg,
+    Toilet as ToiletSvg,
+} from 'lucide-static';
+import type { ComponentType } from 'svelte';
 
 export type Symbol = {
     value: string;
@@ -20,16 +81,28 @@ export const symbols: { [key: string]: Symbol } = {
     campground: { value: 'Campground', icon: Tent, iconSvg: TentSvg },
     car: { value: 'Car', icon: Car, iconSvg: CarSvg },
     car_repair: { value: 'Car Repair', icon: Wrench, iconSvg: WrenchSvg },
-    convenience_store: { value: 'Convenience Store', icon: ShoppingBasket, iconSvg: ShoppingBasketSvg },
+    convenience_store: {
+        value: 'Convenience Store',
+        icon: ShoppingBasket,
+        iconSvg: ShoppingBasketSvg,
+    },
     crossing: { value: 'Crossing' },
-    department_store: { value: 'Department Store', icon: ShoppingBasket, iconSvg: ShoppingBasketSvg },
+    department_store: {
+        value: 'Department Store',
+        icon: ShoppingBasket,
+        iconSvg: ShoppingBasketSvg,
+    },
     drinking_water: { value: 'Drinking Water', icon: Droplet, iconSvg: DropletSvg },
     exit: { value: 'Exit', icon: DoorOpen, iconSvg: DoorOpenSvg },
     lodge: { value: 'Lodge', icon: Home, iconSvg: HomeSvg },
     lodging: { value: 'Lodging', icon: Bed, iconSvg: BedSvg },
     forest: { value: 'Forest', icon: Trees, iconSvg: TreesSvg },
     gas_station: { value: 'Gas Station', icon: Fuel, iconSvg: FuelSvg },
-    ground_transportation: { value: 'Ground Transportation', icon: TrainFront, iconSvg: TrainFrontSvg },
+    ground_transportation: {
+        value: 'Ground Transportation',
+        icon: TrainFront,
+        iconSvg: TrainFrontSvg,
+    },
     hotel: { value: 'Hotel', icon: Bed, iconSvg: BedSvg },
     house: { value: 'House', icon: Home, iconSvg: HomeSvg },
     information: { value: 'Information', icon: Info, iconSvg: InfoSvg },
@@ -39,7 +112,7 @@ export const symbols: { [key: string]: Symbol } = {
     picnic_area: { value: 'Picnic Area', icon: Utensils, iconSvg: UtensilsSvg },
     restaurant: { value: 'Restaurant', icon: Utensils, iconSvg: UtensilsSvg },
     restricted_area: { value: 'Restricted Area', icon: Construction, iconSvg: ConstructionSvg },
-    restroom: { value: 'Restroom' },
+    restroom: { value: 'Restroom', icon: Toilet, iconSvg: ToiletSvg },
     road: { value: 'Road', icon: BrickWall, iconSvg: BrickWallSvg },
     scenic_area: { value: 'Scenic Area', icon: Binoculars, iconSvg: BinocularsSvg },
     shelter: { value: 'Shelter', icon: Tent, iconSvg: TentSvg },
@@ -55,6 +128,6 @@ export function getSymbolKey(value: string | undefined): string | undefined {
     if (value === undefined) {
         return undefined;
     } else {
-        return Object.keys(symbols).find(key => symbols[key].value === value);
+        return Object.keys(symbols).find((key) => symbols[key].value === value);
     }
-}
+}

website/src/lib/components/AlgoliaDocSearch.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+    import docsearch from '@docsearch/js';
+    import '@docsearch/css';
+    import { onMount } from 'svelte';
+    import { _, locale, waitLocale } from 'svelte-i18n';
+
+    let mounted = false;
+
+    function initDocsearch() {
+        docsearch({
+            appId: '21XLD94PE3',
+            apiKey: 'd2c1ed6cb0ed12adb2bd84eb2a38494d',
+            indexName: 'gpx',
+            container: '#docsearch',
+            searchParameters: {
+                facetFilters: ['lang:' + ($locale ?? 'en')],
+            },
+            placeholder: $_('docs.search.search'),
+            disableUserPersonalization: true,
+            translations: {
+                button: {
+                    buttonText: $_('docs.search.search'),
+                    buttonAriaLabel: $_('docs.search.search'),
+                },
+                modal: {
+                    searchBox: {
+                        resetButtonTitle: $_('docs.search.clear'),
+                        resetButtonAriaLabel: $_('docs.search.clear'),
+                        cancelButtonText: $_('docs.search.cancel'),
+                        cancelButtonAriaLabel: $_('docs.search.cancel'),
+                        searchInputLabel: $_('docs.search.search'),
+                    },
+                    footer: {
+                        selectText: $_('docs.search.to_select'),
+                        navigateText: $_('docs.search.to_navigate'),
+                        closeText: $_('docs.search.to_close'),
+                    },
+                    noResultsScreen: {
+                        noResultsText: $_('docs.search.no_results'),
+                        suggestedQueryText: $_('docs.search.no_results_suggestion'),
+                    },
+                },
+            },
+        });
+    }
+
+    onMount(() => {
+        mounted = true;
+    });
+
+    $: if (mounted && $locale) {
+        waitLocale().then(initDocsearch);
+    }
+</script>
+
+<svelte:head>
+    <link rel="preconnect" href="https://21XLD94PE3-dsn.algolia.net" crossorigin />
+</svelte:head>
+
+<div id="docsearch" {...$$restProps}></div>

website/src/lib/components/ButtonWithTooltip.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+    import { Button } from '$lib/components/ui/button/index.js';
+    import * as Tooltip from '$lib/components/ui/tooltip/index.js';
+    import type { Builder } from 'bits-ui';
+
+    export let variant:
+        | 'default'
+        | 'secondary'
+        | 'link'
+        | 'destructive'
+        | 'outline'
+        | 'ghost'
+        | undefined = 'default';
+    export let label: string;
+    export let side: 'top' | 'right' | 'bottom' | 'left' = 'top';
+    export let builders: Builder[] = [];
+</script>
+
+<Tooltip.Root>
+    <Tooltip.Trigger asChild let:builder>
+        <Button builders={[...builders, builder]} {variant} {...$$restProps} on:click>
+            <slot />
+        </Button>
+    </Tooltip.Trigger>
+    <Tooltip.Content {side}>
+        <span>{label}</span>
+    </Tooltip.Content>
+</Tooltip.Root>

website/src/lib/components/CoordinatesPopup.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+    import { map } from '$lib/stores';
+    import { trackpointPopup } from '$lib/components/gpx-layer/GPXLayerPopup';
+    import { TrackPoint } from 'gpx';
+
+    $: if ($map) {
+        $map.on('contextmenu', (e) => {
+            trackpointPopup?.setItem({
+                item: new TrackPoint({
+                    attributes: {
+                        lat: e.lngLat.lat,
+                        lon: e.lngLat.lng,
+                    },
+                }),
+            });
+        });
+    }
+</script>

website/src/lib/components/Export.svelte

@@ -1,181 +1,190 @@
 <script lang="ts">
-	import { Button } from '$lib/components/ui/button';
-	import { Label } from '$lib/components/ui/label';
-	import { Checkbox } from '$lib/components/ui/checkbox';
-	import { Separator } from '$lib/components/ui/separator';
-	import { Dialog } from 'bits-ui';
-	import {
-		currentTool,
-		exportAllFiles,
-		exportSelectedFiles,
-		ExportState,
-		exportState,
-		gpxStatistics
-	} from '$lib/stores';
-	import { fileObservers } from '$lib/db';
-	import {
-		Download,
-		Zap,
-		BrickWall,
-		HeartPulse,
-		Orbit,
-		Thermometer,
-		SquareActivity
-	} from 'lucide-svelte';
-	import { _ } from 'svelte-i18n';
-	import { selection } from './file-list/Selection';
-	import { get } from 'svelte/store';
-	import { GPXStatistics } from 'gpx';
-	import { ListRootItem } from './file-list/FileList';
+    import { Button } from '$lib/components/ui/button';
+    import { Label } from '$lib/components/ui/label';
+    import { Checkbox } from '$lib/components/ui/checkbox';
+    import { Separator } from '$lib/components/ui/separator';
+    import { Dialog } from 'bits-ui';
+    import {
+        currentTool,
+        exportAllFiles,
+        exportSelectedFiles,
+        ExportState,
+        exportState,
+        gpxStatistics,
+    } from '$lib/stores';
+    import { fileObservers } from '$lib/db';
+    import {
+        Download,
+        Zap,
+        Earth,
+        HeartPulse,
+        Orbit,
+        Thermometer,
+        SquareActivity,
+    } from 'lucide-svelte';
+    import { _ } from 'svelte-i18n';
+    import { selection } from './file-list/Selection';
+    import { get } from 'svelte/store';
+    import { GPXStatistics } from 'gpx';
+    import { ListRootItem } from './file-list/FileList';
 
-	let open = false;
-	let exportOptions: Record<string, boolean> = {
-		time: true,
-		surface: true,
-		hr: true,
-		cad: true,
-		atemp: true,
-		power: true
-	};
-	let hide: Record<string, boolean> = {
-		time: false,
-		surface: false,
-		hr: false,
-		cad: false,
-		atemp: false,
-		power: false
-	};
+    let open = false;
+    let exportOptions: Record<string, boolean> = {
+        time: true,
+        hr: true,
+        cad: true,
+        atemp: true,
+        power: true,
+        extensions: true,
+    };
+    let hide: Record<string, boolean> = {
+        time: false,
+        hr: false,
+        cad: false,
+        atemp: false,
+        power: false,
+        extensions: false,
+    };
 
-	$: if ($exportState !== ExportState.NONE) {
-		open = true;
-		$currentTool = null;
+    $: if ($exportState !== ExportState.NONE) {
+        open = true;
+        $currentTool = null;
 
-		let statistics = $gpxStatistics;
-		if ($exportState === ExportState.ALL) {
-			statistics = Array.from($fileObservers.values())
-				.map((file) => get(file)?.statistics)
-				.reduce((acc, cur) => {
-					if (cur !== undefined) {
-						acc.mergeWith(cur.getStatisticsFor(new ListRootItem()));
-					}
-					return acc;
-				}, new GPXStatistics());
-		}
+        let statistics = $gpxStatistics;
+        if ($exportState === ExportState.ALL) {
+            statistics = Array.from($fileObservers.values())
+                .map((file) => get(file)?.statistics)
+                .reduce((acc, cur) => {
+                    if (cur !== undefined) {
+                        acc.mergeWith(cur.getStatisticsFor(new ListRootItem()));
+                    }
+                    return acc;
+                }, new GPXStatistics());
+        }
 
-		hide.time = statistics.global.time.total === 0;
-		hide.hr = statistics.global.hr.count === 0;
-		hide.cad = statistics.global.cad.count === 0;
-		hide.atemp = statistics.global.atemp.count === 0;
-		hide.power = statistics.global.power.count === 0;
-	}
+        hide.time = statistics.global.time.total === 0;
+        hide.hr = statistics.global.hr.count === 0;
+        hide.cad = statistics.global.cad.count === 0;
+        hide.atemp = statistics.global.atemp.count === 0;
+        hide.power = statistics.global.power.count === 0;
+        hide.extensions = Object.keys(statistics.global.extensions).length === 0;
+    }
 
-	$: exclude = Object.keys(exportOptions).filter((key) => !exportOptions[key]);
+    $: exclude = Object.keys(exportOptions).filter((key) => !exportOptions[key]);
 </script>
 
 <Dialog.Root
-	bind:open
-	onOpenChange={(isOpen) => {
-		if (!isOpen) {
-			$exportState = ExportState.NONE;
-		}
-	}}
+    bind:open
+    onOpenChange={(isOpen) => {
+        if (!isOpen) {
+            $exportState = ExportState.NONE;
+        }
+    }}
 >
-	<Dialog.Trigger class="hidden" />
-	<Dialog.Portal>
-		<Dialog.Content
-			class="fixed left-[50%] top-[50%] z-50 w-fit max-w-full translate-x-[-50%] translate-y-[-50%] flex flex-col items-center gap-3 border bg-background p-3 shadow-lg rounded-md"
-		>
-			<div
-				class="w-full flex flex-row items-center justify-center gap-4 border rounded-md p-2 bg-accent"
-			>
-				<span>⚠️</span>
-				<span class="max-w-96 text-sm">
-					{$_('menu.support_message')}
-				</span>
-			</div>
-			<div class="w-full flex flex-row flex-wrap gap-2">
-				<Button class="bg-support grow" href="https://ko-fi.com/gpxstudio" target="_blank">
-					{$_('menu.support_button')}
-					<span class="ml-2">🙏</span>
-				</Button>
-				<Button
-					variant="outline"
-					class="grow"
-					on:click={() => {
-						if ($exportState === ExportState.SELECTION) {
-							exportSelectedFiles(exclude);
-						} else if ($exportState === ExportState.ALL) {
-							exportAllFiles(exclude);
-						}
-						open = false;
-						$exportState = ExportState.NONE;
-					}}
-				>
-					<Download size="16" class="mr-1" />
-					{#if $fileObservers.size === 1 || ($exportState === ExportState.SELECTION && $selection.size === 1)}
-						{$_('menu.download_file')}
-					{:else}
-						{$_('menu.download_files')}
-					{/if}
-				</Button>
-			</div>
-			<div class="w-full max-w-xl flex flex-col items-center gap-2">
-				<div class="w-full flex flex-row items-center gap-3">
-					<div class="grow">
-						<Separator />
-					</div>
-					<Label class="shrink-0">
-						{$_('menu.export_options')}
-					</Label>
-					<div class="grow">
-						<Separator />
-					</div>
-				</div>
-				<div class="flex flex-row flex-wrap justify-center gap-x-6 gap-y-2">
-					<div class="flex flex-row items-center gap-1.5 {hide.time ? 'hidden' : ''}">
-						<Checkbox id="export-time" bind:checked={exportOptions.time} />
-						<Label for="export-time" class="flex flex-row items-center gap-1">
-							<Zap size="16" />
-							{$_('quantities.time')}
-						</Label>
-					</div>
-					<div class="flex flex-row items-center gap-1.5">
-						<Checkbox id="export-surface" bind:checked={exportOptions.surface} />
-						<Label for="export-surface" class="flex flex-row items-center gap-1">
-							<BrickWall size="16" />
-							{$_('quantities.surface')}
-						</Label>
-					</div>
-					<div class="flex flex-row items-center gap-1.5 {hide.hr ? 'hidden' : ''}">
-						<Checkbox id="export-heartrate" bind:checked={exportOptions.hr} />
-						<Label for="export-heartrate" class="flex flex-row items-center gap-1">
-							<HeartPulse size="16" />
-							{$_('quantities.heartrate')}
-						</Label>
-					</div>
-					<div class="flex flex-row items-center gap-1.5 {hide.cad ? 'hidden' : ''}">
-						<Checkbox id="export-cadence" bind:checked={exportOptions.cad} />
-						<Label for="export-cadence" class="flex flex-row items-center gap-1">
-							<Orbit size="16" />
-							{$_('quantities.cadence')}
-						</Label>
-					</div>
-					<div class="flex flex-row items-center gap-1.5 {hide.atemp ? 'hidden' : ''}">
-						<Checkbox id="export-temperature" bind:checked={exportOptions.atemp} />
-						<Label for="export-temperature" class="flex flex-row items-center gap-1">
-							<Thermometer size="16" />
-							{$_('quantities.temperature')}
-						</Label>
-					</div>
-					<div class="flex flex-row items-center gap-1.5 {hide.power ? 'hidden' : ''}">
-						<Checkbox id="export-power" bind:checked={exportOptions.power} />
-						<Label for="export-power" class="flex flex-row items-center gap-1">
-							<SquareActivity size="16" />
-							{$_('quantities.power')}
-						</Label>
-					</div>
-				</div>
-			</div>
-		</Dialog.Content>
-	</Dialog.Portal>
+    <Dialog.Trigger class="hidden" />
+    <Dialog.Portal>
+        <Dialog.Content
+            class="fixed left-[50%] top-[50%] z-50 w-fit max-w-full translate-x-[-50%] translate-y-[-50%] flex flex-col items-center gap-3 border bg-background p-3 shadow-lg rounded-md"
+        >
+            <div
+                class="w-full flex flex-row items-center justify-center gap-4 border rounded-md p-2 bg-secondary"
+            >
+                <span>⚠️</span>
+                <span class="max-w-[80%] text-sm">
+                    {$_('menu.support_message')}
+                </span>
+            </div>
+            <div class="w-full flex flex-row flex-wrap gap-2">
+                <Button class="bg-support grow" href="https://ko-fi.com/gpxstudio" target="_blank">
+                    {$_('menu.support_button')}
+                    <span class="ml-2">🙏</span>
+                </Button>
+                <Button
+                    variant="outline"
+                    class="grow"
+                    on:click={() => {
+                        if ($exportState === ExportState.SELECTION) {
+                            exportSelectedFiles(exclude);
+                        } else if ($exportState === ExportState.ALL) {
+                            exportAllFiles(exclude);
+                        }
+                        open = false;
+                        $exportState = ExportState.NONE;
+                    }}
+                >
+                    <Download size="16" class="mr-1" />
+                    {#if $fileObservers.size === 1 || ($exportState === ExportState.SELECTION && $selection.size === 1)}
+                        {$_('menu.download_file')}
+                    {:else}
+                        {$_('menu.download_files')}
+                    {/if}
+                </Button>
+            </div>
+            <div
+                class="w-full max-w-xl flex flex-col items-center gap-2 {Object.values(hide).some(
+                    (v) => !v
+                )
+                    ? ''
+                    : 'hidden'}"
+            >
+                <div class="w-full flex flex-row items-center gap-3">
+                    <div class="grow">
+                        <Separator />
+                    </div>
+                    <Label class="shrink-0">
+                        {$_('menu.export_options')}
+                    </Label>
+                    <div class="grow">
+                        <Separator />
+                    </div>
+                </div>
+                <div class="flex flex-row flex-wrap justify-center gap-x-6 gap-y-2">
+                    <div class="flex flex-row items-center gap-1.5 {hide.time ? 'hidden' : ''}">
+                        <Checkbox id="export-time" bind:checked={exportOptions.time} />
+                        <Label for="export-time" class="flex flex-row items-center gap-1">
+                            <Zap size="16" />
+                            {$_('quantities.time')}
+                        </Label>
+                    </div>
+                    <div
+                        class="flex flex-row items-center gap-1.5 {hide.extensions ? 'hidden' : ''}"
+                    >
+                        <Checkbox id="export-extensions" bind:checked={exportOptions.extensions} />
+                        <Label for="export-extensions" class="flex flex-row items-center gap-1">
+                            <Earth size="16" />
+                            {$_('quantities.osm_extensions')}
+                        </Label>
+                    </div>
+                    <div class="flex flex-row items-center gap-1.5 {hide.hr ? 'hidden' : ''}">
+                        <Checkbox id="export-heartrate" bind:checked={exportOptions.hr} />
+                        <Label for="export-heartrate" class="flex flex-row items-center gap-1">
+                            <HeartPulse size="16" />
+                            {$_('quantities.heartrate')}
+                        </Label>
+                    </div>
+                    <div class="flex flex-row items-center gap-1.5 {hide.cad ? 'hidden' : ''}">
+                        <Checkbox id="export-cadence" bind:checked={exportOptions.cad} />
+                        <Label for="export-cadence" class="flex flex-row items-center gap-1">
+                            <Orbit size="16" />
+                            {$_('quantities.cadence')}
+                        </Label>
+                    </div>
+                    <div class="flex flex-row items-center gap-1.5 {hide.atemp ? 'hidden' : ''}">
+                        <Checkbox id="export-temperature" bind:checked={exportOptions.atemp} />
+                        <Label for="export-temperature" class="flex flex-row items-center gap-1">
+                            <Thermometer size="16" />
+                            {$_('quantities.temperature')}
+                        </Label>
+                    </div>
+                    <div class="flex flex-row items-center gap-1.5 {hide.power ? 'hidden' : ''}">
+                        <Checkbox id="export-power" bind:checked={exportOptions.power} />
+                        <Label for="export-power" class="flex flex-row items-center gap-1">
+                            <SquareActivity size="16" />
+                            {$_('quantities.power')}
+                        </Label>
+                    </div>
+                </div>
+            </div>
+        </Dialog.Content>
+    </Dialog.Portal>
 </Dialog.Root>

website/src/lib/components/Footer.svelte

@@ -1,116 +1,125 @@
 <script lang="ts">
-	import { Button } from '$lib/components/ui/button';
-	import LanguageSelect from '$lib/components/LanguageSelect.svelte';
-	import Logo from '$lib/components/Logo.svelte';
-	import { AtSign, BookOpenText, Heart, Home, Map } from 'lucide-svelte';
-	import { _, locale } from 'svelte-i18n';
-	import { getURLForLanguage } from '$lib/utils';
+    import { Button } from '$lib/components/ui/button';
+    import LanguageSelect from '$lib/components/LanguageSelect.svelte';
+    import Logo from '$lib/components/Logo.svelte';
+    import { AtSign, BookOpenText, Heart, Home, Map } from 'lucide-svelte';
+    import { _, locale } from 'svelte-i18n';
+    import { getURLForLanguage } from '$lib/utils';
 </script>
 
 <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" />
-				<Button
-					variant="link"
-					class="h-6 px-0 text-muted-foreground"
-					href="https://github.com/gpxstudio/gpx.studio/blob/main/LICENSE"
-					target="_blank"
-				>
-					MIT © 2024 gpx.studio
-				</Button>
-				<LanguageSelect class="w-40 mt-3" />
-			</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">{$_('homepage.website')}</span>
-					<Button
-						variant="link"
-						class="h-6 px-0 text-muted-foreground"
-						href={getURLForLanguage($locale, '/')}
-					>
-						<Home size="16" class="mr-1" />
-						{$_('homepage.home')}
-					</Button>
-					<Button
-						variant="link"
-						class="h-6 px-0 text-muted-foreground"
-						href={getURLForLanguage($locale, '/app')}
-					>
-						<Map size="16" class="mr-1" />
-						{$_('homepage.app')}
-					</Button>
-					<Button
-						variant="link"
-						class="h-6 px-0 text-muted-foreground"
-						href={getURLForLanguage($locale, '/help')}
-					>
-						<BookOpenText size="16" class="mr-1" />
-						{$_('menu.help')}
-					</Button>
-				</div>
-				<div class="flex flex-col items-start gap-1" id="contact">
-					<span class="font-semibold">{$_('homepage.contact')}</span>
-					<Button
-						variant="link"
-						class="h-6 px-0 text-muted-foreground"
-						href="https://facebook.com/gpx.studio"
-						target="_blank"
-					>
-						<Logo company="facebook" class="h-4 mr-1 fill-muted-foreground" />
-						{$_('homepage.facebook')}
-					</Button>
-					<Button
-						variant="link"
-						class="h-6 px-0 text-muted-foreground"
-						href="https://x.com/gpxstudio"
-						target="_blank"
-					>
-						<Logo company="x" class="h-4 mr-1 fill-muted-foreground" />
-						{$_('homepage.x')}
-					</Button>
-					<Button
-						variant="link"
-						class="h-6 px-0 text-muted-foreground"
-						href="mailto:hello@gpx.studio"
-						target="_blank"
-					>
-						<AtSign size="16" class="mr-1" />
-						{$_('homepage.email')}
-					</Button>
-				</div>
-				<div class="flex flex-col items-start gap-1">
-					<span class="font-semibold">{$_('homepage.contribute')}</span>
-					<Button
-						variant="link"
-						class="h-6 px-0 text-muted-foreground"
-						href="https://ko-fi.com/gpxstudio"
-						target="_blank"
-					>
-						<Heart size="16" class="mr-1" />
-						{$_('menu.donate')}
-					</Button>
-					<Button
-						variant="link"
-						class="h-6 px-0 text-muted-foreground"
-						href="https://crowdin.com/project/gpxstudio"
-						target="_blank"
-					>
-						<Logo company="crowdin" class="h-4 mr-1 fill-muted-foreground" />
-						{$_('homepage.crowdin')}
-					</Button>
-					<Button
-						variant="link"
-						class="h-6 px-0 text-muted-foreground"
-						href="https://github.com/gpxstudio/gpx.studio"
-						target="_blank"
-					>
-						<Logo company="github" class="h-4 mr-1 fill-muted-foreground" />
-						{$_('homepage.github')}
-					</Button>
-				</div>
-			</div>
-		</div>
-	</div>
+    <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 text-muted-foreground"
+                    href="https://github.com/gpxstudio/gpx.studio/blob/main/LICENSE"
+                    target="_blank"
+                >
+                    MIT © 2024 gpx.studio
+                </Button>
+                <LanguageSelect class="w-40 mt-3" />
+            </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">{$_('homepage.website')}</span>
+                    <Button
+                        variant="link"
+                        class="h-6 px-0 text-muted-foreground"
+                        href={getURLForLanguage($locale, '/')}
+                    >
+                        <Home size="16" class="mr-1" />
+                        {$_('homepage.home')}
+                    </Button>
+                    <Button
+                        variant="link"
+                        class="h-6 px-0 text-muted-foreground"
+                        href={getURLForLanguage($locale, '/app')}
+                    >
+                        <Map size="16" class="mr-1" />
+                        {$_('homepage.app')}
+                    </Button>
+                    <Button
+                        variant="link"
+                        class="h-6 px-0 text-muted-foreground"
+                        href={getURLForLanguage($locale, '/help')}
+                    >
+                        <BookOpenText size="16" class="mr-1" />
+                        {$_('menu.help')}
+                    </Button>
+                </div>
+                <div class="flex flex-col items-start gap-1" id="contact">
+                    <span class="font-semibold">{$_('homepage.contact')}</span>
+                    <Button
+                        variant="link"
+                        class="h-6 px-0 text-muted-foreground"
+                        href="https://www.reddit.com/r/gpxstudio/"
+                        target="_blank"
+                    >
+                        <Logo company="reddit" class="h-4 mr-1 fill-muted-foreground" />
+                        {$_('homepage.reddit')}
+                    </Button>
+                    <Button
+                        variant="link"
+                        class="h-6 px-0 text-muted-foreground"
+                        href="https://facebook.com/gpx.studio"
+                        target="_blank"
+                    >
+                        <Logo company="facebook" class="h-4 mr-1 fill-muted-foreground" />
+                        {$_('homepage.facebook')}
+                    </Button>
+                    <Button
+                        variant="link"
+                        class="h-6 px-0 text-muted-foreground"
+                        href="https://x.com/gpxstudio"
+                        target="_blank"
+                    >
+                        <Logo company="x" class="h-4 mr-1 fill-muted-foreground" />
+                        {$_('homepage.x')}
+                    </Button>
+                    <Button
+                        variant="link"
+                        class="h-6 px-0 text-muted-foreground"
+                        href="mailto:hello@gpx.studio"
+                        target="_blank"
+                    >
+                        <AtSign size="16" class="mr-1" />
+                        {$_('homepage.email')}
+                    </Button>
+                </div>
+                <div class="flex flex-col items-start gap-1">
+                    <span class="font-semibold">{$_('homepage.contribute')}</span>
+                    <Button
+                        variant="link"
+                        class="h-6 px-0 text-muted-foreground"
+                        href="https://ko-fi.com/gpxstudio"
+                        target="_blank"
+                    >
+                        <Heart size="16" class="mr-1" />
+                        {$_('menu.donate')}
+                    </Button>
+                    <Button
+                        variant="link"
+                        class="h-6 px-0 text-muted-foreground"
+                        href="https://crowdin.com/project/gpxstudio"
+                        target="_blank"
+                    >
+                        <Logo company="crowdin" class="h-4 mr-1 fill-muted-foreground" />
+                        {$_('homepage.crowdin')}
+                    </Button>
+                    <Button
+                        variant="link"
+                        class="h-6 px-0 text-muted-foreground"
+                        href="https://github.com/gpxstudio/gpx.studio"
+                        target="_blank"
+                    >
+                        <Logo company="github" class="h-4 mr-1 fill-muted-foreground" />
+                        {$_('homepage.github')}
+                    </Button>
+                </div>
+            </div>
+        </div>
+    </div>
 </footer>

website/src/lib/components/GPXStatistics.svelte

@@ -1,84 +1,88 @@
 <script lang="ts">
-	import * as Card from '$lib/components/ui/card';
-	import Tooltip from '$lib/components/Tooltip.svelte';
-	import WithUnits from '$lib/components/WithUnits.svelte';
+    import * as Card from '$lib/components/ui/card';
+    import Tooltip from '$lib/components/Tooltip.svelte';
+    import WithUnits from '$lib/components/WithUnits.svelte';
 
-	import { MoveDownRight, MoveUpRight, Ruler, Timer, Zap } from 'lucide-svelte';
+    import { MoveDownRight, MoveUpRight, Ruler, Timer, Zap } from 'lucide-svelte';
 
-	import { _ } from 'svelte-i18n';
-	import type { GPXStatistics } from 'gpx';
-	import type { Writable } from 'svelte/store';
-	import { settings } from '$lib/db';
+    import { _ } from 'svelte-i18n';
+    import type { GPXStatistics } from 'gpx';
+    import type { Writable } from 'svelte/store';
+    import { settings } from '$lib/db';
 
-	export let gpxStatistics: Writable<GPXStatistics>;
-	export let slicedGPXStatistics: Writable<[GPXStatistics, number, number] | undefined>;
-	export let orientation: 'horizontal' | 'vertical';
-	export let panelSize: number;
+    export let gpxStatistics: Writable<GPXStatistics>;
+    export let slicedGPXStatistics: Writable<[GPXStatistics, number, number] | undefined>;
+    export let orientation: 'horizontal' | 'vertical';
+    export let panelSize: number;
 
-	const { velocityUnits } = settings;
+    const { velocityUnits } = settings;
 
-	let statistics: GPXStatistics;
+    let statistics: GPXStatistics;
 
-	$: if ($slicedGPXStatistics !== undefined) {
-		statistics = $slicedGPXStatistics[0];
-	} else {
-		statistics = $gpxStatistics;
-	}
+    $: if ($slicedGPXStatistics !== undefined) {
+        statistics = $slicedGPXStatistics[0];
+    } else {
+        statistics = $gpxStatistics;
+    }
 </script>
 
 <Card.Root
-	class="h-full {orientation === 'vertical'
-		? 'min-w-44 sm:min-w-52 text-sm sm:text-base'
-		: 'w-full'} border-none shadow-none"
+    class="h-full {orientation === 'vertical'
+        ? 'min-w-40 sm:min-w-44 text-sm sm:text-base'
+        : 'w-full'} border-none shadow-none"
 >
-	<Card.Content
-		class="h-full flex {orientation === 'vertical'
-			? 'flex-col justify-center'
-			: 'flex-row w-full justify-between'} gap-4  p-0"
-	>
-		<Tooltip>
-			<span slot="data" class="flex flex-row items-center">
-				<Ruler size="18" class="mr-1" />
-				<WithUnits value={statistics.global.distance.total} type="distance" />
-			</span>
-			<span slot="tooltip">{$_('quantities.distance')}</span>
-		</Tooltip>
-		<Tooltip>
-			<span slot="data" class="flex flex-row items-center">
-				<MoveUpRight size="18" class="mr-1" />
-				<WithUnits value={statistics.global.elevation.gain} type="elevation" />
-				<MoveDownRight size="18" class="mx-1" />
-				<WithUnits value={statistics.global.elevation.loss} type="elevation" />
-			</span>
-			<span slot="tooltip">{$_('quantities.elevation')}</span>
-		</Tooltip>
-		{#if panelSize > 120 || orientation === 'horizontal'}
-			<Tooltip class={orientation === 'horizontal' ? 'hidden xs:block' : ''}>
-				<span slot="data" class="flex flex-row items-center">
-					<Zap size="18" 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>
-				<span slot="tooltip"
-					>{$velocityUnits === 'speed' ? $_('quantities.speed') : $_('quantities.pace')} ({$_(
-						'quantities.moving'
-					)} / {$_('quantities.total')})</span
-				>
-			</Tooltip>
-		{/if}
-		{#if panelSize > 160 || orientation === 'horizontal'}
-			<Tooltip class={orientation === 'horizontal' ? 'hidden md:block' : ''}>
-				<span slot="data" class="flex flex-row items-center">
-					<Timer size="18" 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>
-				<span slot="tooltip"
-					>{$_('quantities.time')} ({$_('quantities.moving')} / {$_('quantities.total')})</span
-				>
-			</Tooltip>
-		{/if}
-	</Card.Content>
+    <Card.Content
+        class="h-full flex {orientation === 'vertical'
+            ? 'flex-col justify-center'
+            : 'flex-row w-full justify-between'} gap-4  p-0"
+    >
+        <Tooltip label={$_('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={$_('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'
+                    ? $_('quantities.speed')
+                    : $_('quantities.pace')} ({$_('quantities.moving')} / {$_('quantities.total')})"
+            >
+                <span class="flex flex-row items-center">
+                    <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>
+        {/if}
+        {#if panelSize > 160 || orientation === 'horizontal'}
+            <Tooltip
+                class={orientation === 'horizontal' ? 'hidden md:block' : ''}
+                label="{$_('quantities.time')} ({$_('quantities.moving')} / {$_(
+                    'quantities.total'
+                )})"
+            >
+                <span class="flex flex-row items-center">
+                    <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}
+    </Card.Content>
 </Card.Root>

website/src/lib/components/Head.svelte

@@ -1,70 +0,0 @@
-<script lang="ts">
-	import { base } from '$app/paths';
-	import { page } from '$app/stores';
-	import { languages } from '$lib/languages';
-	import { _, isLoading } from 'svelte-i18n';
-
-	let location: string;
-	let title: string;
-
-	$: if ($page.route.id) {
-		location = $page.route.id;
-		Object.keys($page.params).forEach((param) => {
-			if (param !== 'language') {
-				location = location.replace(`[${param}]`, $page.params[param]);
-				location = location.replace(`[...${param}]`, $page.params[param]);
-			}
-		});
-		title = location.replace('/[...language]', '').split('/')[1] ?? 'home';
-	}
-</script>
-
-<svelte:head>
-	{#if $isLoading}
-		<title>gpx.studio — the online GPX file editor</title>
-		<meta
-			name="description"
-			content="View, edit and create GPX files online with advanced route planning capabilities and file processing tools, beautiful maps and detailed data visualizations."
-		/>
-		<meta property="og:title" content="gpx.studio — the online GPX file editor" />
-		<meta
-			property="og:description"
-			content="View, edit and create GPX files online with advanced route planning capabilities and file processing tools, beautiful maps and detailed data visualizations."
-		/>
-		<meta name="twitter:title" content="gpx.studio — the online GPX file editor" />
-		<meta
-			name="twitter:description"
-			content="View, edit and create GPX files online with advanced route planning capabilities and file processing tools, beautiful maps and detailed data visualizations."
-		/>
-	{:else}
-		<title>gpx.studio — {$_(`metadata.${title}_title`)}</title>
-		<meta name="description" content={$_('metadata.description')} />
-		<meta property="og:title" content="gpx.studio — {$_(`metadata.${title}_title`)}" />
-		<meta property="og:description" content={$_('metadata.description')} />
-		<meta name="twitter:title" content="gpx.studio — {$_(`metadata.${title}_title`)}" />
-		<meta name="twitter:description" content={$_('metadata.description')} />
-	{/if}
-
-	<meta property="og:image" content="https://gpx.studio/og_logo.png" />
-	<meta property="og:url" content="https://gpx.studio/" />
-	<meta property="og:type" content="website" />
-	<meta property="og:site_name" content="gpx.studio" />
-	<meta name="twitter:card" content="summary_large_image" />
-	<meta name="twitter:image" content="https://gpx.studio/og_logo.png" />
-	<meta name="twitter:url" content="https://gpx.studio/" />
-	<meta name="twitter:site" content="@gpxstudio" />
-	<meta name="twitter:creator" content="@gpxstudio" />
-
-	<link
-		rel="alternate"
-		hreflang="x-default"
-		href="https://gpx.studio{base}{location.replace('/[...language]', '')}"
-	/>
-	{#each Object.keys(languages) as lang}
-		<link
-			rel="alternate"
-			hreflang={lang}
-			href="https://gpx.studio{base}{location.replace('[...language]', lang)}"
-		/>
-	{/each}
-</svelte:head>

website/src/lib/components/Help.svelte

@@ -1,22 +1,20 @@
 <script lang="ts">
-	import { CircleHelp } from 'lucide-svelte';
-	import { _ } from 'svelte-i18n';
+    import { CircleHelp } from 'lucide-svelte';
+    import { _ } from 'svelte-i18n';
 
-	export let link: string | undefined = undefined;
+    export let link: string | undefined = undefined;
 </script>
 
-<div class="text-sm bg-muted rounded border flex flex-row items-center p-2 {$$props.class || ''}">
-	<CircleHelp size="16" class="w-4 mr-2 shrink-0 grow-0" />
-	<div>
-		<slot />
-		{#if link}
-			<a
-				href={link}
-				target="_blank"
-				class="text-sm text-blue-500 dark:text-blue-300 hover:underline"
-			>
-				{$_('menu.more')}
-			</a>
-		{/if}
-	</div>
+<div
+    class="text-sm bg-secondary rounded border flex flex-row items-center p-2 {$$props.class || ''}"
+>
+    <CircleHelp size="16" class="w-4 mr-2 shrink-0 grow-0" />
+    <div>
+        <slot />
+        {#if link}
+            <a href={link} target="_blank" class="text-sm text-link hover:underline">
+                {$_('menu.more')}
+            </a>
+        {/if}
+    </div>
 </div>

website/src/lib/components/LanguageSelect.svelte

@@ -1,42 +1,51 @@
 <script lang="ts">
-	import * as Select from '$lib/components/ui/select';
-	import { languages } from '$lib/languages';
-	import { getURLForLanguage } from '$lib/utils';
-	import { Languages } from 'lucide-svelte';
-	import { _, locale } from 'svelte-i18n';
+    import { page } from '$app/stores';
+    import * as Select from '$lib/components/ui/select';
+    import { languages } from '$lib/languages';
+    import { getURLForLanguage } from '$lib/utils';
+    import { Languages } from 'lucide-svelte';
+    import { _, locale } from 'svelte-i18n';
 
-	let selected = {
-		value: '',
-		label: ''
-	};
+    let selected = {
+        value: '',
+        label: '',
+    };
 
-	$: if ($locale) {
-		selected = {
-			value: $locale,
-			label: languages[$locale]
-		};
-	}
+    $: if ($locale) {
+        selected = {
+            value: $locale,
+            label: languages[$locale],
+        };
+    }
 </script>
 
 <Select.Root bind:selected>
-	<Select.Trigger class="w-[180px] {$$props.class ?? ''}">
-		<Languages size="16" />
-		<Select.Value class="ml-2 mr-auto" />
-	</Select.Trigger>
-	<Select.Content>
-		{#each Object.entries(languages) as [lang, label]}
-			<a href={getURLForLanguage(lang)}>
-				<Select.Item value={lang}>{label}</Select.Item>
-			</a>
-		{/each}
-	</Select.Content>
+    <Select.Trigger class="w-[180px] {$$props.class ?? ''}" aria-label={$_('menu.language')}>
+        <Languages size="16" />
+        <Select.Value class="ml-2 mr-auto" />
+    </Select.Trigger>
+    <Select.Content>
+        {#each Object.entries(languages) as [lang, label]}
+            {#if $page.url.pathname.includes('404')}
+                <a href={getURLForLanguage(lang, '/')}>
+                    <Select.Item value={lang}>{label}</Select.Item>
+                </a>
+            {:else}
+                <a href={getURLForLanguage(lang, $page.url.pathname)}>
+                    <Select.Item value={lang}>{label}</Select.Item>
+                </a>
+            {/if}
+        {/each}
+    </Select.Content>
 </Select.Root>
 
 <!-- hidden links for svelte crawling -->
 <div class="hidden">
-	{#each Object.entries(languages) as [lang, label]}
-		<a href={getURLForLanguage(lang)}>
-			{label}
-		</a>
-	{/each}
+    {#if !$page.url.pathname.includes('404')}
+        {#each Object.entries(languages) as [lang, label]}
+            <a href={getURLForLanguage(lang, $page.url.pathname)}>
+                {label}
+            </a>
+        {/each}
+    {/if}
 </div>

website/src/lib/components/Logo.svelte

@@ -1,63 +1,73 @@
 <script lang="ts">
-	import { base } from '$app/paths';
-	import { mode, systemPrefersMode } from 'mode-watcher';
+    import { base } from '$app/paths';
+    import { mode, systemPrefersMode } from 'mode-watcher';
 
-	export let iconOnly = false;
-	export let company = 'gpx.studio';
+    export let iconOnly = false;
+    export let company = 'gpx.studio';
 
-	$: effectiveMode = $mode ?? $systemPrefersMode ?? 'light';
+    $: effectiveMode = $mode ?? $systemPrefersMode ?? 'light';
 </script>
 
 {#if company === 'gpx.studio'}
-	<img
-		src="{base}/{iconOnly ? 'icon' : 'logo'}{effectiveMode === 'dark' ? '-dark' : ''}.svg"
-		alt="Logo of gpx.studio."
-		{...$$restProps}
-	/>
+    <img
+        src="{base}/{iconOnly ? 'icon' : 'logo'}{effectiveMode === 'dark' ? '-dark' : ''}.svg"
+        alt="Logo of gpx.studio."
+        {...$$restProps}
+    />
 {:else if company === 'mapbox'}
-	<img
-		src="{base}/mapbox-logo-{effectiveMode === 'dark' ? 'white' : 'black'}.svg"
-		alt="Logo of Mapbox."
-		{...$$restProps}
-	/>
+    <img
+        src="{base}/mapbox-logo-{effectiveMode === 'dark' ? 'white' : 'black'}.svg"
+        alt="Logo of Mapbox."
+        {...$$restProps}
+    />
 {:else if company === 'github'}
-	<svg
-		role="img"
-		viewBox="0 0 24 24"
-		xmlns="http://www.w3.org/2000/svg"
-		class="fill-foreground {$$restProps.class ?? ''}"
-		><title>GitHub</title><path
-			d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"
-		/></svg
-	>
+    <svg
+        role="img"
+        viewBox="0 0 24 24"
+        xmlns="http://www.w3.org/2000/svg"
+        class="fill-foreground {$$restProps.class ?? ''}"
+        ><title>GitHub</title><path
+            d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"
+        /></svg
+    >
 {:else if company === 'crowdin'}
-	<svg
-		role="img"
-		viewBox="0 0 24 24"
-		xmlns="http://www.w3.org/2000/svg"
-		class="fill-foreground {$$restProps.class ?? ''}"
-		><title>Crowdin</title><path
-			d="M16.119 17.793a2.619 2.619 0 0 1-1.667-.562c-.546-.436-1.004-1.09-1.018-1.858-.008-.388.414-.388.414-.388l1.018-.008c.332.008.43.47.445.586.128 1.04.717 1.495 1.168 1.702.273.123.204.513-.362.528zm-5.695-5.287L8.5 12.252c-.867-.214-.844-.982-.807-1.247a5.119 5.119 0 0 1 .814-2.125c.545-.804 1.303-1.508 2.29-2.073 1.856-1.074 4.45-1.673 7.31-1.673 2.09 0 4.256.27 4.29.27.197.025.328.213.333.437a.377.377 0 0 1-.355.393l-.92-.01c-2.902 0-4.968.394-6.506 1.248-1.527.837-2.57 2.117-3.287 4.012-.076.163-.335 1.12-1.24 1.022zm2.533 7.823c-1.44 0-2.797-.622-3.825-1.746-.87-.96-1.397-1.931-1.493-3.164-.06-.813.3-1.094.788-1.044l1.988.218c.45.092.75.34.825.854.397 2.736 2.122 3.814 3.15 4.046.18.042.292.157.283.365a.412.412 0 0 1-.322.398c-.458.074-.936.073-1.394.073zm-4.101 2.418a14.216 14.216 0 0 1-2.307-.214c-1.202-.214-2.208-.582-3.072-1.13C1.41 20.095.163 17.786.014 15.048c-.037-.65-.11-1.89 1.427-1.797.638.033 1.653.343 2.368.548.887.247 1.314.933 1.314 1.608 0 3.858 3.494 6.408 5.02 6.408.654 0 .414.701.127.779-.502.136-1.15.153-1.413.153zM3.525 11.419c-.605-.109-1.194-.358-1.768-.5C-.018 10.479.284 8.688.45 8.196c1.617-4.757 6.746-6.35 10.887-6.773 3.898-.4 7.978-.092 11.778.967.31.083 1.269.327.718.891-.35.358-1.7-.016-2.073-.041-2.23-.167-4.434-.192-6.656.15-2.349.357-4.768 1.099-6.71 2.665-.938.758-1.76 1.723-2.313 2.866-.144.3-.256.6-.354.9-.11.327-.47 1.91-2.215 1.6zm9.94.917c.332-1.488 1.81-3.848 6.385-3.686 1.05.033.57.749.052.731-2.586-.09-3.815 1.578-4.457 3.27-.219.546-.68.626-1.271.53-.415-.074-.866-.123-.71-.846Z"
-		/></svg
-	>
+    <svg
+        role="img"
+        viewBox="0 0 24 24"
+        xmlns="http://www.w3.org/2000/svg"
+        class="fill-foreground {$$restProps.class ?? ''}"
+        ><title>Crowdin</title><path
+            d="M16.119 17.793a2.619 2.619 0 0 1-1.667-.562c-.546-.436-1.004-1.09-1.018-1.858-.008-.388.414-.388.414-.388l1.018-.008c.332.008.43.47.445.586.128 1.04.717 1.495 1.168 1.702.273.123.204.513-.362.528zm-5.695-5.287L8.5 12.252c-.867-.214-.844-.982-.807-1.247a5.119 5.119 0 0 1 .814-2.125c.545-.804 1.303-1.508 2.29-2.073 1.856-1.074 4.45-1.673 7.31-1.673 2.09 0 4.256.27 4.29.27.197.025.328.213.333.437a.377.377 0 0 1-.355.393l-.92-.01c-2.902 0-4.968.394-6.506 1.248-1.527.837-2.57 2.117-3.287 4.012-.076.163-.335 1.12-1.24 1.022zm2.533 7.823c-1.44 0-2.797-.622-3.825-1.746-.87-.96-1.397-1.931-1.493-3.164-.06-.813.3-1.094.788-1.044l1.988.218c.45.092.75.34.825.854.397 2.736 2.122 3.814 3.15 4.046.18.042.292.157.283.365a.412.412 0 0 1-.322.398c-.458.074-.936.073-1.394.073zm-4.101 2.418a14.216 14.216 0 0 1-2.307-.214c-1.202-.214-2.208-.582-3.072-1.13C1.41 20.095.163 17.786.014 15.048c-.037-.65-.11-1.89 1.427-1.797.638.033 1.653.343 2.368.548.887.247 1.314.933 1.314 1.608 0 3.858 3.494 6.408 5.02 6.408.654 0 .414.701.127.779-.502.136-1.15.153-1.413.153zM3.525 11.419c-.605-.109-1.194-.358-1.768-.5C-.018 10.479.284 8.688.45 8.196c1.617-4.757 6.746-6.35 10.887-6.773 3.898-.4 7.978-.092 11.778.967.31.083 1.269.327.718.891-.35.358-1.7-.016-2.073-.041-2.23-.167-4.434-.192-6.656.15-2.349.357-4.768 1.099-6.71 2.665-.938.758-1.76 1.723-2.313 2.866-.144.3-.256.6-.354.9-.11.327-.47 1.91-2.215 1.6zm9.94.917c.332-1.488 1.81-3.848 6.385-3.686 1.05.033.57.749.052.731-2.586-.09-3.815 1.578-4.457 3.27-.219.546-.68.626-1.271.53-.415-.074-.866-.123-.71-.846Z"
+        /></svg
+    >
 {:else if company === 'facebook'}
-	<svg
-		role="img"
-		viewBox="0 0 24 24"
-		xmlns="http://www.w3.org/2000/svg"
-		class="fill-foreground {$$restProps.class ?? ''}"
-		><title>Facebook</title><path
-			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
-	>
+    <svg
+        role="img"
+        viewBox="0 0 24 24"
+        xmlns="http://www.w3.org/2000/svg"
+        class="fill-foreground {$$restProps.class ?? ''}"
+        ><title>Facebook</title><path
+            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 {$$restProps.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
-	>
+    <svg
+        role="img"
+        viewBox="0 0 24 24"
+        xmlns="http://www.w3.org/2000/svg"
+        class="fill-foreground {$$restProps.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"
+        viewBox="0 0 24 24"
+        xmlns="http://www.w3.org/2000/svg"
+        class="fill-foreground {$$restProps.class ?? ''}"
+        ><title>Reddit</title><path
+            d="M12 0C5.373 0 0 5.373 0 12c0 3.314 1.343 6.314 3.515 8.485l-2.286 2.286C.775 23.225 1.097 24 1.738 24H12c6.627 0 12-5.373 12-12S18.627 0 12 0Zm4.388 3.199c1.104 0 1.999.895 1.999 1.999 0 1.105-.895 2-1.999 2-.946 0-1.739-.657-1.947-1.539v.002c-1.147.162-2.032 1.15-2.032 2.341v.007c1.776.067 3.4.567 4.686 1.363.473-.363 1.064-.58 1.707-.58 1.547 0 2.802 1.254 2.802 2.802 0 1.117-.655 2.081-1.601 2.531-.088 3.256-3.637 5.876-7.997 5.876-4.361 0-7.905-2.617-7.998-5.87-.954-.447-1.614-1.415-1.614-2.538 0-1.548 1.255-2.802 2.803-2.802.645 0 1.239.218 1.712.585 1.275-.79 2.881-1.291 4.64-1.365v-.01c0-1.663 1.263-3.034 2.88-3.207.188-.911.993-1.595 1.959-1.595Zm-8.085 8.376c-.784 0-1.459.78-1.506 1.797-.047 1.016.64 1.429 1.426 1.429.786 0 1.371-.369 1.418-1.385.047-1.017-.553-1.841-1.338-1.841Zm7.406 0c-.786 0-1.385.824-1.338 1.841.047 1.017.634 1.385 1.418 1.385.785 0 1.473-.413 1.426-1.429-.046-1.017-.721-1.797-1.506-1.797Zm-3.703 4.013c-.974 0-1.907.048-2.77.135-.147.015-.241.168-.183.305.483 1.154 1.622 1.964 2.953 1.964 1.33 0 2.47-.81 2.953-1.964.057-.137-.037-.29-.184-.305-.863-.087-1.795-.135-2.769-.135Z"
+        /></svg
+    >
 {/if}

website/src/lib/components/Map.svelte

@@ -1,331 +1,393 @@
 <script lang="ts">
-	import { onDestroy, onMount } from 'svelte';
+    import { onDestroy, onMount } from 'svelte';
 
-	import mapboxgl from 'mapbox-gl';
-	import 'mapbox-gl/dist/mapbox-gl.css';
+    import mapboxgl from 'mapbox-gl';
+    import 'mapbox-gl/dist/mapbox-gl.css';
 
-	import MapboxGeocoder from '@mapbox/mapbox-gl-geocoder';
-	import '@mapbox/mapbox-gl-geocoder/dist/mapbox-gl-geocoder.css';
+    import MapboxGeocoder from '@mapbox/mapbox-gl-geocoder';
+    import '@mapbox/mapbox-gl-geocoder/dist/mapbox-gl-geocoder.css';
 
-	import { Button } from '$lib/components/ui/button';
-	import { map } from '$lib/stores';
-	import { settings } from '$lib/db';
-	import { _ } from 'svelte-i18n';
-	import { PUBLIC_MAPBOX_TOKEN } from '$env/static/public';
-	import { page } from '$app/stores';
+    import { Button } from '$lib/components/ui/button';
+    import { map } from '$lib/stores';
+    import { settings } from '$lib/db';
+    import { _ } from 'svelte-i18n';
+    import { PUBLIC_MAPBOX_TOKEN } from '$env/static/public';
+    import { page } from '$app/stores';
 
-	export let accessToken = PUBLIC_MAPBOX_TOKEN;
-	export let geolocate = true;
-	export let geocoder = true;
-	export let hash = true;
+    export let accessToken = PUBLIC_MAPBOX_TOKEN;
+    export let geolocate = true;
+    export let geocoder = true;
+    export let hash = true;
 
-	mapboxgl.accessToken = accessToken;
+    mapboxgl.accessToken = accessToken;
 
-	let webgl2Supported = true;
-	let fitBoundsOptions: mapboxgl.FitBoundsOptions = {
-		maxZoom: 15,
-		linear: true,
-		easing: () => 1
-	};
+    let webgl2Supported = true;
+    let embeddedApp = false;
+    let fitBoundsOptions: mapboxgl.FitBoundsOptions = {
+        maxZoom: 15,
+        linear: true,
+        easing: () => 1,
+    };
 
-	const { distanceUnits, elevationProfile, verticalFileView, bottomPanelSize, rightPanelSize } =
-		settings;
-	let scaleControl = new mapboxgl.ScaleControl({
-		unit: $distanceUnits
-	});
+    const { distanceUnits, elevationProfile, treeFileView, bottomPanelSize, rightPanelSize } =
+        settings;
+    let scaleControl = new mapboxgl.ScaleControl({
+        unit: $distanceUnits,
+    });
 
-	onMount(() => {
-		let gl = document.createElement('canvas').getContext('webgl2');
-		if (!gl) {
-			webgl2Supported = false;
-			return;
-		}
+    onMount(() => {
+        let gl = document.createElement('canvas').getContext('webgl2');
+        if (!gl) {
+            webgl2Supported = false;
+            return;
+        }
+        if (window.top !== window.self && !$page.route.id?.includes('embed')) {
+            embeddedApp = true;
+            return;
+        }
 
-		let language = $page.params.language;
-		if (language === 'zh') {
-			language = 'zh-Hans';
-		} else if (language?.includes('-')) {
-			language = language.split('-')[0];
-		} else if (language === '' || language === undefined) {
-			language = 'en';
-		}
+        let language = $page.params.language;
+        if (language === 'zh') {
+            language = 'zh-Hans';
+        } else if (language?.includes('-')) {
+            language = language.split('-')[0];
+        } else if (language === '' || language === undefined) {
+            language = 'en';
+        }
 
-		let newMap = new mapboxgl.Map({
-			container: 'map',
-			style: { version: 8, sources: {}, layers: [] },
-			zoom: 0,
-			hash: hash,
-			language,
-			attributionControl: false,
-			logoPosition: 'bottom-right',
-			boxZoom: false
-		});
-		newMap.on('load', () => {
-			$map = newMap; // only set the store after the map has loaded
-			scaleControl.setUnit($distanceUnits);
-		});
+        let newMap = new mapboxgl.Map({
+            container: 'map',
+            style: {
+                version: 8,
+                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=${PUBLIC_MAPBOX_TOKEN}`,
+                        },
+                    },
+                    {
+                        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,
+        });
+        newMap.on('load', () => {
+            $map = newMap; // only set the store after the map has loaded
+            window._map = newMap; // entry point for extensions
+            scaleControl.setUnit($distanceUnits);
+        });
 
-		newMap.addControl(
-			new mapboxgl.AttributionControl({
-				compact: true
-			})
-		);
+        newMap.addControl(
+            new mapboxgl.AttributionControl({
+                compact: true,
+            })
+        );
 
-		newMap.addControl(
-			new mapboxgl.NavigationControl({
-				visualizePitch: true
-			})
-		);
+        newMap.addControl(
+            new mapboxgl.NavigationControl({
+                visualizePitch: true,
+            })
+        );
 
-		if (geocoder) {
-			newMap.addControl(
-				new MapboxGeocoder({
-					accessToken: mapboxgl.accessToken,
-					mapboxgl: mapboxgl,
-					collapsed: true,
-					flyTo: fitBoundsOptions,
-					language
-				})
-			);
-		}
+        if (geocoder) {
+            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: {
+                                        type: 'Point',
+                                        coordinates: [result.lon, result.lat],
+                                    },
+                                    place_name: result.display_name,
+                                };
+                            });
+                        }),
+            });
+            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();
+                }
+            };
+            newMap.addControl(geocoder);
+        }
 
-		if (geolocate) {
-			newMap.addControl(
-				new mapboxgl.GeolocateControl({
-					positionOptions: {
-						enableHighAccuracy: true
-					},
-					fitBoundsOptions,
-					trackUserLocation: true,
-					showUserHeading: true
-				})
-			);
-		}
+        if (geolocate) {
+            newMap.addControl(
+                new mapboxgl.GeolocateControl({
+                    positionOptions: {
+                        enableHighAccuracy: true,
+                    },
+                    fitBoundsOptions,
+                    trackUserLocation: true,
+                    showUserHeading: true,
+                })
+            );
+        }
 
-		newMap.addControl(scaleControl);
+        newMap.addControl(scaleControl);
 
-		newMap.on('style.load', () => {
-			newMap.addSource('mapbox-dem', {
-				type: 'raster-dem',
-				url: 'mapbox://mapbox.mapbox-terrain-dem-v1',
-				tileSize: 512,
-				maxzoom: 14
-			});
-			newMap.setTerrain({
-				source: 'mapbox-dem',
-				exaggeration: newMap.getPitch() > 0 ? 1 : 0
-			});
-			newMap.setFog({
-				color: 'rgb(186, 210, 235)',
-				'high-color': 'rgb(36, 92, 223)',
-				'horizon-blend': 0.1,
-				'space-color': 'rgb(156, 240, 255)'
-			});
-			newMap.on('pitch', () => {
-				if (newMap.getPitch() > 0) {
-					newMap.setTerrain({
-						source: 'mapbox-dem',
-						exaggeration: 1
-					});
-				} else {
-					newMap.setTerrain({
-						source: 'mapbox-dem',
-						exaggeration: 0
-					});
-				}
-			});
-			// add dummy layer to place the overlay layers below
-			newMap.addLayer({
-				id: 'overlays',
-				type: 'background',
-				paint: {
-					'background-color': 'rgba(0, 0, 0, 0)'
-				}
-			});
-		});
-	});
+        newMap.on('style.load', () => {
+            newMap.addSource('mapbox-dem', {
+                type: 'raster-dem',
+                url: 'mapbox://mapbox.mapbox-terrain-dem-v1',
+                tileSize: 512,
+                maxzoom: 14,
+            });
+            if (newMap.getPitch() > 0) {
+                newMap.setTerrain({
+                    source: 'mapbox-dem',
+                    exaggeration: 1,
+                });
+            }
+            newMap.setFog({
+                color: 'rgb(186, 210, 235)',
+                'high-color': 'rgb(36, 92, 223)',
+                'horizon-blend': 0.1,
+                'space-color': 'rgb(156, 240, 255)',
+            });
+            newMap.on('pitch', () => {
+                if (newMap.getPitch() > 0) {
+                    newMap.setTerrain({
+                        source: 'mapbox-dem',
+                        exaggeration: 1,
+                    });
+                } else {
+                    newMap.setTerrain(null);
+                }
+            });
+        });
+    });
 
-	onDestroy(() => {
-		if ($map) {
-			$map.remove();
-			$map = null;
-		}
-	});
+    onDestroy(() => {
+        if ($map) {
+            $map.remove();
+            $map = null;
+        }
+    });
 
-	$: if (
-		$map &&
-		(!$verticalFileView || !$elevationProfile || $bottomPanelSize || $rightPanelSize)
-	) {
-		$map.resize();
-	}
+    $: if ($map && (!$treeFileView || !$elevationProfile || $bottomPanelSize || $rightPanelSize)) {
+        $map.resize();
+    }
 </script>
 
 <div {...$$restProps}>
-	<div id="map" class="h-full {webgl2Supported ? '' : 'hidden'}"></div>
-	<div
-		class="flex flex-col items-center justify-center gap-3 h-full {webgl2Supported ? 'hidden' : ''}"
-	>
-		<p>{$_('webgl2_required')}</p>
-		<Button href="https://get.webgl.org/webgl2/" target="_blank">
-			{$_('enable_webgl2')}
-		</Button>
-	</div>
+    <div id="map" class="h-full {webgl2Supported && !embeddedApp ? '' : 'hidden'}"></div>
+    <div
+        class="flex flex-col items-center justify-center gap-3 h-full {webgl2Supported &&
+        !embeddedApp
+            ? 'hidden'
+            : ''} {embeddedApp ? 'z-30' : ''}"
+    >
+        {#if !webgl2Supported}
+            <p>{$_('webgl2_required')}</p>
+            <Button href="https://get.webgl.org/webgl2/" target="_blank">
+                {$_('enable_webgl2')}
+            </Button>
+        {:else if embeddedApp}
+            <p>The app cannot be embedded in an iframe.</p>
+            <Button href="https://gpx.studio/help/integration" target="_blank">
+                Learn how to create a map for your website
+            </Button>
+        {/if}
+    </div>
 </div>
 
 <style lang="postcss">
-	div :global(.mapboxgl-map) {
-		@apply font-sans;
-	}
+    div :global(.mapboxgl-map) {
+        @apply font-sans;
+    }
 
-	div :global(.mapboxgl-ctrl-top-right > .mapboxgl-ctrl) {
-		@apply shadow-md;
-		@apply bg-background;
-		@apply text-foreground;
-	}
+    div :global(.mapboxgl-ctrl-top-right > .mapboxgl-ctrl) {
+        @apply shadow-md;
+        @apply bg-background;
+        @apply text-foreground;
+    }
 
-	div :global(.mapboxgl-ctrl-icon) {
-		@apply dark:brightness-[4.7];
-	}
+    div :global(.mapboxgl-ctrl-icon) {
+        @apply dark:brightness-[4.7];
+    }
 
-	div :global(.mapboxgl-ctrl-geocoder) {
-		@apply flex;
-		@apply flex-row;
-		@apply w-fit;
-		@apply min-w-fit;
-		@apply items-center;
-		@apply shadow-md;
-	}
+    div :global(.mapboxgl-ctrl-geocoder) {
+        @apply flex;
+        @apply flex-row;
+        @apply w-fit;
+        @apply min-w-fit;
+        @apply items-center;
+        @apply shadow-md;
+    }
 
-	div :global(.suggestions) {
-		@apply shadow-md;
-		@apply bg-background;
-		@apply text-foreground;
-	}
+    div :global(.suggestions) {
+        @apply shadow-md;
+        @apply bg-background;
+        @apply text-foreground;
+    }
 
-	div :global(.mapboxgl-ctrl-geocoder .suggestions > li > a) {
-		@apply text-foreground;
-		@apply hover:text-accent-foreground;
-		@apply hover:bg-accent;
-	}
+    div :global(.mapboxgl-ctrl-geocoder .suggestions > li > a) {
+        @apply text-foreground;
+        @apply hover:text-accent-foreground;
+        @apply hover:bg-accent;
+    }
 
-	div :global(.mapboxgl-ctrl-geocoder .suggestions > .active > a) {
-		@apply bg-background;
-	}
+    div :global(.mapboxgl-ctrl-geocoder .suggestions > .active > a) {
+        @apply bg-background;
+    }
 
-	div :global(.mapboxgl-ctrl-geocoder--button) {
-		@apply bg-transparent;
-		@apply hover:bg-transparent;
-	}
+    div :global(.mapboxgl-ctrl-geocoder--button) {
+        @apply bg-transparent;
+        @apply hover:bg-transparent;
+    }
 
-	div :global(.mapboxgl-ctrl-geocoder--icon) {
-		@apply fill-foreground;
-		@apply hover:fill-accent-foreground;
-	}
+    div :global(.mapboxgl-ctrl-geocoder--icon) {
+        @apply fill-foreground;
+        @apply hover:fill-accent-foreground;
+    }
 
-	div :global(.mapboxgl-ctrl-geocoder--icon-search) {
-		@apply relative;
-		@apply top-0;
-		@apply left-0;
-		@apply my-2;
-		@apply w-[29px];
-	}
+    div :global(.mapboxgl-ctrl-geocoder--icon-search) {
+        @apply relative;
+        @apply top-0;
+        @apply left-0;
+        @apply my-2;
+        @apply w-[29px];
+    }
 
-	div :global(.mapboxgl-ctrl-geocoder--input) {
-		@apply relative;
-		@apply w-64;
-		@apply py-0;
-		@apply pl-2;
-		@apply focus:outline-none;
-		@apply transition-[width];
-		@apply duration-200;
-		@apply text-foreground;
-	}
+    div :global(.mapboxgl-ctrl-geocoder--input) {
+        @apply relative;
+        @apply w-64;
+        @apply py-0;
+        @apply pl-2;
+        @apply focus:outline-none;
+        @apply transition-[width];
+        @apply duration-200;
+        @apply text-foreground;
+    }
 
-	div :global(.mapboxgl-ctrl-geocoder--collapsed .mapboxgl-ctrl-geocoder--input) {
-		@apply w-0;
-		@apply p-0;
-	}
+    div :global(.mapboxgl-ctrl-geocoder--collapsed .mapboxgl-ctrl-geocoder--input) {
+        @apply w-0;
+        @apply p-0;
+    }
 
-	div :global(.mapboxgl-ctrl-top-right) {
-		@apply z-40;
-		@apply flex;
-		@apply flex-col;
-		@apply items-end;
-		@apply h-full;
-		@apply overflow-hidden;
-	}
+    div :global(.mapboxgl-ctrl-top-right) {
+        @apply z-40;
+        @apply flex;
+        @apply flex-col;
+        @apply items-end;
+        @apply h-full;
+        @apply overflow-hidden;
+    }
 
-	.horizontal :global(.mapboxgl-ctrl-bottom-left) {
-		@apply bottom-[42px];
-	}
+    .horizontal :global(.mapboxgl-ctrl-bottom-left) {
+        @apply bottom-[42px];
+    }
 
-	.horizontal :global(.mapboxgl-ctrl-bottom-right) {
-		@apply bottom-[42px];
-	}
+    .horizontal :global(.mapboxgl-ctrl-bottom-right) {
+        @apply bottom-[42px];
+    }
 
-	div :global(.mapboxgl-ctrl-attrib) {
-		@apply dark:bg-transparent;
-	}
+    div :global(.mapboxgl-ctrl-attrib) {
+        @apply dark:bg-transparent;
+    }
 
-	div :global(.mapboxgl-compact-show.mapboxgl-ctrl-attrib) {
-		@apply dark:bg-background;
-	}
+    div :global(.mapboxgl-compact-show.mapboxgl-ctrl-attrib) {
+        @apply dark:bg-background;
+    }
 
-	div :global(.mapboxgl-ctrl-attrib-button) {
-		@apply dark:bg-foreground;
-	}
+    div :global(.mapboxgl-ctrl-attrib-button) {
+        @apply dark:bg-foreground;
+    }
 
-	div :global(.mapboxgl-compact-show .mapboxgl-ctrl-attrib-button) {
-		@apply dark:bg-foreground;
-	}
+    div :global(.mapboxgl-compact-show .mapboxgl-ctrl-attrib-button) {
+        @apply dark:bg-foreground;
+    }
 
-	div :global(.mapboxgl-ctrl-attrib a) {
-		@apply text-foreground;
-	}
+    div :global(.mapboxgl-ctrl-attrib a) {
+        @apply text-foreground;
+    }
 
-	div :global(.mapboxgl-popup) {
-		@apply w-fit;
-		@apply z-20;
-	}
+    div :global(.mapboxgl-popup) {
+        @apply w-fit;
+        @apply z-50;
+    }
 
-	div :global(.mapboxgl-popup-content) {
-		@apply p-0;
-		@apply bg-transparent;
-		@apply shadow-none;
-	}
+    div :global(.mapboxgl-popup-content) {
+        @apply p-0;
+        @apply bg-transparent;
+        @apply shadow-none;
+    }
 
-	div :global(.mapboxgl-popup-anchor-top .mapboxgl-popup-tip) {
-		@apply border-b-background;
-	}
+    div :global(.mapboxgl-popup-anchor-top .mapboxgl-popup-tip) {
+        @apply border-b-background;
+    }
 
-	div :global(.mapboxgl-popup-anchor-top-left .mapboxgl-popup-tip) {
-		@apply border-b-background;
-	}
+    div :global(.mapboxgl-popup-anchor-top-left .mapboxgl-popup-tip) {
+        @apply border-b-background;
+    }
 
-	div :global(.mapboxgl-popup-anchor-top-right .mapboxgl-popup-tip) {
-		@apply border-b-background;
-	}
+    div :global(.mapboxgl-popup-anchor-top-right .mapboxgl-popup-tip) {
+        @apply border-b-background;
+    }
 
-	div :global(.mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip) {
-		@apply border-t-background;
-		@apply drop-shadow-md;
-	}
+    div :global(.mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip) {
+        @apply border-t-background;
+        @apply drop-shadow-md;
+    }
 
-	div :global(.mapboxgl-popup-anchor-bottom-left .mapboxgl-popup-tip) {
-		@apply border-t-background;
-		@apply drop-shadow-md;
-	}
+    div :global(.mapboxgl-popup-anchor-bottom-left .mapboxgl-popup-tip) {
+        @apply border-t-background;
+        @apply drop-shadow-md;
+    }
 
-	div :global(.mapboxgl-popup-anchor-bottom-right .mapboxgl-popup-tip) {
-		@apply border-t-background;
-		@apply drop-shadow-md;
-	}
+    div :global(.mapboxgl-popup-anchor-bottom-right .mapboxgl-popup-tip) {
+        @apply border-t-background;
+        @apply drop-shadow-md;
+    }
 
-	div :global(.mapboxgl-popup-anchor-left .mapboxgl-popup-tip) {
-		@apply border-r-background;
-	}
+    div :global(.mapboxgl-popup-anchor-left .mapboxgl-popup-tip) {
+        @apply border-r-background;
+    }
 
-	div :global(.mapboxgl-popup-anchor-right .mapboxgl-popup-tip) {
-		@apply border-l-background;
-	}
+    div :global(.mapboxgl-popup-anchor-right .mapboxgl-popup-tip) {
+        @apply border-l-background;
+    }
 </style>

website/src/lib/components/MapPopup.svelte

@@ -0,0 +1,25 @@
+<svelte:options accessors />
+
+<script lang="ts">
+    import { TrackPoint, Waypoint } from 'gpx';
+    import type { Writable } from 'svelte/store';
+    import WaypointPopup from '$lib/components/gpx-layer/WaypointPopup.svelte';
+    import TrackpointPopup from '$lib/components/gpx-layer/TrackpointPopup.svelte';
+    import OverpassPopup from '$lib/components/layer-control/OverpassPopup.svelte';
+    import type { PopupItem } from './MapPopup';
+
+    export let item: Writable<PopupItem | null>;
+    export let container: HTMLDivElement | null = null;
+</script>
+
+<div bind:this={container}>
+    {#if $item}
+        {#if $item.item instanceof Waypoint}
+            <WaypointPopup waypoint={$item} />
+        {:else if $item.item instanceof TrackPoint}
+            <TrackpointPopup trackpoint={$item} />
+        {:else}
+            <OverpassPopup poi={$item} />
+        {/if}
+    {/if}
+</div>

website/src/lib/components/MapPopup.ts

@@ -0,0 +1,82 @@
+import { TrackPoint, Waypoint } from 'gpx';
+import mapboxgl from 'mapbox-gl';
+import { tick } from 'svelte';
+import { get, writable, type Writable } from 'svelte/store';
+import MapPopupComponent from './MapPopup.svelte';
+
+export type PopupItem<T = Waypoint | TrackPoint | any> = {
+    item: T;
+    fileId?: string;
+    hide?: () => void;
+};
+
+export class MapPopup {
+    map: mapboxgl.Map;
+    popup: mapboxgl.Popup;
+    item: Writable<PopupItem | null> = writable(null);
+    maybeHideBinded = this.maybeHide.bind(this);
+
+    constructor(map: mapboxgl.Map, options?: mapboxgl.PopupOptions) {
+        this.map = map;
+        this.popup = new mapboxgl.Popup(options);
+
+        let component = new MapPopupComponent({
+            target: document.body,
+            props: {
+                item: this.item,
+            },
+        });
+
+        tick().then(() => this.popup.setDOMContent(component.container));
+    }
+
+    setItem(item: PopupItem | null) {
+        if (item) item.hide = () => this.hide();
+        this.item.set(item);
+        if (item === null) {
+            this.hide();
+        } else {
+            tick().then(() => this.show());
+        }
+    }
+
+    show() {
+        const i = get(this.item);
+        if (i === null) {
+            this.hide();
+            return;
+        }
+        this.popup.setLngLat(this.getCoordinates()).addTo(this.map);
+        this.map.on('mousemove', this.maybeHideBinded);
+    }
+
+    maybeHide(e: mapboxgl.MapMouseEvent) {
+        const i = get(this.item);
+        if (i === null) {
+            this.hide();
+            return;
+        }
+        if (this.map.project(this.getCoordinates()).dist(this.map.project(e.lngLat)) > 60) {
+            this.hide();
+        }
+    }
+
+    hide() {
+        this.popup.remove();
+        this.map.off('mousemove', this.maybeHideBinded);
+    }
+
+    remove() {
+        this.popup.remove();
+    }
+
+    getCoordinates() {
+        const i = get(this.item);
+        if (i === null) {
+            return new mapboxgl.LngLat(0, 0);
+        }
+        return i.item instanceof Waypoint || i.item instanceof TrackPoint
+            ? i.item.getCoordinates()
+            : new mapboxgl.LngLat(i.item.lon, i.item.lat);
+    }
+}

website/src/lib/components/ModeSwitch.svelte

@@ -1,24 +1,25 @@
 <script lang="ts">
-	import { Button } from '$lib/components/ui/button';
-	import { Moon, Sun } from 'lucide-svelte';
-	import { mode, setMode, systemPrefersMode } from 'mode-watcher';
-	import { _ } from 'svelte-i18n';
+    import { Button } from '$lib/components/ui/button';
+    import { Moon, Sun } from 'lucide-svelte';
+    import { mode, setMode, systemPrefersMode } from 'mode-watcher';
+    import { _ } from 'svelte-i18n';
 
-	export let size = '20';
+    export let size = '20';
 
-	$: selectedMode = $mode ?? $systemPrefersMode ?? 'light';
+    $: selectedMode = $mode ?? $systemPrefersMode ?? 'light';
 </script>
 
 <Button
-	variant="ghost"
-	class="h-8 px-1.5 {$$props.class ?? ''}"
-	on:click={() => {
-		setMode(selectedMode === 'light' ? 'dark' : 'light');
-	}}
+    variant="ghost"
+    class="h-8 px-1.5 {$$props.class ?? ''}"
+    on:click={() => {
+        setMode(selectedMode === 'light' ? 'dark' : 'light');
+    }}
+    aria-label={$_('menu.mode')}
 >
-	{#if selectedMode === 'light'}
-		<Sun {size} />
-	{:else}
-		<Moon {size} />
-	{/if}
+    {#if selectedMode === 'light'}
+        <Sun {size} />
+    {:else}
+        <Moon {size} />
+    {/if}
 </Button>

website/src/lib/components/Nav.svelte

@@ -1,30 +1,32 @@
 <script lang="ts">
-	import Logo from '$lib/components/Logo.svelte';
-	import { Button } from '$lib/components/ui/button';
-	import ModeSwitch from '$lib/components/ModeSwitch.svelte';
-	import { BookOpenText, Home, Map } from 'lucide-svelte';
-	import { _, locale } from 'svelte-i18n';
-	import { getURLForLanguage } from '$lib/utils';
+    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, Home, Map } from 'lucide-svelte';
+    import { _, locale } from 'svelte-i18n';
+    import { getURLForLanguage } from '$lib/utils';
 </script>
 
 <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($locale, '/')} class="shrink-0 translate-y-0.5">
-			<Logo class="h-8 sm:hidden" iconOnly={true} />
-			<Logo class="h-8 hidden sm:block" />
-		</a>
-		<Button variant="link" class="text-base px-0" href={getURLForLanguage($locale, '/')}>
-			<Home size="18" class="mr-1.5" />
-			{$_('homepage.home')}
-		</Button>
-		<Button variant="link" class="text-base px-0" href={getURLForLanguage($locale, '/app')}>
-			<Map size="18" class="mr-1.5" />
-			{$_('homepage.app')}
-		</Button>
-		<Button variant="link" class="text-base px-0" href={getURLForLanguage($locale, '/help')}>
-			<BookOpenText size="18" class="mr-1.5" />
-			{$_('menu.help')}
-		</Button>
-		<ModeSwitch class="ml-auto" />
-	</div>
+    <div class="mx-6 py-2 flex flex-row items-center border-b gap-4 sm:gap-8">
+        <a href={getURLForLanguage($locale, '/')} 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" href={getURLForLanguage($locale, '/')}>
+            <Home size="18" class="mr-1.5" />
+            {$_('homepage.home')}
+        </Button>
+        <Button variant="link" class="text-base px-0" href={getURLForLanguage($locale, '/app')}>
+            <Map size="18" class="mr-1.5" />
+            {$_('homepage.app')}
+        </Button>
+        <Button variant="link" class="text-base px-0" href={getURLForLanguage($locale, '/help')}>
+            <BookOpenText size="18" class="mr-1.5" />
+            {$_('menu.help')}
+        </Button>
+        <AlgoliaDocSearch class="ml-auto" />
+        <ModeSwitch class="hidden xs:block" />
+    </div>
 </nav>

website/src/lib/components/Resizer.svelte

@@ -1,41 +1,42 @@
 <script lang="ts">
-	export let orientation: 'col' | 'row' = 'col';
+    export let orientation: 'col' | 'row' = 'col';
 
-	export let after: number;
-	export let minAfter: number = 0;
-	export let maxAfter: number = Number.MAX_SAFE_INTEGER;
+    export let after: number;
+    export let minAfter: number = 0;
+    export let maxAfter: number = Number.MAX_SAFE_INTEGER;
 
-	function handleMouseDown(event: PointerEvent) {
-		const startX = event.clientX;
-		const startY = event.clientY;
-		const startAfter = after;
+    function handleMouseDown(event: PointerEvent) {
+        const startX = event.clientX;
+        const startY = event.clientY;
+        const startAfter = after;
 
-		const handleMouseMove = (event: PointerEvent) => {
-			const newAfter =
-				startAfter + (orientation === 'col' ? startX - event.clientX : startY - event.clientY);
-			if (newAfter >= minAfter && newAfter <= maxAfter) {
-				after = newAfter;
-			} else if (newAfter < minAfter && after !== minAfter) {
-				after = minAfter;
-			} else if (newAfter > maxAfter && after !== maxAfter) {
-				after = maxAfter;
-			}
-		};
+        const handleMouseMove = (event: PointerEvent) => {
+            const newAfter =
+                startAfter +
+                (orientation === 'col' ? startX - event.clientX : startY - event.clientY);
+            if (newAfter >= minAfter && newAfter <= maxAfter) {
+                after = newAfter;
+            } else if (newAfter < minAfter && after !== minAfter) {
+                after = minAfter;
+            } else if (newAfter > maxAfter && after !== maxAfter) {
+                after = maxAfter;
+            }
+        };
 
-		const handleMouseUp = () => {
-			window.removeEventListener('pointermove', handleMouseMove);
-			window.removeEventListener('pointerup', handleMouseUp);
-		};
+        const handleMouseUp = () => {
+            window.removeEventListener('pointermove', handleMouseMove);
+            window.removeEventListener('pointerup', handleMouseUp);
+        };
 
-		window.addEventListener('pointermove', handleMouseMove);
-		window.addEventListener('pointerup', handleMouseUp);
-	}
+        window.addEventListener('pointermove', handleMouseMove);
+        window.addEventListener('pointerup', handleMouseUp);
+    }
 </script>
 
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
-	class="{orientation === 'col'
-		? 'w-1 h-full cursor-col-resize border-l'
-		: 'w-full h-1 cursor-row-resize border-t'} {orientation}"
-	on:pointerdown={handleMouseDown}
+    class="{orientation === 'col'
+        ? 'w-1 h-full cursor-col-resize border-l'
+        : 'w-full h-1 cursor-row-resize border-t'} {orientation}"
+    on:pointerdown={handleMouseDown}
 />

website/src/lib/components/Shortcut.svelte

@@ -1,26 +1,36 @@
 <script lang="ts">
-	import { onMount } from 'svelte';
-	import { _ } from 'svelte-i18n';
+    import { isMac, isSafari } from '$lib/utils';
+    import { onMount } from 'svelte';
+    import { _ } from 'svelte-i18n';
 
-	export let key: string;
-	export let shift: boolean = false;
-	export let ctrl: boolean = false;
-	export let click: boolean = false;
+    export let key: string | undefined = undefined;
+    export let shift: boolean = false;
+    export let ctrl: boolean = false;
+    export let click: boolean = false;
 
-	let isMac = false;
-	let isSafari = false;
+    let mac = false;
+    let safari = false;
 
-	onMount(() => {
-		isMac = navigator.userAgent.toUpperCase().indexOf('MAC') >= 0;
-		isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
-	});
+    onMount(() => {
+        mac = isMac();
+        safari = isSafari();
+    });
 </script>
 
 <div
-	class="ml-auto pl-2 text-xs tracking-widest text-muted-foreground flex flex-row gap-0 items-baseline"
+    class="ml-auto pl-2 text-xs tracking-widest text-muted-foreground flex flex-row gap-0 items-baseline"
+    {...$$props}
 >
-	<span>{shift ? '⇧' : ''}</span>
-	<span>{ctrl ? (isMac && !isSafari ? '⌘' : $_('menu.ctrl') + '+') : ''}</span>
-	<span class={key === '+' ? 'font-medium text-sm/4' : ''}>{key}</span>
-	<span>{click ? $_('menu.click') : ''}</span>
+    {#if shift}
+        <span>⇧</span>
+    {/if}
+    {#if ctrl}
+        <span>{mac && !safari ? '⌘' : $_('menu.ctrl') + '+'}</span>
+    {/if}
+    {#if key}
+        <span class={key === '+' ? 'font-medium text-sm/4' : ''}>{key}</span>
+    {/if}
+    {#if click}
+        <span>{$_('menu.click')}</span>
+    {/if}
 </div>

website/src/lib/components/Tooltip.svelte

@@ -1,14 +1,18 @@
 <script lang="ts">
-	import * as Tooltip from '$lib/components/ui/tooltip/index.js';
+    import * as Tooltip from '$lib/components/ui/tooltip/index.js';
 
-	export let side: 'top' | 'right' | 'bottom' | 'left' = 'top';
+    export let label: string;
+    export let side: 'top' | 'right' | 'bottom' | 'left' = 'top';
 </script>
 
 <Tooltip.Root>
-	<Tooltip.Trigger {...$$restProps}>
-		<slot name="data" />
-	</Tooltip.Trigger>
-	<Tooltip.Content {side}>
-		<slot name="tooltip" />
-	</Tooltip.Content>
+    <Tooltip.Trigger {...$$restProps} aria-label={label}>
+        <slot />
+    </Tooltip.Trigger>
+    <Tooltip.Content {side}>
+        <div class="flex flex-row items-center">
+            <span>{label}</span>
+            <slot name="extra" />
+        </div>
+    </Tooltip.Content>
 </Tooltip.Root>

website/src/lib/components/Welcome.svelte

@@ -1,29 +0,0 @@
-<script lang="ts">
-	import * as AlertDialog from '$lib/components/ui/alert-dialog';
-	import { settings } from '$lib/db';
-
-	const { showWelcomeMessage } = settings;
-</script>
-
-<AlertDialog.Root
-	open={$showWelcomeMessage === true}
-	closeOnEscape={false}
-	closeOnOutsideClick={false}
-	onOpenChange={() => ($showWelcomeMessage = false)}
->
-	<AlertDialog.Trigger class="hidden"></AlertDialog.Trigger>
-	<AlertDialog.Content>
-		<AlertDialog.Header>
-			<AlertDialog.Title>
-				Welcome to the new version of <b>gpx.studio</b>!
-			</AlertDialog.Title>
-			<AlertDialog.Description class="space-y-1">
-				<p>The website is still under development and may contain bugs.</p>
-				<p>Please report any issues you find by email or on GitHub.</p>
-			</AlertDialog.Description>
-		</AlertDialog.Header>
-		<AlertDialog.Footer>
-			<AlertDialog.Action>Let's go!</AlertDialog.Action>
-		</AlertDialog.Footer>
-	</AlertDialog.Content>
-</AlertDialog.Root>

website/src/lib/components/WithUnits.svelte

@@ -1,58 +1,48 @@
 <script lang="ts">
-	import { settings } from '$lib/db';
-	import {
-		celsiusToFahrenheit,
-		distancePerHourToSecondsPerDistance,
-		kilometersToMiles,
-		metersToFeet,
-		secondsToHHMMSS
-	} from '$lib/units';
+    import { settings } from '$lib/db';
+    import {
+        celsiusToFahrenheit,
+        getConvertedDistance,
+        getConvertedElevation,
+        getConvertedVelocity,
+        getDistanceUnits,
+        getElevationUnits,
+        getVelocityUnits,
+        secondsToHHMMSS,
+    } from '$lib/units';
 
-	import { _ } from 'svelte-i18n';
+    import { _ } from 'svelte-i18n';
 
-	export let value: number;
-	export let type: 'distance' | 'elevation' | 'speed' | 'temperature' | 'time';
-	export let showUnits: boolean = true;
-	export let decimals: number | undefined = undefined;
+    export let value: number;
+    export let type: 'distance' | 'elevation' | 'speed' | 'temperature' | 'time';
+    export let showUnits: boolean = true;
+    export let decimals: number | undefined = undefined;
 
-	const { distanceUnits, velocityUnits, temperatureUnits } = settings;
+    const { distanceUnits, velocityUnits, temperatureUnits } = settings;
 </script>
 
 <span class={$$props.class}>
-	{#if type === 'distance'}
-		{#if $distanceUnits === 'metric'}
-			{value.toFixed(decimals ?? 2)} {showUnits ? $_('units.kilometers') : ''}
-		{:else}
-			{kilometersToMiles(value).toFixed(decimals ?? 2)} {showUnits ? $_('units.miles') : ''}
-		{/if}
-	{:else if type === 'elevation'}
-		{#if $distanceUnits === 'metric'}
-			{value.toFixed(decimals ?? 0)} {showUnits ? $_('units.meters') : ''}
-		{:else}
-			{metersToFeet(value).toFixed(decimals ?? 0)} {showUnits ? $_('units.feet') : ''}
-		{/if}
-	{:else if type === 'speed'}
-		{#if $distanceUnits === 'metric'}
-			{#if $velocityUnits === 'speed'}
-				{value.toFixed(decimals ?? 2)} {showUnits ? $_('units.kilometers_per_hour') : ''}
-			{:else}
-				{secondsToHHMMSS(distancePerHourToSecondsPerDistance(value))}
-				{showUnits ? $_('units.minutes_per_kilometer') : ''}
-			{/if}
-		{:else if $velocityUnits === 'speed'}
-			{kilometersToMiles(value).toFixed(decimals ?? 2)}
-			{showUnits ? $_('units.miles_per_hour') : ''}
-		{:else}
-			{secondsToHHMMSS(distancePerHourToSecondsPerDistance(kilometersToMiles(value)))}
-			{showUnits ? $_('units.minutes_per_mile') : ''}
-		{/if}
-	{:else if type === 'temperature'}
-		{#if $temperatureUnits === 'celsius'}
-			{value} {showUnits ? $_('units.celsius') : ''}
-		{:else}
-			{celsiusToFahrenheit(value)} {showUnits ? $_('units.fahrenheit') : ''}
-		{/if}
-	{:else if type === 'time'}
-		{secondsToHHMMSS(value)}
-	{/if}
+    {#if type === 'distance'}
+        {getConvertedDistance(value, $distanceUnits).toFixed(decimals ?? 2)}
+        {showUnits ? getDistanceUnits($distanceUnits) : ''}
+    {:else if type === 'elevation'}
+        {getConvertedElevation(value, $distanceUnits).toFixed(decimals ?? 0)}
+        {showUnits ? getElevationUnits($distanceUnits) : ''}
+    {:else if type === 'speed'}
+        {#if $velocityUnits === 'speed'}
+            {getConvertedVelocity(value, $velocityUnits, $distanceUnits).toFixed(decimals ?? 2)}
+            {showUnits ? getVelocityUnits($velocityUnits, $distanceUnits) : ''}
+        {:else}
+            {secondsToHHMMSS(getConvertedVelocity(value, $velocityUnits, $distanceUnits))}
+            {showUnits ? getVelocityUnits($velocityUnits, $distanceUnits) : ''}
+        {/if}
+    {:else if type === 'temperature'}
+        {#if $temperatureUnits === 'celsius'}
+            {value} {showUnits ? $_('units.celsius') : ''}
+        {:else}
+            {celsiusToFahrenheit(value)} {showUnits ? $_('units.fahrenheit') : ''}
+        {/if}
+    {:else if type === 'time'}
+        {secondsToHHMMSS(value)}
+    {/if}
 </span>

website/src/lib/components/collapsible-tree/CollapsibleTree.svelte

@@ -1,20 +1,20 @@
 <script lang="ts">
-	import { setContext } from 'svelte';
-	import { writable } from 'svelte/store';
+    import { setContext } from 'svelte';
+    import { writable } from 'svelte/store';
 
-	export let defaultState: 'open' | 'closed' = 'open';
-	export let side: 'left' | 'right' = 'right';
-	export let nohover: boolean = false;
-	export let slotInsideTrigger: boolean = true;
+    export let defaultState: 'open' | 'closed' = 'open';
+    export let side: 'left' | 'right' = 'right';
+    export let nohover: boolean = false;
+    export let slotInsideTrigger: boolean = true;
 
-	let open = writable<Record<string, boolean>>({});
+    let open = writable<Record<string, boolean>>({});
 
-	setContext('collapsible-tree-default-state', defaultState);
-	setContext('collapsible-tree-state', open);
-	setContext('collapsible-tree-side', side);
-	setContext('collapsible-tree-nohover', nohover);
-	setContext('collapsible-tree-parent-id', 'root');
-	setContext('collapsible-tree-slot-inside-trigger', slotInsideTrigger);
+    setContext('collapsible-tree-default-state', defaultState);
+    setContext('collapsible-tree-state', open);
+    setContext('collapsible-tree-side', side);
+    setContext('collapsible-tree-nohover', nohover);
+    setContext('collapsible-tree-parent-id', 'root');
+    setContext('collapsible-tree-slot-inside-trigger', slotInsideTrigger);
 </script>
 
 <slot />

website/src/lib/components/collapsible-tree/CollapsibleTreeNode.svelte

@@ -1,97 +1,97 @@
 <script lang="ts">
-	import * as Collapsible from '$lib/components/ui/collapsible';
-	import { Button } from '$lib/components/ui/button';
-	import { ChevronDown, ChevronLeft, ChevronRight } from 'lucide-svelte';
-	import { getContext, onMount, setContext } from 'svelte';
-	import { get, type Writable } from 'svelte/store';
+    import * as Collapsible from '$lib/components/ui/collapsible';
+    import { Button } from '$lib/components/ui/button';
+    import { ChevronDown, ChevronLeft, ChevronRight } from 'lucide-svelte';
+    import { getContext, onMount, setContext } from 'svelte';
+    import { get, type Writable } from 'svelte/store';
 
-	export let id: string | number;
+    export let id: string | number;
 
-	let defaultState = getContext<'open' | 'closed'>('collapsible-tree-default-state');
-	let open = getContext<Writable<Record<string, boolean>>>('collapsible-tree-state');
-	let side = getContext<'left' | 'right'>('collapsible-tree-side');
-	let nohover = getContext<boolean>('collapsible-tree-nohover');
-	let slotInsideTrigger = getContext<boolean>('collapsible-tree-slot-inside-trigger');
-	let parentId = getContext<string>('collapsible-tree-parent-id');
+    let defaultState = getContext<'open' | 'closed'>('collapsible-tree-default-state');
+    let open = getContext<Writable<Record<string, boolean>>>('collapsible-tree-state');
+    let side = getContext<'left' | 'right'>('collapsible-tree-side');
+    let nohover = getContext<boolean>('collapsible-tree-nohover');
+    let slotInsideTrigger = getContext<boolean>('collapsible-tree-slot-inside-trigger');
+    let parentId = getContext<string>('collapsible-tree-parent-id');
 
-	let fullId = `${parentId}.${id}`;
-	setContext('collapsible-tree-parent-id', fullId);
+    let fullId = `${parentId}.${id}`;
+    setContext('collapsible-tree-parent-id', fullId);
 
-	onMount(() => {
-		if (!get(open).hasOwnProperty(fullId)) {
-			open.update((value) => {
-				value[fullId] = defaultState === 'open';
-				return value;
-			});
-		}
-	});
+    onMount(() => {
+        if (!get(open).hasOwnProperty(fullId)) {
+            open.update((value) => {
+                value[fullId] = defaultState === 'open';
+                return value;
+            });
+        }
+    });
 
-	export function openNode() {
-		open.update((value) => {
-			value[fullId] = true;
-			return value;
-		});
-	}
+    export function openNode() {
+        open.update((value) => {
+            value[fullId] = true;
+            return value;
+        });
+    }
 </script>
 
 <Collapsible.Root bind:open={$open[fullId]} class={$$props.class ?? ''}>
-	{#if slotInsideTrigger}
-		<Collapsible.Trigger class="w-full">
-			<Button
-				variant="ghost"
-				class="w-full flex flex-row {side === 'right'
-					? 'justify-between'
-					: 'justify-start'} py-0 px-1 h-fit {nohover
-					? 'hover:bg-background'
-					: ''} pointer-events-none"
-			>
-				{#if side === 'left'}
-					{#if $open[fullId]}
-						<ChevronDown size="16" class="shrink-0" />
-					{:else}
-						<ChevronRight size="16" class="shrink-0" />
-					{/if}
-				{/if}
-				<slot name="trigger" />
-				{#if side === 'right'}
-					{#if $open[fullId]}
-						<ChevronDown size="16" class="shrink-0" />
-					{:else}
-						<ChevronLeft size="16" class="shrink-0" />
-					{/if}
-				{/if}
-			</Button>
-		</Collapsible.Trigger>
-	{:else}
-		<Button
-			variant="ghost"
-			class="w-full flex flex-row {side === 'right'
-				? 'justify-between'
-				: 'justify-start'} py-0 px-1 h-fit {nohover ? 'hover:bg-background' : ''}"
-		>
-			{#if side === 'left'}
-				<Collapsible.Trigger>
-					{#if $open[fullId]}
-						<ChevronDown size="16" class="shrink-0" />
-					{:else}
-						<ChevronRight size="16" class="shrink-0" />
-					{/if}
-				</Collapsible.Trigger>
-			{/if}
-			<slot name="trigger" />
-			{#if side === 'right'}
-				<Collapsible.Trigger>
-					{#if $open[fullId]}
-						<ChevronDown size="16" class="shrink-0" />
-					{:else}
-						<ChevronLeft size="16" class="shrink-0" />
-					{/if}
-				</Collapsible.Trigger>
-			{/if}
-		</Button>
-	{/if}
+    {#if slotInsideTrigger}
+        <Collapsible.Trigger class="w-full">
+            <Button
+                variant="ghost"
+                class="w-full flex flex-row {side === 'right'
+                    ? 'justify-between'
+                    : 'justify-start'} py-0 px-1 h-fit {nohover
+                    ? 'hover:bg-background'
+                    : ''} pointer-events-none"
+            >
+                {#if side === 'left'}
+                    {#if $open[fullId]}
+                        <ChevronDown size="16" class="shrink-0" />
+                    {:else}
+                        <ChevronRight size="16" class="shrink-0" />
+                    {/if}
+                {/if}
+                <slot name="trigger" />
+                {#if side === 'right'}
+                    {#if $open[fullId]}
+                        <ChevronDown size="16" class="shrink-0" />
+                    {:else}
+                        <ChevronLeft size="16" class="shrink-0" />
+                    {/if}
+                {/if}
+            </Button>
+        </Collapsible.Trigger>
+    {:else}
+        <Button
+            variant="ghost"
+            class="w-full flex flex-row {side === 'right'
+                ? 'justify-between'
+                : 'justify-start'} py-0 px-1 h-fit {nohover ? 'hover:bg-background' : ''}"
+        >
+            {#if side === 'left'}
+                <Collapsible.Trigger>
+                    {#if $open[fullId]}
+                        <ChevronDown size="16" class="shrink-0" />
+                    {:else}
+                        <ChevronRight size="16" class="shrink-0" />
+                    {/if}
+                </Collapsible.Trigger>
+            {/if}
+            <slot name="trigger" />
+            {#if side === 'right'}
+                <Collapsible.Trigger>
+                    {#if $open[fullId]}
+                        <ChevronDown size="16" class="shrink-0" />
+                    {:else}
+                        <ChevronLeft size="16" class="shrink-0" />
+                    {/if}
+                </Collapsible.Trigger>
+            {/if}
+        </Button>
+    {/if}
 
-	<Collapsible.Content class="ml-2">
-		<slot name="content" />
-	</Collapsible.Content>
+    <Collapsible.Content class="ml-2">
+        <slot name="content" />
+    </Collapsible.Content>
 </Collapsible.Root>

website/src/lib/components/collapsible-tree/index.ts

@@ -1,2 +1,2 @@
 export { default as CollapsibleTree } from './CollapsibleTree.svelte';
-export { default as CollapsibleTreeNode } from './CollapsibleTreeNode.svelte';
+export { default as CollapsibleTreeNode } from './CollapsibleTreeNode.svelte';

website/src/lib/components/custom-control/CustomControl.svelte

@@ -1,27 +1,27 @@
 <script lang="ts">
-	import CustomControl from './CustomControl';
-	import { map } from '$lib/stores';
+    import CustomControl from './CustomControl';
+    import { map } from '$lib/stores';
 
-	export let position: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' = 'top-right';
+    export let position: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' = 'top-right';
 
-	let container: HTMLDivElement;
-	let control: CustomControl | undefined = undefined;
+    let container: HTMLDivElement;
+    let control: CustomControl | undefined = undefined;
 
-	$: if ($map && container) {
-		if (position.includes('right')) container.classList.add('float-right');
-		else container.classList.add('float-left');
-		container.classList.remove('hidden');
-		if (control === undefined) {
-			control = new CustomControl(container);
-		}
-		$map.addControl(control, position);
-	}
+    $: if ($map && container) {
+        if (position.includes('right')) container.classList.add('float-right');
+        else container.classList.add('float-left');
+        container.classList.remove('hidden');
+        if (control === undefined) {
+            control = new CustomControl(container);
+        }
+        $map.addControl(control, position);
+    }
 </script>
 
 <div
-	bind:this={container}
-	class="{$$props.class ||
-		''} clear-both translate-0 m-[10px] mb-0 last:mb-[10px] pointer-events-auto bg-background rounded shadow-md hidden"
+    bind:this={container}
+    class="{$$props.class ||
+        ''} clear-both translate-0 m-[10px] mb-0 last:mb-[10px] pointer-events-auto bg-background rounded shadow-md hidden"
 >
-	<slot />
+    <slot />
 </div>

website/src/lib/components/custom-control/CustomControl.ts

@@ -17,4 +17,4 @@ export default class CustomControl implements IControl {
         this._container?.parentNode?.removeChild(this._container);
         this._map = undefined;
     }
-}
+}

website/src/lib/components/docs/DocsContainer.svelte

@@ -0,0 +1,82 @@
+<script lang="ts">
+    import { _ } from 'svelte-i18n';
+
+    export let module;
+</script>
+
+<div class="markdown flex flex-col gap-3">
+    <svelte:component this={module} />
+</div>
+
+<style lang="postcss">
+    :global(.markdown) {
+        @apply text-muted-foreground;
+    }
+
+    :global(.markdown h1) {
+        @apply text-foreground;
+        @apply text-3xl;
+        @apply font-semibold;
+        @apply mb-3 pt-6;
+    }
+
+    :global(.markdown h2) {
+        @apply text-foreground;
+        @apply text-2xl;
+        @apply font-semibold;
+        @apply pt-3;
+    }
+
+    :global(.markdown h3) {
+        @apply text-foreground;
+        @apply text-lg;
+        @apply font-semibold;
+        @apply pt-1.5;
+    }
+
+    :global(.markdown p > button, .markdown li > button) {
+        @apply border;
+        @apply rounded-md;
+        @apply px-1;
+    }
+
+    :global(.markdown > a) {
+        @apply text-link;
+        @apply hover:underline;
+    }
+
+    :global(.markdown p > a) {
+        @apply text-link;
+        @apply hover:underline;
+    }
+
+    :global(.markdown li > a) {
+        @apply text-link;
+        @apply hover:underline;
+    }
+
+    :global(.markdown kbd) {
+        @apply p-1;
+        @apply rounded-md;
+        @apply border;
+    }
+
+    :global(.markdown ul) {
+        @apply list-disc;
+        @apply pl-4;
+    }
+
+    :global(.markdown ol) {
+        @apply list-decimal;
+        @apply pl-4;
+    }
+
+    :global(.markdown li) {
+        @apply mt-1;
+        @apply first:mt-0;
+    }
+
+    :global(.markdown hr) {
+        @apply my-5;
+    }
+</style>

website/src/lib/components/docs/DocsImage.svelte

@@ -1,11 +1,29 @@
 <script lang="ts">
-	export let src;
-	export let alt: string;
+    export let src: 'getting-started/interface' | 'tools/routing' | 'tools/split';
+    export let alt: string;
 </script>
 
 <div class="flex flex-col items-center py-6 w-full">
-	<div class="rounded-md overflow-clip shadow-xl mx-auto">
-		<enhanced:img {src} {alt} class="w-full max-w-3xl" />
-	</div>
-	<p class="text-center text-sm text-muted-foreground mt-2">{alt}</p>
+    <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.png"
+                {alt}
+                class="w-full max-w-3xl"
+            />
+        {:else if src === 'tools/routing'}
+            <enhanced:img
+                src="/src/lib/assets/img/docs/tools/routing.png"
+                {alt}
+                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-3xl"
+            />
+        {/if}
+    </div>
+    <p class="text-center text-sm text-muted-foreground mt-2">{alt}</p>
 </div>

website/src/lib/components/docs/DocsLayers.svelte

@@ -1,13 +1,13 @@
 <script lang="ts">
-	import mapboxOutdoorsMap from '$lib/assets/img/home/mapbox-outdoors.png?enhanced';
-	import waymarkedMap from '$lib/assets/img/home/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={mapboxOutdoorsMap} alt="Mapbox Outdoors map screenshot." class="absolute" />
-	<enhanced:img
-		src={waymarkedMap}
-		alt="Waymarked Trails map screenshot."
-		class="absolute opacity-0 hover:opacity-100 transition-opacity duration-200"
-	/>
+    <enhanced:img src={mapboxOutdoorsMap} alt="Mapbox Outdoors map screenshot." class="absolute" />
+    <enhanced:img
+        src={waymarkedMap}
+        alt="Waymarked Trails map screenshot."
+        class="absolute opacity-0 hover:opacity-100 transition-opacity duration-200"
+    />
 </div>

website/src/lib/components/docs/DocsLoader.svelte

@@ -1,112 +0,0 @@
-<script lang="ts">
-	import { browser } from '$app/environment';
-	import { goto } from '$app/navigation';
-	import { base } from '$app/paths';
-	import { _, locale } from 'svelte-i18n';
-
-	export let path: string;
-	export let titleOnly: boolean = false;
-
-	let module = undefined;
-	let metadata: Record<string, any> = {};
-
-	const modules = import.meta.glob('/src/lib/docs/**/*.mdx');
-
-	function loadModule(path: string) {
-		modules[path]?.().then((mod) => {
-			module = mod.default;
-			metadata = mod.metadata;
-		});
-	}
-
-	$: if ($locale) {
-		if (modules.hasOwnProperty(`/src/lib/docs/${$locale}/${path}`)) {
-			loadModule(`/src/lib/docs/${$locale}/${path}`);
-		} else if (browser) {
-			goto(`${base}/404`);
-		}
-	}
-</script>
-
-{#if module !== undefined}
-	{#if titleOnly}
-		{metadata.title}
-	{:else}
-		<div class="markdown flex flex-col gap-3">
-			<svelte:component this={module} />
-		</div>
-	{/if}
-{/if}
-
-<style lang="postcss">
-	:global(.markdown) {
-		@apply text-muted-foreground;
-	}
-
-	:global(.markdown h1) {
-		@apply text-foreground;
-		@apply text-3xl;
-		@apply font-semibold;
-		@apply mb-3 pt-6;
-	}
-
-	:global(.markdown h2) {
-		@apply text-foreground;
-		@apply text-2xl;
-		@apply font-semibold;
-		@apply pt-3;
-	}
-
-	:global(.markdown h3) {
-		@apply text-foreground;
-		@apply text-lg;
-		@apply font-semibold;
-		@apply pt-1.5;
-	}
-
-	:global(.markdown p > button) {
-		@apply border;
-		@apply rounded-md;
-		@apply px-1;
-	}
-
-	:global(.markdown > a) {
-		@apply text-blue-500;
-		@apply hover:underline;
-	}
-
-	:global(.markdown p > a) {
-		@apply text-blue-500;
-		@apply hover:underline;
-	}
-
-	:global(.markdown li > a) {
-		@apply text-blue-500;
-		@apply hover:underline;
-	}
-
-	:global(.markdown kbd) {
-		@apply p-1;
-		@apply rounded-md;
-		@apply border;
-	}
-
-	:global(.markdown ul) {
-		@apply list-disc;
-		@apply pl-4;
-	}
-
-	:global(.markdown ol) {
-		@apply list-decimal;
-		@apply pl-4;
-	}
-
-	:global(.markdown li) {
-		@apply mt-1;
-		@apply first:mt-0;
-	}
-
-	:global(.markdown hr) {
-		@apply my-5;
-	}
-</style>

website/src/lib/components/docs/DocsNote.svelte

@@ -1,18 +1,18 @@
 <script lang="ts">
-	export let type: 'note' | 'warning' = 'note';
+    export let type: 'note' | 'warning' = 'note';
 </script>
 
 <div
-	class="bg-accent border-l-8 {type === 'note'
-		? 'border-blue-500'
-		: 'border-destructive'} p-2 text-sm rounded-md"
+    class="bg-secondary border-l-8 {type === 'note'
+        ? 'border-link'
+        : 'border-destructive'} p-2 text-sm rounded-md"
 >
-	<slot />
+    <slot />
 </div>
 
 <style lang="postcss">
-	div :global(a) {
-		@apply text-blue-500;
-		@apply hover:underline;
-	}
+    div :global(a) {
+        @apply text-link;
+        @apply hover:underline;
+    }
 </style>

website/src/lib/components/docs/docs.ts

@@ -1,36 +1,64 @@
-import { File, FilePen, View, type Icon, Settings, Pencil, MapPin, Scissors, CalendarClock, Group, Ungroup, Filter, SquareDashedMousePointer } from "lucide-svelte";
-import type { ComponentType } from "svelte";
+import {
+    File,
+    FilePen,
+    View,
+    type Icon,
+    Settings,
+    Pencil,
+    MapPin,
+    Scissors,
+    CalendarClock,
+    Group,
+    Ungroup,
+    Filter,
+    SquareDashedMousePointer,
+    MountainSnow,
+} from 'lucide-svelte';
+import type { ComponentType } from 'svelte';
 
 export const guides: Record<string, string[]> = {
     'getting-started': [],
     menu: ['file', 'edit', 'view', 'settings'],
     'files-and-stats': [],
-    toolbar: ['routing', 'poi', 'scissors', 'time', 'merge', 'extract', 'minify', 'clean'],
+    toolbar: [
+        'routing',
+        'poi',
+        'scissors',
+        'time',
+        'merge',
+        'extract',
+        'elevation',
+        'minify',
+        'clean',
+    ],
     'map-controls': [],
-    'gpx': [],
-    'integration': [],
+    gpx: [],
+    integration: [],
+    faq: [],
 };
 
 export const guideIcons: Record<string, string | ComponentType<Icon>> = {
-    "getting-started": "🚀",
-    "menu": "📂 ⚙️",
-    "file": File,
-    "edit": FilePen,
-    "view": View,
-    "settings": Settings,
-    "files-and-stats": "🗂 📈",
-    "toolbar": "🧰",
-    "routing": Pencil,
-    "poi": MapPin,
-    "scissors": Scissors,
-    "time": CalendarClock,
-    "merge": Group,
-    "extract": Ungroup,
-    "minify": Filter,
-    "clean": SquareDashedMousePointer,
-    "map-controls": "🗺",
-    "gpx": "💾",
-    "integration": "{ 👩‍💻 }",
+    'getting-started': '🚀',
+    menu: '📂 ⚙️',
+    file: File,
+    edit: FilePen,
+    view: View,
+    settings: Settings,
+    'files-and-stats': '🗂 📈',
+    toolbar: '🧰',
+    routing: Pencil,
+    poi: MapPin,
+    scissors: Scissors,
+    time: CalendarClock,
+    merge: Group,
+    extract: Ungroup,
+    elevation: MountainSnow,
+    minify: Filter,
+    clean: SquareDashedMousePointer,
+    'map-controls': '🗺',
+    gpx: '💾',
+    integration: '{ 👩‍💻 }',
+    faq: '🔮',
 };
 
 export function getPreviousGuide(currentGuide: string): string | undefined {
@@ -93,4 +121,4 @@ export function getNextGuide(currentGuide: string): string | undefined {
             return undefined;
         }
     }
-}
+}

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

@@ -1,264 +1,271 @@
 <script lang="ts">
-	import GPXLayers from '$lib/components/gpx-layer/GPXLayers.svelte';
-	import ElevationProfile from '$lib/components/ElevationProfile.svelte';
-	import FileList from '$lib/components/file-list/FileList.svelte';
-	import GPXStatistics from '$lib/components/GPXStatistics.svelte';
-	import Map from '$lib/components/Map.svelte';
-	import LayerControl from '$lib/components/layer-control/LayerControl.svelte';
-	import OpenIn from '$lib/components/embedding/OpenIn.svelte';
-	import {
-		gpxStatistics,
-		slicedGPXStatistics,
-		embedding,
-		loadFile,
-		map,
-		updateGPXData
-	} from '$lib/stores';
-	import { onDestroy, onMount } from 'svelte';
-	import { fileObservers, settings, GPXStatisticsTree } from '$lib/db';
-	import { readable } from 'svelte/store';
-	import type { GPXFile } from 'gpx';
-	import { selection } from '$lib/components/file-list/Selection';
-	import { ListFileItem } from '$lib/components/file-list/FileList';
-	import { allowedEmbeddingBasemaps, type EmbeddingOptions } from './Embedding';
-	import { mode, setMode } from 'mode-watcher';
+    import GPXLayers from '$lib/components/gpx-layer/GPXLayers.svelte';
+    import ElevationProfile from '$lib/components/ElevationProfile.svelte';
+    import FileList from '$lib/components/file-list/FileList.svelte';
+    import GPXStatistics from '$lib/components/GPXStatistics.svelte';
+    import Map from '$lib/components/Map.svelte';
+    import LayerControl from '$lib/components/layer-control/LayerControl.svelte';
+    import OpenIn from '$lib/components/embedding/OpenIn.svelte';
+    import {
+        gpxStatistics,
+        slicedGPXStatistics,
+        embedding,
+        loadFile,
+        map,
+        updateGPXData,
+    } from '$lib/stores';
+    import { onDestroy, onMount } from 'svelte';
+    import { fileObservers, settings, GPXStatisticsTree } from '$lib/db';
+    import { readable } from 'svelte/store';
+    import type { GPXFile } from 'gpx';
+    import { selection } from '$lib/components/file-list/Selection';
+    import { ListFileItem } from '$lib/components/file-list/FileList';
+    import {
+        allowedEmbeddingBasemaps,
+        getFilesFromEmbeddingOptions,
+        type EmbeddingOptions,
+    } from './Embedding';
+    import { mode, setMode } from 'mode-watcher';
+    import { browser } from '$app/environment';
 
-	$embedding = true;
+    $embedding = true;
 
-	const {
-		currentBasemap,
-		distanceUnits,
-		velocityUnits,
-		temperatureUnits,
-		fileOrder,
-		distanceMarkers,
-		directionMarkers
-	} = settings;
+    const {
+        currentBasemap,
+        distanceUnits,
+        velocityUnits,
+        temperatureUnits,
+        fileOrder,
+        distanceMarkers,
+        directionMarkers,
+    } = settings;
 
-	export let useHash = true;
-	export let options: EmbeddingOptions;
-	export let hash: string;
+    export let useHash = true;
+    export let options: EmbeddingOptions;
+    export let hash: string;
 
-	let prevSettings = {
-		distanceMarkers: false,
-		directionMarkers: false,
-		distanceUnits: 'metric',
-		velocityUnits: 'speed',
-		temperatureUnits: 'celsius',
-		theme: 'system'
-	};
+    let prevSettings = {
+        distanceMarkers: false,
+        directionMarkers: false,
+        distanceUnits: 'metric',
+        velocityUnits: 'speed',
+        temperatureUnits: 'celsius',
+        theme: 'system',
+    };
 
-	function applyOptions() {
-		fileObservers.update(($fileObservers) => {
-			$fileObservers.clear();
-			return $fileObservers;
-		});
+    function applyOptions() {
+        fileObservers.update(($fileObservers) => {
+            $fileObservers.clear();
+            return $fileObservers;
+        });
 
-		let downloads: Promise<GPXFile | null>[] = [];
-		options.files.forEach((url) => {
-			downloads.push(
-				fetch(url)
-					.then((response) => response.blob())
-					.then((blob) => new File([blob], url.split('/').pop() ?? url))
-					.then(loadFile)
-			);
-		});
+        let downloads: Promise<GPXFile | null>[] = [];
+        getFilesFromEmbeddingOptions(options).forEach((url) => {
+            downloads.push(
+                fetch(url)
+                    .then((response) => response.blob())
+                    .then((blob) => new File([blob], url.split('/').pop() ?? url))
+                    .then(loadFile)
+            );
+        });
 
-		Promise.all(downloads).then((files) => {
-			let ids: string[] = [];
-			let bounds = {
-				southWest: {
-					lat: 90,
-					lon: 180
-				},
-				northEast: {
-					lat: -90,
-					lon: -180
-				}
-			};
+        Promise.all(downloads).then((files) => {
+            let ids: string[] = [];
+            let bounds = {
+                southWest: {
+                    lat: 90,
+                    lon: 180,
+                },
+                northEast: {
+                    lat: -90,
+                    lon: -180,
+                },
+            };
 
-			fileObservers.update(($fileObservers) => {
-				files.forEach((file, index) => {
-					if (file === null) {
-						return;
-					}
+            fileObservers.update(($fileObservers) => {
+                files.forEach((file, index) => {
+                    if (file === null) {
+                        return;
+                    }
 
-					let id = `gpx-${index}-embed`;
-					file._data.id = id;
-					let statistics = new GPXStatisticsTree(file);
+                    let id = `gpx-${index}-embed`;
+                    file._data.id = id;
+                    let statistics = new GPXStatisticsTree(file);
 
-					$fileObservers.set(
-						id,
-						readable({
-							file,
-							statistics
-						})
-					);
+                    $fileObservers.set(
+                        id,
+                        readable({
+                            file,
+                            statistics,
+                        })
+                    );
 
-					ids.push(id);
-					let fileBounds = statistics.getStatisticsFor(new ListFileItem(id)).global.bounds;
+                    ids.push(id);
+                    let fileBounds = statistics.getStatisticsFor(new ListFileItem(id)).global
+                        .bounds;
 
-					bounds.southWest.lat = Math.min(bounds.southWest.lat, fileBounds.southWest.lat);
-					bounds.southWest.lon = Math.min(bounds.southWest.lon, fileBounds.southWest.lon);
-					bounds.northEast.lat = Math.max(bounds.northEast.lat, fileBounds.northEast.lat);
-					bounds.northEast.lon = Math.max(bounds.northEast.lon, fileBounds.northEast.lon);
-				});
+                    bounds.southWest.lat = Math.min(bounds.southWest.lat, fileBounds.southWest.lat);
+                    bounds.southWest.lon = Math.min(bounds.southWest.lon, fileBounds.southWest.lon);
+                    bounds.northEast.lat = Math.max(bounds.northEast.lat, fileBounds.northEast.lat);
+                    bounds.northEast.lon = Math.max(bounds.northEast.lon, fileBounds.northEast.lon);
+                });
 
-				return $fileObservers;
-			});
+                return $fileObservers;
+            });
 
-			$fileOrder = [...$fileOrder.filter((id) => !id.includes('embed')), ...ids];
+            $fileOrder = [...$fileOrder.filter((id) => !id.includes('embed')), ...ids];
 
-			selection.update(($selection) => {
-				$selection.clear();
-				ids.forEach((id) => {
-					$selection.toggle(new ListFileItem(id));
-				});
-				return $selection;
-			});
+            selection.update(($selection) => {
+                $selection.clear();
+                ids.forEach((id) => {
+                    $selection.toggle(new ListFileItem(id));
+                });
+                return $selection;
+            });
 
-			if (hash.length === 0) {
-				map.subscribe(($map) => {
-					if ($map) {
-						$map.fitBounds(
-							[
-								bounds.southWest.lon,
-								bounds.southWest.lat,
-								bounds.northEast.lon,
-								bounds.northEast.lat
-							],
-							{
-								padding: 80,
-								linear: true,
-								easing: () => 1
-							}
-						);
-					}
-				});
-			}
-		});
+            if (hash.length === 0) {
+                map.subscribe(($map) => {
+                    if ($map) {
+                        $map.fitBounds(
+                            [
+                                bounds.southWest.lon,
+                                bounds.southWest.lat,
+                                bounds.northEast.lon,
+                                bounds.northEast.lat,
+                            ],
+                            {
+                                padding: 80,
+                                linear: true,
+                                easing: () => 1,
+                            }
+                        );
+                    }
+                });
+            }
+        });
 
-		if (options.basemap !== $currentBasemap && allowedEmbeddingBasemaps.includes(options.basemap)) {
-			$currentBasemap = options.basemap;
-		}
+        if (
+            options.basemap !== $currentBasemap &&
+            allowedEmbeddingBasemaps.includes(options.basemap)
+        ) {
+            $currentBasemap = options.basemap;
+        }
 
-		if (options.distanceMarkers !== $distanceMarkers) {
-			$distanceMarkers = options.distanceMarkers;
-		}
+        if (options.distanceMarkers !== $distanceMarkers) {
+            $distanceMarkers = options.distanceMarkers;
+        }
 
-		if (options.directionMarkers !== $directionMarkers) {
-			$directionMarkers = options.directionMarkers;
-		}
+        if (options.directionMarkers !== $directionMarkers) {
+            $directionMarkers = options.directionMarkers;
+        }
 
-		if (options.distanceUnits !== $distanceUnits) {
-			$distanceUnits = options.distanceUnits;
-		}
+        if (options.distanceUnits !== $distanceUnits) {
+            $distanceUnits = options.distanceUnits;
+        }
 
-		if (options.velocityUnits !== $velocityUnits) {
-			$velocityUnits = options.velocityUnits;
-		}
+        if (options.velocityUnits !== $velocityUnits) {
+            $velocityUnits = options.velocityUnits;
+        }
 
-		if (options.temperatureUnits !== $temperatureUnits) {
-			$temperatureUnits = options.temperatureUnits;
-		}
+        if (options.temperatureUnits !== $temperatureUnits) {
+            $temperatureUnits = options.temperatureUnits;
+        }
 
-		if (options.theme !== $mode) {
-			setMode(options.theme);
-		}
-	}
+        if (options.theme !== $mode) {
+            setMode(options.theme);
+        }
+    }
 
-	onMount(() => {
-		prevSettings.distanceMarkers = $distanceMarkers;
-		prevSettings.directionMarkers = $directionMarkers;
-		prevSettings.distanceUnits = $distanceUnits;
-		prevSettings.velocityUnits = $velocityUnits;
-		prevSettings.temperatureUnits = $temperatureUnits;
-		prevSettings.theme = $mode ?? 'system';
-	});
+    onMount(() => {
+        prevSettings.distanceMarkers = $distanceMarkers;
+        prevSettings.directionMarkers = $directionMarkers;
+        prevSettings.distanceUnits = $distanceUnits;
+        prevSettings.velocityUnits = $velocityUnits;
+        prevSettings.temperatureUnits = $temperatureUnits;
+        prevSettings.theme = $mode ?? 'system';
+    });
 
-	$: if (options) {
-		applyOptions();
-	}
+    $: if (browser && options) {
+        applyOptions();
+    }
 
-	$: if ($fileOrder) {
-		updateGPXData();
-	}
+    $: if ($fileOrder) {
+        updateGPXData();
+    }
 
-	onDestroy(() => {
-		if ($distanceMarkers !== prevSettings.distanceMarkers) {
-			$distanceMarkers = prevSettings.distanceMarkers;
-		}
+    onDestroy(() => {
+        if ($distanceMarkers !== prevSettings.distanceMarkers) {
+            $distanceMarkers = prevSettings.distanceMarkers;
+        }
 
-		if ($directionMarkers !== prevSettings.directionMarkers) {
-			$directionMarkers = prevSettings.directionMarkers;
-		}
+        if ($directionMarkers !== prevSettings.directionMarkers) {
+            $directionMarkers = prevSettings.directionMarkers;
+        }
 
-		if ($distanceUnits !== prevSettings.distanceUnits) {
-			$distanceUnits = prevSettings.distanceUnits;
-		}
+        if ($distanceUnits !== prevSettings.distanceUnits) {
+            $distanceUnits = prevSettings.distanceUnits;
+        }
 
-		if ($velocityUnits !== prevSettings.velocityUnits) {
-			$velocityUnits = prevSettings.velocityUnits;
-		}
+        if ($velocityUnits !== prevSettings.velocityUnits) {
+            $velocityUnits = prevSettings.velocityUnits;
+        }
 
-		if ($temperatureUnits !== prevSettings.temperatureUnits) {
-			$temperatureUnits = prevSettings.temperatureUnits;
-		}
+        if ($temperatureUnits !== prevSettings.temperatureUnits) {
+            $temperatureUnits = prevSettings.temperatureUnits;
+        }
 
-		if ($mode !== prevSettings.theme) {
-			setMode(prevSettings.theme);
-		}
+        if ($mode !== prevSettings.theme) {
+            setMode(prevSettings.theme);
+        }
 
-		$selection.clear();
-		$fileObservers.clear();
-		$fileOrder = $fileOrder.filter((id) => !id.includes('embed'));
-	});
+        $selection.clear();
+        $fileObservers.clear();
+        $fileOrder = $fileOrder.filter((id) => !id.includes('embed'));
+    });
 </script>
 
 <div class="absolute flex flex-col h-full w-full border rounded-xl overflow-clip">
-	<div class="grow relative">
-		<Map
-			class="h-full {$fileObservers.size > 1 ? 'horizontal' : ''}"
-			accessToken={options.token}
-			geocoder={false}
-			geolocate={false}
-			hash={useHash}
-		/>
-		<OpenIn bind:files={options.files} />
-		<LayerControl />
-		<GPXLayers />
-		{#if $fileObservers.size > 1}
-			<div class="h-10 -translate-y-10 w-full pointer-events-none absolute z-30">
-				<FileList orientation="horizontal" />
-			</div>
-		{/if}
-	</div>
-	<div
-		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}
-				additionalDatasets={[
-					options.elevation.speed ? 'speed' : null,
-					options.elevation.hr ? 'hr' : null,
-					options.elevation.cad ? 'cad' : null,
-					options.elevation.temp ? 'temp' : null,
-					options.elevation.power ? 'power' : null
-				].filter((dataset) => dataset !== null)}
-				elevationFill={options.elevation.fill}
-				panelSize={options.elevation.height}
-				showControls={options.elevation.controls}
-				class="py-2"
-			/>
-		{/if}
-	</div>
+    <div class="grow relative">
+        <Map
+            class="h-full {$fileObservers.size > 1 ? 'horizontal' : ''}"
+            accessToken={options.token}
+            geocoder={false}
+            geolocate={false}
+            hash={useHash}
+        />
+        <OpenIn bind:files={options.files} bind:ids={options.ids} />
+        <LayerControl />
+        <GPXLayers />
+        {#if $fileObservers.size > 1}
+            <div class="h-10 -translate-y-10 w-full pointer-events-none absolute z-30">
+                <FileList orientation="horizontal" />
+            </div>
+        {/if}
+    </div>
+    <div
+        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}
+                additionalDatasets={[
+                    options.elevation.speed ? 'speed' : null,
+                    options.elevation.hr ? 'hr' : null,
+                    options.elevation.cad ? 'cad' : null,
+                    options.elevation.temp ? 'temp' : null,
+                    options.elevation.power ? 'power' : null,
+                ].filter((dataset) => dataset !== null)}
+                elevationFill={options.elevation.fill}
+                showControls={options.elevation.controls}
+            />
+        {/if}
+    </div>
 </div>

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

@@ -1,31 +1,34 @@
-import { basemaps } from "$lib/assets/layers";
+import { PUBLIC_MAPBOX_TOKEN } from '$env/static/public';
+import { basemaps } from '$lib/assets/layers';
 
 export type EmbeddingOptions = {
     token: string;
     files: string[];
+    ids: string[];
     basemap: string;
     elevation: {
         show: boolean;
-        height: number,
-        controls: boolean,
-        fill: 'slope' | 'surface' | undefined,
-        speed: boolean,
-        hr: boolean,
-        cad: boolean,
-        temp: boolean,
-        power: boolean,
-    },
-    distanceMarkers: boolean,
-    directionMarkers: boolean,
-    distanceUnits: 'metric' | 'imperial',
-    velocityUnits: 'speed' | 'pace',
-    temperatureUnits: 'celsius' | 'fahrenheit',
-    theme: 'system' | 'light' | 'dark',
+        height: number;
+        controls: boolean;
+        fill: 'slope' | 'surface' | 'highway' | undefined;
+        speed: boolean;
+        hr: boolean;
+        cad: boolean;
+        temp: boolean;
+        power: boolean;
+    };
+    distanceMarkers: boolean;
+    directionMarkers: boolean;
+    distanceUnits: 'metric' | 'imperial' | 'nautical';
+    velocityUnits: 'speed' | 'pace';
+    temperatureUnits: 'celsius' | 'fahrenheit';
+    theme: 'system' | 'light' | 'dark';
 };
 
 export const defaultEmbeddingOptions = {
     token: '',
     files: [],
+    ids: [],
     basemap: 'mapboxOutdoors',
     elevation: {
         show: true,
@@ -50,10 +53,17 @@ export function getDefaultEmbeddingOptions(): EmbeddingOptions {
     return JSON.parse(JSON.stringify(defaultEmbeddingOptions));
 }
 
-export function getMergedEmbeddingOptions(options: any, defaultOptions: any = defaultEmbeddingOptions): EmbeddingOptions {
+export function getMergedEmbeddingOptions(
+    options: any,
+    defaultOptions: any = defaultEmbeddingOptions
+): EmbeddingOptions {
     const mergedOptions = JSON.parse(JSON.stringify(defaultOptions));
     for (const key in options) {
-        if (typeof options[key] === 'object' && options[key] !== null && !Array.isArray(options[key])) {
+        if (
+            typeof options[key] === 'object' &&
+            options[key] !== null &&
+            !Array.isArray(options[key])
+        ) {
             mergedOptions[key] = getMergedEmbeddingOptions(options[key], defaultOptions[key]);
         } else {
             mergedOptions[key] = options[key];
@@ -62,11 +72,21 @@ export function getMergedEmbeddingOptions(options: any, defaultOptions: any = de
     return mergedOptions;
 }
 
-export function getCleanedEmbeddingOptions(options: any, defaultOptions: any = defaultEmbeddingOptions): any {
+export function getCleanedEmbeddingOptions(
+    options: any,
+    defaultOptions: any = defaultEmbeddingOptions
+): any {
     const cleanedOptions = JSON.parse(JSON.stringify(options));
     for (const key in cleanedOptions) {
-        if (typeof cleanedOptions[key] === 'object' && cleanedOptions[key] !== null && !Array.isArray(cleanedOptions[key])) {
-            cleanedOptions[key] = getCleanedEmbeddingOptions(cleanedOptions[key], defaultOptions[key]);
+        if (
+            typeof cleanedOptions[key] === 'object' &&
+            cleanedOptions[key] !== null &&
+            !Array.isArray(cleanedOptions[key])
+        ) {
+            cleanedOptions[key] = getCleanedEmbeddingOptions(
+                cleanedOptions[key],
+                defaultOptions[key]
+            );
             if (Object.keys(cleanedOptions[key]).length === 0) {
                 delete cleanedOptions[key];
             }
@@ -77,4 +97,59 @@ export function getCleanedEmbeddingOptions(options: any, defaultOptions: any = d
     return cleanedOptions;
 }
 
-export const allowedEmbeddingBasemaps = Object.keys(basemaps).filter(basemap => !['ordnanceSurvey'].includes(basemap));
+export const allowedEmbeddingBasemaps = Object.keys(basemaps).filter(
+    (basemap) => !['ordnanceSurvey'].includes(basemap)
+);
+
+export function getFilesFromEmbeddingOptions(options: EmbeddingOptions): string[] {
+    return options.files.concat(options.ids.map((id) => getURLForGoogleDriveFile(id)));
+}
+
+export function getURLForGoogleDriveFile(fileId: string): string {
+    return `https://www.googleapis.com/drive/v3/files/${fileId}?alt=media&key=AIzaSyA2ZadQob_hXiT2VaYIkAyafPvz_4ZMssk`;
+}
+
+export function convertOldEmbeddingOptions(options: URLSearchParams): any {
+    let newOptions: any = {
+        token: PUBLIC_MAPBOX_TOKEN,
+        files: [],
+        ids: [],
+    };
+    if (options.has('state')) {
+        let state = JSON.parse(options.get('state')!);
+        if (state.ids) {
+            newOptions.ids.push(...state.ids);
+        }
+        if (state.urls) {
+            newOptions.files.push(...state.urls);
+        }
+    }
+    if (options.has('source')) {
+        let basemap = options.get('source')!;
+        if (basemap === 'satellite') {
+            newOptions.basemap = 'mapboxSatellite';
+        } else if (basemap === 'otm') {
+            newOptions.basemap = 'openTopoMap';
+        } else if (basemap === 'ohm') {
+            newOptions.basemap = 'openHikingMap';
+        }
+    }
+    if (options.has('imperial')) {
+        newOptions.distanceUnits = 'imperial';
+    }
+    if (options.has('running')) {
+        newOptions.velocityUnits = 'pace';
+    }
+    if (options.has('distance')) {
+        newOptions.distanceMarkers = true;
+    }
+    if (options.has('direction')) {
+        newOptions.directionMarkers = true;
+    }
+    if (options.has('slope')) {
+        newOptions.elevation = {
+            fill: 'slope',
+        };
+    }
+    return newOptions;
+}

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

@@ -1,313 +1,339 @@
 <script lang="ts">
-	import * as Card from '$lib/components/ui/card';
-	import { Label } from '$lib/components/ui/label';
-	import { Input } from '$lib/components/ui/input';
-	import * as Select from '$lib/components/ui/select';
-	import { Checkbox } from '$lib/components/ui/checkbox';
-	import * as RadioGroup from '$lib/components/ui/radio-group';
-	import {
-		Zap,
-		HeartPulse,
-		Orbit,
-		Thermometer,
-		SquareActivity,
-		Coins,
-		Milestone,
-		Video
-	} from 'lucide-svelte';
-	import { _ } from 'svelte-i18n';
-	import {
-		allowedEmbeddingBasemaps,
-		getCleanedEmbeddingOptions,
-		getDefaultEmbeddingOptions
-	} from './Embedding';
-	import { PUBLIC_MAPBOX_TOKEN } from '$env/static/public';
-	import Embedding from './Embedding.svelte';
-	import { map } from '$lib/stores';
-	import { tick } from 'svelte';
-	import { base } from '$app/paths';
+    import * as Card from '$lib/components/ui/card';
+    import { Label } from '$lib/components/ui/label';
+    import { Input } from '$lib/components/ui/input';
+    import * as Select from '$lib/components/ui/select';
+    import { Checkbox } from '$lib/components/ui/checkbox';
+    import * as RadioGroup from '$lib/components/ui/radio-group';
+    import {
+        Zap,
+        HeartPulse,
+        Orbit,
+        Thermometer,
+        SquareActivity,
+        Coins,
+        Milestone,
+        Video,
+    } from 'lucide-svelte';
+    import { _ } from 'svelte-i18n';
+    import {
+        allowedEmbeddingBasemaps,
+        getCleanedEmbeddingOptions,
+        getDefaultEmbeddingOptions,
+    } from './Embedding';
+    import { PUBLIC_MAPBOX_TOKEN } from '$env/static/public';
+    import Embedding from './Embedding.svelte';
+    import { map } from '$lib/stores';
+    import { tick } from 'svelte';
+    import { base } from '$app/paths';
 
-	let options = getDefaultEmbeddingOptions();
-	options.token = 'YOUR_MAPBOX_TOKEN';
-	options.files = [
-		'https://raw.githubusercontent.com/gpxstudio/gpx.studio/main/gpx/test-data/simple.gpx'
-	];
+    let options = getDefaultEmbeddingOptions();
+    options.token = 'YOUR_MAPBOX_TOKEN';
+    options.files = [
+        'https://raw.githubusercontent.com/gpxstudio/gpx.studio/main/gpx/test-data/simple.gpx',
+    ];
 
-	let files = options.files[0];
-	$: if (files) {
-		let urls = files.split(',');
-		urls = urls.filter((url) => url.length > 0);
-		if (JSON.stringify(urls) !== JSON.stringify(options.files)) {
-			options.files = urls;
-		}
-	}
+    let files = options.files[0];
+    $: {
+        let urls = files.split(',');
+        urls = urls.filter((url) => url.length > 0);
+        if (JSON.stringify(urls) !== JSON.stringify(options.files)) {
+            options.files = urls;
+        }
+    }
+    let driveIds = '';
+    $: {
+        let ids = driveIds.split(',');
+        ids = ids.filter((id) => id.length > 0);
+        if (JSON.stringify(ids) !== JSON.stringify(options.ids)) {
+            options.ids = ids;
+        }
+    }
 
-	let manualCamera = false;
+    let manualCamera = false;
 
-	let zoom = '0';
-	let lat = '0';
-	let lon = '0';
-	let bearing = '0';
-	let pitch = '0';
+    let zoom = '0';
+    let lat = '0';
+    let lon = '0';
+    let bearing = '0';
+    let pitch = '0';
 
-	$: hash = manualCamera ? `#${zoom}/${lat}/${lon}/${bearing}/${pitch}` : '';
+    $: hash = manualCamera ? `#${zoom}/${lat}/${lon}/${bearing}/${pitch}` : '';
 
-	$: iframeOptions =
-		options.token.length === 0 || options.token === 'YOUR_MAPBOX_TOKEN'
-			? Object.assign({}, options, { token: PUBLIC_MAPBOX_TOKEN })
-			: options;
+    $: iframeOptions =
+        options.token.length === 0 || options.token === 'YOUR_MAPBOX_TOKEN'
+            ? Object.assign({}, options, { token: PUBLIC_MAPBOX_TOKEN })
+            : options;
 
-	async function resizeMap() {
-		if ($map) {
-			await tick();
-			$map.resize();
-		}
-	}
+    async function resizeMap() {
+        if ($map) {
+            await tick();
+            $map.resize();
+        }
+    }
 
-	$: if (options.elevation.height || options.elevation.show) {
-		resizeMap();
-	}
+    $: if (options.elevation.height || options.elevation.show) {
+        resizeMap();
+    }
 
-	function updateCamera() {
-		if ($map) {
-			let center = $map.getCenter();
-			lat = center.lat.toFixed(4);
-			lon = center.lng.toFixed(4);
-			zoom = $map.getZoom().toFixed(2);
-			bearing = $map.getBearing().toFixed(1);
-			pitch = $map.getPitch().toFixed(0);
-		}
-	}
+    function updateCamera() {
+        if ($map) {
+            let center = $map.getCenter();
+            lat = center.lat.toFixed(4);
+            lon = center.lng.toFixed(4);
+            zoom = $map.getZoom().toFixed(2);
+            bearing = $map.getBearing().toFixed(1);
+            pitch = $map.getPitch().toFixed(0);
+        }
+    }
 
-	$: if ($map) {
-		$map.on('moveend', updateCamera);
-	}
+    $: if ($map) {
+        $map.on('moveend', updateCamera);
+    }
 </script>
 
-<Card.Root>
-	<Card.Header>
-		<Card.Title>{$_('embedding.title')}</Card.Title>
-	</Card.Header>
-	<Card.Content>
-		<fieldset class="flex flex-col gap-3">
-			<Label for="token">{$_('embedding.mapbox_token')}</Label>
-			<Input id="token" type="text" class="h-8" bind:value={options.token} />
-			<Label for="file_urls">{$_('embedding.file_urls')}</Label>
-			<Input id="file_urls" type="text" class="h-8" bind:value={files} />
-			<Label for="basemap">{$_('embedding.basemap')}</Label>
-			<Select.Root
-				selected={{ value: options.basemap, label: $_(`layers.label.${options.basemap}`) }}
-				onSelectedChange={(selected) => {
-					if (selected?.value) {
-						options.basemap = selected?.value;
-					}
-				}}
-			>
-				<Select.Trigger id="basemap" class="w-full h-8">
-					<Select.Value />
-				</Select.Trigger>
-				<Select.Content class="max-h-60 overflow-y-scroll">
-					{#each allowedEmbeddingBasemaps as basemap}
-						<Select.Item value={basemap}>{$_(`layers.label.${basemap}`)}</Select.Item>
-					{/each}
-				</Select.Content>
-			</Select.Root>
-			<div class="flex flex-row items-center gap-2">
-				<Label for="profile">{$_('menu.elevation_profile')}</Label>
-				<Checkbox id="profile" bind:checked={options.elevation.show} />
-			</div>
-			{#if options.elevation.show}
-				<div class="grid grid-cols-2 gap-x-6 gap-y-3 rounded-md border p-3 mt-1">
-					<Label class="flex flex-row items-center gap-2">
-						{$_('embedding.height')}
-						<Input type="number" bind:value={options.elevation.height} class="h-8 w-20" />
-					</Label>
-					<div class="flex flex-row items-center gap-2">
-						<span class="shrink-0">
-							{$_('embedding.fill_by')}
-						</span>
-						<Select.Root
-							selected={{ value: 'none', label: $_('embedding.none') }}
-							onSelectedChange={(selected) => {
-								let value = selected?.value;
-								if (value === 'none') {
-									options.elevation.fill = undefined;
-								} else if (value === 'slope' || value === 'surface') {
-									options.elevation.fill = value;
-								}
-							}}
-						>
-							<Select.Trigger class="grow h-8">
-								<Select.Value />
-							</Select.Trigger>
-							<Select.Content>
-								<Select.Item value="slope">{$_('quantities.slope')}</Select.Item>
-								<Select.Item value="surface">{$_('quantities.surface')}</Select.Item>
-								<Select.Item value="none">{$_('embedding.none')}</Select.Item>
-							</Select.Content>
-						</Select.Root>
-					</div>
-					<div class="flex flex-row items-center gap-2">
-						<Checkbox id="controls" bind:checked={options.elevation.controls} />
-						<Label for="controls">{$_('embedding.show_controls')}</Label>
-					</div>
-					<div class="flex flex-row items-center gap-2">
-						<Checkbox id="show-speed" bind:checked={options.elevation.speed} />
-						<Label for="show-speed" class="flex flex-row items-center gap-1">
-							<Zap size="16" />
-							{$_('chart.show_speed')}
-						</Label>
-					</div>
-					<div class="flex flex-row items-center gap-2">
-						<Checkbox id="show-hr" bind:checked={options.elevation.hr} />
-						<Label for="show-hr" class="flex flex-row items-center gap-1">
-							<HeartPulse size="16" />
-							{$_('chart.show_heartrate')}
-						</Label>
-					</div>
-					<div class="flex flex-row items-center gap-2">
-						<Checkbox id="show-cad" bind:checked={options.elevation.cad} />
-						<Label for="show-cad" class="flex flex-row items-center gap-1">
-							<Orbit size="16" />
-							{$_('chart.show_cadence')}
-						</Label>
-					</div>
-					<div class="flex flex-row items-center gap-2">
-						<Checkbox id="show-temp" bind:checked={options.elevation.temp} />
-						<Label for="show-temp" class="flex flex-row items-center gap-1">
-							<Thermometer size="16" />
-							{$_('chart.show_temperature')}
-						</Label>
-					</div>
-					<div class="flex flex-row items-center gap-2">
-						<Checkbox id="show-power" bind:checked={options.elevation.power} />
-						<Label for="show-power" class="flex flex-row items-center gap-1">
-							<SquareActivity size="16" />
-							{$_('chart.show_power')}
-						</Label>
-					</div>
-				</div>
-			{/if}
-			<div class="flex flex-row items-center gap-2">
-				<Checkbox id="distance-markers" bind:checked={options.distanceMarkers} />
-				<Label for="distance-markers" class="flex flex-row items-center gap-1">
-					<Coins size="16" />
-					{$_('menu.distance_markers')}
-				</Label>
-			</div>
-			<div class="flex flex-row items-center gap-2">
-				<Checkbox id="direction-markers" bind:checked={options.directionMarkers} />
-				<Label for="direction-markers" class="flex flex-row items-center gap-1">
-					<Milestone size="16" />
-					{$_('menu.direction_markers')}
-				</Label>
-			</div>
-			<div class="flex flex-row flex-wrap justify-between gap-3">
-				<Label class="flex flex-col items-start gap-2">
-					{$_('menu.distance_units')}
-					<RadioGroup.Root bind:value={options.distanceUnits}>
-						<div class="flex items-center space-x-2">
-							<RadioGroup.Item value="metric" id="metric" />
-							<Label for="metric">{$_('menu.metric')}</Label>
-						</div>
-						<div class="flex items-center space-x-2">
-							<RadioGroup.Item value="imperial" id="imperial" />
-							<Label for="imperial">{$_('menu.imperial')}</Label>
-						</div>
-					</RadioGroup.Root>
-				</Label>
-				<Label class="flex flex-col items-start gap-2">
-					{$_('menu.velocity_units')}
-					<RadioGroup.Root bind:value={options.velocityUnits}>
-						<div class="flex items-center space-x-2">
-							<RadioGroup.Item value="speed" id="speed" />
-							<Label for="speed">{$_('quantities.speed')}</Label>
-						</div>
-						<div class="flex items-center space-x-2">
-							<RadioGroup.Item value="pace" id="pace" />
-							<Label for="pace">{$_('quantities.pace')}</Label>
-						</div>
-					</RadioGroup.Root>
-				</Label>
-				<Label class="flex flex-col items-start gap-2">
-					{$_('menu.temperature_units')}
-					<RadioGroup.Root bind:value={options.temperatureUnits}>
-						<div class="flex items-center space-x-2">
-							<RadioGroup.Item value="celsius" id="celsius" />
-							<Label for="celsius">{$_('menu.celsius')}</Label>
-						</div>
-						<div class="flex items-center space-x-2">
-							<RadioGroup.Item value="fahrenheit" id="fahrenheit" />
-							<Label for="fahrenheit">{$_('menu.fahrenheit')}</Label>
-						</div>
-					</RadioGroup.Root>
-				</Label>
-			</div>
-			<Label class="flex flex-col items-start gap-2">
-				{$_('menu.mode')}
-				<RadioGroup.Root bind:value={options.theme} class="flex flex-row">
-					<div class="flex items-center space-x-2">
-						<RadioGroup.Item value="system" id="system" />
-						<Label for="system">{$_('menu.system')}</Label>
-					</div>
-					<div class="flex items-center space-x-2">
-						<RadioGroup.Item value="light" id="light" />
-						<Label for="light">{$_('menu.light')}</Label>
-					</div>
-					<div class="flex items-center space-x-2">
-						<RadioGroup.Item value="dark" id="dark" />
-						<Label for="dark">{$_('menu.dark')}</Label>
-					</div>
-				</RadioGroup.Root>
-			</Label>
-			<div class="flex flex-col gap-3 p-3 border rounded-md">
-				<div class="flex flex-row items-center gap-2">
-					<Checkbox id="manual-camera" bind:checked={manualCamera} />
-					<Label for="manual-camera" class="flex flex-row items-center gap-1">
-						<Video size="16" />
-						{$_('embedding.manual_camera')}
-					</Label>
-				</div>
-				<p class="text-sm text-muted-foreground">
-					{$_('embedding.manual_camera_description')}
-				</p>
-				<div class="flex flex-row flex-wrap items-center gap-6">
-					<Label class="flex flex-col gap-1">
-						<span>{$_('embedding.latitude')}</span>
-						<span>{lat}</span>
-					</Label>
-					<Label class="flex flex-col gap-1">
-						<span>{$_('embedding.longitude')}</span>
-						<span>{lon}</span>
-					</Label>
-					<Label class="flex flex-col gap-1">
-						<span>{$_('embedding.zoom')}</span>
-						<span>{zoom}</span>
-					</Label>
-					<Label class="flex flex-col gap-1">
-						<span>{$_('embedding.bearing')}</span>
-						<span>{bearing}</span>
-					</Label>
-					<Label class="flex flex-col gap-1">
-						<span>{$_('embedding.pitch')}</span>
-						<span>{pitch}</span>
-					</Label>
-				</div>
-			</div>
-			<Label>
-				{$_('embedding.preview')}
-			</Label>
-			<div class="relative h-[600px]">
-				<Embedding bind:options={iframeOptions} bind:hash useHash={false} />
-			</div>
-			<Label>
-				{$_('embedding.code')}
-			</Label>
-			<pre class="bg-primary text-primary-foreground p-3 rounded-md whitespace-normal break-all">
+<Card.Root id="embedding-playground">
+    <Card.Header>
+        <Card.Title>{$_('embedding.title')}</Card.Title>
+    </Card.Header>
+    <Card.Content>
+        <fieldset class="flex flex-col gap-3">
+            <Label for="token">{$_('embedding.mapbox_token')}</Label>
+            <Input id="token" type="text" class="h-8" bind:value={options.token} />
+            <Label for="file_urls">{$_('embedding.file_urls')}</Label>
+            <Input id="file_urls" type="text" class="h-8" bind:value={files} />
+            <Label for="drive_ids">{$_('embedding.drive_ids')}</Label>
+            <Input id="drive_ids" type="text" class="h-8" bind:value={driveIds} />
+            <Label for="basemap">{$_('embedding.basemap')}</Label>
+            <Select.Root
+                selected={{ value: options.basemap, label: $_(`layers.label.${options.basemap}`) }}
+                onSelectedChange={(selected) => {
+                    if (selected?.value) {
+                        options.basemap = selected?.value;
+                    }
+                }}
+            >
+                <Select.Trigger id="basemap" class="w-full h-8">
+                    <Select.Value />
+                </Select.Trigger>
+                <Select.Content class="max-h-60 overflow-y-scroll">
+                    {#each allowedEmbeddingBasemaps as basemap}
+                        <Select.Item value={basemap}>{$_(`layers.label.${basemap}`)}</Select.Item>
+                    {/each}
+                </Select.Content>
+            </Select.Root>
+            <div class="flex flex-row items-center gap-2">
+                <Label for="profile">{$_('menu.elevation_profile')}</Label>
+                <Checkbox id="profile" bind:checked={options.elevation.show} />
+            </div>
+            {#if options.elevation.show}
+                <div class="grid grid-cols-2 gap-x-6 gap-y-3 rounded-md border p-3 mt-1">
+                    <Label class="flex flex-row items-center gap-2">
+                        {$_('embedding.height')}
+                        <Input
+                            type="number"
+                            bind:value={options.elevation.height}
+                            class="h-8 w-20"
+                        />
+                    </Label>
+                    <div class="flex flex-row items-center gap-2">
+                        <span class="shrink-0">
+                            {$_('embedding.fill_by')}
+                        </span>
+                        <Select.Root
+                            selected={{ value: 'none', label: $_('embedding.none') }}
+                            onSelectedChange={(selected) => {
+                                let value = selected?.value;
+                                if (value === 'none') {
+                                    options.elevation.fill = undefined;
+                                } else if (
+                                    value === 'slope' ||
+                                    value === 'surface' ||
+                                    value === 'highway'
+                                ) {
+                                    options.elevation.fill = value;
+                                }
+                            }}
+                        >
+                            <Select.Trigger class="grow h-8">
+                                <Select.Value />
+                            </Select.Trigger>
+                            <Select.Content>
+                                <Select.Item value="slope">{$_('quantities.slope')}</Select.Item>
+                                <Select.Item value="surface">{$_('quantities.surface')}</Select.Item
+                                >
+                                <Select.Item value="highway">{$_('quantities.highway')}</Select.Item
+                                >
+                                <Select.Item value="none">{$_('embedding.none')}</Select.Item>
+                            </Select.Content>
+                        </Select.Root>
+                    </div>
+                    <div class="flex flex-row items-center gap-2">
+                        <Checkbox id="controls" bind:checked={options.elevation.controls} />
+                        <Label for="controls">{$_('embedding.show_controls')}</Label>
+                    </div>
+                    <div class="flex flex-row items-center gap-2">
+                        <Checkbox id="show-speed" bind:checked={options.elevation.speed} />
+                        <Label for="show-speed" class="flex flex-row items-center gap-1">
+                            <Zap size="16" />
+                            {$_('quantities.speed')}
+                        </Label>
+                    </div>
+                    <div class="flex flex-row items-center gap-2">
+                        <Checkbox id="show-hr" bind:checked={options.elevation.hr} />
+                        <Label for="show-hr" class="flex flex-row items-center gap-1">
+                            <HeartPulse size="16" />
+                            {$_('quantities.heartrate')}
+                        </Label>
+                    </div>
+                    <div class="flex flex-row items-center gap-2">
+                        <Checkbox id="show-cad" bind:checked={options.elevation.cad} />
+                        <Label for="show-cad" class="flex flex-row items-center gap-1">
+                            <Orbit size="16" />
+                            {$_('quantities.cadence')}
+                        </Label>
+                    </div>
+                    <div class="flex flex-row items-center gap-2">
+                        <Checkbox id="show-temp" bind:checked={options.elevation.temp} />
+                        <Label for="show-temp" class="flex flex-row items-center gap-1">
+                            <Thermometer size="16" />
+                            {$_('quantities.temperature')}
+                        </Label>
+                    </div>
+                    <div class="flex flex-row items-center gap-2">
+                        <Checkbox id="show-power" bind:checked={options.elevation.power} />
+                        <Label for="show-power" class="flex flex-row items-center gap-1">
+                            <SquareActivity size="16" />
+                            {$_('quantities.power')}
+                        </Label>
+                    </div>
+                </div>
+            {/if}
+            <div class="flex flex-row items-center gap-2">
+                <Checkbox id="distance-markers" bind:checked={options.distanceMarkers} />
+                <Label for="distance-markers" class="flex flex-row items-center gap-1">
+                    <Coins size="16" />
+                    {$_('menu.distance_markers')}
+                </Label>
+            </div>
+            <div class="flex flex-row items-center gap-2">
+                <Checkbox id="direction-markers" bind:checked={options.directionMarkers} />
+                <Label for="direction-markers" class="flex flex-row items-center gap-1">
+                    <Milestone size="16" />
+                    {$_('menu.direction_markers')}
+                </Label>
+            </div>
+            <div class="flex flex-row flex-wrap justify-between gap-3">
+                <Label class="flex flex-col items-start gap-2">
+                    {$_('menu.distance_units')}
+                    <RadioGroup.Root bind:value={options.distanceUnits}>
+                        <div class="flex items-center space-x-2">
+                            <RadioGroup.Item value="metric" id="metric" />
+                            <Label for="metric">{$_('menu.metric')}</Label>
+                        </div>
+                        <div class="flex items-center space-x-2">
+                            <RadioGroup.Item value="imperial" id="imperial" />
+                            <Label for="imperial">{$_('menu.imperial')}</Label>
+                        </div>
+                        <div class="flex items-center space-x-2">
+                            <RadioGroup.Item value="nautical" id="nautical" />
+                            <Label for="nautical">{$_('menu.nautical')}</Label>
+                        </div>
+                    </RadioGroup.Root>
+                </Label>
+                <Label class="flex flex-col items-start gap-2">
+                    {$_('menu.velocity_units')}
+                    <RadioGroup.Root bind:value={options.velocityUnits}>
+                        <div class="flex items-center space-x-2">
+                            <RadioGroup.Item value="speed" id="speed" />
+                            <Label for="speed">{$_('quantities.speed')}</Label>
+                        </div>
+                        <div class="flex items-center space-x-2">
+                            <RadioGroup.Item value="pace" id="pace" />
+                            <Label for="pace">{$_('quantities.pace')}</Label>
+                        </div>
+                    </RadioGroup.Root>
+                </Label>
+                <Label class="flex flex-col items-start gap-2">
+                    {$_('menu.temperature_units')}
+                    <RadioGroup.Root bind:value={options.temperatureUnits}>
+                        <div class="flex items-center space-x-2">
+                            <RadioGroup.Item value="celsius" id="celsius" />
+                            <Label for="celsius">{$_('menu.celsius')}</Label>
+                        </div>
+                        <div class="flex items-center space-x-2">
+                            <RadioGroup.Item value="fahrenheit" id="fahrenheit" />
+                            <Label for="fahrenheit">{$_('menu.fahrenheit')}</Label>
+                        </div>
+                    </RadioGroup.Root>
+                </Label>
+            </div>
+            <Label class="flex flex-col items-start gap-2">
+                {$_('menu.mode')}
+                <RadioGroup.Root bind:value={options.theme} class="flex flex-row">
+                    <div class="flex items-center space-x-2">
+                        <RadioGroup.Item value="system" id="system" />
+                        <Label for="system">{$_('menu.system')}</Label>
+                    </div>
+                    <div class="flex items-center space-x-2">
+                        <RadioGroup.Item value="light" id="light" />
+                        <Label for="light">{$_('menu.light')}</Label>
+                    </div>
+                    <div class="flex items-center space-x-2">
+                        <RadioGroup.Item value="dark" id="dark" />
+                        <Label for="dark">{$_('menu.dark')}</Label>
+                    </div>
+                </RadioGroup.Root>
+            </Label>
+            <div class="flex flex-col gap-3 p-3 border rounded-md">
+                <div class="flex flex-row items-center gap-2">
+                    <Checkbox id="manual-camera" bind:checked={manualCamera} />
+                    <Label for="manual-camera" class="flex flex-row items-center gap-1">
+                        <Video size="16" />
+                        {$_('embedding.manual_camera')}
+                    </Label>
+                </div>
+                <p class="text-sm text-muted-foreground">
+                    {$_('embedding.manual_camera_description')}
+                </p>
+                <div class="flex flex-row flex-wrap items-center gap-6">
+                    <Label class="flex flex-col gap-1">
+                        <span>{$_('embedding.latitude')}</span>
+                        <span>{lat}</span>
+                    </Label>
+                    <Label class="flex flex-col gap-1">
+                        <span>{$_('embedding.longitude')}</span>
+                        <span>{lon}</span>
+                    </Label>
+                    <Label class="flex flex-col gap-1">
+                        <span>{$_('embedding.zoom')}</span>
+                        <span>{zoom}</span>
+                    </Label>
+                    <Label class="flex flex-col gap-1">
+                        <span>{$_('embedding.bearing')}</span>
+                        <span>{bearing}</span>
+                    </Label>
+                    <Label class="flex flex-col gap-1">
+                        <span>{$_('embedding.pitch')}</span>
+                        <span>{pitch}</span>
+                    </Label>
+                </div>
+            </div>
+            <Label>
+                {$_('embedding.preview')}
+            </Label>
+            <div class="relative h-[600px]">
+                <Embedding bind:options={iframeOptions} bind:hash useHash={false} />
+            </div>
+            <Label>
+                {$_('embedding.code')}
+            </Label>
+            <pre
+                class="bg-primary text-primary-foreground p-3 rounded-md whitespace-normal break-all">
                 <code class="language-html">
                     {`<iframe src="https://gpx.studio${base}/embed?options=${encodeURIComponent(JSON.stringify(getCleanedEmbeddingOptions(options)))}${hash}" width="100%" height="600px" frameborder="0" style="outline: none;"/>`}
                 </code>
             </pre>
-		</fieldset>
-	</Card.Content>
+        </fieldset>
+    </Card.Content>
 </Card.Root>

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

@@ -1,18 +1,23 @@
 <script lang="ts">
-	import { Button } from '$lib/components/ui/button';
-	import Logo from '$lib/components/Logo.svelte';
-	import { getURLForLanguage } from '$lib/utils';
-	import { _, locale } from 'svelte-i18n';
+    import { Button } from '$lib/components/ui/button';
+    import Logo from '$lib/components/Logo.svelte';
+    import { getURLForLanguage } from '$lib/utils';
+    import { _, locale } from 'svelte-i18n';
 
-	export let files: string[];
+    export let files: string[];
+    export let ids: string[];
 </script>
 
 <Button
-	variant="ghost"
-	class="absolute top-0 flex-wrap h-fit bg-background font-semibold rounded-md py-1 px-2 gap-1.5 xs:text-base mt-2.5 ml-2.5 mr-12"
-	href="{getURLForLanguage($locale, '/app')}?files={encodeURIComponent(JSON.stringify(files))}"
-	target="_blank"
+    variant="ghost"
+    class="absolute top-0 flex-wrap h-fit bg-background font-semibold rounded-md py-1 px-2 gap-1.5 xs:text-base mt-2.5 ml-2.5 mr-12"
+    href="{getURLForLanguage($locale, '/app')}?{files.length > 0
+        ? `files=${encodeURIComponent(JSON.stringify(files))}`
+        : ''}{files.length > 0 && ids.length > 0 ? '&' : ''}{ids.length > 0
+        ? `ids=${encodeURIComponent(JSON.stringify(ids))}`
+        : ''}"
+    target="_blank"
 >
-	{$_('menu.open_in')}
-	<Logo class="h-[18px] xs:h-5 translate-y-[1px]" />
+    {$_('menu.open_in')}
+    <Logo class="h-[18px] xs:h-5 translate-y-[1px]" />
 </Button>

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

@@ -1,89 +1,89 @@
 <script lang="ts">
-	import { ScrollArea } from '$lib/components/ui/scroll-area/index';
-	import * as ContextMenu from '$lib/components/ui/context-menu';
-	import FileListNode from './FileListNode.svelte';
-	import { fileObservers, settings } from '$lib/db';
-	import { setContext } from 'svelte';
-	import { ListFileItem, ListLevel, ListRootItem, allowedPastes } from './FileList';
-	import { copied, pasteSelection, selectAll, selection } from './Selection';
-	import { ClipboardPaste, FileStack, Plus } from 'lucide-svelte';
-	import Shortcut from '$lib/components/Shortcut.svelte';
-	import { _ } from 'svelte-i18n';
-	import { createFile } from '$lib/stores';
+    import { ScrollArea } from '$lib/components/ui/scroll-area/index';
+    import * as ContextMenu from '$lib/components/ui/context-menu';
+    import FileListNode from './FileListNode.svelte';
+    import { fileObservers, settings } from '$lib/db';
+    import { setContext } from 'svelte';
+    import { ListFileItem, ListLevel, ListRootItem, allowedPastes } from './FileList';
+    import { copied, pasteSelection, selectAll, selection } from './Selection';
+    import { ClipboardPaste, FileStack, Plus } from 'lucide-svelte';
+    import Shortcut from '$lib/components/Shortcut.svelte';
+    import { _ } from 'svelte-i18n';
+    import { createFile } from '$lib/stores';
 
-	export let orientation: 'vertical' | 'horizontal';
-	export let recursive = false;
+    export let orientation: 'vertical' | 'horizontal';
+    export let recursive = false;
 
-	setContext('orientation', orientation);
-	setContext('recursive', recursive);
+    setContext('orientation', orientation);
+    setContext('recursive', recursive);
 
-	const { verticalFileView } = settings;
+    const { treeFileView } = settings;
 
-	verticalFileView.subscribe(($vertical) => {
-		if ($vertical) {
-			selection.update(($selection) => {
-				$selection.forEach((item) => {
-					if ($selection.hasAnyChildren(item, false)) {
-						$selection.toggle(item);
-					}
-				});
-				return $selection;
-			});
-		} else {
-			selection.update(($selection) => {
-				$selection.forEach((item) => {
-					if (!(item instanceof ListFileItem)) {
-						$selection.toggle(item);
-						$selection.set(new ListFileItem(item.getFileId()), true);
-					}
-				});
-				return $selection;
-			});
-		}
-	});
+    treeFileView.subscribe(($vertical) => {
+        if ($vertical) {
+            selection.update(($selection) => {
+                $selection.forEach((item) => {
+                    if ($selection.hasAnyChildren(item, false)) {
+                        $selection.toggle(item);
+                    }
+                });
+                return $selection;
+            });
+        } else {
+            selection.update(($selection) => {
+                $selection.forEach((item) => {
+                    if (!(item instanceof ListFileItem)) {
+                        $selection.toggle(item);
+                        $selection.set(new ListFileItem(item.getFileId()), true);
+                    }
+                });
+                return $selection;
+            });
+        }
+    });
 </script>
 
 <ScrollArea
-	class="shrink-0 {orientation === 'vertical' ? 'p-0 pr-3' : 'h-10 px-1'}"
-	{orientation}
-	scrollbarXClasses={orientation === 'vertical' ? '' : 'mt-1 h-2'}
-	scrollbarYClasses={orientation === 'vertical' ? '' : ''}
+    class="shrink-0 {orientation === 'vertical' ? 'p-0 pr-3' : 'h-10 px-1'}"
+    {orientation}
+    scrollbarXClasses={orientation === 'vertical' ? '' : 'mt-1 h-2'}
+    scrollbarYClasses={orientation === 'vertical' ? '' : ''}
 >
-	<div
-		class="flex {orientation === 'vertical'
-			? 'flex-col py-1 pl-1 min-h-screen'
-			: 'flex-row'} {$$props.class ?? ''}"
-		{...$$restProps}
-	>
-		<FileListNode bind:node={$fileObservers} item={new ListRootItem()} />
-		{#if orientation === 'vertical'}
-			<ContextMenu.Root>
-				<ContextMenu.Trigger class="grow" />
-				<ContextMenu.Content>
-					<ContextMenu.Item on:click={createFile}>
-						<Plus size="16" class="mr-1" />
-						{$_('menu.new_file')}
-						<Shortcut key="+" ctrl={true} />
-					</ContextMenu.Item>
-					<ContextMenu.Separator />
-					<ContextMenu.Item on:click={selectAll} disabled={$fileObservers.size === 0}>
-						<FileStack size="16" class="mr-1" />
-						{$_('menu.select_all')}
-						<Shortcut key="A" ctrl={true} />
-					</ContextMenu.Item>
-					<ContextMenu.Separator />
-					<ContextMenu.Item
-						disabled={$copied === undefined ||
-							$copied.length === 0 ||
-							!allowedPastes[$copied[0].level].includes(ListLevel.ROOT)}
-						on:click={pasteSelection}
-					>
-						<ClipboardPaste size="16" class="mr-1" />
-						{$_('menu.paste')}
-						<Shortcut key="V" ctrl={true} />
-					</ContextMenu.Item>
-				</ContextMenu.Content>
-			</ContextMenu.Root>
-		{/if}
-	</div>
+    <div
+        class="flex {orientation === 'vertical'
+            ? 'flex-col py-1 pl-1 min-h-screen'
+            : 'flex-row'} {$$props.class ?? ''}"
+        {...$$restProps}
+    >
+        <FileListNode bind:node={$fileObservers} item={new ListRootItem()} />
+        {#if orientation === 'vertical'}
+            <ContextMenu.Root>
+                <ContextMenu.Trigger class="grow" />
+                <ContextMenu.Content>
+                    <ContextMenu.Item on:click={createFile}>
+                        <Plus size="16" class="mr-1" />
+                        {$_('menu.new_file')}
+                        <Shortcut key="+" ctrl={true} />
+                    </ContextMenu.Item>
+                    <ContextMenu.Separator />
+                    <ContextMenu.Item on:click={selectAll} disabled={$fileObservers.size === 0}>
+                        <FileStack size="16" class="mr-1" />
+                        {$_('menu.select_all')}
+                        <Shortcut key="A" ctrl={true} />
+                    </ContextMenu.Item>
+                    <ContextMenu.Separator />
+                    <ContextMenu.Item
+                        disabled={$copied === undefined ||
+                            $copied.length === 0 ||
+                            !allowedPastes[$copied[0].level].includes(ListLevel.ROOT)}
+                        on:click={pasteSelection}
+                    >
+                        <ClipboardPaste size="16" class="mr-1" />
+                        {$_('menu.paste')}
+                        <Shortcut key="V" ctrl={true} />
+                    </ContextMenu.Item>
+                </ContextMenu.Content>
+            </ContextMenu.Root>
+        {/if}
+    </div>
 </ScrollArea>

website/src/lib/components/file-list/FileList.ts

@@ -1,8 +1,8 @@
-import { dbUtils, getFile } from "$lib/db";
-import { freeze } from "immer";
-import { GPXFile, Track, TrackSegment, Waypoint } from "gpx";
-import { selection } from "./Selection";
-import { newGPXFile } from "$lib/stores";
+import { dbUtils, getFile } from '$lib/db';
+import { freeze } from 'immer';
+import { GPXFile, Track, TrackSegment, Waypoint } from 'gpx';
+import { selection } from './Selection';
+import { newGPXFile } from '$lib/stores';
 
 export enum ListLevel {
     ROOT,
@@ -10,7 +10,7 @@ export enum ListLevel {
     TRACK,
     SEGMENT,
     WAYPOINTS,
-    WAYPOINT
+    WAYPOINT,
 }
 
 export const allowedMoves: Record<ListLevel, ListLevel[]> = {
@@ -19,7 +19,7 @@ export const allowedMoves: Record<ListLevel, ListLevel[]> = {
     [ListLevel.TRACK]: [ListLevel.FILE, ListLevel.TRACK],
     [ListLevel.SEGMENT]: [ListLevel.FILE, ListLevel.TRACK, ListLevel.SEGMENT],
     [ListLevel.WAYPOINTS]: [ListLevel.WAYPOINTS],
-    [ListLevel.WAYPOINT]: [ListLevel.WAYPOINTS, ListLevel.WAYPOINT]
+    [ListLevel.WAYPOINT]: [ListLevel.WAYPOINTS, ListLevel.WAYPOINT],
 };
 
 export const allowedPastes: Record<ListLevel, ListLevel[]> = {
@@ -28,7 +28,7 @@ export const allowedPastes: Record<ListLevel, ListLevel[]> = {
     [ListLevel.TRACK]: [ListLevel.ROOT, ListLevel.FILE, ListLevel.TRACK],
     [ListLevel.SEGMENT]: [ListLevel.ROOT, ListLevel.FILE, ListLevel.TRACK, ListLevel.SEGMENT],
     [ListLevel.WAYPOINTS]: [ListLevel.FILE, ListLevel.WAYPOINTS, ListLevel.WAYPOINT],
-    [ListLevel.WAYPOINT]: [ListLevel.FILE, ListLevel.WAYPOINTS, ListLevel.WAYPOINT]
+    [ListLevel.WAYPOINT]: [ListLevel.FILE, ListLevel.WAYPOINTS, ListLevel.WAYPOINT],
 };
 
 export abstract class ListItem {
@@ -322,7 +322,13 @@ export function sortItems(items: ListItem[], reverse: boolean = false) {
     }
 }
 
-export function moveItems(fromParent: ListItem, toParent: ListItem, fromItems: ListItem[], toItems: ListItem[], remove: boolean = true) {
+export function moveItems(
+    fromParent: ListItem,
+    toParent: ListItem,
+    fromItems: ListItem[],
+    toItems: ListItem[],
+    remove: boolean = true
+) {
     if (fromItems.length === 0) {
         return;
     }
@@ -338,11 +344,18 @@ export function moveItems(fromParent: ListItem, toParent: ListItem, fromItems: L
                 context.push(file.clone());
             } else if (item instanceof ListTrackItem && item.getTrackIndex() < file.trk.length) {
                 context.push(file.trk[item.getTrackIndex()].clone());
-            } else if (item instanceof ListTrackSegmentItem && item.getTrackIndex() < file.trk.length && item.getSegmentIndex() < file.trk[item.getTrackIndex()].trkseg.length) {
+            } else if (
+                item instanceof ListTrackSegmentItem &&
+                item.getTrackIndex() < file.trk.length &&
+                item.getSegmentIndex() < file.trk[item.getTrackIndex()].trkseg.length
+            ) {
                 context.push(file.trk[item.getTrackIndex()].trkseg[item.getSegmentIndex()].clone());
             } else if (item instanceof ListWaypointsItem) {
                 context.push(file.wpt.map((wpt) => wpt.clone()));
-            } else if (item instanceof ListWaypointItem && item.getWaypointIndex() < file.wpt.length) {
+            } else if (
+                item instanceof ListWaypointItem &&
+                item.getWaypointIndex() < file.wpt.length
+            ) {
                 context.push(file.wpt[item.getWaypointIndex()].clone());
             }
         }
@@ -359,7 +372,12 @@ export function moveItems(fromParent: ListItem, toParent: ListItem, fromItems: L
                 if (item instanceof ListTrackItem) {
                     file.replaceTracks(item.getTrackIndex(), item.getTrackIndex(), []);
                 } else if (item instanceof ListTrackSegmentItem) {
-                    file.replaceTrackSegments(item.getTrackIndex(), item.getSegmentIndex(), item.getSegmentIndex(), []);
+                    file.replaceTrackSegments(
+                        item.getTrackIndex(),
+                        item.getSegmentIndex(),
+                        item.getSegmentIndex(),
+                        []
+                    );
                 } else if (item instanceof ListWaypointsItem) {
                     file.replaceWaypoints(0, file.wpt.length - 1, []);
                 } else if (item instanceof ListWaypointItem) {
@@ -371,25 +389,43 @@ export function moveItems(fromParent: ListItem, toParent: ListItem, fromItems: L
             toItems.forEach((item, i) => {
                 if (item instanceof ListTrackItem) {
                     if (context[i] instanceof Track) {
-                        file.replaceTracks(item.getTrackIndex(), item.getTrackIndex() - 1, [context[i]]);
+                        file.replaceTracks(item.getTrackIndex(), item.getTrackIndex() - 1, [
+                            context[i],
+                        ]);
                     } else if (context[i] instanceof TrackSegment) {
-                        file.replaceTracks(item.getTrackIndex(), item.getTrackIndex() - 1, [new Track({
-                            trkseg: [context[i]]
-                        })]);
+                        file.replaceTracks(item.getTrackIndex(), item.getTrackIndex() - 1, [
+                            new Track({
+                                trkseg: [context[i]],
+                            }),
+                        ]);
                     }
-                } else if (item instanceof ListTrackSegmentItem && context[i] instanceof TrackSegment) {
-                    file.replaceTrackSegments(item.getTrackIndex(), item.getSegmentIndex(), item.getSegmentIndex() - 1, [context[i]]);
+                } else if (
+                    item instanceof ListTrackSegmentItem &&
+                    context[i] instanceof TrackSegment
+                ) {
+                    file.replaceTrackSegments(
+                        item.getTrackIndex(),
+                        item.getSegmentIndex(),
+                        item.getSegmentIndex() - 1,
+                        [context[i]]
+                    );
                 } else if (item instanceof ListWaypointsItem) {
-                    if (Array.isArray(context[i]) && context[i].length > 0 && context[i][0] instanceof Waypoint) {
+                    if (
+                        Array.isArray(context[i]) &&
+                        context[i].length > 0 &&
+                        context[i][0] instanceof Waypoint
+                    ) {
                         file.replaceWaypoints(file.wpt.length, file.wpt.length - 1, context[i]);
                     } else if (context[i] instanceof Waypoint) {
                         file.replaceWaypoints(file.wpt.length, file.wpt.length - 1, [context[i]]);
                     }
                 } else if (item instanceof ListWaypointItem && context[i] instanceof Waypoint) {
-                    file.replaceWaypoints(item.getWaypointIndex(), item.getWaypointIndex() - 1, [context[i]]);
+                    file.replaceWaypoints(item.getWaypointIndex(), item.getWaypointIndex() - 1, [
+                        context[i],
+                    ]);
                 }
             });
-        }
+        },
     ];
 
     if (fromParent instanceof ListRootItem) {
@@ -400,35 +436,42 @@ export function moveItems(fromParent: ListItem, toParent: ListItem, fromItems: L
         callbacks.splice(0, 1);
     }
 
-    dbUtils.applyEachToFilesAndGlobal(files, callbacks, (files, context: (GPXFile | Track | TrackSegment | Waypoint[] | Waypoint)[]) => {
-        toItems.forEach((item, i) => {
-            if (item instanceof ListFileItem) {
-                if (context[i] instanceof GPXFile) {
-                    let newFile = context[i];
-                    if (remove) {
-                        files.delete(newFile._data.id);
+    dbUtils.applyEachToFilesAndGlobal(
+        files,
+        callbacks,
+        (files, context: (GPXFile | Track | TrackSegment | Waypoint[] | Waypoint)[]) => {
+            toItems.forEach((item, i) => {
+                if (item instanceof ListFileItem) {
+                    if (context[i] instanceof GPXFile) {
+                        let newFile = context[i];
+                        if (remove) {
+                            files.delete(newFile._data.id);
+                        }
+                        newFile._data.id = item.getFileId();
+                        files.set(item.getFileId(), freeze(newFile));
+                    } else if (context[i] instanceof Track) {
+                        let newFile = newGPXFile();
+                        newFile._data.id = item.getFileId();
+                        if (context[i].name) {
+                            newFile.metadata.name = context[i].name;
+                        }
+                        newFile.replaceTracks(0, 0, [context[i]]);
+                        files.set(item.getFileId(), freeze(newFile));
+                    } else if (context[i] instanceof TrackSegment) {
+                        let newFile = newGPXFile();
+                        newFile._data.id = item.getFileId();
+                        newFile.replaceTracks(0, 0, [
+                            new Track({
+                                trkseg: [context[i]],
+                            }),
+                        ]);
+                        files.set(item.getFileId(), freeze(newFile));
                     }
-                    newFile._data.id = item.getFileId();
-                    files.set(item.getFileId(), freeze(newFile));
-                } else if (context[i] instanceof Track) {
-                    let newFile = newGPXFile();
-                    newFile._data.id = item.getFileId();
-                    if (context[i].name) {
-                        newFile.metadata.name = context[i].name;
-                    }
-                    newFile.replaceTracks(0, 0, [context[i]]);
-                    files.set(item.getFileId(), freeze(newFile));
-                } else if (context[i] instanceof TrackSegment) {
-                    let newFile = newGPXFile();
-                    newFile._data.id = item.getFileId();
-                    newFile.replaceTracks(0, 0, [new Track({
-                        trkseg: [context[i]]
-                    })]);
-                    files.set(item.getFileId(), freeze(newFile));
                 }
-            }
-        });
-    }, context);
+            });
+        },
+        context
+    );
 
     selection.update(($selection) => {
         $selection.clear();

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

@@ -1,83 +1,84 @@
 <script lang="ts">
-	import {
-		GPXFile,
-		Track,
-		TrackSegment,
-		Waypoint,
-		type AnyGPXTreeElement,
-		type GPXTreeElement
-	} from 'gpx';
-	import { CollapsibleTreeNode } from '$lib/components/collapsible-tree/index';
-	import { settings, type GPXFileWithStatistics } from '$lib/db';
-	import { get, type Readable } from 'svelte/store';
-	import FileListNodeContent from './FileListNodeContent.svelte';
-	import FileListNodeLabel from './FileListNodeLabel.svelte';
-	import { afterUpdate, getContext } from 'svelte';
-	import {
-		ListFileItem,
-		ListTrackSegmentItem,
-		ListWaypointItem,
-		ListWaypointsItem,
-		type ListItem,
-		type ListTrackItem
-	} from './FileList';
-	import { _ } from 'svelte-i18n';
-	import { selection } from './Selection';
+    import {
+        GPXFile,
+        Track,
+        TrackSegment,
+        Waypoint,
+        type AnyGPXTreeElement,
+        type GPXTreeElement,
+    } from 'gpx';
+    import { CollapsibleTreeNode } from '$lib/components/collapsible-tree/index';
+    import { settings, type GPXFileWithStatistics } from '$lib/db';
+    import { get, type Readable } from 'svelte/store';
+    import FileListNodeContent from './FileListNodeContent.svelte';
+    import FileListNodeLabel from './FileListNodeLabel.svelte';
+    import { afterUpdate, getContext } from 'svelte';
+    import {
+        ListFileItem,
+        ListTrackSegmentItem,
+        ListWaypointItem,
+        ListWaypointsItem,
+        type ListItem,
+        type ListTrackItem,
+    } from './FileList';
+    import { _ } from 'svelte-i18n';
+    import { selection } from './Selection';
 
-	export let node:
-		| Map<string, Readable<GPXFileWithStatistics | undefined>>
-		| GPXTreeElement<AnyGPXTreeElement>
-		| Waypoint[]
-		| Waypoint;
-	export let item: ListItem;
+    export let node:
+        | Map<string, Readable<GPXFileWithStatistics | undefined>>
+        | GPXTreeElement<AnyGPXTreeElement>
+        | Waypoint[]
+        | Waypoint;
+    export let item: ListItem;
 
-	let recursive = getContext<boolean>('recursive');
+    let recursive = getContext<boolean>('recursive');
 
-	let collapsible: CollapsibleTreeNode;
+    let collapsible: CollapsibleTreeNode;
 
-	$: label =
-		node instanceof GPXFile && item instanceof ListFileItem
-			? node.metadata.name
-			: node instanceof Track
-				? node.name ?? `${$_('gpx.track')} ${(item as ListTrackItem).trackIndex + 1}`
-				: node instanceof TrackSegment
-					? `${$_('gpx.segment')} ${(item as ListTrackSegmentItem).segmentIndex + 1}`
-					: node instanceof Waypoint
-						? node.name ?? `${$_('gpx.waypoint')} ${(item as ListWaypointItem).waypointIndex + 1}`
-						: node instanceof GPXFile && item instanceof ListWaypointsItem
-							? $_('gpx.waypoints')
-							: '';
+    $: label =
+        node instanceof GPXFile && item instanceof ListFileItem
+            ? node.metadata.name
+            : node instanceof Track
+              ? (node.name ?? `${$_('gpx.track')} ${(item as ListTrackItem).trackIndex + 1}`)
+              : node instanceof TrackSegment
+                ? `${$_('gpx.segment')} ${(item as ListTrackSegmentItem).segmentIndex + 1}`
+                : node instanceof Waypoint
+                  ? (node.name ??
+                    `${$_('gpx.waypoint')} ${(item as ListWaypointItem).waypointIndex + 1}`)
+                  : node instanceof GPXFile && item instanceof ListWaypointsItem
+                    ? $_('gpx.waypoints')
+                    : '';
 
-	const { verticalFileView } = settings;
+    const { treeFileView } = settings;
 
-	function openIfSelectedChild() {
-		if (collapsible && get(verticalFileView) && $selection.hasAnyChildren(item, false)) {
-			collapsible.openNode();
-		}
-	}
+    function openIfSelectedChild() {
+        if (collapsible && get(treeFileView) && $selection.hasAnyChildren(item, false)) {
+            collapsible.openNode();
+        }
+    }
 
-	if ($selection) {
-		openIfSelectedChild();
-	}
+    if ($selection) {
+        openIfSelectedChild();
+    }
 
-	afterUpdate(openIfSelectedChild);
+    afterUpdate(openIfSelectedChild);
 </script>
 
 {#if node instanceof Map}
-	<FileListNodeContent {node} {item} />
+    <FileListNodeContent {node} {item} />
 {:else if node instanceof TrackSegment}
-	<FileListNodeLabel {node} {item} {label} />
+    <FileListNodeLabel {node} {item} {label} />
 {:else if node instanceof Waypoint}
-	<FileListNodeLabel {node} {item} {label} />
+    <FileListNodeLabel {node} {item} {label} />
 {:else if recursive}
-	<CollapsibleTreeNode id={item.getId()} bind:this={collapsible}>
-		<FileListNodeLabel {node} {item} {label} slot="trigger" />
-		<div slot="content" class="ml-2">
-			{#key node}
-				<FileListNodeContent {node} {item} />
-			{/key}
-		</div>
-	</CollapsibleTreeNode>
+    <CollapsibleTreeNode id={item.getId()} bind:this={collapsible}>
+        <FileListNodeLabel {node} {item} {label} slot="trigger" />
+        <div slot="content" class="ml-2">
+            {#key node}
+                <FileListNodeContent {node} {item} />
+            {/key}
+        </div>
+    </CollapsibleTreeNode>
 {:else}
-	<FileListNodeLabel {node} {item} {label} />
+    <FileListNodeLabel {node} {item} {label} />
 {/if}

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

@@ -1,364 +1,374 @@
 <script lang="ts" context="module">
-	let dragging: Writable<ListLevel | null> = writable(null);
+    let dragging: Writable<ListLevel | null> = writable(null);
 
-	let updating = false;
+    let updating = false;
 </script>
 
 <script lang="ts">
-	import { GPXFile, Track, Waypoint, type AnyGPXTreeElement, type GPXTreeElement } from 'gpx';
-	import { afterUpdate, getContext, onDestroy, onMount } from 'svelte';
-	import Sortable from 'sortablejs/Sortable';
-	import { getFileIds, settings, type GPXFileWithStatistics } from '$lib/db';
-	import { get, writable, type Readable, type Writable } from 'svelte/store';
-	import FileListNodeStore from './FileListNodeStore.svelte';
-	import FileListNode from './FileListNode.svelte';
-	import {
-		ListFileItem,
-		ListLevel,
-		ListRootItem,
-		ListWaypointsItem,
-		allowedMoves,
-		moveItems,
-		type ListItem
-	} from './FileList';
-	import { selection } from './Selection';
-	import { _ } from 'svelte-i18n';
+    import { GPXFile, Track, Waypoint, type AnyGPXTreeElement, type GPXTreeElement } from 'gpx';
+    import { afterUpdate, getContext, onDestroy, onMount } from 'svelte';
+    import Sortable from 'sortablejs/Sortable';
+    import { getFileIds, settings, type GPXFileWithStatistics } from '$lib/db';
+    import { get, writable, type Readable, type Writable } from 'svelte/store';
+    import FileListNodeStore from './FileListNodeStore.svelte';
+    import FileListNode from './FileListNode.svelte';
+    import {
+        ListFileItem,
+        ListLevel,
+        ListRootItem,
+        ListWaypointsItem,
+        allowedMoves,
+        moveItems,
+        type ListItem,
+    } from './FileList';
+    import { selection } from './Selection';
+    import { isMac } from '$lib/utils';
+    import { _ } from 'svelte-i18n';
 
-	export let node:
-		| Map<string, Readable<GPXFileWithStatistics | undefined>>
-		| GPXTreeElement<AnyGPXTreeElement>
-		| Waypoint;
-	export let item: ListItem;
-	export let waypointRoot: boolean = false;
+    export let node:
+        | Map<string, Readable<GPXFileWithStatistics | undefined>>
+        | GPXTreeElement<AnyGPXTreeElement>
+        | Waypoint;
+    export let item: ListItem;
+    export let waypointRoot: boolean = false;
 
-	let container: HTMLElement;
-	let elements: { [id: string]: HTMLElement } = {};
-	let sortableLevel: ListLevel =
-		node instanceof Map
-			? ListLevel.FILE
-			: node instanceof GPXFile
-				? waypointRoot
-					? ListLevel.WAYPOINTS
-					: item instanceof ListWaypointsItem
-						? ListLevel.WAYPOINT
-						: ListLevel.TRACK
-				: node instanceof Track
-					? ListLevel.SEGMENT
-					: ListLevel.WAYPOINT;
-	let sortable: Sortable;
-	let orientation = getContext<'vertical' | 'horizontal'>('orientation');
+    let container: HTMLElement;
+    let elements: { [id: string]: HTMLElement } = {};
+    let sortableLevel: ListLevel =
+        node instanceof Map
+            ? ListLevel.FILE
+            : node instanceof GPXFile
+              ? waypointRoot
+                  ? ListLevel.WAYPOINTS
+                  : item instanceof ListWaypointsItem
+                    ? ListLevel.WAYPOINT
+                    : ListLevel.TRACK
+              : node instanceof Track
+                ? ListLevel.SEGMENT
+                : ListLevel.WAYPOINT;
+    let sortable: Sortable;
+    let orientation = getContext<'vertical' | 'horizontal'>('orientation');
 
-	let destroyed = false;
-	let lastUpdateStart = 0;
-	function updateToSelection(e) {
-		if (destroyed) {
-			return;
-		}
+    let destroyed = false;
+    let lastUpdateStart = 0;
+    function updateToSelection(e) {
+        if (destroyed) {
+            return;
+        }
 
-		lastUpdateStart = Date.now();
-		setTimeout(() => {
-			if (Date.now() - lastUpdateStart >= 40) {
-				if (updating) {
-					return;
-				}
+        lastUpdateStart = Date.now();
+        setTimeout(() => {
+            if (Date.now() - lastUpdateStart >= 40) {
+                if (updating) {
+                    return;
+                }
 
-				updating = true;
-				// Sortable updates selection
-				let changed = getChangedIds();
-				if (changed.length > 0) {
-					selection.update(($selection) => {
-						$selection.clear();
-						Object.entries(elements).forEach(([id, element]) => {
-							$selection.set(
-								item.extend(getRealId(id)),
-								element.classList.contains('sortable-selected')
-							);
-						});
+                updating = true;
+                // Sortable updates selection
+                let changed = getChangedIds();
+                if (changed.length > 0) {
+                    selection.update(($selection) => {
+                        $selection.clear();
+                        Object.entries(elements).forEach(([id, element]) => {
+                            $selection.set(
+                                item.extend(getRealId(id)),
+                                element.classList.contains('sortable-selected')
+                            );
+                        });
 
-						if (
-							e.originalEvent &&
-							!(e.originalEvent.ctrlKey || e.originalEvent.metaKey || e.originalEvent.shiftKey) &&
-							($selection.size > 1 || !$selection.has(item.extend(getRealId(changed[0]))))
-						) {
-							// Fix bug that sometimes causes a single select to be treated as a multi-select
-							$selection.clear();
-							$selection.set(item.extend(getRealId(changed[0])), true);
-						}
+                        if (
+                            e.originalEvent &&
+                            !(
+                                e.originalEvent.ctrlKey ||
+                                e.originalEvent.metaKey ||
+                                e.originalEvent.shiftKey
+                            ) &&
+                            ($selection.size > 1 ||
+                                !$selection.has(item.extend(getRealId(changed[0]))))
+                        ) {
+                            // Fix bug that sometimes causes a single select to be treated as a multi-select
+                            $selection.clear();
+                            $selection.set(item.extend(getRealId(changed[0])), true);
+                        }
 
-						return $selection;
-					});
-				}
-				updating = false;
-			}
-		}, 50);
-	}
+                        return $selection;
+                    });
+                }
+                updating = false;
+            }
+        }, 50);
+    }
 
-	function updateFromSelection() {
-		if (destroyed || updating) {
-			return;
-		}
-		updating = true;
-		// Selection updates sortable
-		let changed = getChangedIds();
-		for (let id of changed) {
-			let element = elements[id];
-			if (element) {
-				if ($selection.has(item.extend(id))) {
-					Sortable.utils.select(element);
-					element.scrollIntoView({
-						behavior: 'smooth',
-						block: 'nearest'
-					});
-				} else {
-					Sortable.utils.deselect(element);
-				}
-			}
-		}
-		updating = false;
-	}
+    function updateFromSelection() {
+        if (destroyed || updating) {
+            return;
+        }
+        updating = true;
+        // Selection updates sortable
+        let changed = getChangedIds();
+        for (let id of changed) {
+            let element = elements[id];
+            if (element) {
+                if ($selection.has(item.extend(id))) {
+                    Sortable.utils.select(element);
+                    element.scrollIntoView({
+                        behavior: 'smooth',
+                        block: 'nearest',
+                    });
+                } else {
+                    Sortable.utils.deselect(element);
+                }
+            }
+        }
+        updating = false;
+    }
 
-	$: if ($selection) {
-		updateFromSelection();
-	}
+    $: if ($selection) {
+        updateFromSelection();
+    }
 
-	const { fileOrder } = settings;
-	function syncFileOrder() {
-		if (!sortable || sortableLevel !== ListLevel.FILE) {
-			return;
-		}
+    const { fileOrder } = settings;
+    function syncFileOrder() {
+        if (!sortable || sortableLevel !== ListLevel.FILE) {
+            return;
+        }
 
-		const currentOrder = sortable.toArray();
-		if (currentOrder.length !== $fileOrder.length) {
-			sortable.sort($fileOrder);
-		} else {
-			for (let i = 0; i < currentOrder.length; i++) {
-				if (currentOrder[i] !== $fileOrder[i]) {
-					sortable.sort($fileOrder);
-					break;
-				}
-			}
-		}
-	}
+        const currentOrder = sortable.toArray();
+        if (currentOrder.length !== $fileOrder.length) {
+            sortable.sort($fileOrder);
+        } else {
+            for (let i = 0; i < currentOrder.length; i++) {
+                if (currentOrder[i] !== $fileOrder[i]) {
+                    sortable.sort($fileOrder);
+                    break;
+                }
+            }
+        }
+    }
 
-	$: if ($fileOrder) {
-		syncFileOrder();
-	}
+    $: if ($fileOrder) {
+        syncFileOrder();
+    }
 
-	function createSortable() {
-		sortable = Sortable.create(container, {
-			group: {
-				name: sortableLevel,
-				pull: allowedMoves[sortableLevel],
-				put: true
-			},
-			direction: orientation,
-			forceAutoScrollFallback: true,
-			multiDrag: true,
-			multiDragKey: 'Meta',
-			avoidImplicitDeselect: true,
-			onSelect: updateToSelection,
-			onDeselect: updateToSelection,
-			onStart: () => {
-				dragging.set(sortableLevel);
-			},
-			onEnd: () => {
-				dragging.set(null);
-			},
-			onSort: (e) => {
-				if (sortableLevel === ListLevel.FILE) {
-					let newFileOrder = sortable.toArray();
-					if (newFileOrder.length !== get(fileOrder).length) {
-						fileOrder.set(newFileOrder);
-					} else {
-						for (let i = 0; i < newFileOrder.length; i++) {
-							if (newFileOrder[i] !== get(fileOrder)[i]) {
-								fileOrder.set(newFileOrder);
-								break;
-							}
-						}
-					}
-				}
+    function createSortable() {
+        sortable = Sortable.create(container, {
+            group: {
+                name: sortableLevel,
+                pull: allowedMoves[sortableLevel],
+                put: true,
+            },
+            direction: orientation,
+            forceAutoScrollFallback: true,
+            multiDrag: true,
+            multiDragKey: isMac() ? 'Meta' : 'Ctrl',
+            avoidImplicitDeselect: true,
+            onSelect: updateToSelection,
+            onDeselect: updateToSelection,
+            onStart: () => {
+                dragging.set(sortableLevel);
+            },
+            onEnd: () => {
+                dragging.set(null);
+            },
+            onSort: (e) => {
+                if (sortableLevel === ListLevel.FILE) {
+                    let newFileOrder = sortable.toArray();
+                    if (newFileOrder.length !== get(fileOrder).length) {
+                        fileOrder.set(newFileOrder);
+                    } else {
+                        for (let i = 0; i < newFileOrder.length; i++) {
+                            if (newFileOrder[i] !== get(fileOrder)[i]) {
+                                fileOrder.set(newFileOrder);
+                                break;
+                            }
+                        }
+                    }
+                }
 
-				let fromItem = Sortable.get(e.from)._item;
-				let toItem = Sortable.get(e.to)._item;
+                let fromItem = Sortable.get(e.from)._item;
+                let toItem = Sortable.get(e.to)._item;
 
-				if (item === toItem && !(fromItem instanceof ListRootItem)) {
-					// Event is triggered on source and destination list, only handle it once
-					let fromItems = [];
-					let toItems = [];
+                if (item === toItem && !(fromItem instanceof ListRootItem)) {
+                    // Event is triggered on source and destination list, only handle it once
+                    let fromItems = [];
+                    let toItems = [];
 
-					if (Sortable.get(e.from)._waypointRoot) {
-						fromItems = [fromItem.extend('waypoints')];
-					} else {
-						let oldIndices: number[] =
-							e.oldIndicies.length > 0 ? e.oldIndicies.map((i) => i.index) : [e.oldIndex];
-						oldIndices = oldIndices.filter((i) => i >= 0);
-						oldIndices.sort((a, b) => a - b);
+                    if (Sortable.get(e.from)._waypointRoot) {
+                        fromItems = [fromItem.extend('waypoints')];
+                    } else {
+                        let oldIndices: number[] =
+                            e.oldIndicies.length > 0
+                                ? e.oldIndicies.map((i) => i.index)
+                                : [e.oldIndex];
+                        oldIndices = oldIndices.filter((i) => i >= 0);
+                        oldIndices.sort((a, b) => a - b);
 
-						fromItems = oldIndices.map((i) => fromItem.extend(i));
-					}
+                        fromItems = oldIndices.map((i) => fromItem.extend(i));
+                    }
 
-					if (Sortable.get(e.from)._waypointRoot && Sortable.get(e.to)._waypointRoot) {
-						toItems = [toItem.extend('waypoints')];
-					} else {
-						if (Sortable.get(e.to)._waypointRoot) {
-							toItem = toItem.extend('waypoints');
-						}
+                    if (Sortable.get(e.from)._waypointRoot && Sortable.get(e.to)._waypointRoot) {
+                        toItems = [toItem.extend('waypoints')];
+                    } else {
+                        if (Sortable.get(e.to)._waypointRoot) {
+                            toItem = toItem.extend('waypoints');
+                        }
 
-						let newIndices: number[] =
-							e.newIndicies.length > 0 ? e.newIndicies.map((i) => i.index) : [e.newIndex];
-						newIndices = newIndices.filter((i) => i >= 0);
-						newIndices.sort((a, b) => a - b);
+                        let newIndices: number[] =
+                            e.newIndicies.length > 0
+                                ? e.newIndicies.map((i) => i.index)
+                                : [e.newIndex];
+                        newIndices = newIndices.filter((i) => i >= 0);
+                        newIndices.sort((a, b) => a - b);
 
-						if (toItem instanceof ListRootItem) {
-							let newFileIds = getFileIds(newIndices.length);
-							toItems = newIndices.map((i, index) => {
-								$fileOrder.splice(i, 0, newFileIds[index]);
-								return item.extend(newFileIds[index]);
-							});
-						} else {
-							toItems = newIndices.map((i) => toItem.extend(i));
-						}
-					}
+                        if (toItem instanceof ListRootItem) {
+                            let newFileIds = getFileIds(newIndices.length);
+                            toItems = newIndices.map((i, index) => {
+                                $fileOrder.splice(i, 0, newFileIds[index]);
+                                return item.extend(newFileIds[index]);
+                            });
+                        } else {
+                            toItems = newIndices.map((i) => toItem.extend(i));
+                        }
+                    }
 
-					moveItems(fromItem, toItem, fromItems, toItems);
-				}
-			}
-		});
-		Object.defineProperty(sortable, '_item', {
-			value: item,
-			writable: true
-		});
+                    moveItems(fromItem, toItem, fromItems, toItems);
+                }
+            },
+        });
+        Object.defineProperty(sortable, '_item', {
+            value: item,
+            writable: true,
+        });
 
-		Object.defineProperty(sortable, '_waypointRoot', {
-			value: waypointRoot,
-			writable: true
-		});
-	}
+        Object.defineProperty(sortable, '_waypointRoot', {
+            value: waypointRoot,
+            writable: true,
+        });
+    }
 
-	onMount(() => {
-		createSortable();
-		destroyed = false;
-	});
+    onMount(() => {
+        createSortable();
+        destroyed = false;
+    });
 
-	afterUpdate(() => {
-		elements = {};
-		container.childNodes.forEach((element) => {
-			if (element instanceof HTMLElement) {
-				let attr = element.getAttribute('data-id');
-				if (attr) {
-					if (node instanceof Map && !node.has(attr)) {
-						element.remove();
-					} else {
-						elements[attr] = element;
-					}
-				}
-			}
-		});
+    afterUpdate(() => {
+        elements = {};
+        container.childNodes.forEach((element) => {
+            if (element instanceof HTMLElement) {
+                let attr = element.getAttribute('data-id');
+                if (attr) {
+                    if (node instanceof Map && !node.has(attr)) {
+                        element.remove();
+                    } else {
+                        elements[attr] = element;
+                    }
+                }
+            }
+        });
 
-		syncFileOrder();
-		updateFromSelection();
-	});
+        syncFileOrder();
+        updateFromSelection();
+    });
 
-	onDestroy(() => {
-		destroyed = true;
-	});
+    onDestroy(() => {
+        destroyed = true;
+    });
 
-	function getChangedIds() {
-		let changed: (string | number)[] = [];
-		Object.entries(elements).forEach(([id, element]) => {
-			let realId = getRealId(id);
-			let realItem = item.extend(realId);
-			let inSelection = get(selection).has(realItem);
-			let isSelected = element.classList.contains('sortable-selected');
-			if (inSelection !== isSelected) {
-				changed.push(realId);
-			}
-		});
-		return changed;
-	}
+    function getChangedIds() {
+        let changed: (string | number)[] = [];
+        Object.entries(elements).forEach(([id, element]) => {
+            let realId = getRealId(id);
+            let realItem = item.extend(realId);
+            let inSelection = get(selection).has(realItem);
+            let isSelected = element.classList.contains('sortable-selected');
+            if (inSelection !== isSelected) {
+                changed.push(realId);
+            }
+        });
+        return changed;
+    }
 
-	function getRealId(id: string | number) {
-		return sortableLevel === ListLevel.FILE || sortableLevel === ListLevel.WAYPOINTS
-			? id
-			: parseInt(id);
-	}
+    function getRealId(id: string | number) {
+        return sortableLevel === ListLevel.FILE || sortableLevel === ListLevel.WAYPOINTS
+            ? id
+            : parseInt(id);
+    }
 
-	$: canDrop = $dragging !== null && allowedMoves[$dragging].includes(sortableLevel);
+    $: canDrop = $dragging !== null && allowedMoves[$dragging].includes(sortableLevel);
 </script>
 
 <div
-	bind:this={container}
-	class="sortable {orientation} flex {orientation === 'vertical'
-		? 'flex-col'
-		: 'flex-row gap-1'} {canDrop ? 'min-h-5' : ''}"
+    bind:this={container}
+    class="sortable {orientation} flex {orientation === 'vertical'
+        ? 'flex-col'
+        : 'flex-row gap-1'} {canDrop ? 'min-h-5' : ''}"
 >
-	{#if node instanceof Map}
-		{#each node as [fileId, file] (fileId)}
-			<div data-id={fileId}>
-				<FileListNodeStore {file} />
-			</div>
-		{/each}
-	{:else if node instanceof GPXFile}
-		{#if item instanceof ListWaypointsItem}
-			{#each node.wpt as wpt, i (wpt)}
-				<div data-id={i} class="ml-1">
-					<FileListNode node={wpt} item={item.extend(i)} />
-				</div>
-			{/each}
-		{:else if waypointRoot}
-			{#if node.wpt.length > 0}
-				<div data-id="waypoints">
-					<FileListNode {node} item={item.extend('waypoints')} />
-				</div>
-			{/if}
-		{:else}
-			{#each node.children as child, i (child)}
-				<div data-id={i}>
-					<FileListNode node={child} item={item.extend(i)} />
-				</div>
-			{/each}
-		{/if}
-	{:else if node instanceof Track}
-		{#each node.children as child, i (child)}
-			<div data-id={i} class="ml-1">
-				<FileListNode node={child} item={item.extend(i)} />
-			</div>
-		{/each}
-	{/if}
+    {#if node instanceof Map}
+        {#each node as [fileId, file] (fileId)}
+            <div data-id={fileId}>
+                <FileListNodeStore {file} />
+            </div>
+        {/each}
+    {:else if node instanceof GPXFile}
+        {#if item instanceof ListWaypointsItem}
+            {#each node.wpt as wpt, i (wpt)}
+                <div data-id={i} class="ml-1">
+                    <FileListNode node={wpt} item={item.extend(i)} />
+                </div>
+            {/each}
+        {:else if waypointRoot}
+            {#if node.wpt.length > 0}
+                <div data-id="waypoints">
+                    <FileListNode {node} item={item.extend('waypoints')} />
+                </div>
+            {/if}
+        {:else}
+            {#each node.children as child, i (child)}
+                <div data-id={i}>
+                    <FileListNode node={child} item={item.extend(i)} />
+                </div>
+            {/each}
+        {/if}
+    {:else if node instanceof Track}
+        {#each node.children as child, i (child)}
+            <div data-id={i} class="ml-1">
+                <FileListNode node={child} item={item.extend(i)} />
+            </div>
+        {/each}
+    {/if}
 </div>
 
 {#if node instanceof GPXFile && item instanceof ListFileItem}
-	{#if !waypointRoot}
-		<svelte:self {node} {item} waypointRoot={true} />
-	{/if}
+    {#if !waypointRoot}
+        <svelte:self {node} {item} waypointRoot={true} />
+    {/if}
 {/if}
 
 <style lang="postcss">
-	.sortable > div {
-		@apply rounded-md;
-		@apply h-fit;
-		@apply leading-none;
-	}
+    .sortable > div {
+        @apply rounded-md;
+        @apply h-fit;
+        @apply leading-none;
+    }
 
-	.vertical :global(button) {
-		@apply hover:bg-muted;
-	}
+    .vertical :global(button) {
+        @apply hover:bg-muted;
+    }
 
-	.vertical :global(.sortable-selected button) {
-		@apply hover:bg-accent;
-	}
+    .vertical :global(.sortable-selected button) {
+        @apply hover:bg-accent;
+    }
 
-	.vertical :global(.sortable-selected) {
-		@apply bg-accent;
-	}
+    .vertical :global(.sortable-selected) {
+        @apply bg-accent;
+    }
 
-	.horizontal :global(button) {
-		@apply bg-accent;
-		@apply hover:bg-muted;
-	}
+    .horizontal :global(button) {
+        @apply bg-accent;
+        @apply hover:bg-muted;
+    }
 
-	.horizontal :global(.sortable-selected button) {
-		@apply bg-background;
-	}
+    .horizontal :global(.sortable-selected button) {
+        @apply bg-background;
+    }
 </style>

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

@@ -1,321 +1,335 @@
 <script lang="ts">
-	import { Button } from '$lib/components/ui/button';
-	import * as ContextMenu from '$lib/components/ui/context-menu';
-	import Shortcut from '$lib/components/Shortcut.svelte';
-	import { dbUtils, getFile } from '$lib/db';
-	import {
-		Copy,
-		Info,
-		MapPin,
-		PaintBucket,
-		Plus,
-		Trash2,
-		Waypoints,
-		Eye,
-		EyeOff,
-		ClipboardCopy,
-		ClipboardPaste,
-		Scissors,
-		FileStack,
-		FileX
-	} from 'lucide-svelte';
-	import {
-		ListFileItem,
-		ListLevel,
-		ListTrackItem,
-		ListWaypointItem,
-		allowedPastes,
-		type ListItem
-	} from './FileList';
-	import {
-		copied,
-		copySelection,
-		cut,
-		cutSelection,
-		pasteSelection,
-		selectAll,
-		selectItem,
-		selection
-	} from './Selection';
-	import { getContext } from 'svelte';
-	import { get } from 'svelte/store';
-	import { allHidden, editMetadata, editStyle, embedding, gpxLayers, map } from '$lib/stores';
-	import {
-		GPXTreeElement,
-		Track,
-		TrackSegment,
-		type AnyGPXTreeElement,
-		Waypoint,
-		GPXFile
-	} from 'gpx';
-	import { _ } from 'svelte-i18n';
-	import MetadataDialog from './MetadataDialog.svelte';
-	import StyleDialog from './StyleDialog.svelte';
+    import { Button } from '$lib/components/ui/button';
+    import * as ContextMenu from '$lib/components/ui/context-menu';
+    import Shortcut from '$lib/components/Shortcut.svelte';
+    import { dbUtils, getFile } from '$lib/db';
+    import {
+        Copy,
+        Info,
+        MapPin,
+        PaintBucket,
+        Plus,
+        Trash2,
+        Waypoints,
+        Eye,
+        EyeOff,
+        ClipboardCopy,
+        ClipboardPaste,
+        Maximize,
+        Scissors,
+        FileStack,
+        FileX,
+    } from 'lucide-svelte';
+    import {
+        ListFileItem,
+        ListLevel,
+        ListTrackItem,
+        ListWaypointItem,
+        allowedPastes,
+        type ListItem,
+    } from './FileList';
+    import {
+        copied,
+        copySelection,
+        cut,
+        cutSelection,
+        pasteSelection,
+        selectAll,
+        selectItem,
+        selection,
+    } from './Selection';
+    import { getContext } from 'svelte';
+    import { get } from 'svelte/store';
+    import {
+        allHidden,
+        editMetadata,
+        editStyle,
+        embedding,
+        centerMapOnSelection,
+        gpxLayers,
+        map,
+    } from '$lib/stores';
+    import { GPXTreeElement, Track, type AnyGPXTreeElement, Waypoint, GPXFile } from 'gpx';
+    import { _ } from 'svelte-i18n';
+    import MetadataDialog from './MetadataDialog.svelte';
+    import StyleDialog from './StyleDialog.svelte';
+    import { waypointPopup } from '$lib/components/gpx-layer/GPXLayerPopup';
+    import { getSymbolKey, symbols } from '$lib/assets/symbols';
 
-	export let node: GPXTreeElement<AnyGPXTreeElement> | Waypoint[] | Waypoint;
-	export let item: ListItem;
-	export let label: string | undefined;
+    export let node: GPXTreeElement<AnyGPXTreeElement> | Waypoint[] | Waypoint;
+    export let item: ListItem;
+    export let label: string | undefined;
 
-	let orientation = getContext<'vertical' | 'horizontal'>('orientation');
+    let orientation = getContext<'vertical' | 'horizontal'>('orientation');
 
-	$: singleSelection = $selection.size === 1;
+    $: singleSelection = $selection.size === 1;
 
-	let nodeColors: string[] = [];
+    let nodeColors: string[] = [];
 
-	$: if (node && $map) {
-		nodeColors = [];
+    $: if (node && $map) {
+        nodeColors = [];
 
-		if (node instanceof GPXFile) {
-			let style = node.getStyle();
+        if (node instanceof GPXFile) {
+            let defaultColor = undefined;
 
-			let layer = gpxLayers.get(item.getFileId());
-			if (layer) {
-				style.color.push(layer.layerColor);
-			}
+            let layer = gpxLayers.get(item.getFileId());
+            if (layer) {
+                defaultColor = layer.layerColor;
+            }
 
-			style.color.forEach((c) => {
-				if (!nodeColors.includes(c)) {
-					nodeColors.push(c);
-				}
-			});
-		} else if (node instanceof Track) {
-			let style = node.getStyle();
-			if (style) {
-				if (style.color && !nodeColors.includes(style.color)) {
-					nodeColors.push(style.color);
-				}
-			}
-			if (nodeColors.length === 0) {
-				let layer = gpxLayers.get(item.getFileId());
-				if (layer) {
-					nodeColors.push(layer.layerColor);
-				}
-			}
-		}
-	}
+            let style = node.getStyle(defaultColor);
+            style.color.forEach((c) => {
+                if (!nodeColors.includes(c)) {
+                    nodeColors.push(c);
+                }
+            });
+        } else if (node instanceof Track) {
+            let style = node.getStyle();
+            if (style) {
+                if (style['gpx_style:color'] && !nodeColors.includes(style['gpx_style:color'])) {
+                    nodeColors.push(style['gpx_style:color']);
+                }
+            }
+            if (nodeColors.length === 0) {
+                let layer = gpxLayers.get(item.getFileId());
+                if (layer) {
+                    nodeColors.push(layer.layerColor);
+                }
+            }
+        }
+    }
 
-	let openEditMetadata: boolean = false;
-	let openEditStyle: boolean = false;
+    $: symbolKey = node instanceof Waypoint ? getSymbolKey(node.sym) : undefined;
 
-	$: openEditMetadata = $editMetadata && singleSelection && $selection.has(item);
-	$: openEditStyle =
-		$editStyle &&
-		$selection.has(item) &&
-		$selection.getSelected().findIndex((i) => i.getFullId() === item.getFullId()) === 0;
-	$: hidden = item.level === ListLevel.WAYPOINTS ? node._data.hiddenWpt : node._data.hidden;
+    let openEditMetadata: boolean = false;
+    let openEditStyle: boolean = false;
+
+    $: openEditMetadata = $editMetadata && singleSelection && $selection.has(item);
+    $: openEditStyle =
+        $editStyle &&
+        $selection.has(item) &&
+        $selection.getSelected().findIndex((i) => i.getFullId() === item.getFullId()) === 0;
+    $: hidden = item.level === ListLevel.WAYPOINTS ? node._data.hiddenWpt : node._data.hidden;
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <ContextMenu.Root
-	onOpenChange={(open) => {
-		if (open) {
-			if (!get(selection).has(item)) {
-				selectItem(item);
-			}
-		}
-	}}
+    onOpenChange={(open) => {
+        if (open) {
+            if (!get(selection).has(item)) {
+                selectItem(item);
+            }
+        }
+    }}
 >
-	<ContextMenu.Trigger class="grow truncate">
-		<Button
-			variant="ghost"
-			class="relative w-full p-0 px-1 border-none overflow-hidden focus-visible:ring-0 focus-visible:ring-offset-0 {orientation ===
-			'vertical'
-				? '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} />
-				<StyleDialog bind:open={openEditStyle} {item} />
-			{/if}
-			{#if item.level === ListLevel.FILE || item.level === ListLevel.TRACK}
-				<div
-					class="absolute {orientation === 'vertical'
-						? 'top-0 bottom-0 right-1 w-1'
-						: 'top-0 h-1 left-0 right-0'}"
-					style="background:linear-gradient(to {orientation === 'vertical'
-						? 'bottom'
-						: 'right'},{nodeColors
-						.map(
-							(c, i) =>
-								`${c} ${Math.floor((100 * i) / nodeColors.length)}% ${Math.floor((100 * (i + 1)) / nodeColors.length)}%`
-						)
-						.join(',')})"
-				/>
-			{/if}
-			<span
-				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'
-					: ''}"
-				on:contextmenu={(e) => {
-					if ($embedding) {
-						e.preventDefault();
-						e.stopPropagation();
-						return;
-					}
-					if (e.ctrlKey) {
-						// Add to selection instead of opening context menu
-						e.preventDefault();
-						e.stopPropagation();
-						$selection.toggle(item);
-						$selection = $selection;
-					}
-				}}
-				on:mouseenter={() => {
-					if (item instanceof ListWaypointItem) {
-						let layer = gpxLayers.get(item.getFileId());
-						let file = getFile(item.getFileId());
-						if (layer && file) {
-							let waypoint = file.wpt[item.getWaypointIndex()];
-							if (waypoint) {
-								layer.showWaypointPopup(waypoint);
-							}
-						}
-					}
-				}}
-				on:mouseleave={() => {
-					if (item instanceof ListWaypointItem) {
-						let layer = gpxLayers.get(item.getFileId());
-						if (layer) {
-							layer.hideWaypointPopup();
-						}
-					}
-				}}
-			>
-				{#if item.level === ListLevel.SEGMENT}
-					<Waypoints size="16" class="mr-1 shrink-0" />
-				{:else if item.level === ListLevel.WAYPOINT}
-					<MapPin size="16" class="mr-1 shrink-0" />
-				{/if}
-				<span class="grow select-none truncate {orientation === 'vertical' ? 'last:mr-2' : ''}">
-					{label}
-				</span>
-				{#if hidden}
-					<EyeOff
-						size="12"
-						class="shrink-0 mt-1 ml-1 {orientation === 'vertical' ? 'mr-2' : ''} {item.level ===
-							ListLevel.SEGMENT || item.level === ListLevel.WAYPOINT
-							? 'mr-3'
-							: ''}"
-					/>
-				{/if}
-			</span>
-		</Button>
-	</ContextMenu.Trigger>
-	<ContextMenu.Content>
-		{#if item instanceof ListFileItem || item instanceof ListTrackItem}
-			<ContextMenu.Item disabled={!singleSelection} on:click={() => ($editMetadata = true)}>
-				<Info size="16" class="mr-1" />
-				{$_('menu.metadata.button')}
-				<Shortcut key="I" ctrl={true} />
-			</ContextMenu.Item>
-			<ContextMenu.Item on:click={() => ($editStyle = true)}>
-				<PaintBucket size="16" class="mr-1" />
-				{$_('menu.style.button')}
-			</ContextMenu.Item>
-		{/if}
-		<ContextMenu.Item
-			on:click={() => {
-				if ($allHidden) {
-					dbUtils.setHiddenToSelection(false);
-				} else {
-					dbUtils.setHiddenToSelection(true);
-				}
-			}}
-		>
-			{#if $allHidden}
-				<Eye size="16" class="mr-1" />
-				{$_('menu.unhide')}
-			{:else}
-				<EyeOff size="16" class="mr-1" />
-				{$_('menu.hide')}
-			{/if}
-			<Shortcut key="H" ctrl={true} />
-		</ContextMenu.Item>
-		<ContextMenu.Separator />
-		{#if orientation === 'vertical'}
-			{#if item instanceof ListFileItem}
-				<ContextMenu.Item
-					disabled={!singleSelection}
-					on:click={() =>
-						dbUtils.applyToFile(item.getFileId(), (file) =>
-							file.replaceTracks(file.trk.length, file.trk.length, [new Track()])
-						)}
-				>
-					<Plus size="16" class="mr-1" />
-					{$_('menu.new_track')}
-				</ContextMenu.Item>
-				<ContextMenu.Separator />
-			{:else if item instanceof ListTrackItem}
-				<ContextMenu.Item
-					disabled={!singleSelection}
-					on:click={() => {
-						let trackIndex = item.getTrackIndex();
-						dbUtils.applyToFile(item.getFileId(), (file) =>
-							file.replaceTrackSegments(
-								trackIndex,
-								file.trk[trackIndex].trkseg.length,
-								file.trk[trackIndex].trkseg.length,
-								[new TrackSegment()]
-							)
-						);
-					}}
-				>
-					<Plus size="16" class="mr-1" />
-					{$_('menu.new_segment')}
-				</ContextMenu.Item>
-				<ContextMenu.Separator />
-			{/if}
-		{/if}
-		{#if item.level !== ListLevel.WAYPOINTS}
-			<ContextMenu.Item on:click={selectAll}>
-				<FileStack size="16" class="mr-1" />
-				{$_('menu.select_all')}
-				<Shortcut key="A" ctrl={true} />
-			</ContextMenu.Item>
-			<ContextMenu.Separator />
-		{/if}
-		{#if orientation === 'vertical'}
-			<ContextMenu.Item on:click={dbUtils.duplicateSelection}>
-				<Copy size="16" class="mr-1" />
-				{$_('menu.duplicate')}
-				<Shortcut key="D" ctrl={true} /></ContextMenu.Item
-			>
-			{#if orientation === 'vertical'}
-				<ContextMenu.Item on:click={copySelection}>
-					<ClipboardCopy size="16" class="mr-1" />
-					{$_('menu.copy')}
-					<Shortcut key="C" ctrl={true} />
-				</ContextMenu.Item>
-				<ContextMenu.Item on:click={cutSelection}>
-					<Scissors size="16" class="mr-1" />
-					{$_('menu.cut')}
-					<Shortcut key="X" ctrl={true} />
-				</ContextMenu.Item>
-				<ContextMenu.Item
-					disabled={$copied === undefined ||
-						$copied.length === 0 ||
-						!allowedPastes[$copied[0].level].includes(item.level)}
-					on:click={pasteSelection}
-				>
-					<ClipboardPaste size="16" class="mr-1" />
-					{$_('menu.paste')}
-					<Shortcut key="V" ctrl={true} />
-				</ContextMenu.Item>
-			{/if}
-			<ContextMenu.Separator />
-		{/if}
-		<ContextMenu.Item on:click={dbUtils.deleteSelection}>
-			{#if item instanceof ListFileItem}
-				<FileX size="16" class="mr-1" />
-				{$_('menu.close')}
-			{:else}
-				<Trash2 size="16" class="mr-1" />
-				{$_('menu.delete')}
-			{/if}
-			<Shortcut key="⌫" ctrl={true} />
-		</ContextMenu.Item>
-	</ContextMenu.Content>
+    <ContextMenu.Trigger class="grow truncate">
+        <Button
+            variant="ghost"
+            class="relative w-full p-0 px-1 border-none overflow-hidden focus-visible:ring-0 focus-visible:ring-offset-0 {orientation ===
+            'vertical'
+                ? '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} />
+                <StyleDialog bind:open={openEditStyle} {item} />
+            {/if}
+            {#if item.level === ListLevel.FILE || item.level === ListLevel.TRACK}
+                <div
+                    class="absolute {orientation === 'vertical'
+                        ? 'top-0 bottom-0 right-1 w-1'
+                        : 'top-0 h-1 left-0 right-0'}"
+                    style="background:linear-gradient(to {orientation === 'vertical'
+                        ? 'bottom'
+                        : 'right'},{nodeColors
+                        .map(
+                            (c, i) =>
+                                `${c} ${Math.floor((100 * i) / nodeColors.length)}% ${Math.floor((100 * (i + 1)) / nodeColors.length)}%`
+                        )
+                        .join(',')})"
+                />
+            {/if}
+            <span
+                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'
+                    : ''}"
+                on:contextmenu={(e) => {
+                    if ($embedding) {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        return;
+                    }
+                    if (e.ctrlKey) {
+                        // Add to selection instead of opening context menu
+                        e.preventDefault();
+                        e.stopPropagation();
+                        $selection.toggle(item);
+                        $selection = $selection;
+                    }
+                }}
+                on:mouseenter={() => {
+                    if (item instanceof ListWaypointItem) {
+                        let layer = gpxLayers.get(item.getFileId());
+                        let file = getFile(item.getFileId());
+                        if (layer && file) {
+                            let waypoint = file.wpt[item.getWaypointIndex()];
+                            if (waypoint) {
+                                waypointPopup?.setItem({
+                                    item: waypoint,
+                                    fileId: item.getFileId(),
+                                });
+                            }
+                        }
+                    }
+                }}
+                on:mouseleave={() => {
+                    if (item instanceof ListWaypointItem) {
+                        let layer = gpxLayers.get(item.getFileId());
+                        if (layer) {
+                            waypointPopup?.setItem(null);
+                        }
+                    }
+                }}
+            >
+                {#if item.level === ListLevel.SEGMENT}
+                    <Waypoints size="16" class="mr-1 shrink-0" />
+                {:else if item.level === ListLevel.WAYPOINT}
+                    {#if symbolKey && symbols[symbolKey].icon}
+                        <svelte:component
+                            this={symbols[symbolKey].icon}
+                            size="16"
+                            class="mr-1 shrink-0"
+                        />
+                    {:else}
+                        <MapPin size="16" class="mr-1 shrink-0" />
+                    {/if}
+                {/if}
+                <span
+                    class="grow select-none truncate {orientation === 'vertical'
+                        ? 'last:mr-2'
+                        : ''}"
+                >
+                    {label}
+                </span>
+                {#if hidden}
+                    <EyeOff
+                        size="12"
+                        class="shrink-0 mt-1 ml-1 {orientation === 'vertical'
+                            ? 'mr-2'
+                            : ''} {item.level === ListLevel.SEGMENT ||
+                        item.level === ListLevel.WAYPOINT
+                            ? 'mr-3'
+                            : ''}"
+                    />
+                {/if}
+            </span>
+        </Button>
+    </ContextMenu.Trigger>
+    <ContextMenu.Content>
+        {#if item instanceof ListFileItem || item instanceof ListTrackItem}
+            <ContextMenu.Item disabled={!singleSelection} on:click={() => ($editMetadata = true)}>
+                <Info size="16" class="mr-1" />
+                {$_('menu.metadata.button')}
+                <Shortcut key="I" ctrl={true} />
+            </ContextMenu.Item>
+            <ContextMenu.Item on:click={() => ($editStyle = true)}>
+                <PaintBucket size="16" class="mr-1" />
+                {$_('menu.style.button')}
+            </ContextMenu.Item>
+        {/if}
+        <ContextMenu.Item
+            on:click={() => {
+                if ($allHidden) {
+                    dbUtils.setHiddenToSelection(false);
+                } else {
+                    dbUtils.setHiddenToSelection(true);
+                }
+            }}
+        >
+            {#if $allHidden}
+                <Eye size="16" class="mr-1" />
+                {$_('menu.unhide')}
+            {:else}
+                <EyeOff size="16" class="mr-1" />
+                {$_('menu.hide')}
+            {/if}
+            <Shortcut key="H" ctrl={true} />
+        </ContextMenu.Item>
+        <ContextMenu.Separator />
+        {#if orientation === 'vertical'}
+            {#if item instanceof ListFileItem}
+                <ContextMenu.Item
+                    disabled={!singleSelection}
+                    on:click={() => dbUtils.addNewTrack(item.getFileId())}
+                >
+                    <Plus size="16" class="mr-1" />
+                    {$_('menu.new_track')}
+                </ContextMenu.Item>
+                <ContextMenu.Separator />
+            {:else if item instanceof ListTrackItem}
+                <ContextMenu.Item
+                    disabled={!singleSelection}
+                    on:click={() => dbUtils.addNewSegment(item.getFileId(), item.getTrackIndex())}
+                >
+                    <Plus size="16" class="mr-1" />
+                    {$_('menu.new_segment')}
+                </ContextMenu.Item>
+                <ContextMenu.Separator />
+            {/if}
+        {/if}
+        {#if item.level !== ListLevel.WAYPOINTS}
+            <ContextMenu.Item on:click={selectAll}>
+                <FileStack size="16" class="mr-1" />
+                {$_('menu.select_all')}
+                <Shortcut key="A" ctrl={true} />
+            </ContextMenu.Item>
+        {/if}
+        <ContextMenu.Item on:click={centerMapOnSelection}>
+            <Maximize size="16" class="mr-1" />
+            {$_('menu.center')}
+            <Shortcut key="⏎" ctrl={true} />
+        </ContextMenu.Item>
+        <ContextMenu.Separator />
+        <ContextMenu.Item on:click={dbUtils.duplicateSelection}>
+            <Copy size="16" class="mr-1" />
+            {$_('menu.duplicate')}
+            <Shortcut key="D" ctrl={true} /></ContextMenu.Item
+        >
+        {#if orientation === 'vertical'}
+            <ContextMenu.Item on:click={copySelection}>
+                <ClipboardCopy size="16" class="mr-1" />
+                {$_('menu.copy')}
+                <Shortcut key="C" ctrl={true} />
+            </ContextMenu.Item>
+            <ContextMenu.Item on:click={cutSelection}>
+                <Scissors size="16" class="mr-1" />
+                {$_('menu.cut')}
+                <Shortcut key="X" ctrl={true} />
+            </ContextMenu.Item>
+            <ContextMenu.Item
+                disabled={$copied === undefined ||
+                    $copied.length === 0 ||
+                    !allowedPastes[$copied[0].level].includes(item.level)}
+                on:click={pasteSelection}
+            >
+                <ClipboardPaste size="16" class="mr-1" />
+                {$_('menu.paste')}
+                <Shortcut key="V" ctrl={true} />
+            </ContextMenu.Item>
+        {/if}
+        <ContextMenu.Separator />
+        <ContextMenu.Item on:click={dbUtils.deleteSelection}>
+            {#if item instanceof ListFileItem}
+                <FileX size="16" class="mr-1" />
+                {$_('menu.close')}
+            {:else}
+                <Trash2 size="16" class="mr-1" />
+                {$_('menu.delete')}
+            {/if}
+            <Shortcut key="⌫" ctrl={true} />
+        </ContextMenu.Item>
+    </ContextMenu.Content>
 </ContextMenu.Root>

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

@@ -1,23 +1,23 @@
 <script lang="ts">
-	import CollapsibleTree from '$lib/components/collapsible-tree/CollapsibleTree.svelte';
-	import FileListNode from '$lib/components/file-list/FileListNode.svelte';
+    import CollapsibleTree from '$lib/components/collapsible-tree/CollapsibleTree.svelte';
+    import FileListNode from '$lib/components/file-list/FileListNode.svelte';
 
-	import type { GPXFileWithStatistics } from '$lib/db';
-	import { getContext } from 'svelte';
-	import type { Readable } from 'svelte/store';
-	import { ListFileItem } from './FileList';
+    import type { GPXFileWithStatistics } from '$lib/db';
+    import { getContext } from 'svelte';
+    import type { Readable } from 'svelte/store';
+    import { ListFileItem } from './FileList';
 
-	export let file: Readable<GPXFileWithStatistics | undefined>;
+    export let file: Readable<GPXFileWithStatistics | undefined>;
 
-	let recursive = getContext<boolean>('recursive');
+    let recursive = getContext<boolean>('recursive');
 </script>
 
 {#if $file}
-	{#if recursive}
-		<CollapsibleTree side="left" defaultState="closed" slotInsideTrigger={false}>
-			<FileListNode node={$file.file} item={new ListFileItem($file.file._data.id)} />
-		</CollapsibleTree>
-	{:else}
-		<FileListNode node={$file.file} item={new ListFileItem($file.file._data.id)} />
-	{/if}
+    {#if recursive}
+        <CollapsibleTree side="left" defaultState="closed" slotInsideTrigger={false}>
+            <FileListNode node={$file.file} item={new ListFileItem($file.file._data.id)} />
+        </CollapsibleTree>
+    {:else}
+        <FileListNode node={$file.file} item={new ListFileItem($file.file._data.id)} />
+    {/if}
 {/if}

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

@@ -1,62 +1,65 @@
 <script lang="ts">
-	import { Button } from '$lib/components/ui/button';
-	import { Input } from '$lib/components/ui/input';
-	import { Textarea } from '$lib/components/ui/textarea';
-	import { Label } from '$lib/components/ui/label/index.js';
-	import * as Popover from '$lib/components/ui/popover';
-	import { dbUtils } from '$lib/db';
-	import { Save } from 'lucide-svelte';
-	import { ListFileItem, ListTrackItem, type ListItem } from './FileList';
-	import { GPXTreeElement, Track, type AnyGPXTreeElement, Waypoint, GPXFile } from 'gpx';
-	import { _ } from 'svelte-i18n';
-	import { editMetadata } from '$lib/stores';
+    import { Button } from '$lib/components/ui/button';
+    import { Input } from '$lib/components/ui/input';
+    import { Textarea } from '$lib/components/ui/textarea';
+    import { Label } from '$lib/components/ui/label/index.js';
+    import * as Popover from '$lib/components/ui/popover';
+    import { dbUtils } from '$lib/db';
+    import { Save } from 'lucide-svelte';
+    import { ListFileItem, ListTrackItem, type ListItem } from './FileList';
+    import { GPXTreeElement, Track, type AnyGPXTreeElement, Waypoint, GPXFile } from 'gpx';
+    import { _ } from 'svelte-i18n';
+    import { editMetadata } from '$lib/stores';
 
-	export let node: GPXTreeElement<AnyGPXTreeElement> | Waypoint[] | Waypoint;
-	export let item: ListItem;
-	export let open = false;
+    export let node: GPXTreeElement<AnyGPXTreeElement> | Waypoint[] | Waypoint;
+    export let item: ListItem;
+    export let open = false;
 
-	let name: string =
-		node instanceof GPXFile
-			? node.metadata.name ?? ''
-			: node instanceof Track
-				? node.name ?? ''
-				: '';
-	let description: string =
-		node instanceof GPXFile
-			? node.metadata.desc ?? ''
-			: node instanceof Track
-				? node.desc ?? ''
-				: '';
+    let name: string =
+        node instanceof GPXFile
+            ? (node.metadata.name ?? '')
+            : node instanceof Track
+              ? (node.name ?? '')
+              : '';
+    let description: string =
+        node instanceof GPXFile
+            ? (node.metadata.desc ?? '')
+            : node instanceof Track
+              ? (node.desc ?? '')
+              : '';
 
-	$: if (!open) {
-		$editMetadata = false;
-	}
+    $: if (!open) {
+        $editMetadata = false;
+    }
 </script>
 
 <Popover.Root bind:open>
-	<Popover.Trigger />
-	<Popover.Content side="top" sideOffset={22} alignOffset={30} class="flex flex-col gap-3">
-		<Label for="name">{$_('menu.metadata.name')}</Label>
-		<Input bind:value={name} id="name" class="font-semibold h-8" />
-		<Label for="description">{$_('menu.metadata.description')}</Label>
-		<Textarea bind:value={description} id="description" />
-		<Button
-			variant="outline"
-			on:click={() => {
-				dbUtils.applyToFile(item.getFileId(), (file) => {
-					if (item instanceof ListFileItem && node instanceof GPXFile) {
-						file.metadata.name = name;
-						file.metadata.desc = description;
-					} else if (item instanceof ListTrackItem && node instanceof Track) {
-						file.trk[item.getTrackIndex()].name = name;
-						file.trk[item.getTrackIndex()].desc = description;
-					}
-				});
-				open = false;
-			}}
-		>
-			<Save size="16" class="mr-1" />
-			{$_('menu.metadata.save')}
-		</Button>
-	</Popover.Content>
+    <Popover.Trigger />
+    <Popover.Content side="top" sideOffset={22} alignOffset={30} class="flex flex-col gap-3">
+        <Label for="name">{$_('menu.metadata.name')}</Label>
+        <Input bind:value={name} id="name" class="font-semibold h-8" />
+        <Label for="description">{$_('menu.metadata.description')}</Label>
+        <Textarea bind:value={description} id="description" />
+        <Button
+            variant="outline"
+            on:click={() => {
+                dbUtils.applyToFile(item.getFileId(), (file) => {
+                    if (item instanceof ListFileItem && node instanceof GPXFile) {
+                        file.metadata.name = name;
+                        file.metadata.desc = description;
+                        if (file.trk.length === 1) {
+                            file.trk[0].name = name;
+                        }
+                    } else if (item instanceof ListTrackItem && node instanceof Track) {
+                        file.trk[item.getTrackIndex()].name = name;
+                        file.trk[item.getTrackIndex()].desc = description;
+                    }
+                });
+                open = false;
+            }}
+        >
+            <Save size="16" class="mr-1" />
+            {$_('menu.metadata.save')}
+        </Button>
+    </Popover.Content>
 </Popover.Root>

website/src/lib/components/file-list/Selection.ts

@@ -1,12 +1,23 @@
-import { get, writable } from "svelte/store";
-import { ListFileItem, ListItem, ListRootItem, ListTrackItem, ListTrackSegmentItem, ListWaypointItem, ListLevel, sortItems, ListWaypointsItem, moveItems } from "./FileList";
-import { fileObservers, getFile, getFileIds, settings } from "$lib/db";
+import { get, writable } from 'svelte/store';
+import {
+    ListFileItem,
+    ListItem,
+    ListRootItem,
+    ListTrackItem,
+    ListTrackSegmentItem,
+    ListWaypointItem,
+    ListLevel,
+    sortItems,
+    ListWaypointsItem,
+    moveItems,
+} from './FileList';
+import { fileObservers, getFile, getFileIds, settings } from '$lib/db';
 
 export class SelectionTreeType {
     item: ListItem;
     selected: boolean;
     children: {
-        [key: string | number]: SelectionTreeType
+        [key: string | number]: SelectionTreeType;
     };
     size: number = 0;
 
@@ -67,7 +78,11 @@ export class SelectionTreeType {
     }
 
     hasAnyParent(item: ListItem, self: boolean = true): boolean {
-        if (this.selected && this.item.level <= item.level && (self || this.item.level < item.level)) {
+        if (
+            this.selected &&
+            this.item.level <= item.level &&
+            (self || this.item.level < item.level)
+        ) {
             return this.selected;
         }
         let id = item.getIdAtLevel(this.item.level);
@@ -80,7 +95,11 @@ export class SelectionTreeType {
     }
 
     hasAnyChildren(item: ListItem, self: boolean = true, ignoreIds?: (string | number)[]): boolean {
-        if (this.selected && this.item.level >= item.level && (self || this.item.level > item.level)) {
+        if (
+            this.selected &&
+            this.item.level >= item.level &&
+            (self || this.item.level > item.level)
+        ) {
             return this.selected;
         }
         let id = item.getIdAtLevel(this.item.level);
@@ -131,7 +150,7 @@ export class SelectionTreeType {
             delete this.children[id];
         }
     }
-};
+}
 
 export const selection = writable<SelectionTreeType>(new SelectionTreeType(new ListRootItem()));
 
@@ -181,7 +200,10 @@ export function selectAll() {
             let file = getFile(item.getFileId());
             if (file) {
                 file.trk[item.getTrackIndex()].trkseg.forEach((_segment, segmentId) => {
-                    $selection.set(new ListTrackSegmentItem(item.getFileId(), item.getTrackIndex(), segmentId), true);
+                    $selection.set(
+                        new ListTrackSegmentItem(item.getFileId(), item.getTrackIndex(), segmentId),
+                        true
+                    );
                 });
             }
         } else if (item instanceof ListWaypointItem) {
@@ -205,14 +227,24 @@ export function getOrderedSelection(reverse: boolean = false): ListItem[] {
     return selected;
 }
 
-export function applyToOrderedItemsFromFile(selectedItems: ListItem[], callback: (fileId: string, level: ListLevel | undefined, items: ListItem[]) => void, reverse: boolean = true) {
+export function applyToOrderedItemsFromFile(
+    selectedItems: ListItem[],
+    callback: (fileId: string, level: ListLevel | undefined, items: ListItem[]) => void,
+    reverse: boolean = true
+) {
     get(settings.fileOrder).forEach((fileId) => {
         let level: ListLevel | undefined = undefined;
         let items: ListItem[] = [];
         selectedItems.forEach((item) => {
             if (item.getFileId() === fileId) {
                 level = item.level;
-                if (item instanceof ListFileItem || item instanceof ListTrackItem || item instanceof ListTrackSegmentItem || item instanceof ListWaypointsItem || item instanceof ListWaypointItem) {
+                if (
+                    item instanceof ListFileItem ||
+                    item instanceof ListTrackItem ||
+                    item instanceof ListTrackSegmentItem ||
+                    item instanceof ListWaypointsItem ||
+                    item instanceof ListWaypointItem
+                ) {
                     items.push(item);
                 }
             }
@@ -225,7 +257,10 @@ export function applyToOrderedItemsFromFile(selectedItems: ListItem[], callback:
     });
 }
 
-export function applyToOrderedSelectedItemsFromFile(callback: (fileId: string, level: ListLevel | undefined, items: ListItem[]) => void, reverse: boolean = true) {
+export function applyToOrderedSelectedItemsFromFile(
+    callback: (fileId: string, level: ListLevel | undefined, items: ListItem[]) => void,
+    reverse: boolean = true
+) {
     applyToOrderedItemsFromFile(get(selection).getSelected(), callback, reverse);
 }
 
@@ -270,7 +305,11 @@ export function pasteSelection() {
     let startIndex: number | undefined = undefined;
 
     if (fromItems[0].level === toParent.level) {
-        if (toParent instanceof ListTrackItem || toParent instanceof ListTrackSegmentItem || toParent instanceof ListWaypointItem) {
+        if (
+            toParent instanceof ListTrackItem ||
+            toParent instanceof ListTrackSegmentItem ||
+            toParent instanceof ListWaypointItem
+        ) {
             startIndex = toParent.getId() + 1;
         }
         toParent = toParent.getParent();
@@ -288,20 +327,41 @@ export function pasteSelection() {
             fromItems.forEach((item, index) => {
                 if (toParent instanceof ListFileItem) {
                     if (item instanceof ListTrackItem || item instanceof ListTrackSegmentItem) {
-                        toItems.push(new ListTrackItem(toParent.getFileId(), (startIndex ?? toFile.trk.length) + index));
+                        toItems.push(
+                            new ListTrackItem(
+                                toParent.getFileId(),
+                                (startIndex ?? toFile.trk.length) + index
+                            )
+                        );
                     } else if (item instanceof ListWaypointsItem) {
                         toItems.push(new ListWaypointsItem(toParent.getFileId()));
                     } else if (item instanceof ListWaypointItem) {
-                        toItems.push(new ListWaypointItem(toParent.getFileId(), (startIndex ?? toFile.wpt.length) + index));
+                        toItems.push(
+                            new ListWaypointItem(
+                                toParent.getFileId(),
+                                (startIndex ?? toFile.wpt.length) + index
+                            )
+                        );
                     }
                 } else if (toParent instanceof ListTrackItem) {
                     if (item instanceof ListTrackSegmentItem) {
                         let toTrackIndex = toParent.getTrackIndex();
-                        toItems.push(new ListTrackSegmentItem(toParent.getFileId(), toTrackIndex, (startIndex ?? toFile.trk[toTrackIndex].trkseg.length) + index));
+                        toItems.push(
+                            new ListTrackSegmentItem(
+                                toParent.getFileId(),
+                                toTrackIndex,
+                                (startIndex ?? toFile.trk[toTrackIndex].trkseg.length) + index
+                            )
+                        );
                     }
                 } else if (toParent instanceof ListWaypointsItem) {
                     if (item instanceof ListWaypointItem) {
-                        toItems.push(new ListWaypointItem(toParent.getFileId(), (startIndex ?? toFile.wpt.length) + index));
+                        toItems.push(
+                            new ListWaypointItem(
+                                toParent.getFileId(),
+                                (startIndex ?? toFile.wpt.length) + index
+                            )
+                        );
                     }
                 }
             });
@@ -312,4 +372,4 @@ export function pasteSelection() {
         moveItems(fromParent, toParent, fromItems, toItems, get(cut));
         resetCopied();
     }
-}
+}

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

@@ -1,167 +1,173 @@
 <script lang="ts">
-	import { Button } from '$lib/components/ui/button';
-	import { Input } from '$lib/components/ui/input';
-	import { Label } from '$lib/components/ui/label/index.js';
-	import { Slider } from '$lib/components/ui/slider';
-	import * as Popover from '$lib/components/ui/popover';
-	import { dbUtils, getFile, settings } from '$lib/db';
-	import { Save } from 'lucide-svelte';
-	import { ListFileItem, ListTrackItem, type ListItem } from './FileList';
-	import { selection } from './Selection';
-	import { editStyle, gpxLayers } from '$lib/stores';
-	import { _ } from 'svelte-i18n';
+    import { Button } from '$lib/components/ui/button';
+    import { Input } from '$lib/components/ui/input';
+    import { Label } from '$lib/components/ui/label/index.js';
+    import { Slider } from '$lib/components/ui/slider';
+    import * as Popover from '$lib/components/ui/popover';
+    import { dbUtils, getFile, settings } from '$lib/db';
+    import { Save } from 'lucide-svelte';
+    import { ListFileItem, ListTrackItem, type ListItem } from './FileList';
+    import { selection } from './Selection';
+    import { editStyle, gpxLayers } from '$lib/stores';
+    import { _ } from 'svelte-i18n';
 
-	export let item: ListItem;
-	export let open = false;
+    export let item: ListItem;
+    export let open = false;
 
-	const { defaultOpacity, defaultWeight } = settings;
+    const { defaultOpacity, defaultWidth } = settings;
 
-	let colors: string[] = [];
-	let color: string | undefined = undefined;
-	let opacity: number[] = [];
-	let weight: number[] = [];
-	let colorChanged = false;
-	let opacityChanged = false;
-	let weightChanged = false;
+    let colors: string[] = [];
+    let color: string | undefined = undefined;
+    let opacity: number[] = [];
+    let width: number[] = [];
+    let colorChanged = false;
+    let opacityChanged = false;
+    let widthChanged = false;
 
-	function setStyleInputs() {
-		colors = [];
-		opacity = [];
-		weight = [];
+    function setStyleInputs() {
+        colors = [];
+        opacity = [];
+        width = [];
 
-		$selection.forEach((item) => {
-			if (item instanceof ListFileItem) {
-				let file = getFile(item.getFileId());
-				let layer = gpxLayers.get(item.getFileId());
-				if (file && layer) {
-					let style = file.getStyle();
-					style.color.push(layer.layerColor);
+        $selection.forEach((item) => {
+            if (item instanceof ListFileItem) {
+                let file = getFile(item.getFileId());
+                let layer = gpxLayers.get(item.getFileId());
+                if (file && layer) {
+                    let style = file.getStyle();
+                    style.color.push(layer.layerColor);
 
-					style.color.forEach((c) => {
-						if (!colors.includes(c)) {
-							colors.push(c);
-						}
-					});
-					style.opacity.forEach((o) => {
-						if (!opacity.includes(o)) {
-							opacity.push(o);
-						}
-					});
-					style.weight.forEach((w) => {
-						if (!weight.includes(w)) {
-							weight.push(w);
-						}
-					});
-				}
-			} else if (item instanceof ListTrackItem) {
-				let file = getFile(item.getFileId());
-				let layer = gpxLayers.get(item.getFileId());
-				if (file && layer) {
-					let track = file.trk[item.getTrackIndex()];
-					let style = track.getStyle();
-					if (style) {
-						if (style.color && !colors.includes(style.color)) {
-							colors.push(style.color);
-						}
-						if (style.opacity && !opacity.includes(style.opacity)) {
-							opacity.push(style.opacity);
-						}
-						if (style.weight && !weight.includes(style.weight)) {
-							weight.push(style.weight);
-						}
-					}
-					if (!colors.includes(layer.layerColor)) {
-						colors.push(layer.layerColor);
-					}
-				}
-			}
-		});
+                    style.color.forEach((c) => {
+                        if (!colors.includes(c)) {
+                            colors.push(c);
+                        }
+                    });
+                    style.opacity.forEach((o) => {
+                        if (!opacity.includes(o)) {
+                            opacity.push(o);
+                        }
+                    });
+                    style.width.forEach((w) => {
+                        if (!width.includes(w)) {
+                            width.push(w);
+                        }
+                    });
+                }
+            } else if (item instanceof ListTrackItem) {
+                let file = getFile(item.getFileId());
+                let layer = gpxLayers.get(item.getFileId());
+                if (file && layer) {
+                    let track = file.trk[item.getTrackIndex()];
+                    let style = track.getStyle();
+                    if (style) {
+                        if (
+                            style['gpx_style:color'] &&
+                            !colors.includes(style['gpx_style:color'])
+                        ) {
+                            colors.push(style['gpx_style:color']);
+                        }
+                        if (
+                            style['gpx_style:opacity'] &&
+                            !opacity.includes(style['gpx_style:opacity'])
+                        ) {
+                            opacity.push(style['gpx_style:opacity']);
+                        }
+                        if (style['gpx_style:width'] && !width.includes(style['gpx_style:width'])) {
+                            width.push(style['gpx_style:width']);
+                        }
+                    }
+                    if (!colors.includes(layer.layerColor)) {
+                        colors.push(layer.layerColor);
+                    }
+                }
+            }
+        });
 
-		color = colors[0];
-		opacity = [opacity[0] ?? $defaultOpacity];
-		weight = [weight[0] ?? $defaultWeight];
+        color = colors[0];
+        opacity = [opacity[0] ?? $defaultOpacity];
+        width = [width[0] ?? $defaultWidth];
 
-		colorChanged = false;
-		opacityChanged = false;
-		weightChanged = false;
-	}
+        colorChanged = false;
+        opacityChanged = false;
+        widthChanged = false;
+    }
 
-	$: if ($selection && open) {
-		setStyleInputs();
-	}
+    $: if ($selection && open) {
+        setStyleInputs();
+    }
 
-	$: if (!open) {
-		$editStyle = false;
-	}
+    $: if (!open) {
+        $editStyle = false;
+    }
 </script>
 
 <Popover.Root bind:open>
-	<Popover.Trigger />
-	<Popover.Content side="top" sideOffset={22} alignOffset={30} class="flex flex-col gap-3">
-		<Label class="flex flex-row gap-2 items-center justify-between">
-			{$_('menu.style.color')}
-			<Input
-				bind:value={color}
-				type="color"
-				class="p-0 h-6 w-40"
-				on:change={() => (colorChanged = true)}
-			/>
-		</Label>
-		<Label class="flex flex-row gap-2 items-center justify-between">
-			{$_('menu.style.opacity')}
-			<div class="w-40 p-2">
-				<Slider
-					bind:value={opacity}
-					min={0.3}
-					max={1}
-					step={0.1}
-					onValueChange={() => (opacityChanged = true)}
-				/>
-			</div>
-		</Label>
-		<Label class="flex flex-row gap-2 items-center justify-between">
-			{$_('menu.style.width')}
-			<div class="w-40 p-2">
-				<Slider
-					bind:value={weight}
-					id="weight"
-					min={1}
-					max={10}
-					step={1}
-					onValueChange={() => (weightChanged = true)}
-				/>
-			</div>
-		</Label>
-		<Button
-			variant="outline"
-			disabled={!colorChanged && !opacityChanged && !weightChanged}
-			on:click={() => {
-				let style = {};
-				if (colorChanged) {
-					style.color = color;
-				}
-				if (opacityChanged) {
-					style.opacity = opacity[0];
-				}
-				if (weightChanged) {
-					style.weight = weight[0];
-				}
-				dbUtils.setStyleToSelection(style);
+    <Popover.Trigger />
+    <Popover.Content side="top" sideOffset={22} alignOffset={30} class="flex flex-col gap-3">
+        <Label class="flex flex-row gap-2 items-center justify-between">
+            {$_('menu.style.color')}
+            <Input
+                bind:value={color}
+                type="color"
+                class="p-0 h-6 w-40"
+                on:change={() => (colorChanged = true)}
+            />
+        </Label>
+        <Label class="flex flex-row gap-2 items-center justify-between">
+            {$_('menu.style.opacity')}
+            <div class="w-40 p-2">
+                <Slider
+                    bind:value={opacity}
+                    min={0.3}
+                    max={1}
+                    step={0.1}
+                    onValueChange={() => (opacityChanged = true)}
+                />
+            </div>
+        </Label>
+        <Label class="flex flex-row gap-2 items-center justify-between">
+            {$_('menu.style.width')}
+            <div class="w-40 p-2">
+                <Slider
+                    bind:value={width}
+                    id="width"
+                    min={1}
+                    max={10}
+                    step={1}
+                    onValueChange={() => (widthChanged = true)}
+                />
+            </div>
+        </Label>
+        <Button
+            variant="outline"
+            disabled={!colorChanged && !opacityChanged && !widthChanged}
+            on:click={() => {
+                let style = {};
+                if (colorChanged) {
+                    style['gpx_style:color'] = color;
+                }
+                if (opacityChanged) {
+                    style['gpx_style:opacity'] = opacity[0];
+                }
+                if (widthChanged) {
+                    style['gpx_style:width'] = width[0];
+                }
+                dbUtils.setStyleToSelection(style);
 
-				if (item instanceof ListFileItem && $selection.size === gpxLayers.size) {
-					if (style.opacity) {
-						$defaultOpacity = style.opacity;
-					}
-					if (style.weight) {
-						$defaultWeight = style.weight;
-					}
-				}
+                if (item instanceof ListFileItem && $selection.size === gpxLayers.size) {
+                    if (style['gpx_style:opacity']) {
+                        $defaultOpacity = style['gpx_style:opacity'];
+                    }
+                    if (style['gpx_style:width']) {
+                        $defaultWidth = style['gpx_style:width'];
+                    }
+                }
 
-				open = false;
-			}}
-		>
-			<Save size="16" class="mr-1" />
-			{$_('menu.metadata.save')}
-		</Button>
-	</Popover.Content>
+                open = false;
+            }}
+        >
+            <Save size="16" class="mr-1" />
+            {$_('menu.metadata.save')}
+        </Button>
+    </Popover.Content>
 </Popover.Root>

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

@@ -0,0 +1,23 @@
+<script lang="ts">
+    import { Button } from '$lib/components/ui/button';
+    import { ClipboardCopy } from 'lucide-svelte';
+    import { _ } from 'svelte-i18n';
+    import type { Coordinates } from 'gpx';
+
+    export let coordinates: Coordinates;
+    export let onCopy: () => void = () => {};
+</script>
+
+<Button
+    class="w-full px-2 py-1 h-8 justify-start {$$props.class}"
+    variant="outline"
+    on:click={() => {
+        navigator.clipboard.writeText(
+            `${coordinates.lat.toFixed(6)}, ${coordinates.lon.toFixed(6)}`
+        );
+        onCopy();
+    }}
+>
+    <ClipboardCopy size="16" class="mr-1" />
+    {$_('menu.copy_coordinates')}
+</Button>

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

@@ -1,10 +1,17 @@
+import { settings } from '$lib/db';
+import { gpxStatistics } from '$lib/stores';
+import { get } from 'svelte/store';
 
-import { font } from "$lib/assets/layers";
-import { settings } from "$lib/db";
-import { gpxStatistics } from "$lib/stores";
-import { get } from "svelte/store";
+const { distanceMarkers, distanceUnits } = settings;
 
-const { distanceMarkers, distanceUnits, currentBasemap } = settings;
+const stops = [
+    [100, 0],
+    [50, 7],
+    [25, 8, 10],
+    [10, 10],
+    [5, 11],
+    [1, 13],
+];
 
 export class DistanceMarkers {
     map: mapboxgl.Map;
@@ -17,7 +24,7 @@ export class DistanceMarkers {
         this.unsubscribes.push(gpxStatistics.subscribe(this.updateBinded));
         this.unsubscribes.push(distanceMarkers.subscribe(this.updateBinded));
         this.unsubscribes.push(distanceUnits.subscribe(this.updateBinded));
-        this.map.on('style.load', this.updateBinded);
+        this.map.on('style.import.load', this.updateBinded);
     }
 
     update() {
@@ -29,41 +36,55 @@ export class DistanceMarkers {
                 } else {
                     this.map.addSource('distance-markers', {
                         type: 'geojson',
-                        data: this.getDistanceMarkersGeoJSON()
+                        data: this.getDistanceMarkersGeoJSON(),
                     });
                 }
-                if (!this.map.getLayer('distance-markers')) {
-                    this.map.addLayer({
-                        id: 'distance-markers',
-                        type: 'symbol',
-                        source: 'distance-markers',
-                        layout: {
-                            'text-field': ['get', 'distance'],
-                            'text-size': 14,
-                            'text-font': [font[get(currentBasemap)] ?? 'Open Sans Bold'],
-                            'text-padding': 20,
-                        },
-                        paint: {
-                            'text-color': 'black',
-                            'text-halo-width': 2,
-                            'text-halo-color': 'white',
-                        }
-                    });
-                } else {
-                    this.map.moveLayer('distance-markers');
-                }
+                stops.forEach(([d, minzoom, maxzoom]) => {
+                    if (!this.map.getLayer(`distance-markers-${d}`)) {
+                        this.map.addLayer({
+                            id: `distance-markers-${d}`,
+                            type: 'symbol',
+                            source: 'distance-markers',
+                            filter:
+                                d === 5
+                                    ? [
+                                          'any',
+                                          ['==', ['get', 'level'], 5],
+                                          ['==', ['get', 'level'], 25],
+                                      ]
+                                    : ['==', ['get', 'level'], d],
+                            minzoom: minzoom,
+                            maxzoom: maxzoom ?? 24,
+                            layout: {
+                                'text-field': ['get', 'distance'],
+                                'text-size': 14,
+                                'text-font': ['Open Sans Bold'],
+                            },
+                            paint: {
+                                'text-color': 'black',
+                                'text-halo-width': 2,
+                                'text-halo-color': 'white',
+                            },
+                        });
+                    } else {
+                        this.map.moveLayer(`distance-markers-${d}`);
+                    }
+                });
             } else {
-                if (this.map.getLayer('distance-markers')) {
-                    this.map.removeLayer('distance-markers');
-                }
+                stops.forEach(([d]) => {
+                    if (this.map.getLayer(`distance-markers-${d}`)) {
+                        this.map.removeLayer(`distance-markers-${d}`);
+                    }
+                });
             }
-        } catch (e) { // No reliable way to check if the map is ready to add sources and layers
+        } catch (e) {
+            // No reliable way to check if the map is ready to add sources and layers
             return;
         }
     }
 
     remove() {
-        this.unsubscribes.forEach(unsubscribe => unsubscribe());
+        this.unsubscribes.forEach((unsubscribe) => unsubscribe());
     }
 
     getDistanceMarkersGeoJSON(): GeoJSON.FeatureCollection {
@@ -72,17 +93,28 @@ export class DistanceMarkers {
         let features = [];
         let currentTargetDistance = 1;
         for (let i = 0; i < statistics.local.distance.total.length; i++) {
-            if (statistics.local.distance.total[i] >= currentTargetDistance * (get(distanceUnits) === 'metric' ? 1 : 1.60934)) {
+            if (
+                statistics.local.distance.total[i] >=
+                currentTargetDistance * (get(distanceUnits) === 'metric' ? 1 : 1.60934)
+            ) {
                 let distance = currentTargetDistance.toFixed(0);
+                let [level, minzoom] = stops.find(([d]) => currentTargetDistance % d === 0) ?? [
+                    0, 0,
+                ];
                 features.push({
                     type: 'Feature',
                     geometry: {
                         type: 'Point',
-                        coordinates: [statistics.local.points[i].getLongitude(), statistics.local.points[i].getLatitude()]
+                        coordinates: [
+                            statistics.local.points[i].getLongitude(),
+                            statistics.local.points[i].getLatitude(),
+                        ],
                     },
                     properties: {
                         distance,
-                    }
+                        level,
+                        minzoom,
+                    },
                 } as GeoJSON.Feature);
                 currentTargetDistance += 1;
             }
@@ -90,7 +122,7 @@ export class DistanceMarkers {
 
         return {
             type: 'FeatureCollection',
-            features
+            features,
         };
     }
-}
+}

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

@@ -1,16 +1,28 @@
-import { currentTool, map, Tool } from "$lib/stores";
-import { settings, type GPXFileWithStatistics, dbUtils } from "$lib/db";
-import { get, type Readable } from "svelte/store";
-import mapboxgl from "mapbox-gl";
-import { currentPopupWaypoint, deleteWaypoint, waypointPopup } from "./WaypointPopup";
-import { addSelectItem, selectItem, selection } from "$lib/components/file-list/Selection";
-import { ListTrackSegmentItem, ListWaypointItem, ListWaypointsItem, ListTrackItem, ListFileItem, ListRootItem } from "$lib/components/file-list/FileList";
-import type { Waypoint } from "gpx";
-import { getElevation, resetCursor, setGrabbingCursor, setPointerCursor, setScissorsCursor } from "$lib/utils";
-import { font } from "$lib/assets/layers";
-import { selectedWaypoint } from "$lib/components/toolbar/tools/Waypoint.svelte";
-import { MapPin, Square } from "lucide-static";
-import { getSymbolKey, symbols } from "$lib/assets/symbols";
+import { currentTool, map, Tool } from '$lib/stores';
+import { settings, type GPXFileWithStatistics, dbUtils } from '$lib/db';
+import { get, type Readable } from 'svelte/store';
+import mapboxgl from 'mapbox-gl';
+import { waypointPopup, deleteWaypoint, trackpointPopup } from './GPXLayerPopup';
+import { addSelectItem, selectItem, selection } from '$lib/components/file-list/Selection';
+import {
+    ListTrackSegmentItem,
+    ListWaypointItem,
+    ListWaypointsItem,
+    ListTrackItem,
+    ListFileItem,
+    ListRootItem,
+} from '$lib/components/file-list/FileList';
+import {
+    getClosestLinePoint,
+    getElevation,
+    resetCursor,
+    setGrabbingCursor,
+    setPointerCursor,
+    setScissorsCursor,
+} from '$lib/utils';
+import { selectedWaypoint } from '$lib/components/toolbar/tools/Waypoint.svelte';
+import { MapPin, Square } from 'lucide-static';
+import { getSymbolKey, symbols } from '$lib/assets/symbols';
 
 const colors = [
     '#ff0000',
@@ -23,7 +35,7 @@ const colors = [
     '#288228',
     '#9933ff',
     '#50f0be',
-    '#8c645a'
+    '#8c645a',
 ];
 
 const colorCount: { [key: string]: number } = {};
@@ -44,29 +56,58 @@ function decrementColor(color: string) {
     }
 }
 
+const inspectKey = 'Shift';
+let inspectKeyDown: KeyDown | null = null;
+class KeyDown {
+    key: string;
+    down: boolean = false;
+    constructor(key: string) {
+        this.key = key;
+        document.addEventListener('keydown', this.onKeyDown);
+        document.addEventListener('keyup', this.onKeyUp);
+    }
+    onKeyDown = (e: KeyboardEvent) => {
+        if (e.key === this.key) {
+            this.down = true;
+        }
+    };
+    onKeyUp = (e: KeyboardEvent) => {
+        if (e.key === this.key) {
+            this.down = false;
+        }
+    };
+    isDown() {
+        return this.down;
+    }
+}
+
 function getMarkerForSymbol(symbol: string | undefined, layerColor: string) {
     let symbolSvg = symbol ? symbols[symbol]?.iconSvg : undefined;
     return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-    ${Square
-            .replace('width="24"', 'width="12"')
-            .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"', '')
-            .replace('path', `path fill="#3fb1ce" stroke="SteelBlue" stroke-width="1"`)
-            .replace('circle', `circle fill="${symbolSvg ? 'none' : 'white'}" stroke="${symbolSvg ? 'none' : 'white'}" stroke-width="2"`)} 
-    ${symbolSvg?.replace('width="24"', 'width="10"')
+    ${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"', '')
+        .replace('path', `path fill="#3fb1ce" stroke="SteelBlue" stroke-width="1"`)
+        .replace(
+            'circle',
+            `circle fill="${symbolSvg ? 'none' : 'white'}" stroke="${symbolSvg ? 'none' : 'white'}" stroke-width="2"`
+        )} 
+    ${
+        symbolSvg
+            ?.replace('width="24"', 'width="10"')
             .replace('height="24"', 'height="10"')
             .replace('stroke="currentColor"', 'stroke="white"')
-            .replace('stroke-width="2"', 'stroke-width="2.5" x="7" y="5"') ?? ''}
+            .replace('stroke-width="2"', 'stroke-width="2.5" x="7" y="5"') ?? ''
+    }
     </svg>`;
 }
 
-const { directionMarkers, verticalFileView, currentBasemap, defaultOpacity, defaultWeight } = settings;
+const { directionMarkers, treeFileView, defaultOpacity, defaultWidth } = settings;
 
 export class GPXLayer {
     map: mapboxgl.Map;
@@ -81,38 +122,51 @@ export class GPXLayer {
     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: any) => void = this.layerOnClick.bind(this);
-    maybeHideWaypointPopupBinded: (e: any) => void = this.maybeHideWaypointPopup.bind(this);
+    layerOnContextMenuBinded: (e: any) => void = this.layerOnContextMenu.bind(this);
 
-    constructor(map: mapboxgl.Map, fileId: string, file: Readable<GPXFileWithStatistics | undefined>) {
+    constructor(
+        map: mapboxgl.Map,
+        fileId: string,
+        file: Readable<GPXFileWithStatistics | undefined>
+    ) {
         this.map = map;
         this.fileId = fileId;
         this.file = file;
         this.layerColor = getColor();
         this.unsubscribe.push(file.subscribe(this.updateBinded));
-        this.unsubscribe.push(selection.subscribe($selection => {
-            let newSelected = $selection.hasAnyChildren(new ListFileItem(this.fileId));
-            if (this.selected || newSelected) {
-                this.selected = newSelected;
-                this.update();
-            }
-            if (newSelected) {
-                this.moveToFront();
-            }
-        }));
+        this.unsubscribe.push(
+            selection.subscribe(($selection) => {
+                let newSelected = $selection.hasAnyChildren(new ListFileItem(this.fileId));
+                if (this.selected || newSelected) {
+                    this.selected = newSelected;
+                    this.update();
+                }
+                if (newSelected) {
+                    this.moveToFront();
+                }
+            })
+        );
         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.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;
 
-        this.map.on('style.load', this.updateBinded);
+        this.map.on('style.import.load', this.updateBinded);
+
+        if (inspectKeyDown === null) {
+            inspectKeyDown = new KeyDown(inspectKey);
+        }
     }
 
     update() {
@@ -121,7 +175,11 @@ export class GPXLayer {
             return;
         }
 
-        if (file._data.style && file._data.style.color && this.layerColor !== `#${file._data.style.color}`) {
+        if (
+            file._data.style &&
+            file._data.style.color &&
+            this.layerColor !== `#${file._data.style.color}`
+        ) {
             decrementColor(this.layerColor);
             this.layerColor = `#${file._data.style.color}`;
         }
@@ -133,7 +191,7 @@ export class GPXLayer {
             } else {
                 this.map.addSource(this.fileId, {
                     type: 'geojson',
-                    data: this.getGeoJSON()
+                    data: this.getGeoJSON(),
                 });
             }
 
@@ -144,43 +202,48 @@ export class GPXLayer {
                     source: this.fileId,
                     layout: {
                         'line-join': 'round',
-                        'line-cap': 'round'
+                        'line-cap': 'round',
                     },
                     paint: {
                         'line-color': ['get', 'color'],
-                        'line-width': ['get', 'weight'],
-                        'line-opacity': ['get', 'opacity']
-                    }
+                        'line-width': ['get', 'width'],
+                        'line-opacity': ['get', 'opacity'],
+                    },
                 });
 
                 this.map.on('click', this.fileId, this.layerOnClickBinded);
+                this.map.on('contextmenu', this.fileId, this.layerOnContextMenuBinded);
                 this.map.on('mouseenter', this.fileId, this.layerOnMouseEnterBinded);
                 this.map.on('mouseleave', this.fileId, this.layerOnMouseLeaveBinded);
+                this.map.on('mousemove', this.fileId, this.layerOnMouseMoveBinded);
             }
 
             if (get(directionMarkers)) {
                 if (!this.map.getLayer(this.fileId + '-direction')) {
-                    this.map.addLayer({
-                        id: this.fileId + '-direction',
-                        type: 'symbol',
-                        source: this.fileId,
-                        layout: {
-                            'text-field': '»',
-                            'text-offset': [0, -0.1],
-                            'text-keep-upright': false,
-                            'text-max-angle': 361,
-                            'text-allow-overlap': true,
-                            'text-font': [font[get(currentBasemap)] ?? 'Open Sans Bold'],
-                            'symbol-placement': 'line',
-                            'symbol-spacing': 20,
+                    this.map.addLayer(
+                        {
+                            id: this.fileId + '-direction',
+                            type: 'symbol',
+                            source: this.fileId,
+                            layout: {
+                                'text-field': '»',
+                                'text-offset': [0, -0.1],
+                                'text-keep-upright': false,
+                                'text-max-angle': 361,
+                                'text-allow-overlap': true,
+                                'text-font': ['Open Sans Bold'],
+                                'symbol-placement': 'line',
+                                'symbol-spacing': 20,
+                            },
+                            paint: {
+                                'text-color': 'white',
+                                'text-opacity': 0.7,
+                                'text-halo-width': 0.2,
+                                'text-halo-color': 'white',
+                            },
                         },
-                        paint: {
-                            'text-color': 'white',
-                            'text-opacity': 0.7,
-                            'text-halo-width': 0.2,
-                            'text-halo-color': 'white'
-                        }
-                    }, this.map.getLayer('distance-markers') ? 'distance-markers' : undefined);
+                        this.map.getLayer('distance-markers') ? 'distance-markers' : undefined
+                    );
                 }
             } else {
                 if (this.map.getLayer(this.fileId + '-direction')) {
@@ -195,23 +258,53 @@ export class GPXLayer {
                 }
             });
 
-            this.map.setFilter(this.fileId, ['any', ...visibleItems.map(([trackIndex, segmentIndex]) => ['all', ['==', 'trackIndex', trackIndex], ['==', 'segmentIndex', segmentIndex]])], { validate: false });
+            this.map.setFilter(
+                this.fileId,
+                [
+                    'any',
+                    ...visibleItems.map(([trackIndex, segmentIndex]) => [
+                        'all',
+                        ['==', 'trackIndex', trackIndex],
+                        ['==', 'segmentIndex', segmentIndex],
+                    ]),
+                ],
+                { validate: false }
+            );
             if (this.map.getLayer(this.fileId + '-direction')) {
-                this.map.setFilter(this.fileId + '-direction', ['any', ...visibleItems.map(([trackIndex, segmentIndex]) => ['all', ['==', 'trackIndex', trackIndex], ['==', 'segmentIndex', segmentIndex]])], { validate: false });
+                this.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
+        } 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
+            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].getElement().innerHTML = getMarkerForSymbol(
+                        symbolKey,
+                        this.layerColor
+                    );
                     this.markers[markerIndex].setLngLat(waypoint.getCoordinates());
-                    Object.defineProperty(this.markers[markerIndex], '_waypoint', { value: waypoint, writable: true });
+                    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');
@@ -219,15 +312,15 @@ export class GPXLayer {
                     let marker = new mapboxgl.Marker({
                         draggable: this.draggable,
                         element,
-                        anchor: 'bottom'
+                        anchor: 'bottom',
                     }).setLngLat(waypoint.getCoordinates());
                     Object.defineProperty(marker, '_waypoint', { value: waypoint, writable: true });
                     let dragEndTimestamp = 0;
-                    marker.getElement().addEventListener('mouseover', (e) => {
+                    marker.getElement().addEventListener('mousemove', (e) => {
                         if (marker._isDragging) {
                             return;
                         }
-                        this.showWaypointPopup(marker._waypoint);
+                        waypointPopup?.setItem({ item: marker._waypoint, fileId: this.fileId });
                         e.stopPropagation();
                     });
                     marker.getElement().addEventListener('click', (e) => {
@@ -241,37 +334,49 @@ export class GPXLayer {
                             return;
                         }
 
-                        if (get(verticalFileView)) {
-                            if ((e.ctrlKey || e.metaKey) && get(selection).hasAnyChildren(new ListWaypointsItem(this.fileId), false)) {
-                                addSelectItem(new ListWaypointItem(this.fileId, marker._waypoint._data.index));
+                        if (get(treeFileView)) {
+                            if (
+                                (e.ctrlKey || e.metaKey) &&
+                                get(selection).hasAnyChildren(
+                                    new ListWaypointsItem(this.fileId),
+                                    false
+                                )
+                            ) {
+                                addSelectItem(
+                                    new ListWaypointItem(this.fileId, marker._waypoint._data.index)
+                                );
                             } else {
-                                selectItem(new ListWaypointItem(this.fileId, marker._waypoint._data.index));
+                                selectItem(
+                                    new ListWaypointItem(this.fileId, marker._waypoint._data.index)
+                                );
                             }
                         } else if (get(currentTool) === Tool.WAYPOINT) {
                             selectedWaypoint.set([marker._waypoint, this.fileId]);
                         } else {
-                            this.showWaypointPopup(marker._waypoint);
+                            waypointPopup?.setItem({ item: marker._waypoint, fileId: this.fileId });
                         }
                         e.stopPropagation();
                     });
                     marker.on('dragstart', () => {
                         setGrabbingCursor();
                         marker.getElement().style.cursor = 'grabbing';
-                        this.hideWaypointPopup();
+                        waypointPopup?.hide();
                     });
                     marker.on('dragend', (e) => {
                         resetCursor();
                         marker.getElement().style.cursor = '';
-                        dbUtils.applyToFile(this.fileId, (file) => {
-                            let latLng = marker.getLngLat();
-                            let wpt = file.wpt[marker._waypoint._data.index];
-                            wpt.setCoordinates({
-                                lat: latLng.lat,
-                                lon: latLng.lng
+                        getElevation([marker._waypoint]).then((ele) => {
+                            dbUtils.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];
                             });
-                            wpt.ele = getElevation(this.map, wpt.getCoordinates());
                         });
-                        dragEndTimestamp = Date.now()
+                        dragEndTimestamp = Date.now();
                     });
                     this.markers.push(marker);
                 }
@@ -279,7 +384,8 @@ export class GPXLayer {
             });
         }
 
-        while (markerIndex < this.markers.length) { // Remove extra markers
+        while (markerIndex < this.markers.length) {
+            // Remove extra markers
             this.markers.pop()?.remove();
         }
 
@@ -294,16 +400,18 @@ export class GPXLayer {
 
     updateMap(map: mapboxgl.Map) {
         this.map = map;
-        this.map.on('style.load', this.updateBinded);
+        this.map.on('style.import.load', this.updateBinded);
         this.update();
     }
 
     remove() {
         if (get(map)) {
             this.map.off('click', this.fileId, this.layerOnClickBinded);
+            this.map.off('contextmenu', this.fileId, this.layerOnContextMenuBinded);
             this.map.off('mouseenter', this.fileId, this.layerOnMouseEnterBinded);
             this.map.off('mouseleave', this.fileId, this.layerOnMouseLeaveBinded);
-            this.map.off('style.load', this.updateBinded);
+            this.map.off('mousemove', this.fileId, this.layerOnMouseMoveBinded);
+            this.map.off('style.import.load', this.updateBinded);
 
             if (this.map.getLayer(this.fileId + '-direction')) {
                 this.map.removeLayer(this.fileId + '-direction');
@@ -330,7 +438,10 @@ export class GPXLayer {
             this.map.moveLayer(this.fileId);
         }
         if (this.map.getLayer(this.fileId + '-direction')) {
-            this.map.moveLayer(this.fileId + '-direction', this.map.getLayer('distance-markers') ? 'distance-markers' : undefined);
+            this.map.moveLayer(
+                this.fileId + '-direction',
+                this.map.getLayer('distance-markers') ? 'distance-markers' : undefined
+            );
         }
     }
 
@@ -338,7 +449,12 @@ export class GPXLayer {
         let trackIndex = e.features[0].properties.trackIndex;
         let segmentIndex = e.features[0].properties.segmentIndex;
 
-        if (get(currentTool) === Tool.SCISSORS && get(selection).hasAnyParent(new ListTrackSegmentItem(this.fileId, trackIndex, segmentIndex))) {
+        if (
+            get(currentTool) === Tool.SCISSORS &&
+            get(selection).hasAnyParent(
+                new ListTrackSegmentItem(this.fileId, trackIndex, segmentIndex)
+            )
+        ) {
             setScissorsCursor();
         } else {
             setPointerCursor();
@@ -349,16 +465,43 @@ export class GPXLayer {
         resetCursor();
     }
 
+    layerOnMouseMove(e: any) {
+        if (inspectKeyDown?.isDown()) {
+            let trackIndex = e.features[0].properties.trackIndex;
+            let segmentIndex = e.features[0].properties.segmentIndex;
+
+            const file = get(this.file)?.file;
+            if (file) {
+                const closest = getClosestLinePoint(
+                    file.trk[trackIndex].trkseg[segmentIndex].trkpt,
+                    { lat: e.lngLat.lat, lon: e.lngLat.lng }
+                );
+                trackpointPopup?.setItem({ item: closest, fileId: this.fileId });
+            }
+        }
+    }
+
     layerOnClick(e: any) {
-        if (get(currentTool) === Tool.ROUTING && get(selection).hasAnyChildren(new ListRootItem(), true, ['waypoints'])) {
+        if (
+            get(currentTool) === Tool.ROUTING &&
+            get(selection).hasAnyChildren(new ListRootItem(), true, ['waypoints'])
+        ) {
             return;
         }
 
         let trackIndex = e.features[0].properties.trackIndex;
         let segmentIndex = e.features[0].properties.segmentIndex;
 
-        if (get(currentTool) === Tool.SCISSORS && get(selection).hasAnyParent(new ListTrackSegmentItem(this.fileId, trackIndex, segmentIndex))) {
-            dbUtils.split(this.fileId, trackIndex, segmentIndex, { lat: e.lngLat.lat, lon: e.lngLat.lng });
+        if (
+            get(currentTool) === Tool.SCISSORS &&
+            get(selection).hasAnyParent(
+                new ListTrackSegmentItem(this.fileId, trackIndex, segmentIndex)
+            )
+        ) {
+            dbUtils.split(this.fileId, trackIndex, segmentIndex, {
+                lat: e.lngLat.lat,
+                lon: e.lngLat.lng,
+            });
             return;
         }
 
@@ -368,8 +511,12 @@ export class GPXLayer {
         }
 
         let item = undefined;
-        if (get(verticalFileView) && file.getSegments().length > 1) { // Select inner item
-            item = file.children[trackIndex].children.length > 1 ? new ListTrackSegmentItem(this.fileId, trackIndex, segmentIndex) : new ListTrackItem(this.fileId, trackIndex);
+        if (get(treeFileView) && file.getSegments().length > 1) {
+            // Select inner item
+            item =
+                file.children[trackIndex].children.length > 1
+                    ? new ListTrackSegmentItem(this.fileId, trackIndex, segmentIndex)
+                    : new ListTrackItem(this.fileId, trackIndex);
         } else {
             item = new ListFileItem(this.fileId);
         }
@@ -381,40 +528,9 @@ export class GPXLayer {
         }
     }
 
-    showWaypointPopup(waypoint: Waypoint) {
-        if (get(currentPopupWaypoint) !== null) {
-            this.hideWaypointPopup();
-        }
-        let marker = this.markers[waypoint._data.index];
-        if (marker) {
-            currentPopupWaypoint.set([waypoint, this.fileId]);
-            marker.setPopup(waypointPopup);
-            marker.togglePopup();
-            this.map.on('mousemove', this.maybeHideWaypointPopupBinded);
-        }
-    }
-
-    maybeHideWaypointPopup(e: any) {
-        let waypoint = get(currentPopupWaypoint)?.[0];
-        if (waypoint) {
-            let marker = this.markers[waypoint._data.index];
-            if (marker) {
-                if (this.map.project(marker.getLngLat()).dist(this.map.project(e.lngLat)) > 100) {
-                    this.hideWaypointPopup();
-                }
-            } else {
-                this.hideWaypointPopup();
-            }
-        }
-    }
-
-    hideWaypointPopup() {
-        let waypoint = get(currentPopupWaypoint)?.[0];
-        if (waypoint) {
-            let marker = this.markers[waypoint._data.index];
-            marker?.getPopup()?.remove();
-            currentPopupWaypoint.set(null);
-            this.map.off('mousemove', this.maybeHideWaypointPopupBinded);
+    layerOnContextMenu(e: any) {
+        if (e.originalEvent.ctrlKey) {
+            this.layerOnClick(e);
         }
     }
 
@@ -423,13 +539,14 @@ export class GPXLayer {
         if (!file) {
             return {
                 type: 'FeatureCollection',
-                features: []
+                features: [],
             };
         }
 
         let data = file.toGeoJSON();
 
-        let trackIndex = 0, segmentIndex = 0;
+        let trackIndex = 0,
+            segmentIndex = 0;
         for (let feature of data.features) {
             if (!feature.properties) {
                 feature.properties = {};
@@ -437,14 +554,19 @@ export class GPXLayer {
             if (!feature.properties.color) {
                 feature.properties.color = this.layerColor;
             }
-            if (!feature.properties.weight) {
-                feature.properties.weight = get(defaultWeight);
-            }
             if (!feature.properties.opacity) {
                 feature.properties.opacity = get(defaultOpacity);
             }
-            if (get(selection).hasAnyParent(new ListTrackSegmentItem(this.fileId, trackIndex, segmentIndex)) || get(selection).hasAnyChildren(new ListWaypointsItem(this.fileId), true)) {
-                feature.properties.weight = feature.properties.weight + 2;
+            if (!feature.properties.width) {
+                feature.properties.width = get(defaultWidth);
+            }
+            if (
+                get(selection).hasAnyParent(
+                    new ListTrackSegmentItem(this.fileId, trackIndex, segmentIndex)
+                ) ||
+                get(selection).hasAnyChildren(new ListWaypointsItem(this.fileId), true)
+            ) {
+                feature.properties.width = feature.properties.width + 2;
                 feature.properties.opacity = Math.min(1, feature.properties.opacity + 0.1);
             }
             feature.properties.trackIndex = trackIndex;
@@ -458,4 +580,4 @@ export class GPXLayer {
         }
         return data;
     }
-}
+}

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

@@ -0,0 +1,44 @@
+import { dbUtils } from '$lib/db';
+import { MapPopup } from '$lib/components/MapPopup';
+
+export let waypointPopup: MapPopup | null = null;
+export let trackpointPopup: MapPopup | null = null;
+
+export function createPopups(map: mapboxgl.Map) {
+    removePopups();
+    waypointPopup = new MapPopup(map, {
+        closeButton: false,
+        focusAfterOpen: false,
+        maxWidth: undefined,
+        offset: {
+            top: [0, 0],
+            'top-left': [0, 0],
+            'top-right': [0, 0],
+            bottom: [0, -30],
+            'bottom-left': [0, -30],
+            'bottom-right': [0, -30],
+            left: [10, -15],
+            right: [-10, -15],
+        },
+    });
+    trackpointPopup = new MapPopup(map, {
+        closeButton: false,
+        focusAfterOpen: false,
+        maxWidth: undefined,
+    });
+}
+
+export function removePopups() {
+    if (waypointPopup !== null) {
+        waypointPopup.remove();
+        waypointPopup = null;
+    }
+    if (trackpointPopup !== null) {
+        trackpointPopup.remove();
+        trackpointPopup = null;
+    }
+}
+
+export function deleteWaypoint(fileId: string, waypointIndex: number) {
+    dbUtils.applyToFile(fileId, (file) => file.replaceWaypoints(waypointIndex, waypointIndex, []));
+}

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

@@ -1,58 +1,56 @@
 <script lang="ts">
-	import { map, gpxLayers } from '$lib/stores';
-	import { GPXLayer } from './GPXLayer';
-	import WaypointPopup from './WaypointPopup.svelte';
-	import { fileObservers } from '$lib/db';
-	import { DistanceMarkers } from './DistanceMarkers';
-	import { StartEndMarkers } from './StartEndMarkers';
-	import { onDestroy } from 'svelte';
+    import { map, gpxLayers } from '$lib/stores';
+    import { GPXLayer } from './GPXLayer';
+    import { fileObservers } from '$lib/db';
+    import { DistanceMarkers } from './DistanceMarkers';
+    import { StartEndMarkers } from './StartEndMarkers';
+    import { onDestroy } from 'svelte';
+    import { createPopups, removePopups } from './GPXLayerPopup';
 
-	let distanceMarkers: DistanceMarkers | undefined = undefined;
-	let startEndMarkers: StartEndMarkers | undefined = undefined;
+    let distanceMarkers: DistanceMarkers | undefined = undefined;
+    let startEndMarkers: StartEndMarkers | undefined = undefined;
 
-	$: if ($map && $fileObservers) {
-		// remove layers for deleted files
-		gpxLayers.forEach((layer, fileId) => {
-			if (!$fileObservers.has(fileId)) {
-				layer.remove();
-				gpxLayers.delete(fileId);
-			} else if ($map !== layer.map) {
-				layer.updateMap($map);
-			}
-		});
-		// add layers for new files
-		$fileObservers.forEach((file, fileId) => {
-			if (!gpxLayers.has(fileId)) {
-				gpxLayers.set(fileId, new GPXLayer($map, fileId, file));
-			}
-		});
-	}
+    $: if ($map && $fileObservers) {
+        // remove layers for deleted files
+        gpxLayers.forEach((layer, fileId) => {
+            if (!$fileObservers.has(fileId)) {
+                layer.remove();
+                gpxLayers.delete(fileId);
+            } else if ($map !== layer.map) {
+                layer.updateMap($map);
+            }
+        });
+        // add layers for new files
+        $fileObservers.forEach((file, fileId) => {
+            if (!gpxLayers.has(fileId)) {
+                gpxLayers.set(fileId, new GPXLayer($map, fileId, file));
+            }
+        });
+    }
 
-	$: if ($map) {
-		if (distanceMarkers) {
-			distanceMarkers.remove();
-		}
-		if (startEndMarkers) {
-			startEndMarkers.remove();
-		}
-		distanceMarkers = new DistanceMarkers($map);
-		startEndMarkers = new StartEndMarkers($map);
-	}
+    $: if ($map) {
+        if (distanceMarkers) {
+            distanceMarkers.remove();
+        }
+        if (startEndMarkers) {
+            startEndMarkers.remove();
+        }
+        createPopups($map);
+        distanceMarkers = new DistanceMarkers($map);
+        startEndMarkers = new StartEndMarkers($map);
+    }
 
-	onDestroy(() => {
-		gpxLayers.forEach((layer) => layer.remove());
-		gpxLayers.clear();
-
-		if (distanceMarkers) {
-			distanceMarkers.remove();
-			distanceMarkers = undefined;
-		}
-
-		if (startEndMarkers) {
-			startEndMarkers.remove();
-			startEndMarkers = undefined;
-		}
-	});
+    onDestroy(() => {
+        gpxLayers.forEach((layer) => layer.remove());
+        gpxLayers.clear();
+        removePopups();
+        if (distanceMarkers) {
+            distanceMarkers.remove();
+            distanceMarkers = undefined;
+        }
+        if (startEndMarkers) {
+            startEndMarkers.remove();
+            startEndMarkers = undefined;
+        }
+    });
 </script>
-
-<WaypointPopup />

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

@@ -1,6 +1,6 @@
-import { gpxStatistics, slicedGPXStatistics, currentTool, Tool } from "$lib/stores";
-import mapboxgl from "mapbox-gl";
-import { get } from "svelte/store";
+import { gpxStatistics, slicedGPXStatistics, currentTool, Tool } from '$lib/stores';
+import mapboxgl from 'mapbox-gl';
+import { get } from 'svelte/store';
 
 export class StartEndMarkers {
     map: mapboxgl.Map;
@@ -16,7 +16,8 @@ export class StartEndMarkers {
         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';
+        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 });
@@ -31,7 +32,11 @@ export class StartEndMarkers {
         let statistics = get(slicedGPXStatistics)?.[0] ?? get(gpxStatistics);
         if (statistics.local.points.length > 0 && tool !== Tool.ROUTING) {
             this.start.setLngLat(statistics.local.points[0].getCoordinates()).addTo(this.map);
-            this.end.setLngLat(statistics.local.points[statistics.local.points.length - 1].getCoordinates()).addTo(this.map);
+            this.end
+                .setLngLat(
+                    statistics.local.points[statistics.local.points.length - 1].getCoordinates()
+                )
+                .addTo(this.map);
         } else {
             this.start.remove();
             this.end.remove();
@@ -39,9 +44,9 @@ export class StartEndMarkers {
     }
 
     remove() {
-        this.unsubscribes.forEach(unsubscribe => unsubscribe());
+        this.unsubscribes.forEach((unsubscribe) => unsubscribe());
 
         this.start.remove();
         this.end.remove();
     }
-}
+}

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

@@ -0,0 +1,43 @@
+<script lang="ts">
+    import type { TrackPoint } from 'gpx';
+    import type { PopupItem } from '$lib/components/MapPopup';
+    import CopyCoordinates from '$lib/components/gpx-layer/CopyCoordinates.svelte';
+    import * as Card from '$lib/components/ui/card';
+    import WithUnits from '$lib/components/WithUnits.svelte';
+    import { Compass, Mountain, Timer } from 'lucide-svelte';
+    import { df } from '$lib/utils';
+    import { _ } from 'svelte-i18n';
+
+    export let trackpoint: PopupItem<TrackPoint>;
+</script>
+
+<Card.Root class="border-none shadow-md text-base p-2">
+    <Card.Header class="p-0">
+        <Card.Title class="text-md"></Card.Title>
+    </Card.Header>
+    <Card.Content class="flex flex-col p-0 text-xs gap-1">
+        <div class="flex flex-row items-center gap-1">
+            <Compass size="14" />
+            {trackpoint.item.getLatitude().toFixed(6)}&deg; {trackpoint.item
+                .getLongitude()
+                .toFixed(6)}&deg;
+        </div>
+        {#if trackpoint.item.ele !== undefined}
+            <div class="flex flex-row items-center gap-1">
+                <Mountain size="14" />
+                <WithUnits value={trackpoint.item.ele} type="elevation" />
+            </div>
+        {/if}
+        {#if trackpoint.item.time}
+            <div class="flex flex-row items-center gap-1">
+                <Timer size="14" />
+                {df.format(trackpoint.item.time)}
+            </div>
+        {/if}
+        <CopyCoordinates
+            coordinates={trackpoint.item.attributes}
+            onCopy={() => trackpoint.hide?.()}
+            class="mt-0.5"
+        />
+    </Card.Content>
+</Card.Root>

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

@@ -1,105 +1,108 @@
 <script lang="ts">
-	import * as Card from '$lib/components/ui/card';
-	import { Button } from '$lib/components/ui/button';
-	import Shortcut from '$lib/components/Shortcut.svelte';
-	import { waypointPopup, currentPopupWaypoint, deleteWaypoint } from './WaypointPopup';
-	import WithUnits from '$lib/components/WithUnits.svelte';
-	import { Dot, ExternalLink, Trash2 } from 'lucide-svelte';
-	import { onMount } from 'svelte';
-	import { Tool, currentTool } from '$lib/stores';
-	import { getSymbolKey, symbols } from '$lib/assets/symbols';
-	import { _ } from 'svelte-i18n';
-	import sanitizeHtml from 'sanitize-html';
+    import * as Card from '$lib/components/ui/card';
+    import { Button } from '$lib/components/ui/button';
+    import Shortcut from '$lib/components/Shortcut.svelte';
+    import CopyCoordinates from '$lib/components/gpx-layer/CopyCoordinates.svelte';
+    import { deleteWaypoint } from './GPXLayerPopup';
+    import WithUnits from '$lib/components/WithUnits.svelte';
+    import { Dot, ExternalLink, Trash2 } from 'lucide-svelte';
+    import { Tool, currentTool } from '$lib/stores';
+    import { getSymbolKey, symbols } from '$lib/assets/symbols';
+    import { _ } from 'svelte-i18n';
+    import sanitizeHtml from 'sanitize-html';
+    import type { Waypoint } from 'gpx';
+    import type { PopupItem } from '$lib/components/MapPopup';
+    import { ScrollArea } from '$lib/components/ui/scroll-area/index.js';
 
-	let popupElement: HTMLDivElement;
+    export let waypoint: PopupItem<Waypoint>;
 
-	onMount(() => {
-		waypointPopup.setDOMContent(popupElement);
-		popupElement.classList.remove('hidden');
-	});
+    $: symbolKey = waypoint ? getSymbolKey(waypoint.item.sym) : undefined;
 
-	$: symbolKey = $currentPopupWaypoint ? getSymbolKey($currentPopupWaypoint[0].sym) : undefined;
-
-	function sanitize(text: string | undefined): string {
-		if (text === undefined) {
-			return '';
-		}
-		let sanitized = sanitizeHtml(text, {
-			allowedTags: ['a', 'br'],
-			allowedAttributes: {
-				a: ['href', 'target']
-			}
-		}).trim();
-		return sanitized;
-	}
+    function sanitize(text: string | undefined): string {
+        if (text === undefined) {
+            return '';
+        }
+        return sanitizeHtml(text, {
+            allowedTags: ['a', 'br', 'img'],
+            allowedAttributes: {
+                a: ['href', 'target'],
+                img: ['src'],
+            },
+        }).trim();
+    }
 </script>
 
-<div bind:this={popupElement} class="hidden">
-	{#if $currentPopupWaypoint}
-		<Card.Root class="border-none shadow-md text-base max-w-80 p-2">
-			<Card.Header class="p-0">
-				<Card.Title class="text-md">
-					{#if $currentPopupWaypoint[0].link && $currentPopupWaypoint[0].link.attributes && $currentPopupWaypoint[0].link.attributes.href}
-						<a href={$currentPopupWaypoint[0].link.attributes.href} target="_blank">
-							{$currentPopupWaypoint[0].name ?? $currentPopupWaypoint[0].link.attributes.href}
-							<ExternalLink size="12" class="inline-block mb-1.5" />
-						</a>
-					{:else}
-						{$currentPopupWaypoint[0].name ?? $_('gpx.waypoint')}
-					{/if}
-				</Card.Title>
-			</Card.Header>
-			<Card.Content class="flex flex-col p-0 text-sm">
-				<div class="flex flex-row items-center text-muted-foreground text-xs whitespace-nowrap">
-					{#if symbolKey}
-						<span>
-							{#if symbols[symbolKey].icon}
-								<svelte:component
-									this={symbols[symbolKey].icon}
-									size="12"
-									class="inline-block mb-0.5"
-								/>
-							{:else}
-								<span class="w-4 inline-block" />
-							{/if}
-							{$_(`gpx.symbol.${symbolKey}`)}
-						</span>
-						<Dot size="16" />
-					{/if}
-					{$currentPopupWaypoint[0].getLatitude().toFixed(6)}&deg; {$currentPopupWaypoint[0]
-						.getLongitude()
-						.toFixed(6)}&deg;
-					{#if $currentPopupWaypoint[0].ele !== undefined}
-						<Dot size="16" />
-						<WithUnits value={$currentPopupWaypoint[0].ele} type="elevation" />
-					{/if}
-				</div>
-				{#if $currentPopupWaypoint[0].desc}
-					<span class="whitespace-pre-wrap">{@html sanitize($currentPopupWaypoint[0].desc)}</span>
-				{/if}
-				{#if $currentPopupWaypoint[0].cmt && $currentPopupWaypoint[0].cmt !== $currentPopupWaypoint[0].desc}
-					<span class="whitespace-pre-wrap">{@html sanitize($currentPopupWaypoint[0].cmt)}</span>
-				{/if}
-				{#if $currentTool === Tool.WAYPOINT}
-					<Button
-						class="mt-2 w-full px-2 py-1 h-8 justify-start"
-						variant="outline"
-						on:click={() =>
-							deleteWaypoint($currentPopupWaypoint[1], $currentPopupWaypoint[0]._data.index)}
-					>
-						<Trash2 size="16" class="mr-1" />
-						{$_('menu.delete')}
-						<Shortcut key="" shift={true} click={true} />
-					</Button>
-				{/if}
-			</Card.Content>
-		</Card.Root>
-	{/if}
-</div>
+<Card.Root class="border-none shadow-md text-base p-2 max-w-[50dvw]">
+    <Card.Header class="p-0">
+        <Card.Title class="text-md">
+            {#if waypoint.item.link && waypoint.item.link.attributes && waypoint.item.link.attributes.href}
+                <a href={waypoint.item.link.attributes.href} target="_blank">
+                    {waypoint.item.name ?? waypoint.item.link.attributes.href}
+                    <ExternalLink size="12" class="inline-block mb-1.5" />
+                </a>
+            {:else}
+                {waypoint.item.name ?? $_('gpx.waypoint')}
+            {/if}
+        </Card.Title>
+    </Card.Header>
+    <Card.Content class="flex flex-col text-sm p-0">
+        <div class="flex flex-row items-center text-muted-foreground text-xs whitespace-nowrap">
+            {#if symbolKey}
+                <span>
+                    {#if symbols[symbolKey].icon}
+                        <svelte:component
+                            this={symbols[symbolKey].icon}
+                            size="12"
+                            class="inline-block mb-0.5"
+                        />
+                    {:else}
+                        <span class="w-4 inline-block" />
+                    {/if}
+                    {$_(`gpx.symbol.${symbolKey}`)}
+                </span>
+                <Dot size="16" />
+            {/if}
+            {waypoint.item.getLatitude().toFixed(6)}&deg; {waypoint.item
+                .getLongitude()
+                .toFixed(6)}&deg;
+            {#if waypoint.item.ele !== undefined}
+                <Dot size="16" />
+                <WithUnits value={waypoint.item.ele} type="elevation" />
+            {/if}
+        </div>
+        <ScrollArea class="flex flex-col" viewportClasses="max-h-[30dvh]">
+            {#if waypoint.item.desc}
+                <span class="whitespace-pre-wrap">{@html sanitize(waypoint.item.desc)}</span>
+            {/if}
+            {#if waypoint.item.cmt && waypoint.item.cmt !== waypoint.item.desc}
+                <span class="whitespace-pre-wrap">{@html sanitize(waypoint.item.cmt)}</span>
+            {/if}
+        </ScrollArea>
+        <div class="mt-2 flex flex-col gap-1">
+            <CopyCoordinates coordinates={waypoint.item.attributes} />
+            {#if $currentTool === Tool.WAYPOINT}
+                <Button
+                    class="w-full px-2 py-1 h-8 justify-start"
+                    variant="outline"
+                    on:click={() => deleteWaypoint(waypoint.fileId, waypoint.item._data.index)}
+                >
+                    <Trash2 size="16" class="mr-1" />
+                    {$_('menu.delete')}
+                    <Shortcut shift={true} click={true} />
+                </Button>
+            {/if}
+        </div>
+    </Card.Content>
+</Card.Root>
 
 <style lang="postcss">
-	div :global(a) {
-		@apply text-blue-500 dark:text-blue-300;
-		@apply hover:underline;
-	}
+    div :global(a) {
+        @apply text-link;
+        @apply hover:underline;
+    }
+
+    div :global(img) {
+        @apply my-0;
+        @apply rounded-md;
+    }
 </style>

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

@@ -1,25 +0,0 @@
-import { dbUtils } from "$lib/db";
-import type { Waypoint } from "gpx";
-import mapboxgl from "mapbox-gl";
-import { writable } from "svelte/store";
-
-export const currentPopupWaypoint = writable<[Waypoint, string] | null>(null);
-
-export const waypointPopup = new mapboxgl.Popup({
-    closeButton: false,
-    maxWidth: undefined,
-    offset: {
-        'top': [0, 0],
-        'top-left': [0, 0],
-        'top-right': [0, 0],
-        'bottom': [0, -30],
-        'bottom-left': [0, -30],
-        'bottom-right': [0, -30],
-        'left': [0, 0],
-        'right': [0, 0]
-    },
-});
-
-export function deleteWaypoint(fileId: string, waypointIndex: number) {
-    dbUtils.applyToFile(fileId, (file) => file.replaceWaypoints(waypointIndex, waypointIndex, []));
-}

website/src/lib/components/layer-control/CustomLayers.svelte

@@ -1,417 +1,436 @@
 <script lang="ts">
-	import * as Card from '$lib/components/ui/card';
-	import { Input } from '$lib/components/ui/input';
-	import { Label } from '$lib/components/ui/label';
-	import { Button } from '$lib/components/ui/button';
-	import { Separator } from '$lib/components/ui/separator';
-	import * as RadioGroup from '$lib/components/ui/radio-group';
-	import {
-		CirclePlus,
-		CircleX,
-		Minus,
-		Pencil,
-		Plus,
-		Save,
-		Trash2,
-		Move,
-		Map,
-		Layers2
-	} from 'lucide-svelte';
-	import { _ } from 'svelte-i18n';
-	import { settings } from '$lib/db';
-	import { defaultBasemap, extendBasemap, type CustomLayer } from '$lib/assets/layers';
-	import { map } from '$lib/stores';
-	import { onDestroy, onMount } from 'svelte';
-	import Sortable from 'sortablejs/Sortable';
+    import * as Card from '$lib/components/ui/card';
+    import { Input } from '$lib/components/ui/input';
+    import { Label } from '$lib/components/ui/label';
+    import { Button } from '$lib/components/ui/button';
+    import { Separator } from '$lib/components/ui/separator';
+    import * as RadioGroup from '$lib/components/ui/radio-group';
+    import {
+        CirclePlus,
+        CircleX,
+        Minus,
+        Pencil,
+        Plus,
+        Save,
+        Trash2,
+        Move,
+        Map,
+        Layers2,
+    } from 'lucide-svelte';
+    import { _ } from 'svelte-i18n';
+    import { settings } from '$lib/db';
+    import { defaultBasemap, type CustomLayer } from '$lib/assets/layers';
+    import { map } from '$lib/stores';
+    import { onDestroy, onMount } from 'svelte';
+    import Sortable from 'sortablejs/Sortable';
+    import { customBasemapUpdate } from './utils';
 
-	const {
-		customLayers,
-		selectedBasemapTree,
-		selectedOverlayTree,
-		currentBasemap,
-		previousBasemap,
-		currentOverlays,
-		previousOverlays,
-		customBasemapOrder,
-		customOverlayOrder
-	} = settings;
+    const {
+        customLayers,
+        selectedBasemapTree,
+        selectedOverlayTree,
+        currentBasemap,
+        previousBasemap,
+        currentOverlays,
+        previousOverlays,
+        customBasemapOrder,
+        customOverlayOrder,
+    } = settings;
 
-	let name: string = '';
-	let tileUrls: string[] = [''];
-	let maxZoom: number = 20;
-	let layerType: 'basemap' | 'overlay' = 'basemap';
-	let resourceType: 'raster' | 'vector' = 'raster';
+    let name: string = '';
+    let tileUrls: string[] = [''];
+    let maxZoom: number = 20;
+    let layerType: 'basemap' | 'overlay' = 'basemap';
+    let resourceType: 'raster' | 'vector' = 'raster';
 
-	let basemapContainer: HTMLElement;
-	let overlayContainer: HTMLElement;
+    let basemapContainer: HTMLElement;
+    let overlayContainer: HTMLElement;
 
-	let basemapSortable: Sortable;
-	let overlaySortable: Sortable;
+    let basemapSortable: Sortable;
+    let overlaySortable: Sortable;
 
-	onMount(() => {
-		if ($customBasemapOrder.length === 0) {
-			$customBasemapOrder = Object.keys($customLayers).filter(
-				(id) => $customLayers[id].layerType === 'basemap'
-			);
-		}
-		if ($customOverlayOrder.length === 0) {
-			$customOverlayOrder = Object.keys($customLayers).filter(
-				(id) => $customLayers[id].layerType === 'overlay'
-			);
-		}
+    onMount(() => {
+        if ($customBasemapOrder.length === 0) {
+            $customBasemapOrder = Object.keys($customLayers).filter(
+                (id) => $customLayers[id].layerType === 'basemap'
+            );
+        }
+        if ($customOverlayOrder.length === 0) {
+            $customOverlayOrder = Object.keys($customLayers).filter(
+                (id) => $customLayers[id].layerType === 'overlay'
+            );
+        }
 
-		basemapSortable = Sortable.create(basemapContainer, {
-			onSort: (e) => {
-				$customBasemapOrder = basemapSortable.toArray();
-				$selectedBasemapTree.basemaps['custom'] = $customBasemapOrder.reduce((acc, id) => {
-					acc[id] = true;
-					return acc;
-				}, {});
-			}
-		});
-		overlaySortable = Sortable.create(overlayContainer, {
-			onSort: (e) => {
-				$customOverlayOrder = overlaySortable.toArray();
-				$selectedOverlayTree.overlays['custom'] = $customOverlayOrder.reduce((acc, id) => {
-					acc[id] = true;
-					return acc;
-				}, {});
-			}
-		});
+        basemapSortable = Sortable.create(basemapContainer, {
+            onSort: (e) => {
+                $customBasemapOrder = basemapSortable.toArray();
+                $selectedBasemapTree.basemaps['custom'] = $customBasemapOrder.reduce((acc, id) => {
+                    acc[id] = true;
+                    return acc;
+                }, {});
+            },
+        });
+        overlaySortable = Sortable.create(overlayContainer, {
+            onSort: (e) => {
+                $customOverlayOrder = overlaySortable.toArray();
+                $selectedOverlayTree.overlays['custom'] = $customOverlayOrder.reduce((acc, id) => {
+                    acc[id] = true;
+                    return acc;
+                }, {});
+            },
+        });
 
-		basemapSortable.sort($customBasemapOrder);
-		overlaySortable.sort($customOverlayOrder);
-	});
+        basemapSortable.sort($customBasemapOrder);
+        overlaySortable.sort($customOverlayOrder);
+    });
 
-	onDestroy(() => {
-		basemapSortable.destroy();
-		overlaySortable.destroy();
-	});
+    onDestroy(() => {
+        basemapSortable.destroy();
+        overlaySortable.destroy();
+    });
 
-	$: if (tileUrls[0].length > 0) {
-		if (
-			tileUrls[0].includes('.json') ||
-			(tileUrls[0].includes('api.mapbox.com/styles') && !tileUrls[0].includes('tiles'))
-		) {
-			resourceType = 'vector';
-			layerType = 'basemap';
-		} else {
-			resourceType = 'raster';
-		}
-	}
+    $: if (tileUrls[0].length > 0) {
+        if (
+            tileUrls[0].includes('.json') ||
+            (tileUrls[0].includes('api.mapbox.com/styles') && !tileUrls[0].includes('tiles'))
+        ) {
+            resourceType = 'vector';
+        } else {
+            resourceType = 'raster';
+        }
+    }
 
-	function createLayer() {
-		if (selectedLayerId && $customLayers[selectedLayerId].layerType !== layerType) {
-			deleteLayer(selectedLayerId);
-		}
+    function createLayer() {
+        if (selectedLayerId && $customLayers[selectedLayerId].layerType !== layerType) {
+            deleteLayer(selectedLayerId);
+        }
 
-		if (typeof maxZoom === 'string') {
-			maxZoom = parseInt(maxZoom);
-		}
+        if (typeof maxZoom === 'string') {
+            maxZoom = parseInt(maxZoom);
+        }
+        let is512 = tileUrls.some((url) => url.includes('512'));
 
-		let layerId = selectedLayerId ?? getLayerId();
-		let layer: CustomLayer = {
-			id: layerId,
-			name: name,
-			tileUrls: tileUrls,
-			maxZoom: maxZoom,
-			layerType: layerType,
-			resourceType: resourceType,
-			value: ''
-		};
+        let layerId = selectedLayerId ?? getLayerId();
+        let layer: CustomLayer = {
+            id: layerId,
+            name: name,
+            tileUrls: tileUrls.map((url) => decodeURI(url.trim())),
+            maxZoom: maxZoom,
+            layerType: layerType,
+            resourceType: resourceType,
+            value: '',
+        };
 
-		if (resourceType === 'vector') {
-			layer.value = tileUrls[0];
-		} else {
-			if (layerType === 'basemap') {
-				layer.value = extendBasemap({
-					version: 8,
-					sources: {
-						[layerId]: {
-							type: 'raster',
-							tiles: tileUrls,
-							maxzoom: maxZoom
-						}
-					},
-					layers: [
-						{
-							id: layerId,
-							type: 'raster',
-							source: layerId
-						}
-					]
-				});
-			} else {
-				layer.value = {
-					type: 'raster',
-					tiles: tileUrls,
-					maxzoom: maxZoom
-				};
-			}
-		}
-		$customLayers[layerId] = layer;
-		addLayer(layerId);
-		selectedLayerId = undefined;
-		setDataFromSelectedLayer();
-	}
+        if (resourceType === 'vector') {
+            layer.value = layer.tileUrls[0];
+        } else {
+            layer.value = {
+                version: 8,
+                sources: {
+                    [layerId]: {
+                        type: 'raster',
+                        tiles: layer.tileUrls,
+                        tileSize: is512 ? 512 : 256,
+                        maxzoom: maxZoom,
+                    },
+                },
+                layers: [
+                    {
+                        id: layerId,
+                        type: 'raster',
+                        source: layerId,
+                    },
+                ],
+            };
+        }
+        $customLayers[layerId] = layer;
+        addLayer(layerId);
+        selectedLayerId = undefined;
+        setDataFromSelectedLayer();
+    }
 
-	function getLayerId() {
-		for (let id = 0; ; id++) {
-			if (!$customLayers.hasOwnProperty(`custom-${id}`)) {
-				return `custom-${id}`;
-			}
-		}
-	}
+    function getLayerId() {
+        for (let id = 0; ; id++) {
+            if (!$customLayers.hasOwnProperty(`custom-${id}`)) {
+                return `custom-${id}`;
+            }
+        }
+    }
 
-	function addLayer(layerId: string) {
-		if (layerType === 'basemap') {
-			selectedBasemapTree.update(($tree) => {
-				if (!$tree.basemaps.hasOwnProperty('custom')) {
-					$tree.basemaps['custom'] = {};
-				}
-				$tree.basemaps['custom'][layerId] = true;
-				return $tree;
-			});
+    function addLayer(layerId: string) {
+        if (layerType === 'basemap') {
+            selectedBasemapTree.update(($tree) => {
+                if (!$tree.basemaps.hasOwnProperty('custom')) {
+                    $tree.basemaps['custom'] = {};
+                }
+                $tree.basemaps['custom'][layerId] = true;
+                return $tree;
+            });
 
-			$currentBasemap = layerId;
+            if ($currentBasemap === layerId) {
+                $customBasemapUpdate++;
+            } else {
+                $currentBasemap = layerId;
+            }
 
-			if (!$customBasemapOrder.includes(layerId)) {
-				$customBasemapOrder = [...$customBasemapOrder, layerId];
-			}
-		} else {
-			selectedOverlayTree.update(($tree) => {
-				if (!$tree.overlays.hasOwnProperty('custom')) {
-					$tree.overlays['custom'] = {};
-				}
-				$tree.overlays['custom'][layerId] = true;
-				return $tree;
-			});
+            if (!$customBasemapOrder.includes(layerId)) {
+                $customBasemapOrder = [...$customBasemapOrder, layerId];
+            }
+        } else {
+            selectedOverlayTree.update(($tree) => {
+                if (!$tree.overlays.hasOwnProperty('custom')) {
+                    $tree.overlays['custom'] = {};
+                }
+                $tree.overlays['custom'][layerId] = true;
+                return $tree;
+            });
 
-			if ($map && $map.getSource(layerId)) {
-				// Reset source when updating an existing layer
-				if ($map.getLayer(layerId)) {
-					$map.removeLayer(layerId);
-				}
-				$map.removeSource(layerId);
-			}
+            if (
+                $currentOverlays.overlays['custom'] &&
+                $currentOverlays.overlays['custom'][layerId] &&
+                $map
+            ) {
+                try {
+                    $map.removeImport(layerId);
+                } catch (e) {
+                    // No reliable way to check if the map is ready to remove sources and layers
+                }
+            }
 
-			if (!$currentOverlays.overlays.hasOwnProperty('custom')) {
-				$currentOverlays.overlays['custom'] = {};
-			}
-			$currentOverlays.overlays['custom'][layerId] = true;
+            if (!$currentOverlays.overlays.hasOwnProperty('custom')) {
+                $currentOverlays.overlays['custom'] = {};
+            }
+            $currentOverlays.overlays['custom'][layerId] = true;
 
-			if (!$customOverlayOrder.includes(layerId)) {
-				$customOverlayOrder = [...$customOverlayOrder, layerId];
-			}
-		}
-	}
+            if (!$customOverlayOrder.includes(layerId)) {
+                $customOverlayOrder = [...$customOverlayOrder, layerId];
+            }
+        }
+    }
 
-	function tryDeleteLayer(node: any, id: string): any {
-		if (node.hasOwnProperty(id)) {
-			delete node[id];
-		}
-		return node;
-	}
+    function tryDeleteLayer(node: any, id: string): any {
+        if (node.hasOwnProperty(id)) {
+            delete node[id];
+        }
+        return node;
+    }
 
-	function deleteLayer(layerId: string) {
-		let layer = $customLayers[layerId];
-		if (layer.layerType === 'basemap') {
-			if (layerId === $currentBasemap) {
-				$currentBasemap = defaultBasemap;
-			}
-			if (layerId === $previousBasemap) {
-				$previousBasemap = defaultBasemap;
-			}
+    function deleteLayer(layerId: string) {
+        let layer = $customLayers[layerId];
+        if (layer.layerType === 'basemap') {
+            if (layerId === $currentBasemap) {
+                $currentBasemap = defaultBasemap;
+            }
+            if (layerId === $previousBasemap) {
+                $previousBasemap = defaultBasemap;
+            }
 
-			$selectedBasemapTree.basemaps['custom'] = tryDeleteLayer(
-				$selectedBasemapTree.basemaps['custom'],
-				layerId
-			);
-			if (Object.keys($selectedBasemapTree.basemaps['custom']).length === 0) {
-				$selectedBasemapTree.basemaps = tryDeleteLayer($selectedBasemapTree.basemaps, 'custom');
-			}
-			$customBasemapOrder = $customBasemapOrder.filter((id) => id !== layerId);
-		} else {
-			$currentOverlays.overlays['custom'][layerId] = false;
-			if ($previousOverlays.overlays['custom']) {
-				$previousOverlays.overlays['custom'] = tryDeleteLayer(
-					$previousOverlays.overlays['custom'],
-					layerId
-				);
-			}
+            $selectedBasemapTree.basemaps['custom'] = tryDeleteLayer(
+                $selectedBasemapTree.basemaps['custom'],
+                layerId
+            );
+            if (Object.keys($selectedBasemapTree.basemaps['custom']).length === 0) {
+                $selectedBasemapTree.basemaps = tryDeleteLayer(
+                    $selectedBasemapTree.basemaps,
+                    'custom'
+                );
+            }
+            $customBasemapOrder = $customBasemapOrder.filter((id) => id !== layerId);
+        } else {
+            $currentOverlays.overlays['custom'][layerId] = false;
+            if ($previousOverlays.overlays['custom']) {
+                $previousOverlays.overlays['custom'] = tryDeleteLayer(
+                    $previousOverlays.overlays['custom'],
+                    layerId
+                );
+            }
 
-			$selectedOverlayTree.overlays['custom'] = tryDeleteLayer(
-				$selectedOverlayTree.overlays['custom'],
-				layerId
-			);
-			if (Object.keys($selectedOverlayTree.overlays['custom']).length === 0) {
-				$selectedOverlayTree.overlays = tryDeleteLayer($selectedOverlayTree.overlays, 'custom');
-			}
-			$customOverlayOrder = $customOverlayOrder.filter((id) => id !== layerId);
+            $selectedOverlayTree.overlays['custom'] = tryDeleteLayer(
+                $selectedOverlayTree.overlays['custom'],
+                layerId
+            );
+            if (Object.keys($selectedOverlayTree.overlays['custom']).length === 0) {
+                $selectedOverlayTree.overlays = tryDeleteLayer(
+                    $selectedOverlayTree.overlays,
+                    'custom'
+                );
+            }
+            $customOverlayOrder = $customOverlayOrder.filter((id) => id !== layerId);
 
-			if ($map) {
-				if ($map.getLayer(layerId)) {
-					$map.removeLayer(layerId);
-				}
-				if ($map.getSource(layerId)) {
-					$map.removeSource(layerId);
-				}
-			}
-		}
-		$customLayers = tryDeleteLayer($customLayers, layerId);
-	}
+            if (
+                $currentOverlays.overlays['custom'] &&
+                $currentOverlays.overlays['custom'][layerId] &&
+                $map
+            ) {
+                try {
+                    $map.removeImport(layerId);
+                } catch (e) {
+                    // No reliable way to check if the map is ready to remove sources and layers
+                }
+            }
+        }
+        $customLayers = tryDeleteLayer($customLayers, layerId);
+    }
 
-	let selectedLayerId: string | undefined = undefined;
+    let selectedLayerId: string | undefined = undefined;
 
-	function setDataFromSelectedLayer() {
-		if (selectedLayerId) {
-			const layer = $customLayers[selectedLayerId];
-			name = layer.name;
-			tileUrls = layer.tileUrls;
-			maxZoom = layer.maxZoom;
-			layerType = layer.layerType;
-			resourceType = layer.resourceType;
-		} else {
-			name = '';
-			tileUrls = [''];
-			maxZoom = 20;
-			layerType = 'basemap';
-			resourceType = 'raster';
-		}
-	}
+    function setDataFromSelectedLayer() {
+        if (selectedLayerId) {
+            const layer = $customLayers[selectedLayerId];
+            name = layer.name;
+            tileUrls = layer.tileUrls;
+            maxZoom = layer.maxZoom;
+            layerType = layer.layerType;
+            resourceType = layer.resourceType;
+        } else {
+            name = '';
+            tileUrls = [''];
+            maxZoom = 20;
+            layerType = 'basemap';
+            resourceType = 'raster';
+        }
+    }
 
-	$: selectedLayerId, setDataFromSelectedLayer();
+    $: selectedLayerId, setDataFromSelectedLayer();
 </script>
 
 <div class="flex flex-col">
-	{#if $customBasemapOrder.length > 0}
-		<div class="flex flex-row items-center gap-1 font-semibold mb-2">
-			<Map size="16" />
-			{$_('layers.label.basemaps')}
-			<div class="grow">
-				<Separator />
-			</div>
-		</div>
-	{/if}
-	<div
-		bind:this={basemapContainer}
-		class="ml-1.5 flex flex-col gap-1 {$customBasemapOrder.length > 0 ? 'mb-2' : ''}"
-	>
-		{#each $customBasemapOrder as id (id)}
-			<div class="flex flex-row items-center gap-2" data-id={id}>
-				<Move size="12" />
-				<span class="grow">{$customLayers[id].name}</span>
-				<Button variant="outline" on:click={() => (selectedLayerId = id)} class="p-1 h-7">
-					<Pencil size="16" />
-				</Button>
-				<Button variant="outline" on:click={() => deleteLayer(id)} class="p-1 h-7">
-					<Trash2 size="16" />
-				</Button>
-			</div>
-		{/each}
-	</div>
-	{#if $customOverlayOrder.length > 0}
-		<div class="flex flex-row items-center gap-1 font-semibold mb-2">
-			<Layers2 size="16" />
-			{$_('layers.label.overlays')}
-			<div class="grow">
-				<Separator />
-			</div>
-		</div>
-	{/if}
-	<div
-		bind:this={overlayContainer}
-		class="ml-1.5 flex flex-col gap-1 {$customOverlayOrder.length > 0 ? 'mb-2' : ''}"
-	>
-		{#each $customOverlayOrder as id (id)}
-			<div class="flex flex-row items-center gap-2" data-id={id}>
-				<Move size="12" />
-				<span class="grow">{$customLayers[id].name}</span>
-				<Button variant="outline" on:click={() => (selectedLayerId = id)} class="p-1 h-7">
-					<Pencil size="16" />
-				</Button>
-				<Button variant="outline" on:click={() => deleteLayer(id)} class="p-1 h-7">
-					<Trash2 size="16" />
-				</Button>
-			</div>
-		{/each}
-	</div>
+    {#if $customBasemapOrder.length > 0}
+        <div class="flex flex-row items-center gap-1 font-semibold mb-2">
+            <Map size="16" />
+            {$_('layers.label.basemaps')}
+            <div class="grow">
+                <Separator />
+            </div>
+        </div>
+    {/if}
+    <div
+        bind:this={basemapContainer}
+        class="ml-1.5 flex flex-col gap-1 {$customBasemapOrder.length > 0 ? 'mb-2' : ''}"
+    >
+        {#each $customBasemapOrder as id (id)}
+            <div class="flex flex-row items-center gap-2" data-id={id}>
+                <Move size="12" />
+                <span class="grow">{$customLayers[id].name}</span>
+                <Button variant="outline" on:click={() => (selectedLayerId = id)} class="p-1 h-7">
+                    <Pencil size="16" />
+                </Button>
+                <Button variant="outline" on:click={() => deleteLayer(id)} class="p-1 h-7">
+                    <Trash2 size="16" />
+                </Button>
+            </div>
+        {/each}
+    </div>
+    {#if $customOverlayOrder.length > 0}
+        <div class="flex flex-row items-center gap-1 font-semibold mb-2">
+            <Layers2 size="16" />
+            {$_('layers.label.overlays')}
+            <div class="grow">
+                <Separator />
+            </div>
+        </div>
+    {/if}
+    <div
+        bind:this={overlayContainer}
+        class="ml-1.5 flex flex-col gap-1 {$customOverlayOrder.length > 0 ? 'mb-2' : ''}"
+    >
+        {#each $customOverlayOrder as id (id)}
+            <div class="flex flex-row items-center gap-2" data-id={id}>
+                <Move size="12" />
+                <span class="grow">{$customLayers[id].name}</span>
+                <Button variant="outline" on:click={() => (selectedLayerId = id)} class="p-1 h-7">
+                    <Pencil size="16" />
+                </Button>
+                <Button variant="outline" on:click={() => deleteLayer(id)} class="p-1 h-7">
+                    <Trash2 size="16" />
+                </Button>
+            </div>
+        {/each}
+    </div>
 
-	<Card.Root>
-		<Card.Header class="p-3">
-			<Card.Title class="text-base">
-				{#if selectedLayerId}
-					{$_('layers.custom_layers.edit')}
-				{:else}
-					{$_('layers.custom_layers.new')}
-				{/if}
-			</Card.Title>
-		</Card.Header>
-		<Card.Content class="p-3 pt-0">
-			<fieldset class="flex flex-col gap-2">
-				<Label for="name">{$_('menu.metadata.name')}</Label>
-				<Input bind:value={name} id="name" class="h-8" />
-				<Label for="url">{$_('layers.custom_layers.urls')}</Label>
-				{#each tileUrls as url, i}
-					<div class="flex flex-row gap-2">
-						<Input
-							bind:value={tileUrls[i]}
-							id="url"
-							class="h-8"
-							placeholder={$_('layers.custom_layers.url_placeholder')}
-						/>
-						{#if tileUrls.length > 1}
-							<Button
-								on:click={() => (tileUrls = tileUrls.filter((_, index) => index !== i))}
-								variant="outline"
-								class="p-1 h-8"
-							>
-								<Minus size="16" />
-							</Button>
-						{/if}
-						{#if i === tileUrls.length - 1}
-							<Button
-								on:click={() => (tileUrls = [...tileUrls, ''])}
-								variant="outline"
-								class="p-1 h-8"
-							>
-								<Plus size="16" />
-							</Button>
-						{/if}
-					</div>
-				{/each}
-				{#if resourceType === 'raster'}
-					<Label for="maxZoom">{$_('layers.custom_layers.max_zoom')}</Label>
-					<Input type="number" bind:value={maxZoom} id="maxZoom" min={0} max={22} class="h-8" />
-				{/if}
-				<Label>{$_('layers.custom_layers.layer_type')}</Label>
-				<RadioGroup.Root bind:value={layerType} class="flex flex-row">
-					<div class="flex items-center space-x-2">
-						<RadioGroup.Item value="basemap" id="basemap" />
-						<Label for="basemap">{$_('layers.custom_layers.basemap')}</Label>
-					</div>
-					<div class="flex items-center space-x-2">
-						<RadioGroup.Item value="overlay" id="overlay" disabled={resourceType === 'vector'} />
-						<Label for="overlay">{$_('layers.custom_layers.overlay')}</Label>
-					</div>
-				</RadioGroup.Root>
-				{#if selectedLayerId}
-					<div class="mt-2 flex flex-row gap-2">
-						<Button variant="outline" on:click={createLayer} class="grow">
-							<Save size="16" class="mr-1" />
-							{$_('layers.custom_layers.update')}
-						</Button>
-						<Button variant="outline" on:click={() => (selectedLayerId = undefined)}>
-							<CircleX size="16" />
-						</Button>
-					</div>
-				{:else}
-					<Button variant="outline" class="mt-2" on:click={createLayer}>
-						<CirclePlus size="16" class="mr-1" />
-						{$_('layers.custom_layers.create')}
-					</Button>
-				{/if}
-			</fieldset>
-		</Card.Content>
-	</Card.Root>
+    <Card.Root>
+        <Card.Header class="p-3">
+            <Card.Title class="text-base">
+                {#if selectedLayerId}
+                    {$_('layers.custom_layers.edit')}
+                {:else}
+                    {$_('layers.custom_layers.new')}
+                {/if}
+            </Card.Title>
+        </Card.Header>
+        <Card.Content class="p-3 pt-0">
+            <fieldset class="flex flex-col gap-2">
+                <Label for="name">{$_('menu.metadata.name')}</Label>
+                <Input bind:value={name} id="name" class="h-8" />
+                <Label for="url">{$_('layers.custom_layers.urls')}</Label>
+                {#each tileUrls as url, i}
+                    <div class="flex flex-row gap-2">
+                        <Input
+                            bind:value={tileUrls[i]}
+                            id="url"
+                            class="h-8"
+                            placeholder={$_('layers.custom_layers.url_placeholder')}
+                        />
+                        {#if tileUrls.length > 1}
+                            <Button
+                                on:click={() =>
+                                    (tileUrls = tileUrls.filter((_, index) => index !== i))}
+                                variant="outline"
+                                class="p-1 h-8"
+                            >
+                                <Minus size="16" />
+                            </Button>
+                        {/if}
+                        {#if i === tileUrls.length - 1}
+                            <Button
+                                on:click={() => (tileUrls = [...tileUrls, ''])}
+                                variant="outline"
+                                class="p-1 h-8"
+                            >
+                                <Plus size="16" />
+                            </Button>
+                        {/if}
+                    </div>
+                {/each}
+                {#if resourceType === 'raster'}
+                    <Label for="maxZoom">{$_('layers.custom_layers.max_zoom')}</Label>
+                    <Input
+                        type="number"
+                        bind:value={maxZoom}
+                        id="maxZoom"
+                        min={0}
+                        max={22}
+                        class="h-8"
+                    />
+                {/if}
+                <Label>{$_('layers.custom_layers.layer_type')}</Label>
+                <RadioGroup.Root bind:value={layerType} class="flex flex-row">
+                    <div class="flex items-center space-x-2">
+                        <RadioGroup.Item value="basemap" id="basemap" />
+                        <Label for="basemap">{$_('layers.custom_layers.basemap')}</Label>
+                    </div>
+                    <div class="flex items-center space-x-2">
+                        <RadioGroup.Item value="overlay" id="overlay" />
+                        <Label for="overlay">{$_('layers.custom_layers.overlay')}</Label>
+                    </div>
+                </RadioGroup.Root>
+                {#if selectedLayerId}
+                    <div class="mt-2 flex flex-row gap-2">
+                        <Button variant="outline" on:click={createLayer} class="grow">
+                            <Save size="16" class="mr-1" />
+                            {$_('layers.custom_layers.update')}
+                        </Button>
+                        <Button variant="outline" on:click={() => (selectedLayerId = undefined)}>
+                            <CircleX size="16" />
+                        </Button>
+                    </div>
+                {:else}
+                    <Button variant="outline" class="mt-2" on:click={createLayer}>
+                        <CirclePlus size="16" class="mr-1" />
+                        {$_('layers.custom_layers.create')}
+                    </Button>
+                {/if}
+            </fieldset>
+        </Card.Content>
+    </Card.Root>
 </div>

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

@@ -1,203 +1,222 @@
 <script lang="ts">
-	import CustomControl from '$lib/components/custom-control/CustomControl.svelte';
-	import LayerTree from './LayerTree.svelte';
+    import CustomControl from '$lib/components/custom-control/CustomControl.svelte';
+    import LayerTree from './LayerTree.svelte';
 
-	import { Separator } from '$lib/components/ui/separator';
-	import { ScrollArea } from '$lib/components/ui/scroll-area/index.js';
+    import { Separator } from '$lib/components/ui/separator';
+    import { ScrollArea } from '$lib/components/ui/scroll-area/index.js';
 
-	import { Layers } from 'lucide-svelte';
+    import { Layers } from 'lucide-svelte';
 
-	import { basemaps, defaultBasemap, overlays } from '$lib/assets/layers';
-	import { settings } from '$lib/db';
-	import { map } from '$lib/stores';
-	import { get, writable } from 'svelte/store';
-	import { getLayers } from './utils';
-	import { OverpassLayer } from './OverpassLayer';
-	import OverpassPopup from './OverpassPopup.svelte';
+    import { basemaps, defaultBasemap, overlays } from '$lib/assets/layers';
+    import { settings } from '$lib/db';
+    import { map } from '$lib/stores';
+    import { get, writable } from 'svelte/store';
+    import { customBasemapUpdate, getLayers } from './utils';
+    import { OverpassLayer } from './OverpassLayer';
 
-	let container: HTMLDivElement;
-	let overpassLayer: OverpassLayer;
+    let container: HTMLDivElement;
+    let overpassLayer: OverpassLayer;
 
-	const {
-		currentBasemap,
-		previousBasemap,
-		currentOverlays,
-		currentOverpassQueries,
-		selectedBasemapTree,
-		selectedOverlayTree,
-		selectedOverpassTree,
-		customLayers,
-		opacities
-	} = settings;
+    const {
+        currentBasemap,
+        previousBasemap,
+        currentOverlays,
+        currentOverpassQueries,
+        selectedBasemapTree,
+        selectedOverlayTree,
+        selectedOverpassTree,
+        customLayers,
+        opacities,
+    } = settings;
 
-	function setStyle() {
-		if ($map) {
-			let basemap = basemaps.hasOwnProperty($currentBasemap)
-				? basemaps[$currentBasemap]
-				: $customLayers[$currentBasemap]?.value ?? basemaps[defaultBasemap];
-			$map.setStyle(basemap, {
-				diff: false
-			});
-		}
-	}
+    function setStyle() {
+        if ($map) {
+            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',
+                        data: basemap,
+                    },
+                    'overlays'
+                );
+            }
+        }
+    }
 
-	$: if ($map && $currentBasemap) {
-		setStyle();
-	}
+    $: if ($map && ($currentBasemap || $customBasemapUpdate)) {
+        setStyle();
+    }
 
-	$: if ($map && $currentOverlays) {
-		// Add or remove overlay layers depending on the current overlays
-		let overlayLayers = getLayers($currentOverlays);
-		Object.keys(overlayLayers).forEach((id) => {
-			if (overlayLayers[id]) {
-				if (!addOverlayLayer.hasOwnProperty(id)) {
-					addOverlayLayer[id] = addOverlayLayerForId(id);
-				}
-				if (!$map.getLayer(id)) {
-					addOverlayLayer[id]();
-					$map.on('style.load', addOverlayLayer[id]);
-				}
-			} else if ($map.getLayer(id)) {
-				$map.removeLayer(id);
-				$map.off('style.load', addOverlayLayer[id]);
-			}
-		});
-	}
+    function addOverlay(id: string) {
+        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.layers.map((layer) => {
+                            if (layer.type === 'raster') {
+                                if (!layer.paint) {
+                                    layer.paint = {};
+                                }
+                                layer.paint['raster-opacity'] = $opacities[id];
+                            }
+                            return layer;
+                        }),
+                    };
+                }
+                $map.addImport({
+                    id,
+                    data: overlay,
+                });
+            }
+        } catch (e) {
+            // No reliable way to check if the map is ready to add sources and layers
+        }
+    }
 
-	$: if ($map) {
-		if (overpassLayer) {
-			overpassLayer.remove();
-		}
-		overpassLayer = new OverpassLayer($map);
-		overpassLayer.add();
-	}
+    function updateOverlays() {
+        if ($map && $currentOverlays && $opacities) {
+            let overlayLayers = getLayers($currentOverlays);
+            try {
+                let activeOverlays = $map.getStyle().imports.reduce((acc, i) => {
+                    if (!['basemap', 'overlays', 'glyphs-and-sprite'].includes(i.id)) {
+                        acc[i.id] = i;
+                    }
+                    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
+            }
+        }
+    }
 
-	let selectedBasemap = writable(get(currentBasemap));
-	selectedBasemap.subscribe((value) => {
-		// Updates coming from radio buttons
-		if (value !== get(currentBasemap)) {
-			previousBasemap.set(get(currentBasemap));
-			currentBasemap.set(value);
-		}
-	});
-	currentBasemap.subscribe((value) => {
-		// Updates coming from the database, or from the user swapping basemaps
-		selectedBasemap.set(value);
-	});
+    $: if ($map && $currentOverlays && $opacities) {
+        updateOverlays();
+    }
 
-	let addOverlayLayer: { [key: string]: () => void } = {};
-	function addOverlayLayerForId(id: string) {
-		return () => {
-			if ($map) {
-				try {
-					let overlay = $customLayers.hasOwnProperty(id) ? $customLayers[id].value : overlays[id];
-					if (!$map.getSource(id)) {
-						$map.addSource(id, overlay);
-					}
-					$map.addLayer(
-						{
-							id,
-							type: overlay.type === 'raster' ? 'raster' : 'line',
-							source: id,
-							paint: {
-								...(id in $opacities
-									? overlay.type === 'raster'
-										? { 'raster-opacity': $opacities[id] }
-										: { 'line-opacity': $opacities[id] }
-									: {})
-							}
-						},
-						'overlays'
-					);
-				} catch (e) {
-					// No reliable way to check if the map is ready to add sources and layers
-				}
-			}
-		};
-	}
+    $: if ($map) {
+        if (overpassLayer) {
+            overpassLayer.remove();
+        }
+        overpassLayer = new OverpassLayer($map);
+        overpassLayer.add();
+        $map.on('style.import.load', updateOverlays);
+    }
 
-	let open = false;
-	function openLayerControl() {
-		open = true;
-	}
-	function closeLayerControl() {
-		open = false;
-	}
-	let cancelEvents = false;
+    let selectedBasemap = writable(get(currentBasemap));
+    selectedBasemap.subscribe((value) => {
+        // Updates coming from radio buttons
+        if (value !== get(currentBasemap)) {
+            previousBasemap.set(get(currentBasemap));
+            currentBasemap.set(value);
+        }
+    });
+    currentBasemap.subscribe((value) => {
+        // Updates coming from the database, or from the user swapping basemaps
+        if (value !== get(selectedBasemap)) {
+            selectedBasemap.set(value);
+        }
+    });
+
+    let open = false;
+    function openLayerControl() {
+        open = true;
+    }
+    function closeLayerControl() {
+        open = false;
+    }
+    let cancelEvents = false;
 </script>
 
 <CustomControl class="group min-w-[29px] min-h-[29px] overflow-hidden">
-	<!-- svelte-ignore a11y-no-static-element-interactions -->
-	<div
-		bind:this={container}
-		class="h-full w-full"
-		on:mouseenter={openLayerControl}
-		on:mouseleave={closeLayerControl}
-		on:pointerenter={() => {
-			if (!open) {
-				cancelEvents = true;
-				openLayerControl();
-				setTimeout(() => {
-					cancelEvents = false;
-				}, 500);
-			}
-		}}
-	>
-		<div
-			class="flex flex-row justify-center items-center delay-100 transition-[opacity] duration-0 {open
-				? 'opacity-0 w-0 h-0 delay-0'
-				: 'w-[29px] h-[29px]'}"
-		>
-			<Layers size="20" />
-		</div>
-		<div
-			class="transition-[grid-template-rows grid-template-cols] grid grid-rows-[0fr] grid-cols-[0fr] duration-150 h-full {open
-				? 'grid-rows-[1fr] grid-cols-[1fr]'
-				: ''} {cancelEvents ? 'pointer-events-none' : ''}"
-		>
-			<ScrollArea>
-				<div class="h-fit">
-					<div class="p-2">
-						<LayerTree
-							layerTree={$selectedBasemapTree}
-							name="basemaps"
-							bind:selected={$selectedBasemap}
-						/>
-					</div>
-					<Separator class="w-full" />
-					<div class="p-2">
-						{#if $currentOverlays}
-							<LayerTree
-								layerTree={$selectedOverlayTree}
-								name="overlays"
-								multiple={true}
-								bind:checked={$currentOverlays}
-							/>
-						{/if}
-					</div>
-					<Separator class="w-full" />
-					<div class="p-2">
-						{#if $currentOverpassQueries}
-							<LayerTree
-								layerTree={$selectedOverpassTree}
-								name="overpass"
-								multiple={true}
-								bind:checked={$currentOverpassQueries}
-							/>
-						{/if}
-					</div>
-				</div>
-			</ScrollArea>
-		</div>
-	</div>
+    <!-- svelte-ignore a11y-no-static-element-interactions -->
+    <div
+        bind:this={container}
+        class="h-full w-full"
+        on:mouseenter={openLayerControl}
+        on:mouseleave={closeLayerControl}
+        on:pointerenter={() => {
+            if (!open) {
+                cancelEvents = true;
+                openLayerControl();
+                setTimeout(() => {
+                    cancelEvents = false;
+                }, 500);
+            }
+        }}
+    >
+        <div
+            class="flex flex-row justify-center items-center delay-100 transition-[opacity] duration-0 {open
+                ? 'opacity-0 w-0 h-0 delay-0'
+                : 'w-[29px] h-[29px]'}"
+        >
+            <Layers size="20" />
+        </div>
+        <div
+            class="transition-[grid-template-rows grid-template-cols] grid grid-rows-[0fr] grid-cols-[0fr] duration-150 h-full {open
+                ? 'grid-rows-[1fr] grid-cols-[1fr]'
+                : ''} {cancelEvents ? 'pointer-events-none' : ''}"
+        >
+            <ScrollArea>
+                <div class="h-fit">
+                    <div class="p-2">
+                        <LayerTree
+                            layerTree={$selectedBasemapTree}
+                            name="basemaps"
+                            bind:selected={$selectedBasemap}
+                        />
+                    </div>
+                    <Separator class="w-full" />
+                    <div class="p-2">
+                        {#if $currentOverlays}
+                            <LayerTree
+                                layerTree={$selectedOverlayTree}
+                                name="overlays"
+                                multiple={true}
+                                bind:checked={$currentOverlays}
+                            />
+                        {/if}
+                    </div>
+                    <Separator class="w-full" />
+                    <div class="p-2">
+                        {#if $currentOverpassQueries}
+                            <LayerTree
+                                layerTree={$selectedOverpassTree}
+                                name="overpass"
+                                multiple={true}
+                                bind:checked={$currentOverpassQueries}
+                            />
+                        {/if}
+                    </div>
+                </div>
+            </ScrollArea>
+        </div>
+    </div>
 </CustomControl>
 
-<OverpassPopup />
-
 <svelte:window
-	on:click={(e) => {
-		if (open && !cancelEvents && !container.contains(e.target)) {
-			closeLayerControl();
-		}
-	}}
+    on:click={(e) => {
+        if (open && !cancelEvents && !container.contains(e.target)) {
+            closeLayerControl();
+        }
+    }}
 />

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

@@ -1,157 +1,197 @@
 <script lang="ts">
-	import LayerTree from './LayerTree.svelte';
+    import LayerTree from './LayerTree.svelte';
 
-	import { Separator } from '$lib/components/ui/separator';
-	import { ScrollArea } from '$lib/components/ui/scroll-area/index.js';
-	import * as Sheet from '$lib/components/ui/sheet';
-	import * as Accordion from '$lib/components/ui/accordion';
-	import { Label } from '$lib/components/ui/label';
-	import * as Select from '$lib/components/ui/select';
-	import { Slider } from '$lib/components/ui/slider';
+    import { Separator } from '$lib/components/ui/separator';
+    import { ScrollArea } from '$lib/components/ui/scroll-area/index.js';
+    import * as Sheet from '$lib/components/ui/sheet';
+    import * as Accordion from '$lib/components/ui/accordion';
+    import { Label } from '$lib/components/ui/label';
+    import * as Select from '$lib/components/ui/select';
+    import { Slider } from '$lib/components/ui/slider';
 
-	import { basemapTree, overlays, overlayTree, overpassTree } from '$lib/assets/layers';
-	import { isSelected } from '$lib/components/layer-control/utils';
-	import { settings } from '$lib/db';
+    import {
+        basemapTree,
+        defaultBasemap,
+        overlays,
+        overlayTree,
+        overpassTree,
+    } from '$lib/assets/layers';
+    import { getLayers, isSelected, toggle } from '$lib/components/layer-control/utils';
+    import { settings } from '$lib/db';
 
-	import { _ } from 'svelte-i18n';
-	import { writable } from 'svelte/store';
-	import { map } from '$lib/stores';
-	import CustomLayers from './CustomLayers.svelte';
+    import { _ } from 'svelte-i18n';
+    import { writable } from 'svelte/store';
+    import { map } from '$lib/stores';
+    import CustomLayers from './CustomLayers.svelte';
 
-	const {
-		selectedBasemapTree,
-		selectedOverlayTree,
-		selectedOverpassTree,
-		currentOverlays,
-		customLayers,
-		opacities
-	} = settings;
+    const {
+        selectedBasemapTree,
+        selectedOverlayTree,
+        selectedOverpassTree,
+        currentBasemap,
+        currentOverlays,
+        customLayers,
+        opacities,
+    } = settings;
 
-	export let open: boolean;
-	let accordionValue: string | string[] | undefined = undefined;
+    export let open: boolean;
+    let accordionValue: string | string[] | undefined = undefined;
 
-	let selectedOverlay = writable(undefined);
-	let overlayOpacity = writable([1]);
+    let selectedOverlay = writable(undefined);
+    let overlayOpacity = writable([1]);
 
-	function setOpacityFromSelection() {
-		if ($selectedOverlay) {
-			let overlayId = $selectedOverlay.value;
-			if ($opacities.hasOwnProperty(overlayId)) {
-				$overlayOpacity = [$opacities[overlayId]];
-			} else {
-				$overlayOpacity = [1];
-			}
-		} else {
-			$overlayOpacity = [1];
-		}
-	}
+    function setOpacityFromSelection() {
+        if ($selectedOverlay) {
+            let overlayId = $selectedOverlay.value;
+            if ($opacities.hasOwnProperty(overlayId)) {
+                $overlayOpacity = [$opacities[overlayId]];
+            } else {
+                $overlayOpacity = [1];
+            }
+        } else {
+            $overlayOpacity = [1];
+        }
+    }
 
-	$: if ($selectedOverlay) {
-		setOpacityFromSelection();
-	}
+    $: if ($selectedBasemapTree && $currentBasemap) {
+        if (!isSelected($selectedBasemapTree, $currentBasemap)) {
+            if (!isSelected($selectedBasemapTree, defaultBasemap)) {
+                $selectedBasemapTree = toggle($selectedBasemapTree, defaultBasemap);
+            }
+            $currentBasemap = defaultBasemap;
+        }
+    }
+
+    $: if ($selectedOverlayTree && $currentOverlays) {
+        let overlayLayers = getLayers($currentOverlays);
+        let toRemove = Object.entries(overlayLayers).filter(
+            ([id, checked]) => checked && !isSelected($selectedOverlayTree, id)
+        );
+        if (toRemove.length > 0) {
+            currentOverlays.update((tree) => {
+                toRemove.forEach(([id]) => {
+                    toggle(tree, id);
+                });
+                return tree;
+            });
+        }
+    }
+
+    $: if ($selectedOverlay) {
+        setOpacityFromSelection();
+    }
 </script>
 
 <Sheet.Root bind:open>
-	<Sheet.Trigger class="hidden" />
-	<Sheet.Content>
-		<Sheet.Header class="h-full">
-			<Sheet.Title>{$_('layers.settings')}</Sheet.Title>
-			<ScrollArea class="w-[105%] min-h-full pr-4">
-				<Sheet.Description>
-					{$_('layers.settings_help')}
-				</Sheet.Description>
-				<Accordion.Root class="flex flex-col" bind:value={accordionValue}>
-					<Accordion.Item value="layer-selection" class="flex flex-col">
-						<Accordion.Trigger>{$_('layers.selection')}</Accordion.Trigger>
-						<Accordion.Content class="grow flex flex-col border rounded">
-							<div class="py-2 pl-1 pr-2">
-								<LayerTree
-									layerTree={basemapTree}
-									name="basemapSettings"
-									multiple={true}
-									bind:checked={$selectedBasemapTree}
-								/>
-							</div>
-							<Separator />
-							<div class="py-2 pl-1 pr-2">
-								<LayerTree
-									layerTree={overlayTree}
-									name="overlaySettings"
-									multiple={true}
-									bind:checked={$selectedOverlayTree}
-								/>
-							</div>
-							<Separator />
-							<div class="py-2 pl-1 pr-2">
-								<LayerTree
-									layerTree={overpassTree}
-									name="overpassSettings"
-									multiple={true}
-									bind:checked={$selectedOverpassTree}
-								/>
-							</div>
-						</Accordion.Content>
-					</Accordion.Item>
-					<Accordion.Item value="overlay-opacity">
-						<Accordion.Trigger>{$_('layers.opacity')}</Accordion.Trigger>
-						<Accordion.Content class="flex flex-col gap-3 overflow-visible">
-							<div class="flex flex-row gap-6 items-center">
-								<Label>
-									{$_('layers.custom_layers.overlay')}
-								</Label>
-								<Select.Root bind:selected={$selectedOverlay}>
-									<Select.Trigger class="h-8 mr-1">
-										<Select.Value />
-									</Select.Trigger>
-									<Select.Content class="h-fit max-h-[40dvh] overflow-y-auto">
-										{#each Object.keys(overlays) as id}
-											{#if isSelected($selectedOverlayTree, id)}
-												<Select.Item value={id}>{$_(`layers.label.${id}`)}</Select.Item>
-											{/if}
-										{/each}
-										{#each Object.entries($customLayers) as [id, layer]}
-											{#if layer.layerType === 'overlay'}
-												<Select.Item value={id}>{layer.name}</Select.Item>
-											{/if}
-										{/each}
-									</Select.Content>
-								</Select.Root>
-							</div>
-							<Label class="flex flex-row gap-6 items-center">
-								{$_('menu.style.opacity')}
-								<div class="p-2 pr-3 grow">
-									<Slider
-										bind:value={$overlayOpacity}
-										min={0.1}
-										max={1}
-										step={0.1}
-										disabled={$selectedOverlay === undefined}
-										onValueChange={() => {
-											if ($selectedOverlay) {
-												$opacities[$selectedOverlay.value] = $overlayOpacity[0];
-												if ($map) {
-													if ($map.getLayer($selectedOverlay.value)) {
-														$map.removeLayer($selectedOverlay.value);
-														$currentOverlays = $currentOverlays;
-													}
-												}
-											}
-										}}
-									/>
-								</div>
-							</Label>
-						</Accordion.Content>
-					</Accordion.Item>
-					<Accordion.Item value="custom-layers">
-						<Accordion.Trigger>{$_('layers.custom_layers.title')}</Accordion.Trigger>
-						<Accordion.Content>
-							<ScrollArea>
-								<CustomLayers />
-							</ScrollArea>
-						</Accordion.Content>
-					</Accordion.Item>
-				</Accordion.Root>
-			</ScrollArea>
-		</Sheet.Header>
-	</Sheet.Content>
+    <Sheet.Trigger class="hidden" />
+    <Sheet.Content>
+        <Sheet.Header class="h-full">
+            <Sheet.Title>{$_('layers.settings')}</Sheet.Title>
+            <ScrollArea class="w-[105%] min-h-full pr-4">
+                <Sheet.Description>
+                    {$_('layers.settings_help')}
+                </Sheet.Description>
+                <Accordion.Root class="flex flex-col" bind:value={accordionValue}>
+                    <Accordion.Item value="layer-selection" class="flex flex-col">
+                        <Accordion.Trigger>{$_('layers.selection')}</Accordion.Trigger>
+                        <Accordion.Content class="grow flex flex-col border rounded">
+                            <div class="py-2 pl-1 pr-2">
+                                <LayerTree
+                                    layerTree={basemapTree}
+                                    name="basemapSettings"
+                                    multiple={true}
+                                    bind:checked={$selectedBasemapTree}
+                                />
+                            </div>
+                            <Separator />
+                            <div class="py-2 pl-1 pr-2">
+                                <LayerTree
+                                    layerTree={overlayTree}
+                                    name="overlaySettings"
+                                    multiple={true}
+                                    bind:checked={$selectedOverlayTree}
+                                />
+                            </div>
+                            <Separator />
+                            <div class="py-2 pl-1 pr-2">
+                                <LayerTree
+                                    layerTree={overpassTree}
+                                    name="overpassSettings"
+                                    multiple={true}
+                                    bind:checked={$selectedOverpassTree}
+                                />
+                            </div>
+                        </Accordion.Content>
+                    </Accordion.Item>
+                    <Accordion.Item value="overlay-opacity">
+                        <Accordion.Trigger>{$_('layers.opacity')}</Accordion.Trigger>
+                        <Accordion.Content class="flex flex-col gap-3 overflow-visible">
+                            <div class="flex flex-row gap-6 items-center">
+                                <Label>
+                                    {$_('layers.custom_layers.overlay')}
+                                </Label>
+                                <Select.Root bind:selected={$selectedOverlay}>
+                                    <Select.Trigger class="h-8 mr-1">
+                                        <Select.Value />
+                                    </Select.Trigger>
+                                    <Select.Content class="h-fit max-h-[40dvh] overflow-y-auto">
+                                        {#each Object.keys(overlays) as id}
+                                            {#if isSelected($selectedOverlayTree, id)}
+                                                <Select.Item value={id}
+                                                    >{$_(`layers.label.${id}`)}</Select.Item
+                                                >
+                                            {/if}
+                                        {/each}
+                                        {#each Object.entries($customLayers) as [id, layer]}
+                                            {#if layer.layerType === 'overlay'}
+                                                <Select.Item value={id}>{layer.name}</Select.Item>
+                                            {/if}
+                                        {/each}
+                                    </Select.Content>
+                                </Select.Root>
+                            </div>
+                            <Label class="flex flex-row gap-6 items-center">
+                                {$_('menu.style.opacity')}
+                                <div class="p-2 pr-3 grow">
+                                    <Slider
+                                        bind:value={$overlayOpacity}
+                                        min={0.1}
+                                        max={1}
+                                        step={0.1}
+                                        disabled={$selectedOverlay === undefined}
+                                        onValueChange={(value) => {
+                                            if ($selectedOverlay) {
+                                                if (
+                                                    $map &&
+                                                    isSelected(
+                                                        $currentOverlays,
+                                                        $selectedOverlay.value
+                                                    )
+                                                ) {
+                                                    try {
+                                                        $map.removeImport($selectedOverlay.value);
+                                                    } catch (e) {
+                                                        // No reliable way to check if the map is ready to remove sources and layers
+                                                    }
+                                                }
+                                                $opacities[$selectedOverlay.value] = value[0];
+                                            }
+                                        }}
+                                    />
+                                </div>
+                            </Label>
+                        </Accordion.Content>
+                    </Accordion.Item>
+                    <Accordion.Item value="custom-layers">
+                        <Accordion.Trigger>{$_('layers.custom_layers.title')}</Accordion.Trigger>
+                        <Accordion.Content>
+                            <ScrollArea>
+                                <CustomLayers />
+                            </ScrollArea>
+                        </Accordion.Content>
+                    </Accordion.Item>
+                </Accordion.Root>
+            </ScrollArea>
+        </Sheet.Header>
+    </Sheet.Content>
 </Sheet.Root>

website/src/lib/components/layer-control/LayerTree.svelte

@@ -1,20 +1,20 @@
 <script lang="ts">
-	import LayerTreeNode from './LayerTreeNode.svelte';
-	import { type LayerTreeType } from '$lib/assets/layers';
-	import CollapsibleTree from '$lib/components/collapsible-tree/CollapsibleTree.svelte';
+    import LayerTreeNode from './LayerTreeNode.svelte';
+    import { type LayerTreeType } from '$lib/assets/layers';
+    import CollapsibleTree from '$lib/components/collapsible-tree/CollapsibleTree.svelte';
 
-	export let layerTree: LayerTreeType;
-	export let name: string;
-	export let selected: string | undefined = undefined;
-	export let multiple: boolean = false;
+    export let layerTree: LayerTreeType;
+    export let name: string;
+    export let selected: string | undefined = undefined;
+    export let multiple: boolean = false;
 
-	export let checked: LayerTreeType = {};
+    export let checked: LayerTreeType = {};
 </script>
 
 <form>
-	<fieldset class="min-w-64 mb-1">
-		<CollapsibleTree nohover={true}>
-			<LayerTreeNode {name} node={layerTree} bind:selected {multiple} bind:checked />
-		</CollapsibleTree>
-	</fieldset>
+    <fieldset class="min-w-64 mb-1">
+        <CollapsibleTree nohover={true}>
+            <LayerTreeNode {name} node={layerTree} bind:selected {multiple} bind:checked />
+        </CollapsibleTree>
+    </fieldset>
 </form>

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

@@ -1,85 +1,98 @@
 <script lang="ts">
-	import { Label } from '$lib/components/ui/label';
-	import { Checkbox } from '$lib/components/ui/checkbox';
-	import CollapsibleTreeNode from '../collapsible-tree/CollapsibleTreeNode.svelte';
+    import { Label } from '$lib/components/ui/label';
+    import { Checkbox } from '$lib/components/ui/checkbox';
+    import CollapsibleTreeNode from '../collapsible-tree/CollapsibleTreeNode.svelte';
 
-	import { type LayerTreeType } from '$lib/assets/layers';
-	import { anySelectedLayer } from './utils';
+    import { type LayerTreeType } from '$lib/assets/layers';
+    import { anySelectedLayer } from './utils';
 
-	import { _ } from 'svelte-i18n';
-	import { settings } from '$lib/db';
-	import { beforeUpdate } from 'svelte';
+    import { _ } from 'svelte-i18n';
+    import { settings } from '$lib/db';
+    import { beforeUpdate } from 'svelte';
 
-	export let name: string;
-	export let node: LayerTreeType;
-	export let selected: string | undefined = undefined;
-	export let multiple: boolean = false;
+    export let name: string;
+    export let node: LayerTreeType;
+    export let selected: string | undefined = undefined;
+    export let multiple: boolean = false;
 
-	export let checked: LayerTreeType;
+    export let checked: LayerTreeType;
 
-	const { customLayers } = settings;
+    const { customLayers } = settings;
 
-	beforeUpdate(() => {
-		if (checked !== undefined) {
-			Object.keys(node).forEach((id) => {
-				if (!checked.hasOwnProperty(id)) {
-					if (typeof node[id] == 'boolean') {
-						checked[id] = false;
-					} else {
-						checked[id] = {};
-					}
-				}
-			});
-		}
-	});
+    beforeUpdate(() => {
+        if (checked !== undefined) {
+            Object.keys(node).forEach((id) => {
+                if (!checked.hasOwnProperty(id)) {
+                    if (typeof node[id] == 'boolean') {
+                        checked[id] = false;
+                    } else {
+                        checked[id] = {};
+                    }
+                }
+            });
+        }
+    });
 </script>
 
 <div class="flex flex-col gap-[3px]">
-	{#each Object.keys(node) as id}
-		{#if typeof node[id] == 'boolean'}
-			{#if node[id]}
-				<div class="flex flex-row items-center gap-2 first:mt-0.5 h-4">
-					{#if multiple}
-						<Checkbox
-							id="{name}-{id}"
-							{name}
-							value={id}
-							bind:checked={checked[id]}
-							class="scale-90"
-						/>
-					{:else}
-						<input id="{name}-{id}" type="radio" {name} value={id} bind:group={selected} />
-					{/if}
-					<Label for="{name}-{id}" class="flex flex-row items-center gap-1">
-						{#if $customLayers.hasOwnProperty(id)}
-							{$customLayers[id].name}
-						{:else}
-							{$_(`layers.label.${id}`)}
-						{/if}
-					</Label>
-				</div>
-			{/if}
-		{:else if anySelectedLayer(node[id])}
-			<CollapsibleTreeNode {id}>
-				<span slot="trigger">{$_(`layers.label.${id}`)}</span>
-				<div slot="content">
-					<svelte:self node={node[id]} {name} bind:selected {multiple} bind:checked={checked[id]} />
-				</div>
-			</CollapsibleTreeNode>
-		{/if}
-	{/each}
+    {#each Object.keys(node) as id}
+        {#if typeof node[id] == 'boolean'}
+            {#if node[id]}
+                <div class="flex flex-row items-center gap-2 first:mt-0.5 h-4">
+                    {#if multiple}
+                        <Checkbox
+                            id="{name}-{id}"
+                            {name}
+                            value={id}
+                            bind:checked={checked[id]}
+                            class="scale-90"
+                            aria-label={$_(`layers.label.${id}`)}
+                        />
+                    {:else}
+                        <input
+                            id="{name}-{id}"
+                            type="radio"
+                            {name}
+                            value={id}
+                            bind:group={selected}
+                        />
+                    {/if}
+                    <Label for="{name}-{id}" class="flex flex-row items-center gap-1">
+                        {#if $customLayers.hasOwnProperty(id)}
+                            {$customLayers[id].name}
+                        {:else}
+                            {$_(`layers.label.${id}`)}
+                        {/if}
+                    </Label>
+                </div>
+            {/if}
+        {:else if anySelectedLayer(node[id])}
+            <CollapsibleTreeNode {id}>
+                <span slot="trigger">{$_(`layers.label.${id}`)}</span>
+                <div slot="content">
+                    <svelte:self
+                        node={node[id]}
+                        {name}
+                        bind:selected
+                        {multiple}
+                        bind:checked={checked[id]}
+                    />
+                </div>
+            </CollapsibleTreeNode>
+        {/if}
+    {/each}
 </div>
 
 <style lang="postcss">
-	div :global(input[type='radio']) {
-		@apply appearance-none;
-		@apply w-4 h-4;
-		@apply border-[1.5px] border-primary;
-		@apply rounded-full;
-		@apply ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2;
-		@apply cursor-pointer;
-		@apply checked:bg-primary;
-		@apply checked:bg-clip-content;
-		@apply checked:p-0.5;
-	}
+    div :global(input[type='radio']) {
+        @apply appearance-none;
+        @apply w-4 h-4;
+        @apply border-[1.5px] border-primary;
+        @apply rounded-full;
+        @apply ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2;
+        @apply cursor-pointer;
+        @apply checked:bg-primary;
+        @apply checked:bg-clip-content;
+        @apply checked:p-0.5;
+    }
 </style>

website/src/lib/components/layer-control/OverpassLayer.ts

@@ -1,27 +1,17 @@
-import SphericalMercator from "@mapbox/sphericalmercator";
-import { getLayers } from "./utils";
-import mapboxgl from "mapbox-gl";
-import { get, writable } from "svelte/store";
-import { liveQuery } from "dexie";
-import { db, settings } from "$lib/db";
-import { overpassQueryData } from "$lib/assets/layers";
+import SphericalMercator from '@mapbox/sphericalmercator';
+import { getLayers } from './utils';
+import { get, writable } from 'svelte/store';
+import { liveQuery } from 'dexie';
+import { db, settings } from '$lib/db';
+import { overpassQueryData } from '$lib/assets/layers';
+import { MapPopup } from '$lib/components/MapPopup';
 
-const {
-    currentOverpassQueries
-} = settings;
+const { currentOverpassQueries } = settings;
 
 const mercator = new SphericalMercator({
     size: 256,
 });
 
-export const overpassPopupPOI = writable<Record<string, any> | null>(null);
-
-export const overpassPopup = new mapboxgl.Popup({
-    closeButton: false,
-    maxWidth: undefined,
-    offset: 15,
-});
-
 let data = writable<GeoJSON.FeatureCollection>({ type: 'FeatureCollection', features: [] });
 
 liveQuery(() => db.overpassdata.toArray()).subscribe((pois) => {
@@ -34,28 +24,36 @@ export class OverpassLayer {
     queryZoom = 12;
     expirationTime = 7 * 24 * 3600 * 1000;
     map: mapboxgl.Map;
+    popup: MapPopup;
 
     currentQueries: Set<string> = new Set();
-    nextQueries: Map<string, { x: number, y: number, queries: string[] }> = new Map();
+    nextQueries: Map<string, { x: number; y: number; queries: string[] }> = new Map();
 
     unsubscribes: (() => void)[] = [];
     queryIfNeededBinded = this.queryIfNeeded.bind(this);
     updateBinded = this.update.bind(this);
     onHoverBinded = this.onHover.bind(this);
-    maybeHidePopupBinded = this.maybeHidePopup.bind(this);
 
     constructor(map: mapboxgl.Map) {
         this.map = map;
+        this.popup = new MapPopup(map, {
+            closeButton: false,
+            focusAfterOpen: false,
+            maxWidth: undefined,
+            offset: 15,
+        });
     }
 
     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(() => {
-            this.updateBinded();
-            this.queryIfNeededBinded();
-        }));
+        this.unsubscribes.push(
+            currentOverpassQueries.subscribe(() => {
+                this.updateBinded();
+                this.queryIfNeededBinded();
+            })
+        );
 
         this.update();
     }
@@ -108,40 +106,29 @@ export class OverpassLayer {
 
     remove() {
         this.map.off('moveend', this.queryIfNeededBinded);
-        this.map.off('style.load', this.updateBinded);
+        this.map.off('style.import.load', this.updateBinded);
         this.unsubscribes.forEach((unsubscribe) => unsubscribe());
 
-        if (this.map.getLayer('overpass')) {
-            this.map.removeLayer('overpass');
-        }
+        try {
+            if (this.map.getLayer('overpass')) {
+                this.map.removeLayer('overpass');
+            }
 
-        if (this.map.getSource('overpass')) {
-            this.map.removeSource('overpass');
+            if (this.map.getSource('overpass')) {
+                this.map.removeSource('overpass');
+            }
+        } catch (e) {
+            // No reliable way to check if the map is ready to remove sources and layers
         }
     }
 
     onHover(e: any) {
-        overpassPopupPOI.set({
-            ...e.features[0].properties,
-            sym: overpassQueryData[e.features[0].properties.query].symbol ?? ''
+        this.popup.setItem({
+            item: {
+                ...e.features[0].properties,
+                sym: overpassQueryData[e.features[0].properties.query].symbol ?? '',
+            },
         });
-        overpassPopup.setLngLat(e.features[0].geometry.coordinates);
-        overpassPopup.addTo(this.map);
-        this.map.on('mousemove', this.maybeHidePopupBinded);
-    }
-
-    maybeHidePopup(e: any) {
-        let poi = get(overpassPopupPOI);
-        if (poi && this.map.project([poi.lon, poi.lat]).dist(this.map.project(e.lngLat)) > 100) {
-            this.hideWaypointPopup();
-        }
-    }
-
-    hideWaypointPopup() {
-        overpassPopupPOI.set(null);
-        overpassPopup.remove();
-
-        this.map.off('mousemove', this.maybeHidePopupBinded);
     }
 
     query(bbox: [number, number, number, number]) {
@@ -159,12 +146,23 @@ export class OverpassLayer {
                     continue;
                 }
 
-                db.overpasstiles.where('[x+y]').equals([x, y]).toArray().then((querytiles) => {
-                    let missingQueries = queries.filter((query) => !querytiles.some((querytile) => querytile.query === query && time - querytile.time < this.expirationTime));
-                    if (missingQueries.length > 0) {
-                        this.queryTile(x, y, missingQueries);
-                    }
-                });
+                db.overpasstiles
+                    .where('[x+y]')
+                    .equals([x, y])
+                    .toArray()
+                    .then((querytiles) => {
+                        let missingQueries = queries.filter(
+                            (query) =>
+                                !querytiles.some(
+                                    (querytile) =>
+                                        querytile.query === query &&
+                                        time - querytile.time < this.expirationTime
+                                )
+                        );
+                        if (missingQueries.length > 0) {
+                            this.queryTile(x, y, missingQueries);
+                        }
+                    });
             }
         }
     }
@@ -178,13 +176,16 @@ export class OverpassLayer {
 
         const bounds = mercator.bbox(x, y, this.queryZoom);
         fetch(`${this.overpassUrl}?data=${getQueryForBounds(bounds, queries)}`)
-            .then((response) => {
-                if (response.ok) {
-                    return response.json();
-                }
-                this.currentQueries.delete(`${x},${y}`);
-                return Promise.reject();
-            }, () => (this.currentQueries.delete(`${x},${y}`)))
+            .then(
+                (response) => {
+                    if (response.ok) {
+                        return response.json();
+                    }
+                    this.currentQueries.delete(`${x},${y}`);
+                    return Promise.reject();
+                },
+                () => this.currentQueries.delete(`${x},${y}`)
+            )
             .then((data) => this.storeOverpassData(x, y, queries, data))
             .catch(() => this.currentQueries.delete(`${x},${y}`));
     }
@@ -192,7 +193,7 @@ export class OverpassLayer {
     storeOverpassData(x: number, y: number, queries: string[], data: any) {
         let time = Date.now();
         let queryTiles = queries.map((query) => ({ x, y, query, time }));
-        let pois: { query: string, id: number, poi: GeoJSON.Feature }[] = [];
+        let pois: { query: string; id: number; poi: GeoJSON.Feature }[] = [];
 
         if (data.elements === undefined) {
             return;
@@ -208,7 +209,9 @@ export class OverpassLayer {
                             type: 'Feature',
                             geometry: {
                                 type: 'Point',
-                                coordinates: element.center ? [element.center.lon, element.center.lat] : [element.lon, element.lat],
+                                coordinates: element.center
+                                    ? [element.center.lon, element.center.lat]
+                                    : [element.lon, element.lat],
                             },
                             properties: {
                                 id: element.id,
@@ -216,9 +219,9 @@ export class OverpassLayer {
                                 lon: element.center ? element.center.lon : element.lon,
                                 query: query,
                                 icon: `overpass-${query}`,
-                                tags: element.tags
+                                tags: element.tags,
                             },
-                        }
+                        },
                     });
                 }
             }
@@ -241,11 +244,13 @@ export class OverpassLayer {
                     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(`
+                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)">
@@ -277,9 +282,14 @@ function getQuery(query: string) {
 function getQueryItem(tags: Record<string, string | boolean | string[]>) {
     let arrayEntry = Object.entries(tags).find(([_, value]) => Array.isArray(value));
     if (arrayEntry !== undefined) {
-        return arrayEntry[1].map((val) => `nwr${Object.entries(tags)
-            .map(([tag, value]) => `[${tag}=${tag === arrayEntry[0] ? val : value}]`)
-            .join('')};`).join('');
+        return arrayEntry[1]
+            .map(
+                (val) =>
+                    `nwr${Object.entries(tags)
+                        .map(([tag, value]) => `[${tag}=${tag === arrayEntry[0] ? val : value}]`)
+                        .join('')};`
+            )
+            .join('');
     } else {
         return `nwr${Object.entries(tags)
             .map(([tag, value]) => `[${tag}=${value}]`)
@@ -296,8 +306,9 @@ function belongsToQuery(element: any, query: 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);
+    return Object.entries(tags).every(([tag, value]) =>
+        Array.isArray(value) ? value.includes(element.tags[tag]) : element.tags[tag] === value
+    );
 }
 
 function getCurrentQueries() {
@@ -306,5 +317,7 @@ function getCurrentQueries() {
         return [];
     }
 
-    return Object.entries(getLayers(currentQueries)).filter(([_, selected]) => selected).map(([query, _]) => query);
-}
+    return Object.entries(getLayers(currentQueries))
+        .filter(([_, selected]) => selected)
+        .map(([query, _]) => query);
+}

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

@@ -1,102 +1,95 @@
 <script lang="ts">
-	import * as Card from '$lib/components/ui/card';
-	import { Button } from '$lib/components/ui/button';
-	import { overpassPopup, overpassPopupPOI } from './OverpassLayer';
-	import { selection } from '$lib/components/file-list/Selection';
-	import { PencilLine, MapPin } from 'lucide-svelte';
-	import { onMount } from 'svelte';
-	import { _ } from 'svelte-i18n';
-	import { dbUtils } from '$lib/db';
+    import * as Card from '$lib/components/ui/card';
+    import { Button } from '$lib/components/ui/button';
+    import { selection } from '$lib/components/file-list/Selection';
+    import { PencilLine, MapPin } from 'lucide-svelte';
+    import { _ } from 'svelte-i18n';
+    import { dbUtils } from '$lib/db';
+    import type { PopupItem } from '$lib/components/MapPopup';
+    import { ScrollArea } from '$lib/components/ui/scroll-area/index.js';
 
-	let popupElement: HTMLDivElement;
+    export let poi: PopupItem<any>;
 
-	onMount(() => {
-		overpassPopup.setDOMContent(popupElement);
-		popupElement.classList.remove('hidden');
-	});
-
-	let tags = {};
-	let name = '';
-	$: if ($overpassPopupPOI) {
-		tags = JSON.parse($overpassPopupPOI.tags);
-		if (tags.name !== undefined && tags.name !== '') {
-			name = tags.name;
-		} else {
-			name = $_(`layers.label.${$overpassPopupPOI.query}`);
-		}
-	}
+    let tags = {};
+    let name = '';
+    $: if (poi) {
+        tags = JSON.parse(poi.item.tags);
+        if (tags.name !== undefined && tags.name !== '') {
+            name = tags.name;
+        } else {
+            name = $_(`layers.label.${poi.item.query}`);
+        }
+    }
 </script>
 
-<div bind:this={popupElement} class="hidden">
-	{#if $overpassPopupPOI}
-		<Card.Root class="border-none shadow-md text-base p-2 max-w-[50dvw]">
-			<Card.Header class="p-0">
-				<Card.Title class="text-md">
-					<div class="flex flex-row gap-3">
-						<div class="flex flex-col">
-							{name}
-							<div class="text-muted-foreground text-sm font-normal">
-								{$overpassPopupPOI.lat.toFixed(6)}&deg; {$overpassPopupPOI.lon.toFixed(6)}&deg;
-							</div>
-						</div>
-						<Button
-							class="ml-auto p-1.5 h-8"
-							variant="outline"
-							href="https://www.openstreetmap.org/edit?editor=id&node={$overpassPopupPOI.id}"
-							target="_blank"
-						>
-							<PencilLine size="16" />
-						</Button>
-					</div>
-				</Card.Title>
-			</Card.Header>
-			{#if tags.image || tags['image:0']}
-				<div class="w-full rounded-md overflow-clip my-2 max-w-96 mx-auto">
-					<!-- svelte-ignore a11y-missing-attribute -->
-					<img src={tags.image ?? tags['image:0']} />
-				</div>
-			{/if}
-			<Card.Content class="flex flex-col p-0 text-sm mt-1 whitespace-normal break-all">
-				<div class="grid grid-cols-[auto_auto] gap-x-3">
-					{#each Object.entries(tags) as [key, value]}
-						{#if key !== 'name' && !key.includes('image')}
-							<span class="font-mono">{key}</span>
-							{#if key === 'website' || key === 'contact:website' || key === 'contact:facebook' || key === 'contact:instagram' || key === 'contact:twitter'}
-								<a href={value} target="_blank" class="text-blue-500 underline">{value}</a>
-							{:else if key === 'phone' || key === 'contact:phone'}
-								<a href={'tel:' + value} class="text-blue-500 underline">{value}</a>
-							{:else if key === 'email' || key === 'contact:email'}
-								<a href={'mailto:' + value} class="text-blue-500 underline">{value}</a>
-							{:else}
-								<span>{value}</span>
-							{/if}
-						{/if}
-					{/each}
-				</div>
-				<Button
-					class="mt-2"
-					variant="outline"
-					disabled={$selection.size === 0}
-					on:click={() => {
-						let desc = Object.entries(tags)
-							.map(([key, value]) => `${key}: ${value}`)
-							.join('\n');
-						dbUtils.addOrUpdateWaypoint({
-							attributes: {
-								lat: $overpassPopupPOI.lat,
-								lon: $overpassPopupPOI.lon
-							},
-							name: name,
-							desc: desc,
-							cmt: desc,
-							sym: $overpassPopupPOI.sym
-						});
-					}}
-				>
-					<MapPin size="16" class="mr-1" />
-					{$_('toolbar.waypoint.add')}
-				</Button>
-			</Card.Content>
-		</Card.Root>
-	{/if}
-</div>
+<Card.Root class="border-none shadow-md text-base p-2 max-w-[50dvw]">
+    <Card.Header class="p-0">
+        <Card.Title class="text-md">
+            <div class="flex flex-row gap-3">
+                <div class="flex flex-col">
+                    {name}
+                    <div class="text-muted-foreground text-sm font-normal">
+                        {poi.item.lat.toFixed(6)}&deg; {poi.item.lon.toFixed(6)}&deg;
+                    </div>
+                </div>
+                <Button
+                    class="ml-auto p-1.5 h-8"
+                    variant="outline"
+                    href="https://www.openstreetmap.org/edit?editor=id&node={poi.item.id}"
+                    target="_blank"
+                >
+                    <PencilLine size="16" />
+                </Button>
+            </div>
+        </Card.Title>
+    </Card.Header>
+    <Card.Content class="flex flex-col p-0 text-sm mt-1 whitespace-normal break-all">
+        <ScrollArea class="flex flex-col" viewportClasses="max-h-[30dvh]">
+            {#if tags.image || tags['image:0']}
+                <div class="w-full rounded-md overflow-clip my-2 max-w-96 mx-auto">
+                    <!-- svelte-ignore a11y-missing-attribute -->
+                    <img src={tags.image ?? tags['image:0']} />
+                </div>
+            {/if}
+            <div class="grid grid-cols-[auto_auto] gap-x-3">
+                {#each Object.entries(tags) as [key, value]}
+                    {#if key !== 'name' && !key.includes('image')}
+                        <span class="font-mono">{key}</span>
+                        {#if key === 'website' || key.startsWith('website:') || key === 'contact:website' || key === 'contact:facebook' || key === 'contact:instagram' || key === 'contact:twitter'}
+                            <a href={value} target="_blank" class="text-link underline">{value}</a>
+                        {:else if key === 'phone' || key === 'contact:phone'}
+                            <a href={'tel:' + value} class="text-link underline">{value}</a>
+                        {:else if key === 'email' || key === 'contact:email'}
+                            <a href={'mailto:' + value} class="text-link underline">{value}</a>
+                        {:else}
+                            <span>{value}</span>
+                        {/if}
+                    {/if}
+                {/each}
+            </div>
+        </ScrollArea>
+        <Button
+            class="mt-2"
+            variant="outline"
+            disabled={$selection.size === 0}
+            on:click={() => {
+                let desc = Object.entries(tags)
+                    .map(([key, value]) => `${key}: ${value}`)
+                    .join('\n');
+                dbUtils.addOrUpdateWaypoint({
+                    attributes: {
+                        lat: poi.item.lat,
+                        lon: poi.item.lon,
+                    },
+                    name: name,
+                    desc: desc,
+                    cmt: desc,
+                    sym: poi.item.sym,
+                });
+            }}
+        >
+            <MapPin size="16" class="mr-1" />
+            {$_('toolbar.waypoint.add')}
+        </Button>
+    </Card.Content>
+</Card.Root>

website/src/lib/components/layer-control/utils.ts

@@ -1,23 +1,29 @@
-import type { LayerTreeType } from "$lib/assets/layers";
+import type { LayerTreeType } from '$lib/assets/layers';
+import { writable } from 'svelte/store';
 
 export function anySelectedLayer(node: LayerTreeType) {
-    return Object.keys(node).find((id) => {
-        if (typeof node[id] == "boolean") {
-            if (node[id]) {
-                return true;
+    return (
+        Object.keys(node).find((id) => {
+            if (typeof node[id] == 'boolean') {
+                if (node[id]) {
+                    return true;
+                }
+            } else {
+                if (anySelectedLayer(node[id])) {
+                    return true;
+                }
             }
-        } else {
-            if (anySelectedLayer(node[id])) {
-                return true;
-            }
-        }
-        return false;
-    }) !== undefined;
+            return false;
+        }) !== undefined
+    );
 }
 
-export function getLayers(node: LayerTreeType, layers: { [key: string]: boolean } = {}): { [key: string]: boolean } {
+export function getLayers(
+    node: LayerTreeType,
+    layers: { [key: string]: boolean } = {}
+): { [key: string]: boolean } {
     Object.keys(node).forEach((id) => {
-        if (typeof node[id] == "boolean") {
+        if (typeof node[id] == 'boolean') {
             layers[id] = node[id];
         } else {
             getLayers(node[id], layers);
@@ -31,9 +37,22 @@ export function isSelected(node: LayerTreeType, id: string) {
         if (key === id) {
             return node[key];
         }
-        if (typeof node[key] !== "boolean" && isSelected(node[key], id)) {
+        if (typeof node[key] !== 'boolean' && isSelected(node[key], id)) {
             return true;
         }
         return false;
     });
-}
+}
+
+export function toggle(node: LayerTreeType, id: string) {
+    Object.keys(node).forEach((key) => {
+        if (key === id) {
+            node[key] = !node[key];
+        } else if (typeof node[key] !== 'boolean') {
+            toggle(node[key], id);
+        }
+    });
+    return node;
+}
+
+export const customBasemapUpdate = writable(0);