update readme

README.md

@@ -70,8 +70,8 @@ This project has been made possible thanks to the following open source projects
     - [SortableJS](https://github.com/SortableJS/Sortable) — creating a sortable file tree
 - Mapping:
     - [Mapbox GL JS](https://github.com/mapbox/mapbox-gl-js) — beautiful and fast interactive maps
-    -   [brouter](https://github.com/abrensch/brouter) — routing engine
-    -   [OpenStreetMap](https://www.openstreetmap.org) — map data used by Mapbox and brouter
+    - [GraphHopper](https://github.com/graphhopper/graphhopper) — routing engine
+    - [OpenStreetMap](https://www.openstreetmap.org) — map data used by Mapbox and GraphHopper
 - Search:
     - [DocSearch](https://github.com/algolia/docsearch) — search engine for the documentation
 

gpx/src/gpx.ts

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

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

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

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

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

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

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

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

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

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

@@ -41,7 +41,6 @@
             <Button
                 size="sm"
                 variant="outline"
-                class="justify-start"
                 href={`https://www.openstreetmap.org/edit?#map=${(($map?.getZoom() ?? 17) + 1).toFixed(0)}/${trackpoint.item.getLatitude().toFixed(5)}/${trackpoint.item.getLongitude().toFixed(5)}`}
                 target="_blank"
             >

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

@@ -3,7 +3,7 @@ import { gpxStatistics } from '$lib/logic/statistics';
 import { getConvertedDistanceToKilometers } from '$lib/units';
 import type { GeoJSONSource } from 'mapbox-gl';
 import { get } from 'svelte/store';
-import { ANCHOR_LAYER_KEY, map } from '$lib/components/map/map';
+import { map } from '$lib/components/map/map';
 import { allHidden } from '$lib/logic/hidden';
 
 const { distanceMarkers, distanceUnits } = settings;
@@ -44,8 +44,7 @@ export class DistanceMarkers {
                     });
                 }
                 if (!map_.getLayer('distance-markers')) {
-                    map_.addLayer(
-                        {
+                    map_.addLayer({
                         id: 'distance-markers',
                         type: 'symbol',
                         source: 'distance-markers',
@@ -80,9 +79,9 @@ export class DistanceMarkers {
                             'text-halo-width': 2,
                             'text-halo-color': 'white',
                         },
-                        },
-                        ANCHOR_LAYER_KEY.distanceMarkers
-                    );
+                    });
+                } else {
+                    map_.moveLayer('distance-markers');
                 }
             } else {
                 if (map_.getLayer('distance-markers')) {

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

@@ -1,6 +1,6 @@
 import { get, type Readable } from 'svelte/store';
 import mapboxgl, { type FilterSpecification } from 'mapbox-gl';
-import { ANCHOR_LAYER_KEY, map } from '$lib/components/map/map';
+import { map } from '$lib/components/map/map';
 import { waypointPopup, trackpointPopup } from './gpx-layer-popup';
 import {
     ListTrackSegmentItem,
@@ -22,7 +22,6 @@ import { fileActionManager } from '$lib/logic/file-action-manager';
 import { fileActions } from '$lib/logic/file-actions';
 import { splitAs } from '$lib/components/toolbar/tools/scissors/scissors';
 import { mapCursor, MapCursorState } from '$lib/logic/map-cursor';
-import { gpxColors } from '$lib/components/map/gpx-layer/gpx-layers';
 
 const colors = [
     '#ff0000',
@@ -44,35 +43,16 @@ for (let color of colors) {
 }
 
 // Get the color with the least amount of uses
-function getColor(fileId: string) {
+function getColor() {
     let color = colors.reduce((a, b) => (colorCount[a] <= colorCount[b] ? a : b));
     colorCount[color]++;
-    gpxColors.update((colors) => {
-        colors.set(fileId, color);
-        return colors;
-    });
     return color;
 }
 
-function replaceColor(fileId: string, oldColor: string, newColor: string) {
-    if (colorCount.hasOwnProperty(oldColor)) {
-        colorCount[oldColor]--;
-    }
-    colorCount[newColor]++;
-    gpxColors.update((colors) => {
-        colors.set(fileId, newColor);
-        return colors;
-    });
-}
-
-function removeColor(fileId: string, color: string) {
+function decrementColor(color: string) {
     if (colorCount.hasOwnProperty(color)) {
         colorCount[color]--;
     }
-    gpxColors.update((colors) => {
-        colors.delete(fileId);
-        return colors;
-    });
 }
 
 export function getSvgForSymbol(symbol?: string | undefined, layerColor?: string | undefined) {
@@ -141,7 +121,7 @@ export class GPXLayer {
     constructor(fileId: string, file: Readable<GPXFileWithStatistics | undefined>) {
         this.fileId = fileId;
         this.file = file;
-        this.layerColor = getColor(fileId);
+        this.layerColor = getColor();
         this.unsubscribe.push(
             map.subscribe(($map) => {
                 if ($map) {
@@ -178,7 +158,7 @@ export class GPXLayer {
             file._data.style.color &&
             this.layerColor !== `#${file._data.style.color}`
         ) {
-            replaceColor(this.fileId, this.layerColor, `#${file._data.style.color}`);
+            decrementColor(this.layerColor);
             this.layerColor = `#${file._data.style.color}`;
         }
 
@@ -196,8 +176,7 @@ export class GPXLayer {
             }
 
             if (!_map.getLayer(this.fileId)) {
-                _map.addLayer(
-                    {
+                _map.addLayer({
                     id: this.fileId,
                     type: 'line',
                     source: this.fileId,
@@ -210,9 +189,7 @@ export class GPXLayer {
                         'line-width': ['get', 'width'],
                         'line-opacity': ['get', 'opacity'],
                     },
-                    },
-                    ANCHOR_LAYER_KEY.tracks
-                );
+                });
 
                 _map.on('click', this.fileId, this.layerOnClickBinded);
                 _map.on('contextmenu', this.fileId, this.layerOnContextMenuBinded);
@@ -235,8 +212,7 @@ export class GPXLayer {
             }
 
             if (!_map.getLayer(this.fileId + '-waypoints')) {
-                _map.addLayer(
-                    {
+                _map.addLayer({
                     id: this.fileId + '-waypoints',
                     type: 'symbol',
                     source: this.fileId + '-waypoints',
@@ -247,9 +223,7 @@ export class GPXLayer {
                         'icon-padding': 0,
                         'icon-allow-overlap': true,
                     },
-                    },
-                    ANCHOR_LAYER_KEY.waypoints
-                );
+                });
 
                 _map.on(
                     'mouseenter',
@@ -298,7 +272,7 @@ export class GPXLayer {
                                 'text-halo-color': 'white',
                             },
                         },
-                        ANCHOR_LAYER_KEY.directionMarkers
+                        _map.getLayer('distance-markers') ? 'distance-markers' : undefined
                     );
                 }
             } else {
@@ -390,7 +364,7 @@ export class GPXLayer {
 
         this.unsubscribe.forEach((unsubscribe) => unsubscribe());
 
-        removeColor(this.fileId, this.layerColor);
+        decrementColor(this.layerColor);
     }
 
     moveToFront() {
@@ -399,13 +373,13 @@ export class GPXLayer {
             return;
         }
         if (_map.getLayer(this.fileId)) {
-            _map.moveLayer(this.fileId, ANCHOR_LAYER_KEY.tracks);
+            _map.moveLayer(this.fileId);
         }
         if (_map.getLayer(this.fileId + '-waypoints')) {
-            _map.moveLayer(this.fileId + '-waypoints', ANCHOR_LAYER_KEY.waypoints);
+            _map.moveLayer(this.fileId + '-waypoints');
         }
         if (_map.getLayer(this.fileId + '-direction')) {
-            _map.moveLayer(this.fileId + '-direction', ANCHOR_LAYER_KEY.directionMarkers);
+            _map.moveLayer(this.fileId + '-direction');
         }
     }
 

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

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

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

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

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

@@ -6,7 +6,6 @@ import { overpassQueryData } from '$lib/assets/layers';
 import { MapPopup } from '$lib/components/map/map-popup';
 import { settings } from '$lib/logic/settings';
 import { db } from '$lib/db';
-import { ANCHOR_LAYER_KEY } from '$lib/components/map/map';
 
 const { currentOverpassQueries } = settings;
 
@@ -86,8 +85,7 @@ export class OverpassLayer {
             }
 
             if (!this.map.getLayer('overpass')) {
-                this.map.addLayer(
-                    {
+                this.map.addLayer({
                     id: 'overpass',
                     type: 'symbol',
                     source: 'overpass',
@@ -97,9 +95,7 @@ export class OverpassLayer {
                         'icon-padding': 0,
                         'icon-allow-overlap': ['step', ['zoom'], false, 14, true],
                     },
-                    },
-                    ANCHOR_LAYER_KEY.overpass
-                );
+                });
 
                 this.map.on('mouseenter', 'overpass', this.onHoverBinded);
                 this.map.on('click', 'overpass', this.onHoverBinded);

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

@@ -20,28 +20,6 @@ let fitBoundsOptions: mapboxgl.MapOptions['fitBoundsOptions'] = {
     easing: () => 1,
 };
 
-const emptySource: mapboxgl.GeoJSONSourceSpecification = {
-    type: 'geojson',
-    data: {
-        type: 'FeatureCollection',
-        features: [],
-    },
-};
-export const ANCHOR_LAYER_KEY = {
-    mapillary: 'mapillary-end',
-    tracks: 'tracks-end',
-    directionMarkers: 'direction-markers-end',
-    distanceMarkers: 'distance-markers-end',
-    interactions: 'interactions-end',
-    overpass: 'overpass-end',
-    waypoints: 'waypoints-end',
-};
-const anchorLayers: mapboxgl.LayerSpecification[] = Object.values(ANCHOR_LAYER_KEY).map((id) => ({
-    id: id,
-    type: 'symbol',
-    source: 'empty-source',
-}));
-
 export class MapboxGLMap {
     private _map: Writable<mapboxgl.Map | null> = writable(null);
     private _onLoadCallbacks: ((map: mapboxgl.Map) => void)[] = [];
@@ -51,15 +29,19 @@ export class MapboxGLMap {
         return this._map.subscribe(run, invalidate);
     }
 
-    init(language: string, hash: boolean, geocoder: boolean, geolocate: boolean) {
+    init(
+        accessToken: string,
+        language: string,
+        hash: boolean,
+        geocoder: boolean,
+        geolocate: boolean
+    ) {
         const map = new mapboxgl.Map({
             container: 'map',
             style: {
                 version: 8,
-                sources: {
-                    'empty-source': emptySource,
-                },
-                layers: anchorLayers,
+                sources: {},
+                layers: [],
                 imports: [
                     {
                         id: 'basemap',
@@ -68,6 +50,11 @@ export class MapboxGLMap {
                     {
                         id: 'overlays',
                         url: '',
+                        data: {
+                            version: 8,
+                            sources: {},
+                            layers: [],
+                        },
                     },
                 ],
             },
@@ -225,7 +212,6 @@ export class MapboxGLMap {
         const map = get(this._map);
         if (map) {
             const source = get(terrainSource);
-            try {
             if (!map.getSource(source)) {
                 map.addSource(source, terrainSources[source]);
             }
@@ -237,10 +223,6 @@ export class MapboxGLMap {
             } else {
                 map.setTerrain(null);
             }
-            } catch (e) {
-                // No reliable way to check if the map is ready to add sources and layers
-                return;
-            }
         }
     }
 }

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

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

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

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

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

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

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

@@ -1,5 +1,5 @@
 import { ListItem, ListTrackSegmentItem } from '$lib/components/file-list/file-list';
-import { ANCHOR_LAYER_KEY, map } from '$lib/components/map/map';
+import { map } from '$lib/components/map/map';
 import { fileActions } from '$lib/logic/file-actions';
 import { GPXFileStateCollectionObserver, type GPXFileState } from '$lib/logic/file-state';
 import { selection } from '$lib/logic/selection';
@@ -144,8 +144,7 @@ export class ReducedGPXLayerCollection {
             });
         }
         if (!map_.getLayer('simplified')) {
-            map_.addLayer(
-                {
+            map_.addLayer({
                 id: 'simplified',
                 type: 'line',
                 source: 'simplified',
@@ -153,9 +152,9 @@ export class ReducedGPXLayerCollection {
                     'line-color': 'white',
                     'line-width': 3,
                 },
-                },
-                ANCHOR_LAYER_KEY.interactions
-            );
+            });
+        } else {
+            map_.moveLayer('simplified');
         }
     }
 

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

@@ -21,7 +21,7 @@
         SquareArrowUpLeft,
         SquareArrowOutDownRight,
     } from '@lucide/svelte';
-    import { brouterProfiles } from '$lib/components/toolbar/tools/routing/routing';
+    import { routingProfiles } from '$lib/components/toolbar/tools/routing/routing';
     import { i18n } from '$lib/i18n.svelte';
     import { slide } from 'svelte/transition';
     import {
@@ -167,7 +167,7 @@
                                 {i18n._(`toolbar.routing.activities.${$routingProfile}`)}
                             </Select.Trigger>
                             <Select.Content>
-                                {#each Object.keys(brouterProfiles) as profile}
+                                {#each Object.keys(routingProfiles) as profile}
                                     <Select.Item value={profile}
                                         >{i18n._(
                                             `toolbar.routing.activities.${profile}`

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

@@ -731,17 +731,7 @@ export class RoutingControls {
         try {
             response = await route(targetCoordinates);
         } catch (e: any) {
-            if (e.message.includes('from-position not mapped in existing datafile')) {
-                toast.error(i18n._('toolbar.routing.error.from'));
-            } else if (e.message.includes('via1-position not mapped in existing datafile')) {
-                toast.error(i18n._('toolbar.routing.error.via'));
-            } else if (e.message.includes('to-position not mapped in existing datafile')) {
-                toast.error(i18n._('toolbar.routing.error.to'));
-            } else if (e.message.includes('Time-out')) {
-                toast.error(i18n._('toolbar.routing.error.timeout'));
-            } else {
-                toast.error(e.message);
-            }
+            toast.error(i18n._(e.message, e.message));
             return false;
         }
 

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

@@ -6,37 +6,213 @@ import { get } from 'svelte/store';
 
 const { routing, routingProfile, privateRoads } = settings;
 
-export const brouterProfiles: { [key: string]: string } = {
-    bike: 'Trekking-dry',
-    racing_bike: 'fastbike',
-    gravel_bike: 'gravel',
-    mountain_bike: 'MTB',
-    foot: 'Hiking-Alpine-SAC6',
-    motorcycle: 'Car-FastEco',
-    water: 'river',
-    railway: 'rail',
+export type RoutingProfile = {
+    engine: 'graphhopper' | 'brouter';
+    profile: string;
+};
+
+export const routingProfiles: { [key: string]: RoutingProfile } = {
+    bike: { engine: 'graphhopper', profile: 'bike' },
+    racing_bike: { engine: 'graphhopper', profile: 'racingbike' },
+    gravel_bike: { engine: 'graphhopper', profile: 'gravelbike' },
+    mountain_bike: { engine: 'graphhopper', profile: 'mtb' },
+    foot: { engine: 'graphhopper', profile: 'foot' },
+    motorcycle: { engine: 'graphhopper', profile: 'motorcycle' },
+    water: { engine: 'brouter', profile: 'river' },
+    railway: { engine: 'brouter', profile: 'rail' },
 };
 
 export function route(points: Coordinates[]): Promise<TrackPoint[]> {
     if (get(routing)) {
-        return getRoute(points, brouterProfiles[get(routingProfile)], get(privateRoads));
+        const profile = routingProfiles[get(routingProfile)];
+        if (profile.engine === 'graphhopper') {
+            return getGraphHopperRoute(points, profile.profile, get(privateRoads));
+        } else {
+            return getBRouterRoute(points, profile.profile);
+        }
     } else {
         return getIntermediatePoints(points);
     }
 }
 
-async function getRoute(
+const graphhopperDetails = ['road_class', 'surface', 'hike_rating', 'mtb_rating'];
+const hikeRatingToSACScale: { [key: string]: string } = {
+    '1': 'hiking',
+    '2': 'mountain_hiking',
+    '3': 'demanding_mountain_hiking',
+    '4': 'alpine_hiking',
+    '5': 'demanding_alpine_hiking',
+    '6': 'difficult_alpine_hiking',
+};
+const mtbRatingToScale: { [key: string]: string } = {
+    '1': '0',
+    '2': '1',
+    '3': '2',
+    '4': '3',
+    '5': '4',
+    '6': '5',
+    '7': '6',
+};
+
+const graphhopperBlockPrivateCustomModels: { [key: string]: any } = {
+    bike: {
+        priority: [
+            {
+                if: 'bike_road_access == PRIVATE',
+                multiply_by: '0.0',
+            },
+        ],
+    },
+    racingbike: {
+        priority: [
+            {
+                if: 'bike_road_access == PRIVATE',
+                multiply_by: '0.0',
+            },
+        ],
+    },
+    gravelbike: {
+        priority: [
+            {
+                if: 'bike_road_access == PRIVATE',
+                multiply_by: '0.0',
+            },
+        ],
+    },
+    mtb: {
+        priority: [
+            {
+                if: 'bike_road_access == PRIVATE',
+                multiply_by: '0.0',
+            },
+        ],
+    },
+    foot: {
+        priority: [
+            {
+                if: 'foot_road_access == PRIVATE',
+                multiply_by: '0.0',
+            },
+        ],
+    },
+    motorcycle: {
+        priority: [
+            {
+                if: 'road_access == PRIVATE',
+                multiply_by: '0.0',
+            },
+        ],
+    },
+};
+async function getGraphHopperRoute(
     points: Coordinates[],
-    brouterProfile: string,
+    graphHopperProfile: string,
     privateRoads: boolean
 ): Promise<TrackPoint[]> {
-    let url = `https://brouter.gpx.studio?lonlats=${points.map((point) => `${point.lon.toFixed(8)},${point.lat.toFixed(8)}`).join('|')}&profile=${brouterProfile + (privateRoads ? '-private' : '')}&format=geojson&alternativeidx=0`;
+    let response = await fetch('https://graphhopper.gpx.studio/route', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+            points: points.map((point) => [point.lon, point.lat]),
+            profile: graphHopperProfile,
+            elevation: true,
+            points_encoded: false,
+            details: graphhopperDetails,
+            custom_model: privateRoads
+                ? {}
+                : graphhopperBlockPrivateCustomModels[graphHopperProfile] || {},
+        }),
+    });
+
+    if (!response.ok) {
+        const error = await response.json();
+        if (error.message.includes('Cannot find point 0')) {
+            throw new Error('toolbar.routing.error.from');
+        } else if (error.message.includes('Cannot find point 1')) {
+            if (points.length == 3) {
+                throw new Error('toolbar.routing.error.via');
+            } else {
+                throw new Error('toolbar.routing.error.to');
+            }
+        } else if (error.hints[0].details.includes('PointDistanceExceededException')) {
+            throw new Error('toolbar.routing.error.distance');
+        } else if (error.hints[0].details.includes('ConnectionNotFoundException')) {
+            throw new Error('toolbar.routing.error.connection');
+        } else {
+            throw new Error(error.message);
+        }
+    }
+
+    let json = await response.json();
+
+    let route: TrackPoint[] = [];
+    let coordinates = json.paths[0].points.coordinates;
+    let details = json.paths[0].details;
+
+    for (let i = 0; i < coordinates.length; i++) {
+        route.push(
+            new TrackPoint({
+                attributes: {
+                    lat: coordinates[i][1],
+                    lon: coordinates[i][0],
+                },
+                ele: coordinates[i][2] ?? (i > 0 ? route[i - 1].ele : 0),
+                extensions: {},
+            })
+        );
+    }
+
+    for (let key of graphhopperDetails) {
+        let detail = details[key];
+        for (let i = 0; i < detail.length; i++) {
+            for (let j = detail[i][0]; j < detail[i][1] + (i == detail.length - 1); j++) {
+                if (detail[i][2] !== undefined && detail[i][2] !== 'missing') {
+                    if (key === 'road_class') {
+                        route[j].setExtension('highway', detail[i][2]);
+                    } else if (key === 'hike_rating') {
+                        const sacScale = hikeRatingToSACScale[detail[i][2]];
+                        if (sacScale) {
+                            route[j].setExtension('sac_scale', sacScale);
+                        }
+                    } else if (key === 'mtb_rating') {
+                        const mtbScale = mtbRatingToScale[detail[i][2]];
+                        if (mtbScale) {
+                            route[j].setExtension('mtb_scale', mtbScale);
+                        }
+                    } else if (key === 'surface' && detail[i][2] !== 'other') {
+                        route[j].setExtension('surface', detail[i][2]);
+                    }
+                }
+            }
+        }
+    }
+
+    return route;
+}
+
+async function getBRouterRoute(
+    points: Coordinates[],
+    brouterProfile: string
+): Promise<TrackPoint[]> {
+    let url = `https://brouter.de/brouter?lonlats=${points.map((point) => `${point.lon.toFixed(8)},${point.lat.toFixed(8)}`).join('|')}&profile=${brouterProfile}&format=geojson&alternativeidx=0`;
 
     let response = await fetch(url);
 
-    // Check if the response is ok
     if (!response.ok) {
-        throw new Error(`${await response.text()}`);
+        const error = await response.text();
+        if (error.includes('from-position not mapped in existing datafile')) {
+            throw new Error('toolbar.routing.error.from');
+        } else if (error.includes('via1-position not mapped in existing datafile')) {
+            throw new Error('toolbar.routing.error.via');
+        } else if (error.includes('to-position not mapped in existing datafile')) {
+            throw new Error('toolbar.routing.error.to');
+        } else if (error.includes('Time-out')) {
+            throw new Error('toolbar.routing.error.timeout');
+        } else {
+            throw new Error(error);
+        }
     }
 
     let geojson = await response.json();
@@ -52,14 +228,13 @@ async function getRoute(
     let tags = messageIdx < messages.length ? getTags(messages[messageIdx][tagIdx]) : {};
 
     for (let i = 0; i < coordinates.length; i++) {
-        let coord = coordinates[i];
         route.push(
             new TrackPoint({
                 attributes: {
-                    lat: coord[1],
-                    lon: coord[0],
+                    lat: coordinates[i][1],
+                    lon: coordinates[i][0],
                 },
-                ele: coord[2] ?? (i > 0 ? route[i - 1].ele : 0),
+                ele: coordinates[i][2] ?? (i > 0 ? route[i - 1].ele : 0),
             })
         );
 

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

@@ -8,7 +8,6 @@ import { get } from 'svelte/store';
 import { fileStateCollection } from '$lib/logic/file-state';
 import { fileActions } from '$lib/logic/file-actions';
 import { mapCursor, MapCursorState } from '$lib/logic/map-cursor';
-import { ANCHOR_LAYER_KEY } from '$lib/components/map/map';
 
 export class SplitControls {
     map: mapboxgl.Map;
@@ -109,8 +108,7 @@ export class SplitControls {
             }
 
             if (!this.map.getLayer('split-controls')) {
-                this.map.addLayer(
-                    {
+                this.map.addLayer({
                     id: 'split-controls',
                     type: 'symbol',
                     source: 'split-controls',
@@ -120,14 +118,14 @@ export class SplitControls {
                         'icon-padding': 0,
                     },
                     filter: ['<=', ['get', 'minZoom'], ['zoom']],
-                    },
-                    ANCHOR_LAYER_KEY.interactions
-                );
+                });
 
                 this.map.on('mouseenter', 'split-controls', this.layerOnMouseEnterBinded);
                 this.map.on('mouseleave', 'split-controls', this.layerOnMouseLeaveBinded);
                 this.map.on('click', 'split-controls', this.layerOnClickBinded);
             }
+
+            this.map.moveLayer('split-controls');
         } catch (e) {
             // No reliable way to check if the map is ready to add sources and layers
         }

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

@@ -12,7 +12,6 @@ title: Files and statistics
 
     let gpxStatistics = writable(exampleGPXFile.getStatistics());
     let slicedGPXStatistics = writable(undefined);
-    let hoveredPoint = writable(null);
     let additionalDatasets = writable(['speed', 'atemp']);
     let elevationFill = writable(undefined);
 </script>
@@ -85,17 +84,19 @@ You can also use the mouse wheel to zoom in and out on the elevation profile, an
     <ElevationProfile
         {gpxStatistics}
         {slicedGPXStatistics}
-        {hoveredPoint}
         {additionalDatasets}
         {elevationFill}
     />
 </div>
-<div class="flex flex-col items-center w-full">
+<div class="flex flex-col items-center -mt-6">
+    <div class="h-10 w-fit">
         <GPXStatistics
             {gpxStatistics}
             {slicedGPXStatistics}
+            panelSize={120}
             orientation={'horizontal'}
         />
+    </div>
 </div>
 
 ### Additional data

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

@@ -5,7 +5,7 @@
 ## <HeartHandshake size="18" class="inline-block align-baseline" /> Help keep the website free (and ad-free)
 
 Each time you add or move GPS points, our servers calculate the best route on the road network.
-We also use APIs from <a href="https://maptiler.com" target="_blank">MapTiler</a> to display beautiful maps, retrieve elevation data and allow you to search for places.
+We also use APIs from <a href="https://mapbox.com" target="_blank">Mapbox</a> to display beautiful maps, retrieve elevation data and allow you to search for places.
 
 Unfortunately, this is expensive.
 If you enjoy using this tool and find it valuable, please consider making a small donation to help keep the website free and ad-free.

website/src/lib/docs/be/integration.mdx

@@ -13,8 +13,8 @@ title: Інтэграцыя
 
 Усё, што вам трэба, гэта:
 
-1. GPX files hosted on your server or on Google Drive, or accessible via a public URL;
-2. _Optional:_ a <a href="https://cloud.maptiler.com/auth/widget?next=https://cloud.maptiler.com/maps/" target="_blank">MapTiler key</a> to load MapTiler maps.
+1. <a href="https://account.mapbox.com/auth/signup" target="_blank">Ключ доступу Mapbox</a> для загрузкі карты і
+2. Файлы GPX, размешчаныя на вашым серверы або на Google Drive, або даступныя праз публічны URL.
 
 Затым вы можаце пагуляць з канфігуратарам ніжэй, каб наладзіць сваю карту і стварыць адпаведны HTML-код.
 

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

@@ -56,12 +56,10 @@ These controls allow you to navigate the map, zoom in and out, and switch betwee
 - **Кропкі цікавасці** можна дадаць на карту, каб паказаць розныя катэгорыі месцаў, такіх як крамы, рэстараны або жыллё.
 
 <div class="flex flex-col items-center">
-<DocsLayers />
-<span class="text-sm text-center mt-2">
-
-Hover over the map to show the <a href="https://hiking.waymarkedtrails.org" target="_blank">Waymarked Trails hiking</a> overlay on top of the <a href="https://www.maptiler.com/maps/outdoor-topo/" target="_blank">MapTiler Topo</a> basemap.
-
-</span>
+    <DocsLayers />
+    <span class="text-sm text-center mt-2">
+        Навядзіце курсор мышы на карту, каб паказаць накладанне <a href="https://hiking.waymarkedtrails.org" target="_blank">Пешаходных Сцежак</a> на базавай карце <a href="https://www.mapbox.com/maps/outdoors" target="_blank">Mapbox Outdoors</a>.
+    </span>
 </div>
 
 Вялікая калекцыя глабальных і лакальных базавых карт і накладанняў даступная ў **gpx.studio**, а таксама выбар катэгорый кропак цікавасці.
@@ -69,4 +67,4 @@ Hover over the map to show the <a href="https://hiking.waymarkedtrails.org" targ
 
 У гэтых наладах вы таксама можаце кіраваць непразрыстасцю накладанняў.
 
-For advanced users, it is possible to add custom basemaps and overlays by providing <a href="https://en.wikipedia.org/wiki/Web_Map_Tile_Service" target="_blank">WMTS</a>, <a href="https://en.wikipedia.org/wiki/Web_Map_Service" target="_blank">WMS</a>, or <a href="https://maplibre.org/maplibre-style-spec/" target="_blank">MapLibre style JSON</a> URLs.
+Для прасунутых карыстальнікаў можна дадаваць карыстальніцкія базавыя карты і накладкі, дадаўшы URL-адрасы <a href="https://en.wikipedia.org/wiki/Web_Map_Tile_Service" target="_blank">WMTS</a>, <a href="https://en.wikipedia.org/wiki/Web_Map_Service" target="_blank">WMS</a> або <a href="https://docs.mapbox.com/help/glossary/style/" target="_blank">JSON у стылі Mapbox</a>.

website/src/lib/docs/be/toolbar/elevation.mdx

@@ -18,7 +18,7 @@ This tool allows you to add elevation data to traces and [points of interest](..
 
 <DocsNote>
 
-Elevation data is provided by <a href="https://maptiler.com" target="_blank">MapTiler</a>.
-You can learn more about its origin and accuracy in the <a href="https://docs.maptiler.com/guides/map-tiling-hosting/data-hosting/rgb-terrain-by-maptiler/" target="_blank">documentation</a>.
+Elevation data is provided by <a href="https://mapbox.com" target="_blank">Mapbox</a>.
+You can learn more about its origin and accuracy in the <a href="https://docs.mapbox.com/data/tilesets/reference/mapbox-terrain-dem-v1/#elevation-data" target="_blank">documentation</a>.
 
 </DocsNote>

website/src/lib/docs/be/toolbar/merge.mdx

@@ -5,7 +5,6 @@ title: Merge
 <script>
     import { Group } from '@lucide/svelte';
     import Merge from '$lib/components/toolbar/tools/Merge.svelte';
-    import DocsNote from '$lib/components/docs/DocsNote.svelte';
 </script>
 
 # <Group size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
@@ -16,13 +15,6 @@ To use this tool, you need to [select](../files-and-stats) multiple files, [trac
 - The second option can be used to create or manage files with multiple [tracks or segments](../gpx).
   Merging files (or tracks) will result in a single file (or track) containing all tracks (or segments) from the selection.
 
-<DocsNote>
-
-Selected items are merged in the order they appear in the files list.
-Reorder items by drag-and-drop if needed.
-
-</DocsNote>
-
 <div class="flex flex-row justify-center">
     <Merge class="text-foreground p-3 border rounded-md shadow-lg" />
 </div>

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

@@ -12,7 +12,6 @@ title: Fitxers i estadístiques
 
     let gpxStatistics = writable(exampleGPXFile.getStatistics());
     let slicedGPXStatistics = writable(undefined);
-    let hoveredPoint = writable(null);
     let additionalDatasets = writable(['speed', 'atemp']);
     let elevationFill = writable(undefined);
 </script>
@@ -85,17 +84,19 @@ També pots utilitzar la rodeta del ratolí per apropar o allunyar el perfil d'e
     <ElevationProfile
         {gpxStatistics}
         {slicedGPXStatistics}
-        {hoveredPoint}
         {additionalDatasets}
         {elevationFill}
     />
 </div>
-<div class="flex flex-col items-center w-full">
+<div class="flex flex-col items-center -mt-6">
+    <div class="h-10 w-fit">
         <GPXStatistics
             {gpxStatistics}
             {slicedGPXStatistics}
+            panelSize={120}
             orientation={'horizontal'}
         />
+    </div>
 </div>
 
 ### Dades addicionals

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

@@ -5,7 +5,7 @@
 ## <HeartHandshake size="18" class="inline-block align-baseline" /> Ajuda a mantenir aquesta pàgina web gratuïta (i sense anuncis)
 
 Cada cop que afegeixes o mous un punt GPS, els nostres servidors calculen la millor ruta possible.
-We also use APIs from <a href="https://maptiler.com" target="_blank">MapTiler</a> to display beautiful maps, retrieve elevation data and allow you to search for places.
+També utilitzen l'API de <a href="https://mapbox.com" target="_blank">Mapbox</a> per ensenyar mapes bonics, donar informació sobre l'altitud i permetre la cerca de llocs d'interès.
 
 Desafortunadament, això és car.
 Si gaudeixes aquesta eina i la trobes valuosa, si us plau, considera fer una petita donació per ajudar a mantenir la pàgina web gratuïta i sense anuncis.

website/src/lib/docs/ca/integration.mdx

@@ -13,8 +13,8 @@ Pots utilitzar **gpx.studio** per crear mapes que mostrin els teus arxius GPX i
 
 Tot el que necessites és:
 
-1. GPX files hosted on your server or on Google Drive, or accessible via a public URL;
-2. _Optional:_ a <a href="https://cloud.maptiler.com/auth/widget?next=https://cloud.maptiler.com/maps/" target="_blank">MapTiler key</a> to load MapTiler maps.
+1. Un <a href="https://account.mapbox.com/auth/signup" target="_blank"> token d'accés a Mapbox</a> per carregar el mapa i
+2. Arxius GPX allotjats en el teu servidor, a Google Drive o accessibles a través d'una URL pública.
 
 Aleshores pots jugar amb el configurador de sota per personalitzar el teu mapa i generar el corresponent codi HTML.
 

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

@@ -55,13 +55,8 @@ El botó de capa de mapa permet canviar entre diferents mapes base i alternar ca
 - Les **Capes sobreposades** són capes addicionals que es poden mostrar sobre el mapa base per proporcionar informació complementària.
 - Els **Punts d'interès** es poden afegir al mapa per mostrar diferents categories de llocs, com botigues, restaurants o allotjaments.
 
-<div class="flex flex-col items-center">
-<DocsLayers />
-<span class="text-sm text-center mt-2">
-
-Hover over the map to show the <a href="https://hiking.waymarkedtrails.org" target="_blank">Waymarked Trails hiking</a> overlay on top of the <a href="https://www.maptiler.com/maps/outdoor-topo/" target="_blank">MapTiler Topo</a> basemap.
-
-</span>
+<div class="flex flex-col items-center"><DocsLayers /><span class="text-sm text-center mt-2">Situa el cursor sobre el mapa per mostrar la capa <a href="https://hiking.waymarkedtrails.org" target="_blank">Waymarked Trails hiking</a> sobreposada sobre del <a href="https://www.mapbox.com/maps/outdoors" target="_blank">Mapbox Outdoors</a> mapa base.
+    </span>
 </div>
 
 Una gran col·lecció de mapes i capes sobreposades globals i locals està disponible a **gpx.studio**, així com una selecció de categories de punts d'interès.
@@ -69,4 +64,4 @@ Poden activar-se en el [configuració de capes del mapa](./menu/settings).
 
 En aquests ajustaments pots gestionar l'opacitat de les capes sobreposades.
 
-For advanced users, it is possible to add custom basemaps and overlays by providing <a href="https://en.wikipedia.org/wiki/Web_Map_Tile_Service" target="_blank">WMTS</a>, <a href="https://en.wikipedia.org/wiki/Web_Map_Service" target="_blank">WMS</a>, or <a href="https://maplibre.org/maplibre-style-spec/" target="_blank">MapLibre style JSON</a> URLs.
+Per a usuaris avançats és possible afegir mapes base i sobreposicions personalitzades proporcionant <a href="https://en.wikipedia.org/wiki/Web_Map_Tile_Service" target="_blank">WMTS</a>, <a href="https://en.wikipedia.org/wiki/Web_Map_Service" target="_blank">WMS</a>, o <a href="https://docs.mapbox.com/help/glossary/style/" target="_blank">JSON tipus Mapbox</a> URLs.

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

@@ -29,13 +29,13 @@ Pots arrossegar y deixar arxius directament des del seu sistema d'arxius cap a l
 
 Crear una còpia dels arxius seleccionats.
 
-### <FileX size="16" class="inline-block" style="margin-bottom: 2px" /> Esborra
+### <FileX size="16" class="inline-block" style="margin-bottom: 2px" /> Delete
 
-Esborra l'arxiu seleccinat.
+Delete the currently selected files.
 
-### <FileX size="16" class="inline-block" style="margin-bottom: 2px" /> Esborra-ho tot
+### <FileX size="16" class="inline-block" style="margin-bottom: 2px" /> Delete all
 
-Esborra tots els fitxers.
+Delete all files.
 
 ### <Download size="16" class="inline-block" style="margin-bottom: 2px" /> Exportar...
 

website/src/lib/docs/ca/toolbar/elevation.mdx

@@ -18,7 +18,7 @@ Aquesta eina permet afegir dades d'elevació a traces i [punts d'interès](../gp
 
 <DocsNote>
 
-Elevation data is provided by <a href="https://maptiler.com" target="_blank">MapTiler</a>.
-You can learn more about its origin and accuracy in the <a href="https://docs.maptiler.com/guides/map-tiling-hosting/data-hosting/rgb-terrain-by-maptiler/" target="_blank">documentation</a>.
+Dades d'elevació subministrades per <a href="https://mapbox.com" target="_blank">Mapbox</a>.
+Pots aprendre més sobre els seus orígens i precisió en la <a href="https://docs.mapbox.com/data/tilesets/reference/mapbox-terrain-dem-v1/#elevation-data" target="_blank">documentació</a>.
 
 </DocsNote>

website/src/lib/docs/ca/toolbar/merge.mdx

@@ -5,7 +5,6 @@ title: Fusionar
 <script>
     import { Group } from '@lucide/svelte';
     import Merge from '$lib/components/toolbar/tools/Merge.svelte';
-    import DocsNote from '$lib/components/docs/DocsNote.svelte';
 </script>
 
 # <Group size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
@@ -16,13 +15,6 @@ Per utilitzar aquesta eina, s'ha de [seleccionar](../files-and-stats) múltiples
 - La segona opció es pot utilitzar per a crear o gestionar arxius amb múltiples [tracs o segments](../gpx).
   Fusionar arxius (o tracs) crearà un sol arxiu (o trac) que contindrà tots els tracs (o segments) seleccionats.
 
-<DocsNote>
-
-Selected items are merged in the order they appear in the files list.
-Reorder items by drag-and-drop if needed.
-
-</DocsNote>
-
 <div class="flex flex-row justify-center">
     <Merge class="text-foreground p-3 border rounded-md shadow-lg" />
 </div>

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

@@ -12,7 +12,6 @@ title: Soubory a statistiky
 
     let gpxStatistics = writable(exampleGPXFile.getStatistics());
     let slicedGPXStatistics = writable(undefined);
-    let hoveredPoint = writable(null);
     let additionalDatasets = writable(['speed', 'atemp']);
     let elevationFill = writable(undefined);
 </script>
@@ -85,17 +84,19 @@ Pomocí kolečka myši můžete také výškový profil přiblížit a oddálit
     <ElevationProfile
         {gpxStatistics}
         {slicedGPXStatistics}
-        {hoveredPoint}
         {additionalDatasets}
         {elevationFill}
     />
 </div>
-<div class="flex flex-col items-center w-full">
+<div class="flex flex-col items-center -mt-6">
+    <div class="h-10 w-fit">
         <GPXStatistics
             {gpxStatistics}
             {slicedGPXStatistics}
+            panelSize={120}
             orientation={'horizontal'}
         />
+    </div>
 </div>
 
 ### Doplňující údaje

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

@@ -5,7 +5,7 @@
 ## <HeartHandshake size="18" class="inline-block align-baseline" /> Pomozte udržet web zdarma (a bez reklam)
 
 Vždy, když přidáte nebo přesunete GPS body, naše servery vypočítají nejlepší cestu po silniční síti.
-We also use APIs from <a href="https://maptiler.com" target="_blank">MapTiler</a> to display beautiful maps, retrieve elevation data and allow you to search for places.
+Používáme také API z <a href="https://mapbox.com" target="_blank">Mapboxu</a> pro zobrazení krásných map, získání dat o nadmořské výšce a vyhledávání míst.
 
 Bohužel, to vše je nákladné.
 Pokud rádi používáte tento nástroj a zdá se vám hodnotný, zvažte prosím malý příspěvek k udržení webu zdarma a bez reklam.

website/src/lib/docs/cs/integration.mdx

@@ -13,8 +13,8 @@ Pomocí **gpx.studio** můžete vytvářet mapy se zobrazením souborů GPX a vk
 
 Vše, co potřebujete, je:
 
-1. GPX files hosted on your server or on Google Drive, or accessible via a public URL;
-2. _Optional:_ a <a href="https://cloud.maptiler.com/auth/widget?next=https://cloud.maptiler.com/maps/" target="_blank">MapTiler key</a> to load MapTiler maps.
+1. <a href="https://account.mapbox.com/auth/signup" target="_blank">Přístupový token Mapboxu</a> k načtení mapy,
+2. Soubory GPX umístěné na vašem serveru nebo na Disku Google, nebo přístupné prostřednictvím veřejné adresy URL.
 
 V níže zobrazeném konfigurátoru si pak můžete mapu přizpůsobit a vygenerovat odpovídající kód HTML.
 

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

@@ -56,12 +56,10 @@ Tlačítko mapové vrstvy umožňuje přepínat mezi různými podkladovými map
 - **Body zájmu** lze přidat do mapy a zobrazit tak různé kategorie míst, jako jsou obchody, restaurace nebo ubytování.
 
 <div class="flex flex-col items-center">
-<DocsLayers />
-<span class="text-sm text-center mt-2">
-
-Hover over the map to show the <a href="https://hiking.waymarkedtrails.org" target="_blank">Waymarked Trails hiking</a> overlay on top of the <a href="https://www.maptiler.com/maps/outdoor-topo/" target="_blank">MapTiler Topo</a> basemap.
-
-</span>
+    <DocsLayers />
+    <span class="text-sm text-center mt-2">
+        Po najetí myší nad mapu se zobrazí překryv<a href="https://hiking.waymarkedtrails.org" target="_blank">značených stezek pro pěší turistiku</a> na podkladové mapě <a href="https://www.mapbox.com/maps/outdoors" target="_blank">Mapbox Outdoors</a>.
+    </span>
 </div>
 
 V **gpx.studio** je k dispozici rozsáhlá sbírka globálních a místních podkladových map a překryvů a také řada kategorií bodů zájmu.
@@ -69,4 +67,4 @@ Lze je povolit v nabídce [nastavení mapových vrstev](./menu/settings).
 
 V tomto nastavení můžete také spravovat neprůhlednost překryvů.
 
-For advanced users, it is possible to add custom basemaps and overlays by providing <a href="https://en.wikipedia.org/wiki/Web_Map_Tile_Service" target="_blank">WMTS</a>, <a href="https://en.wikipedia.org/wiki/Web_Map_Service" target="_blank">WMS</a>, or <a href="https://maplibre.org/maplibre-style-spec/" target="_blank">MapLibre style JSON</a> URLs.
+Pokročilí uživatelé mohou přidávat vlastní podkladové mapy a překryvy pomocí <a href="https://en.wikipedia.org/wiki/Web_Map_Tile_Service" target="_blank">WMTS</a>, <a href="https://en.wikipedia.org/wiki/Web_Map_Service" target="_blank">WMS</a> nebo URL <a href="https://docs.mapbox.com/help/glossary/style/" target="_blank">Mapbox stylu JSON</a>.

website/src/lib/docs/cs/toolbar/elevation.mdx

@@ -18,7 +18,7 @@ Tento nástroj umožňuje přidat údaje o nadmořské výšce ke stopám a [bod
 
 <DocsNote>
 
-Elevation data is provided by <a href="https://maptiler.com" target="_blank">MapTiler</a>.
-You can learn more about its origin and accuracy in the <a href="https://docs.maptiler.com/guides/map-tiling-hosting/data-hosting/rgb-terrain-by-maptiler/" target="_blank">documentation</a>.
+Údaje o nadmořské výšce poskytuje <a href="https://mapbox.com" target="_blank">Mapbox</a>.
+Více informací o jejich původu a přesnosti najdete v <a href="https://docs.mapbox.com/data/tilesets/reference/mapbox-terrain-dem-v1/#elevation-data" target="_blank">dokumentaci</a>.
 
 </DocsNote>

website/src/lib/docs/cs/toolbar/merge.mdx

@@ -5,7 +5,6 @@ title: Sloučit
 <script>
     import { Group } from '@lucide/svelte';
     import Merge from '$lib/components/toolbar/tools/Merge.svelte';
-    import DocsNote from '$lib/components/docs/DocsNote.svelte';
 </script>
 
 # <Group size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
@@ -16,13 +15,6 @@ Chcete-li použít tento nástroj, musíte [vybrat](../files-and-stats) více so
 - Druhá možnost může být použita k vytvoření nebo správě souborů s více [trasami nebo segmenty](../gpx).
   Sloučením souborů (nebo tras) vznikne jeden soubor (nebo trasa) obsahující všechny trasy (nebo úseky) z výběru.
 
-<DocsNote>
-
-Selected items are merged in the order they appear in the files list.
-Reorder items by drag-and-drop if needed.
-
-</DocsNote>
-
 <div class="flex flex-row justify-center">
     <Merge class="text-foreground p-3 border rounded-md shadow-lg" />
 </div>

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

@@ -12,7 +12,6 @@ title: Files and statistics
 
     let gpxStatistics = writable(exampleGPXFile.getStatistics());
     let slicedGPXStatistics = writable(undefined);
-    let hoveredPoint = writable(null);
     let additionalDatasets = writable(['speed', 'atemp']);
     let elevationFill = writable(undefined);
 </script>
@@ -85,17 +84,19 @@ You can also use the mouse wheel to zoom in and out on the elevation profile, an
     <ElevationProfile
         {gpxStatistics}
         {slicedGPXStatistics}
-        {hoveredPoint}
         {additionalDatasets}
         {elevationFill}
     />
 </div>
-<div class="flex flex-col items-center w-full">
+<div class="flex flex-col items-center -mt-6">
+    <div class="h-10 w-fit">
         <GPXStatistics
             {gpxStatistics}
             {slicedGPXStatistics}
+            panelSize={120}
             orientation={'horizontal'}
         />
+    </div>
 </div>
 
 ### Additional data

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

@@ -5,7 +5,7 @@
 ## <HeartHandshake size="18" class="inline-block align-baseline" /> Help keep the website free (and ad-free)
 
 Each time you add or move GPS points, our servers calculate the best route on the road network.
-We also use APIs from <a href="https://maptiler.com" target="_blank">MapTiler</a> to display beautiful maps, retrieve elevation data and allow you to search for places.
+We also use APIs from <a href="https://mapbox.com" target="_blank">Mapbox</a> to display beautiful maps, retrieve elevation data and allow you to search for places.
 
 Unfortunately, this is expensive.
 If you enjoy using this tool and find it valuable, please consider making a small donation to help keep the website free and ad-free.

website/src/lib/docs/da/integration.mdx

@@ -13,8 +13,8 @@ You can use **gpx.studio** to create maps showing your GPX files and embed them
 
 All you need is:
 
-1. GPX files hosted on your server or on Google Drive, or accessible via a public URL;
-2. _Optional:_ a <a href="https://cloud.maptiler.com/auth/widget?next=https://cloud.maptiler.com/maps/" target="_blank">MapTiler key</a> to load MapTiler maps.
+1. A <a href="https://account.mapbox.com/auth/signup" target="_blank">Mapbox access token</a> to load the map, and
+2. GPX files hosted on your server or on Google Drive, or accessible via a public URL.
 
 You can then play with the configurator below to customize your map and generate the corresponding HTML code.
 

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

@@ -56,12 +56,10 @@ The map layers button allows you to switch between different basemaps, and toggl
 - **Points of interest** can be added to the map to show different categories of places, such as shops, restaurants, or accommodations.
 
 <div class="flex flex-col items-center">
-<DocsLayers />
-<span class="text-sm text-center mt-2">
-
-Hover over the map to show the <a href="https://hiking.waymarkedtrails.org" target="_blank">Waymarked Trails hiking</a> overlay on top of the <a href="https://www.maptiler.com/maps/outdoor-topo/" target="_blank">MapTiler Topo</a> basemap.
-
-</span>
+    <DocsLayers />
+    <span class="text-sm text-center mt-2">
+        Hover over the map to show the <a href="https://hiking.waymarkedtrails.org" target="_blank">Waymarked Trails hiking</a> overlay on top of the <a href="https://www.mapbox.com/maps/outdoors" target="_blank">Mapbox Outdoors</a> basemap.
+    </span>
 </div>
 
 A large collection of global and local basemaps and overlays is available in **gpx.studio**, as well as a selection of point-of-interest categories.
@@ -69,4 +67,4 @@ They can be enabled in the [map layer settings dialog](./menu/settings).
 
 In these settings, you can also manage the opacity of the overlays.
 
-For advanced users, it is possible to add custom basemaps and overlays by providing <a href="https://en.wikipedia.org/wiki/Web_Map_Tile_Service" target="_blank">WMTS</a>, <a href="https://en.wikipedia.org/wiki/Web_Map_Service" target="_blank">WMS</a>, or <a href="https://maplibre.org/maplibre-style-spec/" target="_blank">MapLibre style JSON</a> URLs.
+For advanced users, it is possible to add custom basemaps and overlays by providing <a href="https://en.wikipedia.org/wiki/Web_Map_Tile_Service" target="_blank">WMTS</a>, <a href="https://en.wikipedia.org/wiki/Web_Map_Service" target="_blank">WMS</a>, or <a href="https://docs.mapbox.com/help/glossary/style/" target="_blank">Mapbox style JSON</a> URLs.

website/src/lib/docs/da/toolbar/elevation.mdx

@@ -18,7 +18,7 @@ This tool allows you to add elevation data to traces and [points of interest](..
 
 <DocsNote>
 
-Elevation data is provided by <a href="https://maptiler.com" target="_blank">MapTiler</a>.
-You can learn more about its origin and accuracy in the <a href="https://docs.maptiler.com/guides/map-tiling-hosting/data-hosting/rgb-terrain-by-maptiler/" target="_blank">documentation</a>.
+Elevation data is provided by <a href="https://mapbox.com" target="_blank">Mapbox</a>.
+You can learn more about its origin and accuracy in the <a href="https://docs.mapbox.com/data/tilesets/reference/mapbox-terrain-dem-v1/#elevation-data" target="_blank">documentation</a>.
 
 </DocsNote>

website/src/lib/docs/da/toolbar/merge.mdx

@@ -5,7 +5,6 @@ title: Merge
 <script>
     import { Group } from '@lucide/svelte';
     import Merge from '$lib/components/toolbar/tools/Merge.svelte';
-    import DocsNote from '$lib/components/docs/DocsNote.svelte';
 </script>
 
 # <Group size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
@@ -16,13 +15,6 @@ To use this tool, you need to [select](../files-and-stats) multiple files, [trac
 - The second option can be used to create or manage files with multiple [tracks or segments](../gpx).
   Merging files (or tracks) will result in a single file (or track) containing all tracks (or segments) from the selection.
 
-<DocsNote>
-
-Selected items are merged in the order they appear in the files list.
-Reorder items by drag-and-drop if needed.
-
-</DocsNote>
-
 <div class="flex flex-row justify-center">
     <Merge class="text-foreground p-3 border rounded-md shadow-lg" />
 </div>

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

@@ -12,7 +12,6 @@ title: Dateien und Statistiken
 
     let gpxStatistics = writable(exampleGPXFile.getStatistics());
     let slicedGPXStatistics = writable(undefined);
-    let hoveredPoint = writable(null);
     let additionalDatasets = writable(['speed', 'atemp']);
     let elevationFill = writable(undefined);
 </script>
@@ -85,17 +84,19 @@ Sie können auch das Mausrad verwenden, um auf dem Höhenprofil heranzuzoomen un
     <ElevationProfile
         {gpxStatistics}
         {slicedGPXStatistics}
-        {hoveredPoint}
         {additionalDatasets}
         {elevationFill}
     />
 </div>
-<div class="flex flex-col items-center w-full">
+<div class="flex flex-col items-center -mt-6">
+    <div class="h-10 w-fit">
         <GPXStatistics
             {gpxStatistics}
             {slicedGPXStatistics}
+            panelSize={120}
             orientation={'horizontal'}
         />
+    </div>
 </div>
 
 ### Zusätzliche Daten

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

@@ -5,7 +5,7 @@
 ## <HeartHandshake size="18" class="inline-block align-baseline" /> Helfen Sie, die Website kostenlos (und werbefrei) zu erhalten
 
 Jedes Mal, wenn Sie GPS-Punkte hinzufügen oder verschieben, berechnen unsere Server die beste Route im Straßennetz.
-We also use APIs from <a href="https://maptiler.com" target="_blank">MapTiler</a> to display beautiful maps, retrieve elevation data and allow you to search for places.
+Wir verwenden auch APIs von <a href="https://mapbox.com" target="_blank">Mapbox</a>, um schöne Karten anzuzeigen, Höhendaten abzurufen und Ihnen die Suche nach Orten zu ermöglichen.
 
 Leider ist dies mit hohen Kosten verbunden.
 Wenn Sie dieses Tool gerne verwenden und es wertvoll finden, erwägen Sie bitte eine kleine Spende, um die Website kostenlos und werbefrei zu halten.

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

@@ -1,5 +1,5 @@
-Mapbox stellt einige der auf dieser Website verwendeten Karten bereit.
-Sie entwickeln auch die <a href="https://github.com/mapbox/mapbox-gl-js" target="_blank">Karten-Engine</a>, die **gpx.studio** unterstützt.
+Mapbox ist das Unternehmen, das einige der schönen Karten auf dieser Website zur Verfügung stellt.
+Sie entwickeln auch die <a href="https://github.com/mapbox/mapbox-gl-js" target="_blank">Karten-Engine</a> welche **gpx.studio** unterstützt.
 
-Wir sind froh und dankbar, Teil ihres <a href="https://mapbox.com/community" target="_blank">Community</a> Programms zu sein, das gemeinnützige Organisationen, Bildungseinrichtungen und Organisationen unterstützt.
+Wir sind äußerst glücklich und dankbar, Teil ihres <a href="https://mapbox.com/community" target="_blank">Community</a> Programms zu sein, das gemeinnützige Organisationen, Bildungseinrichtungen und Organisationen mit positivem Einfluss unterstützt.
 Diese Partnerschaft ermöglicht es **gpx.studio**, von den Mapbox-Tools zu ermäßigten Preisen zu profitieren, was erheblich zur finanziellen Tragfähigkeit des Projekts beiträgt und es uns ermöglicht, die bestmögliche Benutzererfahrung zu bieten.

website/src/lib/docs/de/integration.mdx

@@ -13,8 +13,8 @@ Du kannst **gpx.studio** verwenden, um Karten zu erstellen, die deine GPX-Dateie
 
 Alles was Sie brauchen:
 
-1. GPX files hosted on your server or on Google Drive, or accessible via a public URL;
-2. _Optional:_ a <a href="https://cloud.maptiler.com/auth/widget?next=https://cloud.maptiler.com/maps/" target="_blank">MapTiler key</a> to load MapTiler maps.
+1. Eine <a href="https://account.mapbox.com/auth/signup" target="_blank">Mapbox Zugriffstoken</a> zum Laden der Karte, und
+2. GPX-Dateien, die auf Ihrem Server oder Google Drive gehostet werden oder über eine öffentliche URL erreichbar sind.
 
 Sie können dann mit dem Konfigurator unten spielen, um Ihre Karte anzupassen und den entsprechenden HTML-Code zu generieren.
 

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

@@ -56,12 +56,10 @@ Mit der Schaltfläche Karten-Ebenen können Sie zwischen verschiedenen Basemaps
 - **Punkte von Interesse** können auf der Karte angezeigt werden, um verschiedene Kategorien von Orten wie Geschäfte, Restaurants oder Unterkünfte anzuzeigen.
 
 <div class="flex flex-col items-center">
-<DocsLayers />
-<span class="text-sm text-center mt-2">
-
-Hover over the map to show the <a href="https://hiking.waymarkedtrails.org" target="_blank">Waymarked Trails hiking</a> overlay on top of the <a href="https://www.maptiler.com/maps/outdoor-topo/" target="_blank">MapTiler Topo</a> basemap.
-
-</span>
+    <DocsLayers />
+    <span class="text-sm text-center mt-2">
+        Fahren Sie über der Karte, um die <a href="https://hiking.waymarkedtrails.org" target="_blank">Wegmarkierte Wanderwege</a> Overlay oben auf die <a href="https://www.mapbox.com/maps/outdoors" target="_blank">Mapbox Outdoors</a> Basemap anzuzeigen.
+    </span>
 </div>
 
 Eine große Sammlung globaler und lokaler Basemaps und Overlays ist im **gpx.studio** sowie eine Auswahl von Point-of-Interest Kategorien verfügbar.
@@ -69,4 +67,4 @@ Sie können im [Einstellungsdialog für die Kartenlayer Einstellungen](./menu/se
 
 In diesen Einstellungen können Sie auch die Deckkraft der Overlays verwalten.
 
-For advanced users, it is possible to add custom basemaps and overlays by providing <a href="https://en.wikipedia.org/wiki/Web_Map_Tile_Service" target="_blank">WMTS</a>, <a href="https://en.wikipedia.org/wiki/Web_Map_Service" target="_blank">WMS</a>, or <a href="https://maplibre.org/maplibre-style-spec/" target="_blank">MapLibre style JSON</a> URLs.
+Für fortgeschrittene Benutzer ist es möglich, benutzerdefinierte Basemaps und Overlays durch die Bereitstellung von <a href="https://en.wikipedia.org/wiki/Web_Map_Tile_Service" target="_blank">WMTS</a>hinzuzufügen, <a href="https://en.wikipedia.org/wiki/Web_Map_Service" target="_blank">WMS</a>oder <a href="https://docs.mapbox.com/help/glossary/style/" target="_blank">Mapbox Stil JSON</a> URLs.

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

@@ -33,7 +33,7 @@ Erstelle eine Kopie der aktuell ausgewählten Dateien.
 
 Delete the currently selected files.
 
-### <FileX size="16" class="inline-block" style="margin-bottom: 2px" /> Lösche alles
+### <FileX size="16" class="inline-block" style="margin-bottom: 2px" /> Delete all
 
 Delete all files.
 

website/src/lib/docs/de/toolbar/elevation.mdx

@@ -18,7 +18,7 @@ Mit diesem Tool kannst du Höhendaten zu Routen und [Points of Interest] (../gpx
 
 <DocsNote>
 
-Elevation data is provided by <a href="https://maptiler.com" target="_blank">MapTiler</a>.
-You can learn more about its origin and accuracy in the <a href="https://docs.maptiler.com/guides/map-tiling-hosting/data-hosting/rgb-terrain-by-maptiler/" target="_blank">documentation</a>.
+Höhendaten werden von <a href="https://mapbox.com" target="_blank">Mapbox</a> bereitgestellt.
+Du kannst mehr über den Ursprung und die Genauigkeit des Tools in der <a href="https://docs.mapbox.com/data/tilesets/reference/mapbox-terrain-dem-v1/#elevation-data" target="_blank">Dokumentation</a> erfahren.
 
 </DocsNote>

website/src/lib/docs/de/toolbar/merge.mdx

@@ -5,7 +5,6 @@ title: Zusammenfügen
 <script>
     import { Group } from '@lucide/svelte';
     import Merge from '$lib/components/toolbar/tools/Merge.svelte';
-    import DocsNote from '$lib/components/docs/DocsNote.svelte';
 </script>
 
 # <Group size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
@@ -16,13 +15,6 @@ Um dieses Tool nutzen zu können, musst du [select](../files-and-stats) mehrere
 - Die zweite Option kann verwendet werden, um Dateien mit mehreren [Tracks oder Segments](../gpx) zu erstellen oder zu verwalten.
   Das Zusammenführen von Dateien (oder Tracks) führt zu einer einzigen Datei (oder Track), die alle Tracks (oder Segmente) aus der Auswahl enthält.
 
-<DocsNote>
-
-Selected items are merged in the order they appear in the files list.
-Reorder items by drag-and-drop if needed.
-
-</DocsNote>
-
 <div class="flex flex-row justify-center">
     <Merge class="text-foreground p-3 border rounded-md shadow-lg" />
 </div>

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

@@ -12,7 +12,6 @@ title: Files and statistics
 
     let gpxStatistics = writable(exampleGPXFile.getStatistics());
     let slicedGPXStatistics = writable(undefined);
-    let hoveredPoint = writable(null);
     let additionalDatasets = writable(['speed', 'atemp']);
     let elevationFill = writable(undefined);
 </script>
@@ -85,17 +84,19 @@ You can also use the mouse wheel to zoom in and out on the elevation profile, an
     <ElevationProfile
         {gpxStatistics}
         {slicedGPXStatistics}
-        {hoveredPoint}
         {additionalDatasets}
         {elevationFill}
     />
 </div>
-<div class="flex flex-col items-center w-full">
+<div class="flex flex-col items-center -mt-6">
+    <div class="h-10 w-fit">
         <GPXStatistics
             {gpxStatistics}
             {slicedGPXStatistics}
+            panelSize={120}
             orientation={'horizontal'}
         />
+    </div>
 </div>
 
 ### Additional data

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

@@ -5,7 +5,7 @@
 ## <HeartHandshake size="18" class="inline-block align-baseline" /> Help keep the website free (and ad-free)
 
 Each time you add or move GPS points, our servers calculate the best route on the road network.
-We also use APIs from <a href="https://maptiler.com" target="_blank">MapTiler</a> to display beautiful maps, retrieve elevation data and allow you to search for places.
+We also use APIs from <a href="https://mapbox.com" target="_blank">Mapbox</a> to display beautiful maps, retrieve elevation data and allow you to search for places.
 
 Unfortunately, this is expensive.
 If you enjoy using this tool and find it valuable, please consider making a small donation to help keep the website free and ad-free.

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

@@ -2,11 +2,11 @@
     import { Languages } from '@lucide/svelte';
 </script>
 
-## <Languages size="18" class="inline-block align-baseline" />Μετάφραση
+## <Languages size="18" class="inline-block align-baseline" /> Translation
 
-Αυτός ο ιστότοπος μεταφράζεται από εθελοντές μέσω μια πλατφόρμας συνεργατικής μετάφρασης.
-Μπορείτε να συνεισφέρετε προσθέτοντας ή βελτιώνοντας μεταφράσεις στο <a href="https://crowdin.com/project/gpxstudio" target="_blank"> Crowdin έργο</a>.
+The website is translated by volunteers using a collaborative translation platform.
+You can contribute by adding or improving translations on our <a href="https://crowdin.com/project/gpxstudio" target="_blank">Crowdin project</a>.
 
-Αν θέλετε να ξεκινήσετε μετάφραση μιας νέας γλώσσας, παρακαλώ <a href="#contact">επικοινωνήστε μαζί μας<a href="#contact">.
+If you would like to start translating into a new language, please <a href="#contact">get in touch</a>.
 
-Οποιαδήποτε βοήθεια εκτιμάται ιδιαίτερα!
+Any help is greatly appreciated!

website/src/lib/docs/el/integration.mdx

@@ -13,8 +13,8 @@ You can use **gpx.studio** to create maps showing your GPX files and embed them
 
 All you need is:
 
-1. GPX files hosted on your server or on Google Drive, or accessible via a public URL;
-2. _Optional:_ a <a href="https://cloud.maptiler.com/auth/widget?next=https://cloud.maptiler.com/maps/" target="_blank">MapTiler key</a> to load MapTiler maps.
+1. A <a href="https://account.mapbox.com/auth/signup" target="_blank">Mapbox access token</a> to load the map, and
+2. GPX files hosted on your server or on Google Drive, or accessible via a public URL.
 
 You can then play with the configurator below to customize your map and generate the corresponding HTML code.
 

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

@@ -56,12 +56,10 @@ The map layers button allows you to switch between different basemaps, and toggl
 - **Points of interest** can be added to the map to show different categories of places, such as shops, restaurants, or accommodations.
 
 <div class="flex flex-col items-center">
-<DocsLayers />
-<span class="text-sm text-center mt-2">
-
-Hover over the map to show the <a href="https://hiking.waymarkedtrails.org" target="_blank">Waymarked Trails hiking</a> overlay on top of the <a href="https://www.maptiler.com/maps/outdoor-topo/" target="_blank">MapTiler Topo</a> basemap.
-
-</span>
+    <DocsLayers />
+    <span class="text-sm text-center mt-2">
+        Hover over the map to show the <a href="https://hiking.waymarkedtrails.org" target="_blank">Waymarked Trails hiking</a> overlay on top of the <a href="https://www.mapbox.com/maps/outdoors" target="_blank">Mapbox Outdoors</a> basemap.
+    </span>
 </div>
 
 A large collection of global and local basemaps and overlays is available in **gpx.studio**, as well as a selection of point-of-interest categories.
@@ -69,4 +67,4 @@ They can be enabled in the [map layer settings dialog](./menu/settings).
 
 In these settings, you can also manage the opacity of the overlays.
 
-For advanced users, it is possible to add custom basemaps and overlays by providing <a href="https://en.wikipedia.org/wiki/Web_Map_Tile_Service" target="_blank">WMTS</a>, <a href="https://en.wikipedia.org/wiki/Web_Map_Service" target="_blank">WMS</a>, or <a href="https://maplibre.org/maplibre-style-spec/" target="_blank">MapLibre style JSON</a> URLs.
+For advanced users, it is possible to add custom basemaps and overlays by providing <a href="https://en.wikipedia.org/wiki/Web_Map_Tile_Service" target="_blank">WMTS</a>, <a href="https://en.wikipedia.org/wiki/Web_Map_Service" target="_blank">WMS</a>, or <a href="https://docs.mapbox.com/help/glossary/style/" target="_blank">Mapbox style JSON</a> URLs.

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

@@ -28,9 +28,9 @@ Change the language used in the interface.
 
 <DocsNote>
 
-Μπορείτε να συνεισφέρετε προσθέτοντας ή βελτιώνοντας μεταφράσεις στο <a href="https://crowdin.com/project/gpxstudio" target="_blank"> Crowdin έργο</a>.
-Αν θέλετε να ξεκινήσετε μετάφραση μιας νέας γλώσσας, παρακαλώ <a href="#contact">επικοινωνήστε μαζί μας<a href="#contact">.
-Οποιαδήποτε βοήθεια εκτιμάται ιδιαίτερα!
+You can contribute by adding or improving translations on our <a href="https://crowdin.com/project/gpxstudio" target="_blank">Crowdin project</a>.
+If you would like to start translating into a new language, please <a href="#contact">get in touch</a>.
+Any help is greatly appreciated!
 
 </DocsNote>
 

website/src/lib/docs/el/toolbar/clean.mdx

@@ -1,5 +1,5 @@
 ---
-title: Καθαρισμός
+title: Clean
 ---
 
 <script>
@@ -9,9 +9,9 @@ title: Καθαρισμός
 
 # <SquareDashedMousePointer size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
 
-Όταν επιλεχθεί το εργαλείο καθαρισμού, σέρνοντας το χάρτη δημιουργείται μια ορθογώνια επιλογή.
+When the clean tool is selected, dragging the map will create a rectangular selection.
 
-Ανάλογα με τις επιλεγμένες ρυθμίσεις στο παράθυρο παρακάτω, πατώντας το κουμπί διαγραφής θα αφαιρεθούν σημεία GPS και/ή [σημεία ενδιαφέροντος](../gpx) που βρίσκονται είτε μέσα είτε έξω από την επιλογή.
+Depending on the options selected in the dialog shown below, clicking the delete button will remove GPS points and/or [points of interest](../gpx) located either inside or outside the selection.
 
 <div class="flex flex-row justify-center">
     <Clean class="text-foreground p-3 border rounded-md shadow-lg" />

website/src/lib/docs/el/toolbar/elevation.mdx

@@ -18,7 +18,7 @@ This tool allows you to add elevation data to traces and [points of interest](..
 
 <DocsNote>
 
-Elevation data is provided by <a href="https://maptiler.com" target="_blank">MapTiler</a>.
-You can learn more about its origin and accuracy in the <a href="https://docs.maptiler.com/guides/map-tiling-hosting/data-hosting/rgb-terrain-by-maptiler/" target="_blank">documentation</a>.
+Elevation data is provided by <a href="https://mapbox.com" target="_blank">Mapbox</a>.
+You can learn more about its origin and accuracy in the <a href="https://docs.mapbox.com/data/tilesets/reference/mapbox-terrain-dem-v1/#elevation-data" target="_blank">documentation</a>.
 
 </DocsNote>

website/src/lib/docs/el/toolbar/merge.mdx

@@ -5,7 +5,6 @@ title: Merge
 <script>
     import { Group } from '@lucide/svelte';
     import Merge from '$lib/components/toolbar/tools/Merge.svelte';
-    import DocsNote from '$lib/components/docs/DocsNote.svelte';
 </script>
 
 # <Group size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
@@ -16,13 +15,6 @@ To use this tool, you need to [select](../files-and-stats) multiple files, [trac
 - The second option can be used to create or manage files with multiple [tracks or segments](../gpx).
   Merging files (or tracks) will result in a single file (or track) containing all tracks (or segments) from the selection.
 
-<DocsNote>
-
-Selected items are merged in the order they appear in the files list.
-Reorder items by drag-and-drop if needed.
-
-</DocsNote>
-
 <div class="flex flex-row justify-center">
     <Merge class="text-foreground p-3 border rounded-md shadow-lg" />
 </div>

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

@@ -12,7 +12,6 @@ title: Archivos y estadísticas
 
     let gpxStatistics = writable(exampleGPXFile.getStatistics());
     let slicedGPXStatistics = writable(undefined);
-    let hoveredPoint = writable(null);
     let additionalDatasets = writable(['speed', 'atemp']);
     let elevationFill = writable(undefined);
 </script>
@@ -85,17 +84,19 @@ Puede usar el ratón para acercar o alejar el perfil de elevación y moverse hac
     <ElevationProfile
         {gpxStatistics}
         {slicedGPXStatistics}
-        {hoveredPoint}
         {additionalDatasets}
         {elevationFill}
     />
 </div>
-<div class="flex flex-col items-center w-full">
+<div class="flex flex-col items-center -mt-6">
+    <div class="h-10 w-fit">
         <GPXStatistics
             {gpxStatistics}
             {slicedGPXStatistics}
+            panelSize={120}
             orientation={'horizontal'}
         />
+    </div>
 </div>
 
 ### Datos adicionales

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

@@ -5,7 +5,7 @@
 ## <HeartHandshake size="18" class="inline-block align-baseline" /> Ayude a mantener este sitio gratis (y libre de anuncios)
 
 Cada vez que añade o mueve puntos GPS, nuestros servidores calculan la mejor ruta en la red de carreteras.
-We also use APIs from <a href="https://maptiler.com" target="_blank">MapTiler</a> to display beautiful maps, retrieve elevation data and allow you to search for places.
+También usamos APIs de <a href="https://mapbox.com" target="_blank">Mapbox</a> para mostrar hermosos mapas, obtener datos de elevación y permitirle buscar lugares.
 
 Por desgracia, esto tiene un coste económico.
 Si disfruta usando esta herramienta y la encuentra valiosa, por favor considere hacer una pequeña donación para ayudar a mantener este sitio gratis y libre de anuncios.

website/src/lib/docs/es/integration.mdx

@@ -13,8 +13,8 @@ Puede usar **gpx.studio** para crear mapas que muestren sus archivos GPX e integ
 
 Todo lo que necesita es:
 
-1. GPX files hosted on your server or on Google Drive, or accessible via a public URL;
-2. _Optional:_ a <a href="https://cloud.maptiler.com/auth/widget?next=https://cloud.maptiler.com/maps/" target="_blank">MapTiler key</a> to load MapTiler maps.
+1. Un <a href="https://account.mapbox.com/auth/signup" target="_blank">token de acceso a Mapbox</a> para cargar el mapa, y
+2. Archivos GPX alojados en su servidor, en Google Drive o accesibles a través de una URL pública.
 
 Luego puede jugar con el configurador de abajo para personalizar su mapa y generar el código HTML correspondiente.
 

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

@@ -56,12 +56,10 @@ El botón de capas de mapa le permite cambiar entre diferentes mapas bases y alt
 - Los **puntos de interés** se pueden añadir al mapa para mostrar diferentes categorías de lugares, como tiendas, restaurantes o alojamientos.
 
 <div class="flex flex-col items-center">
-<DocsLayers />
-<span class="text-sm text-center mt-2">
-
-Pasa el ratón sobre el mapa para que la capa de <a href="https://hiking.waymarkedtrails.org" target="_blank">Caminatas por Sendas Marcadas</a> aparezca superpuesta al mapa base <a href="https://www.maptiler.com/maps/outdoor-topo/" target="_blank">MapTiler</a>.
-
-</span>
+    <DocsLayers />
+    <span class="text-sm text-center mt-2">
+        Sitúe el cursor sobre el mapa para mostrar la capa <a href="https://hiking.waymarkedtrails.org" target="_blank">Rutas Señalizadas de senderismo</a> sobre el mapa base <a href="https://www.mapbox.com/maps/outdoors" target="_blank">Mapbox Exteriores</a>.
+    </span>
 </div>
 
 Una gran colección de mapas y capas superpuestas globales y locales está disponible en **gpx.studio**, así como una selección de categorías de puntos de interés.
@@ -69,4 +67,4 @@ Pueden activarse en la [configuración de capas del mapa](./menu/settings).
 
 En estos ajustes, también puede administrar la opacidad de las capas superpuestas.
 
-For advanced users, it is possible to add custom basemaps and overlays by providing <a href="https://en.wikipedia.org/wiki/Web_Map_Tile_Service" target="_blank">WMTS</a>, <a href="https://en.wikipedia.org/wiki/Web_Map_Service" target="_blank">WMS</a>, or <a href="https://maplibre.org/maplibre-style-spec/" target="_blank">MapLibre style JSON</a> URLs.
+Para los usuarios avanzados, es posible añadir mapas base y superposiciones personalizadas proporcionando <a href="https://en.wikipedia.org/wiki/Web_Map_Tile_Service" target="_blank">WMTS</a>, <a href="https://en.wikipedia.org/wiki/Web_Map_Service" target="_blank">WMS</a> o URLs <a href="https://docs.mapbox.com/help/glossary/style/" target="_blank">JSON estilo Mapbox</a>.

website/src/lib/docs/es/toolbar/elevation.mdx

@@ -18,7 +18,7 @@ Le permite añadir datos de desnivel a trazas y [puntos de interés](../gpx), o
 
 <DocsNote>
 
-Elevation data is provided by <a href="https://maptiler.com" target="_blank">MapTiler</a>.
-You can learn more about its origin and accuracy in the <a href="https://docs.maptiler.com/guides/map-tiling-hosting/data-hosting/rgb-terrain-by-maptiler/" target="_blank">documentation</a>.
+Los datos de desnivel son proporcionados por <a href="https://mapbox.com" target="_blank">Mapbox</a>.
+Puede aprender más sobre su origen y precisión en la <a href="https://docs.mapbox.com/data/tilesets/reference/mapbox-terrain-dem-v1/#elevation-data" target="_blank">documentación</a>.
 
 </DocsNote>

website/src/lib/docs/es/toolbar/merge.mdx

@@ -5,7 +5,6 @@ title: Combinar
 <script>
     import { Group } from '@lucide/svelte';
     import Merge from '$lib/components/toolbar/tools/Merge.svelte';
-    import DocsNote from '$lib/components/docs/DocsNote.svelte';
 </script>
 
 # <Group size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
@@ -16,13 +15,6 @@ Para usar esta herramienta, necesita [seleccionar](../files-and-stats) múltiple
 - La segunda opción se puede usar para crear o gestionar archivos con múltiples [pistas o segmentos](../gpx).
   Combinar archivos (o pistas) dará como resultado un único archivo (o pista) que contendrá todas las pistas (o segmentos) de la selección.
 
-<DocsNote>
-
-Selected items are merged in the order they appear in the files list.
-Reorder items by drag-and-drop if needed.
-
-</DocsNote>
-
 <div class="flex flex-row justify-center">
     <Merge class="text-foreground p-3 border rounded-md shadow-lg" />
 </div>

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

@@ -12,7 +12,6 @@ title: Fitxategiak eta estatistikak
 
     let gpxStatistics = writable(exampleGPXFile.getStatistics());
     let slicedGPXStatistics = writable(undefined);
-    let hoveredPoint = writable(null);
     let additionalDatasets = writable(['speed', 'atemp']);
     let elevationFill = writable(undefined);
 </script>
@@ -84,17 +83,19 @@ Saguaren gurpila ere erabil dezakezu altueren profila handitzeko eta mugitzeko e
     <ElevationProfile
         {gpxStatistics}
         {slicedGPXStatistics}
-        {hoveredPoint}
         {additionalDatasets}
         {elevationFill}
     />
 </div>
-<div class="flex flex-col items-center w-full">
+<div class="flex flex-col items-center -mt-6">
+    <div class="h-10 w-fit">
         <GPXStatistics
             {gpxStatistics}
             {slicedGPXStatistics}
+            panelSize={120}
             orientation={'horizontal'}
         />
+    </div>
 </div>
 
 ### Datu osagarriak

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

@@ -4,8 +4,7 @@
 
 ## <HeartHandshake size="18" class="inline-block align-baseline" /> Lagundu mantentzen webgunea doan (eta propagandarik gabe)
 
-GPS puntuak gehitzen edo mugitzen dituzun bakoitzean, gure zerbitzariek bide sareko ibilbide onena kalkulatzen dute.
-We also use APIs from <a href="https://maptiler.com" target="_blank">MapTiler</a> to display beautiful maps, retrieve elevation data and allow you to search for places.
+GPS puntuak gehitzen edo mugitzen dituzun bakoitzean, gure zerbitzariek bide sareko ibilbide onena kalkulatzen dute.<a href="https://mapbox.com" target="_blank">Mapbox</a>en APIak erabiltzen ditugu erakusteko mapa argiak, kota-datuak eskaintzeko eta ahalbidetzeko lekuen bilaketa.
 
 Tamalez, hau garestia da.
 Tresna hau erabiltzen baduzu eta baliotsua suertatzen bazaizu, kontuan hartu dohaintza txiki bat egitea webgunea doakoa eta iragarkirik gabe mantentzen laguntzeko.

website/src/lib/docs/eu/integration.mdx

@@ -13,8 +13,8 @@ title: Integrazioa
 
 Behar duzun guztia hau da:
 
-1. GPX files hosted on your server or on Google Drive, or accessible via a public URL;
-2. _Optional:_ a <a href="https://cloud.maptiler.com/auth/widget?next=https://cloud.maptiler.com/maps/" target="_blank">MapTiler key</a> to load MapTiler maps.
+1. <a href="https://account.mapbox.com/auth/signup" target="_blank">Mapbox sarbiderako tokena</a> mapa kargatzeko, eta
+2. GPX fitxategiak zure zerbitzarian, hodeian, Google Drive-n edo eskuragarri URL publiko baten bidez.
 
 Ondoren, konfiguratzailearekin jolastu dezakezu zure mapa pertsonalizatzeko eta dagokion HTML kodea sortzeko.
 

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

@@ -56,12 +56,10 @@ Maparen geruzen botoiak mapa-oinarri desberdinen artean aldatzeko aukera ematen
 - **Interesguneak** mapan gehitu daiteke leku kategoria desberdinak erakusteko, hala nola dendak, jatetxeak edo ostatuak.
 
 <div class="flex flex-col items-center">
-<DocsLayers />
-<span class="text-sm text-center mt-2">
-
-Hover over the map to show the <a href="https://hiking.waymarkedtrails.org" target="_blank">Waymarked Trails hiking</a> overlay on top of the <a href="https://www.maptiler.com/maps/outdoor-topo/" target="_blank">MapTiler Topo</a> basemap.
-
-</span>
+    <DocsLayers />
+    <span class="text-sm text-center mt-2">
+        Pasa maparen gainetik <a href="https://hiking.waymarkedtrails.org" target="_blank">mendiko bideak</a> ikusteko <a href="https://www.mapbox.com/maps/outdoors" target="_blank">Mapbox Outdoors</a> mapa oinarriaren gainean.
+    </span>
 </div>
 
 Global eta tokiko mapa oinarri bilduma handia dago **gpx.studio**-n eskuragarri, bai eta interesguneen kategorien aukeraketa ere.
@@ -69,4 +67,4 @@ Global eta tokiko mapa oinarri bilduma handia dago **gpx.studio**-n eskuragarri,
 
 Ezarpen horietan, gainjartzeen opakutasuna ere kudeatu dezakezu.
 
-For advanced users, it is possible to add custom basemaps and overlays by providing <a href="https://en.wikipedia.org/wiki/Web_Map_Tile_Service" target="_blank">WMTS</a>, <a href="https://en.wikipedia.org/wiki/Web_Map_Service" target="_blank">WMS</a>, or <a href="https://maplibre.org/maplibre-style-spec/" target="_blank">MapLibre style JSON</a> URLs.
+Erabiltzaile aurreratuetarako, mapa oinarri pertsonalizatuak gehitu daitezke <a href="https://en.wikipedia.org/wiki/Web_Map_Tile_Service" target="_blank"> WMTS</a>, <a href="https://en.wikipedia.org/wiki/Web_Map_Service" target="_blank">WMS</a>, edo <a href="https://docs.mapbox.com/help/glossary/style/" target="_blank">Mapbox Style Json</a> URLak gehituz.

website/src/lib/docs/eu/toolbar/elevation.mdx

@@ -18,7 +18,7 @@ Tresna honen bidez elebazio datuak gehitzen ahal dira ibilbidetan eta [interesgu
 
 <DocsNote>
 
-Elevation data is provided by <a href="https://maptiler.com" target="_blank">MapTiler</a>.
-You can learn more about its origin and accuracy in the <a href="https://docs.maptiler.com/guides/map-tiling-hosting/data-hosting/rgb-terrain-by-maptiler/" target="_blank">documentation</a>.
+Altuera datuen iturria <a href="https://mapbox.com" target="_blank">Mapbox</a> da.
+Hauen jatorriaz edo xehetasunez informazio gehiago <a href="https://docs.mapbox.com/data/tilesets/reference/mapbox-terrain-dem-v1/#elevation-data" target="_blank">dokumentazioan</a>.
 
 </DocsNote>

website/src/lib/docs/eu/toolbar/merge.mdx

@@ -5,7 +5,6 @@ title: Batu
 <script>
     import { Group } from '@lucide/svelte';
     import Merge from '$lib/components/toolbar/tools/Merge.svelte';
-    import DocsNote from '$lib/components/docs/DocsNote.svelte';
 </script>
 
 # <Group size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
@@ -16,13 +15,6 @@ Tresna hau erabiltzeko [hautatu](../files-and-stats) behar duzu hainbat fitxateg
 - Bigarren aukera bat izan daiteke hainbat [arrasto edo segmentu](../gpx) biltzen duen fitxategiak sortzea edo kudeatzea.
   Fitxategiak (edo arrastoak) batzearen emaitza fitxategi (edo arrasto) bakarra sortzea da zeinak hautapenaren arrastoak (edo segmentuak) biltzen duena.
 
-<DocsNote>
-
-Selected items are merged in the order they appear in the files list.
-Reorder items by drag-and-drop if needed.
-
-</DocsNote>
-
 <div class="flex flex-row justify-center">
     <Merge class="text-foreground p-3 border rounded-md shadow-lg" />
 </div>

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

@@ -12,7 +12,6 @@ title: Files and statistics
 
     let gpxStatistics = writable(exampleGPXFile.getStatistics());
     let slicedGPXStatistics = writable(undefined);
-    let hoveredPoint = writable(null);
     let additionalDatasets = writable(['speed', 'atemp']);
     let elevationFill = writable(undefined);
 </script>
@@ -85,17 +84,19 @@ You can also use the mouse wheel to zoom in and out on the elevation profile, an
     <ElevationProfile
         {gpxStatistics}
         {slicedGPXStatistics}
-        {hoveredPoint}
         {additionalDatasets}
         {elevationFill}
     />
 </div>
-<div class="flex flex-col items-center w-full">
+<div class="flex flex-col items-center -mt-6">
+    <div class="h-10 w-fit">
         <GPXStatistics
             {gpxStatistics}
             {slicedGPXStatistics}
+            panelSize={120}
             orientation={'horizontal'}
         />
+    </div>
 </div>
 
 ### Additional data

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

@@ -5,7 +5,7 @@
 ## <HeartHandshake size="18" class="inline-block align-baseline" /> Help keep the website free (and ad-free)
 
 Each time you add or move GPS points, our servers calculate the best route on the road network.
-We also use APIs from <a href="https://maptiler.com" target="_blank">MapTiler</a> to display beautiful maps, retrieve elevation data and allow you to search for places.
+We also use APIs from <a href="https://mapbox.com" target="_blank">Mapbox</a> to display beautiful maps, retrieve elevation data and allow you to search for places.
 
 Unfortunately, this is expensive.
 If you enjoy using this tool and find it valuable, please consider making a small donation to help keep the website free and ad-free.

website/src/lib/docs/fi/integration.mdx

@@ -13,8 +13,8 @@ You can use **gpx.studio** to create maps showing your GPX files and embed them
 
 All you need is:
 
-1. GPX files hosted on your server or on Google Drive, or accessible via a public URL;
-2. _Optional:_ a <a href="https://cloud.maptiler.com/auth/widget?next=https://cloud.maptiler.com/maps/" target="_blank">MapTiler key</a> to load MapTiler maps.
+1. A <a href="https://account.mapbox.com/auth/signup" target="_blank">Mapbox access token</a> to load the map, and
+2. GPX files hosted on your server or on Google Drive, or accessible via a public URL.
 
 You can then play with the configurator below to customize your map and generate the corresponding HTML code.
 

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

@@ -56,12 +56,10 @@ The map layers button allows you to switch between different basemaps, and toggl
 - **Points of interest** can be added to the map to show different categories of places, such as shops, restaurants, or accommodations.
 
 <div class="flex flex-col items-center">
-<DocsLayers />
-<span class="text-sm text-center mt-2">
-
-Hover over the map to show the <a href="https://hiking.waymarkedtrails.org" target="_blank">Waymarked Trails hiking</a> overlay on top of the <a href="https://www.maptiler.com/maps/outdoor-topo/" target="_blank">MapTiler Topo</a> basemap.
-
-</span>
+    <DocsLayers />
+    <span class="text-sm text-center mt-2">
+        Hover over the map to show the <a href="https://hiking.waymarkedtrails.org" target="_blank">Waymarked Trails hiking</a> overlay on top of the <a href="https://www.mapbox.com/maps/outdoors" target="_blank">Mapbox Outdoors</a> basemap.
+    </span>
 </div>
 
 A large collection of global and local basemaps and overlays is available in **gpx.studio**, as well as a selection of point-of-interest categories.
@@ -69,4 +67,4 @@ They can be enabled in the [map layer settings dialog](./menu/settings).
 
 In these settings, you can also manage the opacity of the overlays.
 
-For advanced users, it is possible to add custom basemaps and overlays by providing <a href="https://en.wikipedia.org/wiki/Web_Map_Tile_Service" target="_blank">WMTS</a>, <a href="https://en.wikipedia.org/wiki/Web_Map_Service" target="_blank">WMS</a>, or <a href="https://maplibre.org/maplibre-style-spec/" target="_blank">MapLibre style JSON</a> URLs.
+For advanced users, it is possible to add custom basemaps and overlays by providing <a href="https://en.wikipedia.org/wiki/Web_Map_Tile_Service" target="_blank">WMTS</a>, <a href="https://en.wikipedia.org/wiki/Web_Map_Service" target="_blank">WMS</a>, or <a href="https://docs.mapbox.com/help/glossary/style/" target="_blank">Mapbox style JSON</a> URLs.

website/src/lib/docs/fi/toolbar/elevation.mdx

@@ -18,7 +18,7 @@ This tool allows you to add elevation data to traces and [points of interest](..
 
 <DocsNote>
 
-Elevation data is provided by <a href="https://maptiler.com" target="_blank">MapTiler</a>.
-You can learn more about its origin and accuracy in the <a href="https://docs.maptiler.com/guides/map-tiling-hosting/data-hosting/rgb-terrain-by-maptiler/" target="_blank">documentation</a>.
+Elevation data is provided by <a href="https://mapbox.com" target="_blank">Mapbox</a>.
+You can learn more about its origin and accuracy in the <a href="https://docs.mapbox.com/data/tilesets/reference/mapbox-terrain-dem-v1/#elevation-data" target="_blank">documentation</a>.
 
 </DocsNote>

website/src/lib/docs/fi/toolbar/merge.mdx

@@ -5,7 +5,6 @@ title: Merge
 <script>
     import { Group } from '@lucide/svelte';
     import Merge from '$lib/components/toolbar/tools/Merge.svelte';
-    import DocsNote from '$lib/components/docs/DocsNote.svelte';
 </script>
 
 # <Group size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
@@ -16,13 +15,6 @@ To use this tool, you need to [select](../files-and-stats) multiple files, [trac
 - The second option can be used to create or manage files with multiple [tracks or segments](../gpx).
   Merging files (or tracks) will result in a single file (or track) containing all tracks (or segments) from the selection.
 
-<DocsNote>
-
-Selected items are merged in the order they appear in the files list.
-Reorder items by drag-and-drop if needed.
-
-</DocsNote>
-
 <div class="flex flex-row justify-center">
     <Merge class="text-foreground p-3 border rounded-md shadow-lg" />
 </div>

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

@@ -12,7 +12,6 @@ title: Fichiers et statistiques
 
     let gpxStatistics = writable(exampleGPXFile.getStatistics());
     let slicedGPXStatistics = writable(undefined);
-    let hoveredPoint = writable(null);
     let additionalDatasets = writable(['speed', 'atemp']);
     let elevationFill = writable(undefined);
 </script>
@@ -85,17 +84,19 @@ Vous pouvez également utiliser la molette de la souris pour zoomer ou dézoomer
     <ElevationProfile
         {gpxStatistics}
         {slicedGPXStatistics}
-        {hoveredPoint}
         {additionalDatasets}
         {elevationFill}
     />
 </div>
-<div class="flex flex-col items-center w-full">
+<div class="flex flex-col items-center -mt-6">
+    <div class="h-10 w-fit">
         <GPXStatistics
             {gpxStatistics}
             {slicedGPXStatistics}
+            panelSize={120}
             orientation={'horizontal'}
         />
+    </div>
 </div>
 
 ### Données supplémentaires

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

@@ -5,7 +5,7 @@
 ## <HeartHandshake size="18" class="inline-block align-baseline" /> Aidez à garder le site gratuit (et sans pub)
 
 Chaque fois que vous ajoutez ou déplacez des points GPS, nos serveurs calculent le meilleur itinéraire sur le réseau routier.
-We also use APIs from <a href="https://maptiler.com" target="_blank">MapTiler</a> to display beautiful maps, retrieve elevation data and allow you to search for places.
+Nous utilisons également des services de <a href="https://mapbox.com" target="_blank">Mapbox</a> pour afficher de magnifiques cartes, récupérer des données d'altitude et vous permettre de rechercher des adresses.
 
 Malheureusement, cela est coûteux.
 Si vous aimez utiliser cet outil et le trouvez utile, veuillez envisager de faire même un petit don pour aider à garder le site gratuit et sans pub.

website/src/lib/docs/fr/integration.mdx

@@ -13,8 +13,8 @@ Vous pouvez utiliser **gpx.studio** pour créer des cartes affichant vos fichier
 
 Tout ce dont vous avez besoin est :
 
-1. Un ou plusieurs fichiers GPX hébergés sur votre serveur ou sur Google Drive, ou accessibles via une URL publique ;
-2. _Optionnel :_ une <a href="https://cloud.maptiler.com/auth/widget?next=https://cloud.maptiler.com/maps/" target="_blank">clé MapTiler</a> pour afficher les cartes MapTiler.
+1. Un <a href="https://account.mapbox.com/auth/signup" target="_blank">jeton d'accès Mapbox</a> pour charger la carte, et
+2. Un ou plusieurs fichiers GPX hébergés sur votre serveur ou sur Google Drive, ou accessibles via une URL publique.
 
 Vous pouvez ensuite jouer avec le configurateur ci-dessous pour personnaliser votre carte et générer le code HTML correspondant.
 

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

@@ -56,12 +56,10 @@ Le bouton des couches de la carte vous permet de basculer entre différents fond
 - Les **points d'intérêt** peuvent être ajoutés à la carte pour montrer différentes catégories d'endroits, comme les magasins, les restaurants ou les hébergements.
 
 <div class="flex flex-col items-center">
-<DocsLayers />
-<span class="text-sm text-center mt-2">
-
-Survolez la carte pour afficher la superposition des chemins de randonnée <a href="https://hiking.waymarkedtrails.org" target="_blank">Waymarked Trails</a> au fond de carte <a href="https://www.maptiler.com/maps/outdoor-topo/" target="_blank">MapTiler Topo</a>.
-
-</span>
+    <DocsLayers />
+    <span class="text-sm text-center mt-2">
+        Survolez la carte pour afficher la surcouche <a href="https://hiking.waymarkedtrails.org" target="_blank">Waymarked Trails Randonnée</a> par-dessus le fond de carte <a href="https://www.mapbox.com/maps/outdoors" target="_blank">Mapbox Outdoors</a>.
+    </span>
 </div>
 
 Une grande collection de fonds de carte et de surcouches mondiales et locales est disponible dans **gpx.studio**, ainsi qu'une sélection de catégories de points d'intérêt.
@@ -69,4 +67,4 @@ Ceux-ci peuvent être activés dans la [fenêtre de configuration des couches de
 
 Dans ces paramètres, vous pouvez également gérer l'opacité des surcouches.
 
-Pour les utilisateurs expérimentés, il est possible d'ajouter des fonds de carte et des surcouches personnalisés en fournissant des URLs <a href="https://en.wikipedia.org/wiki/Web_Map_Tile_Service" target="_blank">WMTS</a>, <a href="https://en.wikipedia.org/wiki/Web_Map_Service" target="_blank">WMS</a>, ou <a href="https://maplibre.org/maplibre-style-spec/" target="_blank">MapLibre style JSON</a>.
+Pour les utilisateurs expérimentés, il est possible d'ajouter des fonds de carte et des surcouches personnalisés en fournissant des URLs <a href="https://en.wikipedia.org/wiki/Web_Map_Tile_Service" target="_blank">WMTS</a>, <a href="https://en.wikipedia.org/wiki/Web_Map_Service" target="_blank">WMS</a>, ou <a href="https://docs.mapbox.com/help/glossary/style/" target="_blank">Mapbox style JSON</a>.

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

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

website/src/lib/docs/fr/toolbar/elevation.mdx

@@ -18,7 +18,7 @@ Cet outil vous permet d'ajouter des données d'altitude aux traces et aux [point
 
 <DocsNote>
 
-Les données d'altitude sont fournies par <a href="https://maptiler.com" target="_blank">MapTiler</a>.
-Vous pouvez en apprendre plus sur leur origine et précision dans la <a href="https://docs.maptiler.com/guides/map-tiling-hosting/data-hosting/rgb-terrain-by-maptiler/" target="_blank">documentation</a>.
+Les données d'altitude sont fournies par <a href="https://mapbox.com" target="_blank">Mapbox</a>.
+Vous pouvez en apprendre plus sur leur origine et précision dans la <a href="https://docs.mapbox.com/data/tilesets/reference/mapbox-terrain-dem-v1/#elevation-data" target="_blank">documentation</a>.
 
 </DocsNote>

website/src/lib/docs/fr/toolbar/merge.mdx

@@ -5,7 +5,6 @@ title: Fusionner
 <script>
     import { Group } from '@lucide/svelte';
     import Merge from '$lib/components/toolbar/tools/Merge.svelte';
-    import DocsNote from '$lib/components/docs/DocsNote.svelte';
 </script>
 
 # <Group size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
@@ -16,13 +15,6 @@ Pour utiliser cet outil, vous devez [sélectionner](../files-and-stats) plusieur
 - La deuxième option peut être utilisée pour créer ou gérer des fichiers avec plusieurs [pistes ou segments](../gpx).
   Fusionner des fichiers (ou des pistes) résultera en un seul fichier (ou piste) contenant toutes les pistes (ou tous les segments) de la sélection.
 
-<DocsNote>
-
-Les éléments sélectionnés sont fusionnés dans l'ordre dans lequel ils apparaissent dans la liste des fichiers.
-Vous pouvez réordonner les éléments par glisser-déposer si besoin.
-
-</DocsNote>
-
 <div class="flex flex-row justify-center">
     <Merge class="text-foreground p-3 border rounded-md shadow-lg" />
 </div>

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

@@ -12,7 +12,6 @@ title: Files and statistics
 
     let gpxStatistics = writable(exampleGPXFile.getStatistics());
     let slicedGPXStatistics = writable(undefined);
-    let hoveredPoint = writable(null);
     let additionalDatasets = writable(['speed', 'atemp']);
     let elevationFill = writable(undefined);
 </script>
@@ -85,17 +84,19 @@ You can also use the mouse wheel to zoom in and out on the elevation profile, an
     <ElevationProfile
         {gpxStatistics}
         {slicedGPXStatistics}
-        {hoveredPoint}
         {additionalDatasets}
         {elevationFill}
     />
 </div>
-<div class="flex flex-col items-center w-full">
+<div class="flex flex-col items-center -mt-6">
+    <div class="h-10 w-fit">
         <GPXStatistics
             {gpxStatistics}
             {slicedGPXStatistics}
+            panelSize={120}
             orientation={'horizontal'}
         />
+    </div>
 </div>
 
 ### Additional data

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

@@ -5,7 +5,7 @@
 ## <HeartHandshake size="18" class="inline-block align-baseline" /> Help keep the website free (and ad-free)
 
 בכל פעם שאתה מוסיף או מעביר נקודות GPS, השרתים שלנו מחשבים את המסלול הטוב ביותר ברשת הדרכים.
-We also use APIs from <a href="https://maptiler.com" target="_blank">MapTiler</a> to display beautiful maps, retrieve elevation data and allow you to search for places.
+We also use APIs from <a href="https://mapbox.com" target="_blank">Mapbox</a> to display beautiful maps, retrieve elevation data and allow you to search for places.
 
 Unfortunately, this is expensive.
 If you enjoy using this tool and find it valuable, please consider making a small donation to help keep the website free and ad-free.

website/src/lib/docs/he/integration.mdx

@@ -13,8 +13,8 @@ You can use **gpx.studio** to create maps showing your GPX files and embed them
 
 All you need is:
 
-1. GPX files hosted on your server or on Google Drive, or accessible via a public URL;
-2. _Optional:_ a <a href="https://cloud.maptiler.com/auth/widget?next=https://cloud.maptiler.com/maps/" target="_blank">MapTiler key</a> to load MapTiler maps.
+1. A <a href="https://account.mapbox.com/auth/signup" target="_blank">Mapbox access token</a> to load the map, and
+2. GPX files hosted on your server or on Google Drive, or accessible via a public URL.
 
 You can then play with the configurator below to customize your map and generate the corresponding HTML code.
 

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

@@ -56,12 +56,10 @@ The map layers button allows you to switch between different basemaps, and toggl
 - **Points of interest** can be added to the map to show different categories of places, such as shops, restaurants, or accommodations.
 
 <div class="flex flex-col items-center">
-<DocsLayers />
-<span class="text-sm text-center mt-2">
-
-Hover over the map to show the <a href="https://hiking.waymarkedtrails.org" target="_blank">Waymarked Trails hiking</a> overlay on top of the <a href="https://www.maptiler.com/maps/outdoor-topo/" target="_blank">MapTiler Topo</a> basemap.
-
-</span>
+    <DocsLayers />
+    <span class="text-sm text-center mt-2">
+        Hover over the map to show the <a href="https://hiking.waymarkedtrails.org" target="_blank">Waymarked Trails hiking</a> overlay on top of the <a href="https://www.mapbox.com/maps/outdoors" target="_blank">Mapbox Outdoors</a> basemap.
+    </span>
 </div>
 
 A large collection of global and local basemaps and overlays is available in **gpx.studio**, as well as a selection of point-of-interest categories.
@@ -69,4 +67,4 @@ They can be enabled in the [map layer settings dialog](./menu/settings).
 
 In these settings, you can also manage the opacity of the overlays.
 
-For advanced users, it is possible to add custom basemaps and overlays by providing <a href="https://en.wikipedia.org/wiki/Web_Map_Tile_Service" target="_blank">WMTS</a>, <a href="https://en.wikipedia.org/wiki/Web_Map_Service" target="_blank">WMS</a>, or <a href="https://maplibre.org/maplibre-style-spec/" target="_blank">MapLibre style JSON</a> URLs.
+For advanced users, it is possible to add custom basemaps and overlays by providing <a href="https://en.wikipedia.org/wiki/Web_Map_Tile_Service" target="_blank">WMTS</a>, <a href="https://en.wikipedia.org/wiki/Web_Map_Service" target="_blank">WMS</a>, or <a href="https://docs.mapbox.com/help/glossary/style/" target="_blank">Mapbox style JSON</a> URLs.

website/src/lib/docs/he/toolbar/elevation.mdx

@@ -18,7 +18,7 @@ This tool allows you to add elevation data to traces and [points of interest](..
 
 <DocsNote>
 
-Elevation data is provided by <a href="https://maptiler.com" target="_blank">MapTiler</a>.
-You can learn more about its origin and accuracy in the <a href="https://docs.maptiler.com/guides/map-tiling-hosting/data-hosting/rgb-terrain-by-maptiler/" target="_blank">documentation</a>.
+Elevation data is provided by <a href="https://mapbox.com" target="_blank">Mapbox</a>.
+You can learn more about its origin and accuracy in the <a href="https://docs.mapbox.com/data/tilesets/reference/mapbox-terrain-dem-v1/#elevation-data" target="_blank">documentation</a>.
 
 </DocsNote>

website/src/lib/docs/he/toolbar/merge.mdx

@@ -5,7 +5,6 @@ title: Merge
 <script>
     import { Group } from '@lucide/svelte';
     import Merge from '$lib/components/toolbar/tools/Merge.svelte';
-    import DocsNote from '$lib/components/docs/DocsNote.svelte';
 </script>
 
 # <Group size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
@@ -16,13 +15,6 @@ To use this tool, you need to [select](../files-and-stats) multiple files, [trac
 - The second option can be used to create or manage files with multiple [tracks or segments](../gpx).
   Merging files (or tracks) will result in a single file (or track) containing all tracks (or segments) from the selection.
 
-<DocsNote>
-
-Selected items are merged in the order they appear in the files list.
-Reorder items by drag-and-drop if needed.
-
-</DocsNote>
-
 <div class="flex flex-row justify-center">
     <Merge class="text-foreground p-3 border rounded-md shadow-lg" />
 </div>

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

@@ -12,7 +12,6 @@ title: Fájlok és statisztikák
 
     let gpxStatistics = writable(exampleGPXFile.getStatistics());
     let slicedGPXStatistics = writable(undefined);
-    let hoveredPoint = writable(null);
     let additionalDatasets = writable(['speed', 'atemp']);
     let elevationFill = writable(undefined);
 </script>
@@ -85,17 +84,19 @@ Az egérgörgővel is méretezheti a magassági profilt. Balra és jobbra mozogh
     <ElevationProfile
         {gpxStatistics}
         {slicedGPXStatistics}
-        {hoveredPoint}
         {additionalDatasets}
         {elevationFill}
     />
 </div>
-<div class="flex flex-col items-center w-full">
+<div class="flex flex-col items-center -mt-6">
+    <div class="h-10 w-fit">
         <GPXStatistics
             {gpxStatistics}
             {slicedGPXStatistics}
+            panelSize={120}
             orientation={'horizontal'}
         />
+    </div>
 </div>
 
 ### Additional data

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

@@ -4,8 +4,7 @@
 
 ## <HeartHandshake size="18" class="inline-block align-baseline" /> Help keep the website free (and ad-free)
 
-Minden alkalommal, amikor GPS-pontokat ad hozzá vagy mozgat, szervereink kiszámítják a legjobb útvonalat az úthálózaton.
-We also use APIs from <a href="https://maptiler.com" target="_blank">MapTiler</a> to display beautiful maps, retrieve elevation data and allow you to search for places.
+Minden alkalommal, amikor GPS-pontokat ad hozzá vagy mozgat, szervereink kiszámítják a legjobb útvonalat az úthálózaton.<a href="https://mapbox.com" target="_blank">Mapbox</a> API-jait használjuk a gyönyörű térképek megjelenítésére, a magassági adatok lekérésére és a helyek keresésére.
 
 Sajnos ez magas költségű.
 Ha tetszik ez az alkalmazás, kérjük, fontoljon meg egy kis adományt, hogy a webhely továbbra is ingyenes és hirdetésmentes legyen.

website/src/lib/docs/hu/integration.mdx

@@ -13,8 +13,8 @@ A **gpx.studio** segítségével létrehozhatja a GPX-fájlokat ábrázoló tér
 
 Minden amire szüksége van:
 
-1. GPX files hosted on your server or on Google Drive, or accessible via a public URL;
-2. _Optional:_ a <a href="https://cloud.maptiler.com/auth/widget?next=https://cloud.maptiler.com/maps/" target="_blank">MapTiler key</a> to load MapTiler maps.
+1. Egy <a href="https://account.mapbox.com/auth/signup" target="_blank">Mapbox hozzáférési token</a> a térkép betöltéséhez, és
+2. A szerverén vagy a Google Drive-on tárolt GPX-fájlok, vagy nyilvános URL-en keresztül érhetők el.
 
 Ezután játszhat az alábbi konfigurátorral a térkép testreszabásához és a megfelelő HTML-kód létrehozásához.
 

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

@@ -56,12 +56,10 @@ The map layers button allows you to switch between different basemaps, and toggl
 - **Points of interest** can be added to the map to show different categories of places, such as shops, restaurants, or accommodations.
 
 <div class="flex flex-col items-center">
-<DocsLayers />
-<span class="text-sm text-center mt-2">
-
-Hover over the map to show the <a href="https://hiking.waymarkedtrails.org" target="_blank">Waymarked Trails hiking</a> overlay on top of the <a href="https://www.maptiler.com/maps/outdoor-topo/" target="_blank">MapTiler Topo</a> basemap.
-
-</span>
+    <DocsLayers />
+    <span class="text-sm text-center mt-2">
+        Hover over the map to show the <a href="https://hiking.waymarkedtrails.org" target="_blank">Waymarked Trails hiking</a> overlay on top of the <a href="https://www.mapbox.com/maps/outdoors" target="_blank">Mapbox Outdoors</a> basemap.
+    </span>
 </div>
 
 A large collection of global and local basemaps and overlays is available in **gpx.studio**, as well as a selection of point-of-interest categories.
@@ -69,4 +67,4 @@ They can be enabled in the [map layer settings dialog](./menu/settings).
 
 In these settings, you can also manage the opacity of the overlays.
 
-For advanced users, it is possible to add custom basemaps and overlays by providing <a href="https://en.wikipedia.org/wiki/Web_Map_Tile_Service" target="_blank">WMTS</a>, <a href="https://en.wikipedia.org/wiki/Web_Map_Service" target="_blank">WMS</a>, or <a href="https://maplibre.org/maplibre-style-spec/" target="_blank">MapLibre style JSON</a> URLs.
+For advanced users, it is possible to add custom basemaps and overlays by providing <a href="https://en.wikipedia.org/wiki/Web_Map_Tile_Service" target="_blank">WMTS</a>, <a href="https://en.wikipedia.org/wiki/Web_Map_Service" target="_blank">WMS</a>, or <a href="https://docs.mapbox.com/help/glossary/style/" target="_blank">Mapbox style JSON</a> URLs.

website/src/lib/docs/hu/toolbar/elevation.mdx

@@ -18,7 +18,7 @@ Ez az eszköz lehetővé teszi magassági adatok hozzáadását a nyomvonalakhoz
 
 <DocsNote>
 
-Elevation data is provided by <a href="https://maptiler.com" target="_blank">MapTiler</a>.
-You can learn more about its origin and accuracy in the <a href="https://docs.maptiler.com/guides/map-tiling-hosting/data-hosting/rgb-terrain-by-maptiler/" target="_blank">documentation</a>.
+A magassági adatokat a <a href="https://mapbox.com" target="_blank">Mapbox</a> biztosítja.
+Eredetéről és pontosságáról a <a href="https://docs.mapbox.com/data/tilesets/reference/mapbox-terrain-dem-v1/#elevation-data" target="_blank">dokumentációban</a> tudhat meg többet.
 
 </DocsNote>

website/src/lib/docs/hu/toolbar/merge.mdx

@@ -5,7 +5,6 @@ title: Egyesítés
 <script>
     import { Group } from '@lucide/svelte';
     import Merge from '$lib/components/toolbar/tools/Merge.svelte';
-    import DocsNote from '$lib/components/docs/DocsNote.svelte';
 </script>
 
 # <Group size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
@@ -16,13 +15,6 @@ Az eszköz használatához [ki kell választania](../files-and-stats) több fáj
 - A második lehetőség több [sávot vagy szegmenst] tartalmazó fájlok létrehozására vagy kezelésére használható (../gpx).
   A fájlok (vagy útvonalak) egyesítése egyetlen fájlt (vagy útvonalat) eredményez, amely tartalmazza a kijelölés összes útvonalát (vagy szegmensét).
 
-<DocsNote>
-
-Selected items are merged in the order they appear in the files list.
-Reorder items by drag-and-drop if needed.
-
-</DocsNote>
-
 <div class="flex flex-row justify-center">
     <Merge class="text-foreground p-3 border rounded-md shadow-lg" />
 </div>