small ui improvements

website/src/lib/components/GPXStatistics.svelte

@@ -31,13 +31,13 @@
 
 <Card.Root
     class="h-full {orientation === 'vertical'
-        ? 'min-w-40 sm:min-w-44 text-sm sm:text-base'
-        : 'w-full'} border-none shadow-none p-0"
+        ? 'min-w-40 sm:min-w-44'
+        : 'w-full h-10'} border-none shadow-none p-0 text-sm sm:text-base"
 >
     <Card.Content
         class="h-full flex {orientation === 'vertical'
             ? 'flex-col justify-center'
-            : 'flex-row w-full justify-between'} gap-4  p-0"
+            : 'flex-row w-full justify-evenly'} gap-4 p-0"
     >
         <Tooltip label={i18n._('quantities.distance')}>
             <span class="flex flex-row items-center">

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

@@ -18,7 +18,7 @@
         Construction,
     } from '@lucide/svelte';
     import type { Readable, Writable } from 'svelte/store';
-    import type { GPXGlobalStatistics, GPXStatisticsGroup } from 'gpx';
+    import type { Coordinates, GPXGlobalStatistics, GPXStatisticsGroup } from 'gpx';
     import { settings } from '$lib/logic/settings';
     import { i18n } from '$lib/i18n.svelte';
     import { ElevationProfile } from '$lib/components/elevation-profile/elevation-profile';
@@ -28,12 +28,14 @@
     let {
         gpxStatistics,
         slicedGPXStatistics,
+        hoveredPoint,
         additionalDatasets,
         elevationFill,
         showControls = true,
     }: {
         gpxStatistics: Readable<GPXStatisticsGroup>;
         slicedGPXStatistics: Writable<[GPXGlobalStatistics, number, number] | undefined>;
+        hoveredPoint: Writable<Coordinates | null>;
         additionalDatasets: Writable<string[]>;
         elevationFill: Writable<'slope' | 'surface' | 'highway' | undefined>;
         showControls?: boolean;
@@ -47,6 +49,7 @@
         elevationProfile = new ElevationProfile(
             gpxStatistics,
             slicedGPXStatistics,
+            hoveredPoint,
             additionalDatasets,
             elevationFill,
             canvas,
@@ -61,7 +64,7 @@
     });
 </script>
 
-<div class="h-full grow min-w-0 relative py-2">
+<div class="h-full grow min-w-0 min-h-0 relative">
     <canvas bind:this={overlay} class="w-full h-full absolute pointer-events-none"></canvas>
     <canvas bind:this={canvas} class="w-full h-full absolute"></canvas>
     {#if showControls}

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

@@ -20,10 +20,8 @@ import Chart, {
     type ScriptableLineSegmentContext,
     type TooltipItem,
 } from 'chart.js/auto';
-import maplibregl from 'maplibre-gl';
 import { get, type Readable, type Writable } from 'svelte/store';
-import { map } from '$lib/components/map/map';
-import type { GPXGlobalStatistics, GPXStatisticsGroup } from 'gpx';
+import type { Coordinates, GPXGlobalStatistics, GPXStatisticsGroup } from 'gpx';
 import { mode } from 'mode-watcher';
 import { getHighwayColor, getSlopeColor, getSurfaceColor } from '$lib/assets/colors';
 
@@ -42,7 +40,7 @@ interface ElevationProfilePoint {
         length: number;
     };
     extensions: Record<string, any>;
-    coordinates: [number, number];
+    coordinates: Coordinates;
     index: number;
 }
 
@@ -50,18 +48,19 @@ export class ElevationProfile {
     private _chart: Chart | null = null;
     private _canvas: HTMLCanvasElement;
     private _overlay: HTMLCanvasElement;
-    private _marker: maplibregl.Marker | null = null;
     private _dragging = false;
     private _panning = false;
 
     private _gpxStatistics: Readable<GPXStatisticsGroup>;
     private _slicedGPXStatistics: Writable<[GPXGlobalStatistics, number, number] | undefined>;
+    private _hoveredPoint: Writable<Coordinates | null>;
     private _additionalDatasets: Readable<string[]>;
     private _elevationFill: Readable<'slope' | 'surface' | 'highway' | undefined>;
 
     constructor(
         gpxStatistics: Readable<GPXStatisticsGroup>,
         slicedGPXStatistics: Writable<[GPXGlobalStatistics, number, number] | undefined>,
+        hoveredPoint: Writable<Coordinates | null>,
         additionalDatasets: Readable<string[]>,
         elevationFill: Readable<'slope' | 'surface' | 'highway' | undefined>,
         canvas: HTMLCanvasElement,
@@ -69,17 +68,12 @@ export class ElevationProfile {
     ) {
         this._gpxStatistics = gpxStatistics;
         this._slicedGPXStatistics = slicedGPXStatistics;
+        this._hoveredPoint = hoveredPoint;
         this._additionalDatasets = additionalDatasets;
         this._elevationFill = elevationFill;
         this._canvas = canvas;
         this._overlay = overlay;
 
-        let element = document.createElement('div');
-        element.className = 'h-4 w-4 rounded-full bg-cyan-500 border-2 border-white';
-        this._marker = new maplibregl.Marker({
-            element,
-        });
-
         import('chartjs-plugin-zoom').then((module) => {
             Chart.register(module.default);
             this.initialize();
@@ -162,14 +156,10 @@ export class ElevationProfile {
                         label: (context: TooltipItem<'line'>) => {
                             let point = context.raw as ElevationProfilePoint;
                             if (context.datasetIndex === 0) {
-                                const map_ = get(map);
-                                if (map_ && this._marker) {
-                                    if (this._dragging) {
-                                        this._marker.remove();
-                                    } else {
-                                        this._marker.setLngLat(point.coordinates);
-                                        this._marker.addTo(map_);
-                                    }
+                                if (this._dragging) {
+                                    this._hoveredPoint.set(null);
+                                } else {
+                                    this._hoveredPoint.set(point.coordinates);
                                 }
                                 return `${i18n._('quantities.elevation')}: ${getElevationWithUnits(point.y, false)}`;
                             } else if (context.datasetIndex === 1) {
@@ -312,10 +302,7 @@ export class ElevationProfile {
                     events: ['mouseout'],
                     afterEvent: (chart: Chart, args: { event: ChartEvent }) => {
                         if (args.event.type === 'mouseout') {
-                            const map_ = get(map);
-                            if (map_ && this._marker) {
-                                this._marker.remove();
-                            }
+                            this._hoveredPoint.set(null);
                         }
                     },
                 },
@@ -637,8 +624,5 @@ export class ElevationProfile {
             this._chart.destroy();
             this._chart = null;
         }
-        if (this._marker) {
-            this._marker.remove();
-        }
     }
 }

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

@@ -16,7 +16,7 @@
     import { setMode } from 'mode-watcher';
     import { settings } from '$lib/logic/settings';
     import { fileStateCollection } from '$lib/logic/file-state';
-    import { gpxStatistics, slicedGPXStatistics } from '$lib/logic/statistics';
+    import { gpxStatistics, hoveredPoint, slicedGPXStatistics } from '$lib/logic/statistics';
     import { loadFile } from '$lib/logic/file-actions';
     import { selection } from '$lib/logic/selection';
     import { untrack } from 'svelte';
@@ -102,7 +102,7 @@
     <div class="grow relative">
         <Map
             class="h-full {$fileStateCollection.size > 1 ? 'horizontal' : ''}"
-            accessToken={options.token}
+            maptilerKey={options.key}
             geocoder={false}
             geolocate={true}
             hash={useHash}
@@ -130,6 +130,7 @@
             <ElevationProfile
                 {gpxStatistics}
                 {slicedGPXStatistics}
+                {hoveredPoint}
                 {additionalDatasets}
                 {elevationFill}
                 showControls={options.elevation.controls}

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

@@ -32,7 +32,7 @@
     let options = $state(
         getMergedEmbeddingOptions(
             {
-                token: 'YOUR_MAPTILER_KEY',
+                key: 'YOUR_MAPTILER_KEY',
                 theme: mode.current,
             },
             defaultEmbeddingOptions
@@ -46,7 +46,7 @@
     let iframeOptions = $derived(
         getMergedEmbeddingOptions(
             {
-                token:
+                key:
                     options.key.length === 0 || options.key === 'YOUR_MAPTILER_KEY'
                         ? PUBLIC_MAPTILER_KEY
                         : options.key,

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

@@ -5,6 +5,16 @@
 
     map.onLoad((map_) => {
         map_.on('contextmenu', (e) => {
+            if (
+                map_.queryRenderedFeatures(e.point, {
+                    layers: map_
+                        .getLayersOrder()
+                        .filter((layerId) => layerId.startsWith('routing-controls')),
+                }).length
+            ) {
+                // Clicked on routing control, ignoring
+                return;
+            }
             trackpointPopup?.setItem({
                 item: new TrackPoint({
                     attributes: {

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

@@ -129,12 +129,21 @@
         @apply relative;
         @apply top-0;
         @apply left-0;
-        @apply my-2;
         @apply w-[29px];
     }
 
+    div :global(.maplibregl-ctrl-geocoder--icon-loading) {
+        @apply -mt-1;
+        @apply mb-0;
+    }
+
+    div :global(.maplibregl-ctrl-geocoder--icon-close) {
+        @apply my-0;
+    }
+
     div :global(.maplibregl-ctrl-geocoder--input) {
         @apply relative;
+        @apply h-8;
         @apply w-64;
         @apply py-0;
         @apply pl-2;

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

@@ -15,7 +15,7 @@ import {
     ListFileItem,
     ListRootItem,
 } from '$lib/components/file-list/file-list';
-import { getClosestLinePoint, getElevation } from '$lib/utils';
+import { getClosestLinePoint, getElevation, loadSVGIcon } from '$lib/utils';
 import { selectedWaypoint } from '$lib/components/toolbar/tools/waypoint/waypoint';
 import { MapPin, Square } from 'lucide-static';
 import { getSymbolKey, symbols } from '$lib/assets/symbols';
@@ -227,6 +227,56 @@ export class GPXLayer {
                 layerEventManager.on('mouseleave', this.fileId, this.layerOnMouseLeaveBinded);
                 layerEventManager.on('mousemove', this.fileId, this.layerOnMouseMoveBinded);
             }
+
+            let visibleTrackSegmentIds: string[] = [];
+            file.forEachSegment((segment, trackIndex, segmentIndex) => {
+                if (!segment._data.hidden) {
+                    visibleTrackSegmentIds.push(`${trackIndex}-${segmentIndex}`);
+                }
+            });
+            const segmentFilter: FilterSpecification = [
+                'in',
+                ['get', 'trackSegmentId'],
+                ['literal', visibleTrackSegmentIds],
+            ];
+
+            _map.setFilter(this.fileId, segmentFilter, { validate: false });
+
+            if (get(directionMarkers)) {
+                if (!_map.getLayer(this.fileId + '-direction')) {
+                    _map.addLayer(
+                        {
+                            id: this.fileId + '-direction',
+                            type: 'symbol',
+                            source: this.fileId,
+                            layout: {
+                                'text-field': '»',
+                                'text-offset': [0, -0.1],
+                                'text-keep-upright': false,
+                                'text-max-angle': 361,
+                                'text-allow-overlap': true,
+                                'text-font': ['Open Sans Bold'],
+                                'symbol-placement': 'line',
+                                'symbol-spacing': 20,
+                            },
+                            paint: {
+                                'text-color': 'white',
+                                'text-opacity': 0.7,
+                                'text-halo-width': 0.2,
+                                'text-halo-color': 'white',
+                            },
+                        },
+                        ANCHOR_LAYER_KEY.directionMarkers
+                    );
+                }
+
+                _map.setFilter(this.fileId + '-direction', segmentFilter, { validate: false });
+            } else {
+                if (_map.getLayer(this.fileId + '-direction')) {
+                    _map.removeLayer(this.fileId + '-direction');
+                }
+            }
+
             let waypointSource = _map.getSource(this.fileId + '-waypoints') as
                 | GeoJSONSource
                 | undefined;
@@ -237,6 +287,7 @@ export class GPXLayer {
                 _map.addSource(this.fileId + '-waypoints', {
                     type: 'geojson',
                     data: this.currentWaypointData,
+                    promoteId: 'waypointIndex',
                 });
             }
 
@@ -284,57 +335,6 @@ export class GPXLayer {
                 );
             }
 
-            if (get(directionMarkers)) {
-                if (!_map.getLayer(this.fileId + '-direction')) {
-                    _map.addLayer(
-                        {
-                            id: this.fileId + '-direction',
-                            type: 'symbol',
-                            source: this.fileId,
-                            layout: {
-                                'text-field': '»',
-                                'text-offset': [0, -0.1],
-                                'text-keep-upright': false,
-                                'text-max-angle': 361,
-                                'text-allow-overlap': true,
-                                'text-font': ['Open Sans Bold'],
-                                'symbol-placement': 'line',
-                                'symbol-spacing': 20,
-                            },
-                            paint: {
-                                'text-color': 'white',
-                                'text-opacity': 0.7,
-                                'text-halo-width': 0.2,
-                                'text-halo-color': 'white',
-                            },
-                        },
-                        ANCHOR_LAYER_KEY.directionMarkers
-                    );
-                }
-            } else {
-                if (_map.getLayer(this.fileId + '-direction')) {
-                    _map.removeLayer(this.fileId + '-direction');
-                }
-            }
-
-            let visibleTrackSegmentIds: string[] = [];
-            file.forEachSegment((segment, trackIndex, segmentIndex) => {
-                if (!segment._data.hidden) {
-                    visibleTrackSegmentIds.push(`${trackIndex}-${segmentIndex}`);
-                }
-            });
-            const segmentFilter: FilterSpecification = [
-                'in',
-                ['get', 'trackSegmentId'],
-                ['literal', visibleTrackSegmentIds],
-            ];
-
-            _map.setFilter(this.fileId, segmentFilter, { validate: false });
-
-            if (_map.getLayer(this.fileId + '-direction')) {
-                _map.setFilter(this.fileId + '-direction', segmentFilter, { validate: false });
-            }
-
             let visibleWaypoints: number[] = [];
             file.wpt.forEach((waypoint, waypointIndex) => {
                 if (!waypoint._data.hidden) {
@@ -646,7 +646,17 @@ export class GPXLayer {
             | GeoJSONSource
             | undefined;
         if (waypointSource) {
-            waypointSource.setData(this.currentWaypointData!);
+            waypointSource.updateData({
+                update: [
+                    {
+                        id: this.draggedWaypointIndex,
+                        newGeometry: {
+                            type: 'Point',
+                            coordinates: [e.lngLat.lng, e.lngLat.lat],
+                        },
+                    },
+                ],
+            });
         }
     }
 
@@ -784,20 +794,7 @@ export class GPXLayer {
 
         symbols.forEach((symbol) => {
             const iconId = `waypoint-${symbol ?? 'default'}-${this.layerColor}`;
-            if (!_map.hasImage(iconId)) {
-                let icon = new Image(100, 100);
-                icon.onload = () => {
-                    if (!_map.hasImage(iconId)) {
-                        _map.addImage(iconId, icon);
-                    }
-                };
-
-                // Lucide icons are SVG files with a 24x24 viewBox
-                // Create a new SVG with a 32x32 viewBox and center the icon in a circle
-                icon.src =
-                    'data:image/svg+xml,' +
-                    encodeURIComponent(getSvgForSymbol(symbol, this.layerColor));
-            }
+            loadSVGIcon(_map, iconId, getSvgForSymbol(symbol, this.layerColor));
         });
     }
 }

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

@@ -1,30 +1,40 @@
 import { currentTool, Tool } from '$lib/components/toolbar/tools';
-import { gpxStatistics, slicedGPXStatistics } from '$lib/logic/statistics';
-import maplibregl from 'maplibre-gl';
+import { gpxStatistics, hoveredPoint, slicedGPXStatistics } from '$lib/logic/statistics';
+import type { GeoJSONSource } from 'maplibre-gl';
 import { get } from 'svelte/store';
 import { map } from '$lib/components/map/map';
 import { allHidden } from '$lib/logic/hidden';
+import { ANCHOR_LAYER_KEY } from '$lib/components/map/style';
+import { loadSVGIcon } from '$lib/utils';
+
+const startMarkerSVG = `<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <circle cx="8" cy="8" r="6" fill="#22c55e" stroke="white" stroke-width="1.5"/>
+</svg>`;
+
+const endMarkerSVG = `<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <pattern id="checkerboard" x="0" y="0" width="5" height="5" patternUnits="userSpaceOnUse">
+      <rect x="0" y="0" width="2.5" height="2.5" fill="white"/>
+      <rect x="2.5" y="2.5" width="2.5" height="2.5" fill="white"/>
+      <rect x="2.5" y="0" width="2.5" height="2.5" fill="black"/>
+      <rect x="0" y="2.5" width="2.5" height="2.5" fill="black"/>
+    </pattern>
+  </defs>
+  <circle cx="8" cy="8" r="6" fill="url(#checkerboard)" stroke="white" stroke-width="1.5"/>
+</svg>`;
+const hoverMarkerSVG = `<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <circle cx="8" cy="8" r="6" fill="#00b8db" stroke="white" stroke-width="1.5"/>
+</svg>`;
 
 export class StartEndMarkers {
-    start: maplibregl.Marker;
-    end: maplibregl.Marker;
     updateBinded: () => void = this.update.bind(this);
     unsubscribes: (() => void)[] = [];
 
     constructor() {
-        let startElement = document.createElement('div');
-        let endElement = document.createElement('div');
-        startElement.className = `h-4 w-4 rounded-full bg-green-500 border-2 border-white`;
-        endElement.className = `h-4 w-4 rounded-full border-2 border-white`;
-        endElement.style.background =
-            'repeating-conic-gradient(#fff 0 90deg, #000 0 180deg) 0 0/8px 8px round';
-
-        this.start = new maplibregl.Marker({ element: startElement });
-        this.end = new maplibregl.Marker({ element: endElement });
-
         map.onLoad(() => this.update());
         this.unsubscribes.push(gpxStatistics.subscribe(this.updateBinded));
         this.unsubscribes.push(slicedGPXStatistics.subscribe(this.updateBinded));
+        this.unsubscribes.push(hoveredPoint.subscribe(this.updateBinded));
         this.unsubscribes.push(currentTool.subscribe(this.updateBinded));
         this.unsubscribes.push(allHidden.subscribe(this.updateBinded));
     }
@@ -33,33 +43,115 @@ export class StartEndMarkers {
         const map_ = get(map);
         if (!map_) return;
 
+        this.loadIcons();
+
         const tool = get(currentTool);
         const statistics = get(gpxStatistics);
         const slicedStatistics = get(slicedGPXStatistics);
+        const hovered = get(hoveredPoint);
         const hidden = get(allHidden);
-        if (statistics.global.length > 0 && tool !== Tool.ROUTING && !hidden) {
-            this.start
-                .setLngLat(
-                    statistics.getTrackPoint(slicedStatistics?.[1] ?? 0)!.trkpt.getCoordinates()
-                )
-                .addTo(map_);
-            this.end
-                .setLngLat(
-                    statistics
-                        .getTrackPoint(slicedStatistics?.[2] ?? statistics.global.length - 1)!
-                        .trkpt.getCoordinates()
-                )
-                .addTo(map_);
+        if (!hidden) {
+            const data: GeoJSON.FeatureCollection = {
+                type: 'FeatureCollection',
+                features: [],
+            };
+
+            if (statistics.global.length > 0 && tool !== Tool.ROUTING) {
+                const start = statistics
+                    .getTrackPoint(slicedStatistics?.[1] ?? 0)!
+                    .trkpt.getCoordinates();
+                const end = statistics
+                    .getTrackPoint(slicedStatistics?.[2] ?? statistics.global.length - 1)!
+                    .trkpt.getCoordinates();
+                data.features.push({
+                    type: 'Feature',
+                    geometry: {
+                        type: 'Point',
+                        coordinates: [start.lon, start.lat],
+                    },
+                    properties: {
+                        icon: 'start-marker',
+                    },
+                });
+                data.features.push({
+                    type: 'Feature',
+                    geometry: {
+                        type: 'Point',
+                        coordinates: [end.lon, end.lat],
+                    },
+                    properties: {
+                        icon: 'end-marker',
+                    },
+                });
+            }
+
+            if (hovered) {
+                data.features.push({
+                    type: 'Feature',
+                    geometry: {
+                        type: 'Point',
+                        coordinates: [hovered.lon, hovered.lat],
+                    },
+                    properties: {
+                        icon: 'hover-marker',
+                    },
+                });
+            }
+
+            let source = map_.getSource('start-end-markers') as GeoJSONSource | undefined;
+            if (source) {
+                source.setData(data);
+            } else {
+                map_.addSource('start-end-markers', {
+                    type: 'geojson',
+                    data: data,
+                });
+            }
+
+            if (!map_.getLayer('start-end-markers')) {
+                map_.addLayer(
+                    {
+                        id: 'start-end-markers',
+                        type: 'symbol',
+                        source: 'start-end-markers',
+                        layout: {
+                            'icon-image': ['get', 'icon'],
+                            'icon-size': 0.2,
+                            'icon-allow-overlap': true,
+                        },
+                    },
+                    ANCHOR_LAYER_KEY.startEndMarkers
+                );
+            }
         } else {
-            this.start.remove();
-            this.end.remove();
+            if (map_.getLayer('start-end-markers')) {
+                map_.removeLayer('start-end-markers');
+            }
+            if (map_.getSource('start-end-markers')) {
+                map_.removeSource('start-end-markers');
+            }
         }
     }
 
     remove() {
         this.unsubscribes.forEach((unsubscribe) => unsubscribe());
 
-        this.start.remove();
-        this.end.remove();
+        const map_ = get(map);
+        if (!map_) return;
+
+        if (map_.getLayer('start-end-markers')) {
+            map_.removeLayer('start-end-markers');
+        }
+        if (map_.getSource('start-end-markers')) {
+            map_.removeSource('start-end-markers');
+        }
+    }
+
+    loadIcons() {
+        const map_ = get(map);
+        if (!map_) return;
+        loadSVGIcon(map_, 'start-marker', startMarkerSVG);
+        loadSVGIcon(map_, 'end-marker', endMarkerSVG);
+        loadSVGIcon(map_, 'hover-marker', hoverMarkerSVG);
     }
 }

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

@@ -20,9 +20,8 @@
     import { i18n } from '$lib/i18n.svelte';
     import { defaultBasemap, type CustomLayer } from '$lib/assets/layers';
     import { onMount } from 'svelte';
-    import { customBasemapUpdate, isSelected, remove } from './utils';
+    import { remove } from './utils';
     import { settings } from '$lib/logic/settings';
-    import { map } from '$lib/components/map/map';
     import { dndzone } from 'svelte-dnd-action';
 
     const {
@@ -129,8 +128,8 @@
                 ],
             };
         }
-        $customLayers[layerId] = layer;
         addLayer(layerId);
+        $customLayers[layerId] = layer;
         selectedLayerId = undefined;
         setDataFromSelectedLayer();
     }
@@ -153,9 +152,7 @@
                 return $tree;
             });
 
-            if ($currentBasemap === layerId) {
-                $customBasemapUpdate++;
-            } else {
+            if ($currentBasemap !== layerId) {
                 $currentBasemap = layerId;
             }
 
@@ -171,14 +168,6 @@
                 return $tree;
             });
 
-            if ($map && $currentOverlays && isSelected($currentOverlays, layerId)) {
-                try {
-                    $map.removeImport(layerId);
-                } catch (e) {
-                    // No reliable way to check if the map is ready to remove sources and layers
-                }
-            }
-
             currentOverlays.update(($overlays) => {
                 if (!$overlays.overlays.hasOwnProperty('custom')) {
                     $overlays.overlays['custom'] = {};

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

@@ -167,11 +167,11 @@
                                             {#if isSelected($selectedOverlayTree, selectedOverlay)}
                                                 {#if $isLayerFromExtension(selectedOverlay)}
                                                     {$getLayerName(selectedOverlay)}
+                                                {:else if $customLayers.hasOwnProperty(selectedOverlay)}
+                                                    {$customLayers[selectedOverlay].name}
                                                 {:else}
                                                     {i18n._(`layers.label.${selectedOverlay}`)}
                                                 {/if}
-                                            {:else if $customLayers.hasOwnProperty(selectedOverlay)}
-                                                {$customLayers[selectedOverlay].name}
                                             {/if}
                                         {/if}
                                     </Select.Trigger>

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

@@ -9,6 +9,7 @@ import { db } from '$lib/db';
 import type { GeoJSONSource } from 'maplibre-gl';
 import { ANCHOR_LAYER_KEY } from '../style';
 import type { MapLayerEventManager } from '$lib/components/map/map-layer-event-manager';
+import { loadSVGIcon } from '$lib/utils';
 
 const { currentOverpassQueries } = settings;
 
@@ -76,7 +77,14 @@ export class OverpassLayer {
     update() {
         this.loadIcons();
 
-        let d = get(data);
+        const fullData = get(data);
+        const queries = getCurrentQueries();
+        const d: GeoJSON.FeatureCollection = {
+            type: 'FeatureCollection',
+            features: fullData.features.filter((feature) =>
+                queries.includes(feature.properties!.query)
+            ),
+        };
 
         try {
             let source = this.map.getSource('overpass') as GeoJSONSource | undefined;
@@ -108,10 +116,6 @@ export class OverpassLayer {
                 this.layerEventManager.on('mouseenter', 'overpass', this.onHoverBinded);
                 this.layerEventManager.on('click', 'overpass', this.onHoverBinded);
             }
-
-            this.map.setFilter('overpass', ['in', 'query', ...getCurrentQueries()], {
-                validate: false,
-            });
         } catch (e) {
             // No reliable way to check if the map is ready to add sources and layers
         }
@@ -254,27 +258,16 @@ export class OverpassLayer {
     loadIcons() {
         let currentQueries = getCurrentQueries();
         currentQueries.forEach((query) => {
-            if (!this.map.hasImage(`overpass-${query}`)) {
-                let icon = new Image(100, 100);
-                icon.onload = () => {
-                    if (!this.map.hasImage(`overpass-${query}`)) {
-                        this.map.addImage(`overpass-${query}`, icon);
-                    }
-                };
-
-                // Lucide icons are SVG files with a 24x24 viewBox
-                // Create a new SVG with a 32x32 viewBox and center the icon in a circle
-                icon.src =
-                    'data:image/svg+xml,' +
-                    encodeURIComponent(`
-                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40">
+            loadSVGIcon(
+                this.map,
+                `overpass-${query}`,
+                `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40">
                     <circle cx="20" cy="20" r="20" fill="${overpassQueryData[query].icon.color}" />
                     <g transform="translate(8 8)">
                     ${overpassQueryData[query].icon.svg.replace('stroke="currentColor"', 'stroke="white"')}
                     </g>
-                </svg>
-            `);
-            }
+                </svg>`
+            );
         });
     }
 }

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

@@ -76,5 +76,3 @@ export function removeAll(node: LayerTreeType, ids: string[]) {
     });
     return node;
 }
-
-export const customBasemapUpdate = writable(0);

website/src/lib/components/map/map-layer-event-manager.ts

@@ -1,3 +1,4 @@
+import { fileStateCollection } from '$lib/logic/file-state';
 import maplibregl from 'maplibre-gl';
 
 type MapLayerMouseEventListener = (e: maplibregl.MapLayerMouseEvent) => void;
@@ -141,18 +142,7 @@ export class MapLayerEventManager {
     }
 
     private _handleMouseMove(e: maplibregl.MapMouseEvent) {
-        const layerIds = Object.keys(this._listeners);
-        const features =
-            layerIds.length > 0
-                ? this._map.queryRenderedFeatures(e.point, { layers: layerIds })
-                : [];
-        const featuresByLayer: Record<string, maplibregl.MapGeoJSONFeature[]> = {};
-        features.forEach((f) => {
-            if (!featuresByLayer[f.layer.id]) {
-                featuresByLayer[f.layer.id] = [];
-            }
-            featuresByLayer[f.layer.id].push(f);
-        });
+        const featuresByLayer = this._getRenderedFeaturesByLayer(e);
         Object.keys(this._listeners).forEach((layerId) => {
             const features = featuresByLayer[layerId] || [];
             const listener = this._listeners[layerId];
@@ -179,7 +169,6 @@ export class MapLayerEventManager {
                         listener.mouseleaves.forEach((l) => l(event));
                     }
                 }
-                listener.features = features;
             }
             if (features.length > 0 && listener.mousemoves.length > 0) {
                 const event = new maplibregl.MapMouseEvent('mousemove', e.target, e.originalEvent, {
@@ -187,15 +176,19 @@ export class MapLayerEventManager {
                 });
                 listener.mousemoves.forEach((l) => l(event));
             }
+            listener.features = features;
         });
     }
 
     private _handleMouseClick(type: string, e: maplibregl.MapMouseEvent) {
-        Object.values(this._listeners).forEach((listener) => {
-            if (listener.features.length > 0) {
+        const featuresByLayer = this._getRenderedFeaturesByLayer(e);
+        Object.keys(this._listeners).forEach((layerId) => {
+            const features = featuresByLayer[layerId] || [];
+            const listener = this._listeners[layerId];
+            if (features.length > 0) {
                 if (type === 'click' && listener.clicks.length > 0) {
                     const event = new maplibregl.MapMouseEvent('click', e.target, e.originalEvent, {
-                        features: listener.features,
+                        features: features,
                     });
                     listener.clicks.forEach((l) => l(event));
                 } else if (type === 'contextmenu' && listener.contextmenus.length > 0) {
@@ -204,7 +197,7 @@ export class MapLayerEventManager {
                         e.target,
                         e.originalEvent,
                         {
-                            features: listener.features,
+                            features: features,
                         }
                     );
                     listener.contextmenus.forEach((l) => l(event));
@@ -214,7 +207,7 @@ export class MapLayerEventManager {
                         e.target,
                         e.originalEvent,
                         {
-                            features: listener.features,
+                            features: features,
                         }
                     );
                     listener.mousedowns.forEach((l) => l(event));
@@ -224,18 +217,7 @@ export class MapLayerEventManager {
     }
 
     private _handleTouchStart(e: maplibregl.MapTouchEvent) {
-        const layerIds = Object.keys(this._listeners).filter(
-            (layerId) => this._listeners[layerId].touchstarts.length > 0
-        );
-        if (layerIds.length === 0) return;
-        const features = this._map.queryRenderedFeatures(e.points[0], { layers: layerIds });
-        const featuresByLayer: Record<string, maplibregl.MapGeoJSONFeature[]> = {};
-        features.forEach((f) => {
-            if (!featuresByLayer[f.layer.id]) {
-                featuresByLayer[f.layer.id] = [];
-            }
-            featuresByLayer[f.layer.id].push(f);
-        });
+        const featuresByLayer = this._getRenderedFeaturesByLayer(e);
         Object.keys(this._listeners).forEach((layerId) => {
             const features = featuresByLayer[layerId] || [];
             const listener = this._listeners[layerId];
@@ -250,4 +232,50 @@ export class MapLayerEventManager {
             }
         });
     }
+
+    private _getBounds(point: maplibregl.Point) {
+        const delta = 30;
+        return new maplibregl.LngLatBounds(
+            this._map.unproject([point.x - delta, point.y + delta]),
+            this._map.unproject([point.x + delta, point.y - delta])
+        );
+    }
+
+    private _filterLayersIntersectingBounds(
+        layerIds: string[],
+        bounds: maplibregl.LngLatBounds
+    ): string[] {
+        let result = layerIds.filter((layerId) => {
+            if (!this._map.getLayer(layerId)) return false;
+            const fileId = layerId.replace('-waypoints', '');
+            if (fileId === layerId) {
+                return fileStateCollection.getStatistics(fileId)?.intersectsBBox(bounds) ?? true;
+            } else {
+                return (
+                    fileStateCollection.getStatistics(fileId)?.intersectsWaypointBBox(bounds) ??
+                    true
+                );
+            }
+        });
+        return result;
+    }
+
+    private _getRenderedFeaturesByLayer(e: maplibregl.MapMouseEvent | maplibregl.MapTouchEvent) {
+        const layerIds = this._filterLayersIntersectingBounds(
+            Object.keys(this._listeners),
+            this._getBounds(e.point)
+        );
+        const features =
+            layerIds.length > 0
+                ? this._map.queryRenderedFeatures(e.point, { layers: layerIds })
+                : [];
+        const featuresByLayer: Record<string, maplibregl.MapGeoJSONFeature[]> = {};
+        features.forEach((f) => {
+            if (!featuresByLayer[f.layer.id]) {
+                featuresByLayer[f.layer.id] = [];
+            }
+            featuresByLayer[f.layer.id].push(f);
+        });
+        return featuresByLayer;
+    }
 }

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

@@ -7,7 +7,7 @@ import {
     overlays,
     terrainSources,
 } from '$lib/assets/layers';
-import { customBasemapUpdate, getLayers } from '$lib/components/map/layer-control/utils';
+import { getLayers } from '$lib/components/map/layer-control/utils';
 import { i18n } from '$lib/i18n.svelte';
 
 const { currentBasemap, currentOverlays, customLayers, opacities, terrainSource } = settings;
@@ -25,9 +25,11 @@ export const ANCHOR_LAYER_KEY = {
     tracks: 'tracks-end',
     directionMarkers: 'direction-markers-end',
     distanceMarkers: 'distance-markers-end',
+    startEndMarkers: 'start-end-markers-end',
     interactions: 'interactions-end',
     overpass: 'overpass-end',
     waypoints: 'waypoints-end',
+    routingControls: 'routing-controls-end',
 };
 const anchorLayers: maplibregl.LayerSpecification[] = Object.values(ANCHOR_LAYER_KEY).map((id) => ({
     id: id,
@@ -51,10 +53,10 @@ export class StyleManager {
             }
         });
         currentBasemap.subscribe(() => this.updateBasemap());
-        customBasemapUpdate.subscribe(() => this.updateBasemap());
         currentOverlays.subscribe(() => this.updateOverlays());
         opacities.subscribe(() => this.updateOverlays());
         terrainSource.subscribe(() => this.updateTerrain());
+        customLayers.subscribe(() => this.updateBasemap());
     }
 
     updateBasemap() {
@@ -157,6 +159,9 @@ export class StyleManager {
         const terrain = this.getCurrentTerrain();
         if (JSON.stringify(mapTerrain) !== JSON.stringify(terrain)) {
             if (terrain.exaggeration > 0) {
+                if (!map_.getSource(terrain.source)) {
+                    map_.addSource(terrain.source, terrainSources[terrain.source]);
+                }
                 map_.setTerrain(terrain);
             } else {
                 map_.setTerrain(null);

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.ts

@@ -6,7 +6,7 @@ import { get } from 'svelte/store';
 
 const { routing, routingProfile, privateRoads } = settings;
 
-export const brouterProfiles: { [key: string]: string } = {
+export const routingProfiles: { [key: string]: string } = {
     bike: 'Trekking-dry',
     racing_bike: 'fastbike',
     gravel_bike: 'gravel',
@@ -19,7 +19,7 @@ export const brouterProfiles: { [key: string]: string } = {
 
 export function route(points: Coordinates[]): Promise<TrackPoint[]> {
     if (get(routing)) {
-        return getRoute(points, brouterProfiles[get(routingProfile)], get(privateRoads));
+        return getRoute(points, routingProfiles[get(routingProfile)], get(privateRoads));
     } else {
         return getIntermediatePoints(points);
     }

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

@@ -2,15 +2,21 @@ import { ramerDouglasPeucker, type GPXFile, type TrackSegment } from 'gpx';
 
 const earthRadius = 6371008.8;
 
+export const MIN_ANCHOR_ZOOM = 0;
+export const MAX_ANCHOR_ZOOM = 22;
+
 export function getZoomLevelForDistance(latitude: number, distance?: number): number {
     if (distance === undefined) {
-        return 0;
+        return MIN_ANCHOR_ZOOM;
     }
 
     const rad = Math.PI / 180;
     const lat = latitude * rad;
 
-    return Math.min(22, Math.max(0, Math.log2((earthRadius * Math.cos(lat)) / distance)));
+    return Math.min(
+        MAX_ANCHOR_ZOOM,
+        Math.max(MIN_ANCHOR_ZOOM, Math.round(Math.log2((earthRadius * Math.cos(lat)) / distance)))
+    );
 }
 
 export function updateAnchorPoints(file: GPXFile) {

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

@@ -11,6 +11,7 @@ import { mapCursor, MapCursorState } from '$lib/logic/map-cursor';
 import type { GeoJSONSource } from 'maplibre-gl';
 import { ANCHOR_LAYER_KEY } from '$lib/components/map/style';
 import type { MapLayerEventManager } from '$lib/components/map/map-layer-event-manager';
+import { loadSVGIcon } from '$lib/utils';
 
 export class SplitControls {
     map: maplibregl.Map;
@@ -24,28 +25,16 @@ export class SplitControls {
     constructor(map: maplibregl.Map, layerEventManager: MapLayerEventManager) {
         this.map = map;
         this.layerEventManager = layerEventManager;
-
-        if (!this.map.hasImage('split-control')) {
-            let icon = new Image(100, 100);
-            icon.onload = () => {
-                if (!this.map.hasImage('split-control')) {
-                    this.map.addImage('split-control', icon);
-                }
-            };
-
-            // Lucide icons are SVG files with a 24x24 viewBox
-            // Create a new SVG with a 32x32 viewBox and center the icon in a circle
-            icon.src =
-                'data:image/svg+xml,' +
-                encodeURIComponent(`
-                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40">
-                            <circle cx="20" cy="20" r="20" fill="white" />
-                            <g transform="translate(8 8)">
-                            ${Scissors.replace('stroke="currentColor"', 'stroke="black"')}
-                            </g>
-                        </svg>
-                    `);
-        }
+        loadSVGIcon(
+            this.map,
+            'split-control',
+            `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40">
+                <circle cx="20" cy="20" r="20" fill="white" />
+                <g transform="translate(8 8)">
+                ${Scissors.replace('stroke="currentColor"', 'stroke="black"')}
+                </g>
+            </svg>`
+        );
 
         this.unsubscribes.push(gpxStatistics.subscribe(this.addIfNeeded.bind(this)));
         this.unsubscribes.push(currentTool.subscribe(this.addIfNeeded.bind(this)));

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

@@ -12,6 +12,7 @@ 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>
@@ -84,6 +85,7 @@ You can also use the mouse wheel to zoom in and out on the elevation profile, an
     <ElevationProfile
         {gpxStatistics}
         {slicedGPXStatistics}
+        {hoveredPoint}
         {additionalDatasets}
         {elevationFill}
     />

website/src/lib/docs/en/home/maptiler.mdx

@@ -1,2 +0,0 @@
-MapTiler is the company that provides some of the beautiful maps on this website.
-This partnership allows **gpx.studio** to benefit from MapTiler tools at discounted prices, greatly contributing to the financial viability of the project and enabling us to offer the best possible user experience.

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

@@ -7,7 +7,8 @@ export enum MapCursorState {
     TOOL_WITH_CROSSHAIR,
     WAYPOINT_HOVER,
     WAYPOINT_DRAGGING,
-    TRACKPOINT_DRAGGING,
+    ANCHOR_HOVER,
+    ANCHOR_DRAGGING,
     SCISSORS,
     SPLIT_CONTROL,
     MAPILLARY_HOVER,
@@ -20,7 +21,8 @@ const cursorStyles = {
     [MapCursorState.LAYER_HOVER]: 'pointer',
     [MapCursorState.WAYPOINT_HOVER]: 'pointer',
     [MapCursorState.WAYPOINT_DRAGGING]: 'grabbing',
-    [MapCursorState.TRACKPOINT_DRAGGING]: 'grabbing',
+    [MapCursorState.ANCHOR_HOVER]: 'pointer',
+    [MapCursorState.ANCHOR_DRAGGING]: 'grabbing',
     [MapCursorState.TOOL_WITH_CROSSHAIR]: 'crosshair',
     [MapCursorState.SCISSORS]: scissorsCursor,
     [MapCursorState.SPLIT_CONTROL]: 'pointer',

website/src/lib/logic/settings.ts

@@ -1,6 +1,7 @@
 import { type Database } from '$lib/db';
 import { liveQuery } from 'dexie';
 import {
+    basemaps,
     defaultBasemap,
     defaultBasemapTree,
     defaultOpacities,
@@ -9,7 +10,10 @@ import {
     defaultOverpassQueries,
     defaultOverpassTree,
     defaultTerrainSource,
+    overlays,
+    overpassQueryData,
     type CustomLayer,
+    type LayerTreeType,
 } from '$lib/assets/layers';
 import { browser } from '$app/environment';
 import { get, writable, type Writable } from 'svelte/store';
@@ -19,10 +23,12 @@ export class Setting<V> {
     private _subscription: { unsubscribe: () => void } | null = null;
     private _key: string;
     private _value: Writable<V>;
+    private _validator?: (value: V) => V;
 
-    constructor(key: string, initial: V) {
+    constructor(key: string, initial: V, validator?: (value: V) => V) {
         this._key = key;
         this._value = writable(initial);
+        this._validator = validator;
     }
 
     connectToDatabase(db: Database) {
@@ -36,6 +42,9 @@ export class Setting<V> {
                     this._value.set(value);
                 }
             } else {
+                if (this._validator) {
+                    value = this._validator(value);
+                }
                 this._value.set(value);
             }
             first = false;
@@ -73,11 +82,13 @@ export class SettingInitOnFirstRead<V> {
     private _key: string;
     private _value: Writable<V | undefined>;
     private _initial: V;
+    private _validator?: (value: V) => V;
 
-    constructor(key: string, initial: V) {
+    constructor(key: string, initial: V, validator?: (value: V) => V) {
         this._key = key;
         this._value = writable(undefined);
         this._initial = initial;
+        this._validator = validator;
     }
 
     connectToDatabase(db: Database) {
@@ -93,6 +104,9 @@ export class SettingInitOnFirstRead<V> {
                     this._value.set(value);
                 }
             } else {
+                if (this._validator) {
+                    value = this._validator(value);
+                }
                 this._value.set(value);
             }
             first = false;
@@ -128,37 +142,166 @@ export class SettingInitOnFirstRead<V> {
     }
 }
 
+function getValueValidator<V>(allowed: V[], fallback: V) {
+    const dict = new Set<V>(allowed);
+    return (value: V) => (dict.has(value) ? value : fallback);
+}
+
+function getArrayValidator<V>(allowed: V[]) {
+    const dict = new Set<V>(allowed);
+    return (value: V[]) => value.filter((v) => dict.has(v));
+}
+
+function getLayerValidator(allowed: Record<string, any>, fallback: string) {
+    return (layer: string) =>
+        allowed.hasOwnProperty(layer) ||
+        layer.startsWith('custom-') ||
+        layer.startsWith('extension-')
+            ? layer
+            : fallback;
+}
+
+function filterLayerTree(t: LayerTreeType, allowed: Record<string, any>): LayerTreeType {
+    const filtered: LayerTreeType = {};
+    Object.entries(t).forEach(([key, value]) => {
+        if (typeof value === 'object') {
+            filtered[key] = filterLayerTree(value, allowed);
+        } else if (
+            allowed.hasOwnProperty(key) ||
+            key.startsWith('custom-') ||
+            key.startsWith('extension-')
+        ) {
+            filtered[key] = value;
+        }
+    });
+    return filtered;
+}
+
+function getLayerTreeValidator(allowed: Record<string, any>) {
+    return (value: LayerTreeType) => filterLayerTree(value, allowed);
+}
+
+type DistanceUnits = 'metric' | 'imperial' | 'nautical';
+type VelocityUnits = 'speed' | 'pace';
+type TemperatureUnits = 'celsius' | 'fahrenheit';
+type AdditionalDataset = 'speed' | 'hr' | 'cad' | 'atemp' | 'power';
+type ElevationFill = 'slope' | 'surface' | undefined;
+type RoutingProfile =
+    | 'bike'
+    | 'racing_bike'
+    | 'gravel_bike'
+    | 'mountain_bike'
+    | 'foot'
+    | 'motorcycle'
+    | 'water'
+    | 'railway';
+type TerrainSource = 'maptiler-dem' | 'mapterhorn';
+type StreetViewSource = 'mapillary' | 'google';
+
 export const settings = {
-    distanceUnits: new Setting<'metric' | 'imperial' | 'nautical'>('distanceUnits', 'metric'),
-    velocityUnits: new Setting<'speed' | 'pace'>('velocityUnits', 'speed'),
-    temperatureUnits: new Setting<'celsius' | 'fahrenheit'>('temperatureUnits', 'celsius'),
+    distanceUnits: new Setting<DistanceUnits>(
+        'distanceUnits',
+        'metric',
+        getValueValidator<DistanceUnits>(['metric', 'imperial', 'nautical'], 'metric')
+    ),
+    velocityUnits: new Setting<VelocityUnits>(
+        'velocityUnits',
+        'speed',
+        getValueValidator<VelocityUnits>(['speed', 'pace'], 'speed')
+    ),
+    temperatureUnits: new Setting<TemperatureUnits>(
+        'temperatureUnits',
+        'celsius',
+        getValueValidator<TemperatureUnits>(['celsius', 'fahrenheit'], 'celsius')
+    ),
     elevationProfile: new Setting<boolean>('elevationProfile', true),
-    additionalDatasets: new Setting<string[]>('additionalDatasets', []),
-    elevationFill: new Setting<'slope' | 'surface' | undefined>('elevationFill', undefined),
+    additionalDatasets: new Setting<AdditionalDataset[]>(
+        'additionalDatasets',
+        [],
+        getArrayValidator<AdditionalDataset>(['speed', 'hr', 'cad', 'atemp', 'power'])
+    ),
+    elevationFill: new Setting<ElevationFill>(
+        'elevationFill',
+        undefined,
+        getValueValidator(['slope', 'surface', undefined], undefined)
+    ),
     treeFileView: new Setting<boolean>('fileView', false),
     minimizeRoutingMenu: new Setting('minimizeRoutingMenu', false),
     routing: new Setting('routing', true),
-    routingProfile: new Setting('routingProfile', 'bike'),
+    routingProfile: new Setting<RoutingProfile>(
+        'routingProfile',
+        'bike',
+        getValueValidator<RoutingProfile>(
+            [
+                'bike',
+                'racing_bike',
+                'gravel_bike',
+                'mountain_bike',
+                'foot',
+                'motorcycle',
+                'water',
+                'railway',
+            ],
+            'bike'
+        )
+    ),
     privateRoads: new Setting('privateRoads', false),
-    currentBasemap: new Setting('currentBasemap', defaultBasemap),
-    previousBasemap: new Setting('previousBasemap', defaultBasemap),
-    selectedBasemapTree: new Setting('selectedBasemapTree', defaultBasemapTree),
-    currentOverlays: new SettingInitOnFirstRead('currentOverlays', defaultOverlays),
-    previousOverlays: new Setting('previousOverlays', defaultOverlays),
-    selectedOverlayTree: new Setting('selectedOverlayTree', defaultOverlayTree),
+    currentBasemap: new Setting(
+        'currentBasemap',
+        defaultBasemap,
+        getLayerValidator(basemaps, defaultBasemap)
+    ),
+    previousBasemap: new Setting(
+        'previousBasemap',
+        defaultBasemap,
+        getLayerValidator(Object.keys(basemaps), defaultBasemap)
+    ),
+    selectedBasemapTree: new Setting(
+        'selectedBasemapTree',
+        defaultBasemapTree,
+        getLayerTreeValidator(basemaps)
+    ),
+    currentOverlays: new SettingInitOnFirstRead(
+        'currentOverlays',
+        defaultOverlays,
+        getLayerTreeValidator(overlays)
+    ),
+    previousOverlays: new Setting(
+        'previousOverlays',
+        defaultOverlays,
+        getLayerTreeValidator(overlays)
+    ),
+    selectedOverlayTree: new Setting(
+        'selectedOverlayTree',
+        defaultOverlayTree,
+        getLayerTreeValidator(overlays)
+    ),
     currentOverpassQueries: new SettingInitOnFirstRead(
         'currentOverpassQueries',
-        defaultOverpassQueries
+        defaultOverpassQueries,
+        getLayerTreeValidator(overpassQueryData)
+    ),
+    selectedOverpassTree: new Setting(
+        'selectedOverpassTree',
+        defaultOverpassTree,
+        getLayerTreeValidator(overpassQueryData)
     ),
-    selectedOverpassTree: new Setting('selectedOverpassTree', defaultOverpassTree),
     opacities: new Setting('opacities', defaultOpacities),
     customLayers: new Setting<Record<string, CustomLayer>>('customLayers', {}),
     customBasemapOrder: new Setting<string[]>('customBasemapOrder', []),
     customOverlayOrder: new Setting<string[]>('customOverlayOrder', []),
-    terrainSource: new Setting('terrainSource', defaultTerrainSource),
+    terrainSource: new Setting<TerrainSource>(
+        'terrainSource',
+        defaultTerrainSource,
+        getValueValidator(['maptiler-dem', 'mapterhorn'], defaultTerrainSource)
+    ),
     directionMarkers: new Setting('directionMarkers', false),
     distanceMarkers: new Setting('distanceMarkers', false),
-    streetViewSource: new Setting('streetViewSource', 'mapillary'),
+    streetViewSource: new Setting<StreetViewSource>(
+        'streetViewSource',
+        'mapillary',
+        getValueValidator<StreetViewSource>(['mapillary', 'google'], 'mapillary')
+    ),
     fileOrder: new Setting<string[]>('fileOrder', []),
     defaultOpacity: new Setting('defaultOpacity', 0.7),
     defaultWidth: new Setting('defaultWidth', browser && window.innerWidth < 600 ? 8 : 5),

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

@@ -1,18 +1,24 @@
 import { ListItem, ListLevel } from '$lib/components/file-list/file-list';
 import { GPXFile, GPXStatistics, GPXStatisticsGroup, type Track } from 'gpx';
+import maplibregl from 'maplibre-gl';
 
 export class GPXStatisticsTree {
     level: ListLevel;
     statistics: {
         [key: string]: GPXStatisticsTree | GPXStatistics;
     } = {};
+    wptBounds: maplibregl.LngLatBounds;
 
     constructor(element: GPXFile | Track) {
+        this.wptBounds = new maplibregl.LngLatBounds();
         if (element instanceof GPXFile) {
             this.level = ListLevel.FILE;
             element.children.forEach((child, index) => {
                 this.statistics[index] = new GPXStatisticsTree(child);
             });
+            element.wpt.forEach((wpt) => {
+                this.wptBounds.extend(wpt.getCoordinates());
+            });
         } else {
             this.level = ListLevel.TRACK;
             element.children.forEach((child, index) => {
@@ -42,5 +48,27 @@ export class GPXStatisticsTree {
         }
         return statistics;
     }
+
+    intersectsBBox(bounds: maplibregl.LngLatBounds): boolean {
+        for (let key in this.statistics) {
+            const stats = this.statistics[key];
+            if (stats instanceof GPXStatistics) {
+                const bbox = new maplibregl.LngLatBounds(
+                    stats.global.bounds.southWest,
+                    stats.global.bounds.northEast
+                );
+                if (!bbox.isEmpty() && bbox.intersects(bounds)) {
+                    return true;
+                }
+            } else if (stats.intersectsBBox(bounds)) {
+                return true;
+            }
+        }
+        return false;
+    }
+
+    intersectsWaypointBBox(bounds: maplibregl.LngLatBounds): boolean {
+        return !this.wptBounds.isEmpty() && this.wptBounds.intersects(bounds);
+    }
 }
 export type GPXFileWithStatistics = { file: GPXFile; statistics: GPXStatisticsTree };

website/src/lib/logic/statistics.ts

@@ -1,5 +1,5 @@
 import { selection } from '$lib/logic/selection';
-import { GPXGlobalStatistics, GPXStatisticsGroup } from 'gpx';
+import { GPXGlobalStatistics, GPXStatisticsGroup, type Coordinates } from 'gpx';
 import { fileStateCollection, GPXFileState } from '$lib/logic/file-state';
 import {
     ListFileItem,
@@ -82,6 +82,8 @@ export const gpxStatistics = new SelectedGPXStatistics();
 export const slicedGPXStatistics: Writable<[GPXGlobalStatistics, number, number] | undefined> =
     writable(undefined);
 
+export const hoveredPoint: Writable<Coordinates | null> = writable(null);
+
 gpxStatistics.subscribe(() => {
     slicedGPXStatistics.set(undefined);
 });

website/src/lib/utils.ts

@@ -197,6 +197,18 @@ export function getElevation(
     );
 }
 
+export function loadSVGIcon(map: maplibregl.Map, id: string, svg: string, size: number = 100) {
+    if (!map.hasImage(id)) {
+        let icon = new Image(size, size);
+        icon.onload = () => {
+            if (!map.hasImage(id)) {
+                map.addImage(id, icon);
+            }
+        };
+        icon.src = 'data:image/svg+xml,' + encodeURIComponent(svg);
+    }
+}
+
 export function isMac() {
     return navigator.userAgent.toUpperCase().indexOf('MAC') >= 0;
 }

website/src/routes/[[language]]/+page.svelte

@@ -29,12 +29,12 @@
         data: {
             fundingModule: Promise<any>;
             translationModule: Promise<any>;
-            maptilerModule: Promise<any>;
         };
     } = $props();
 
     let gpxStatistics = writable(exampleGPXFile.getStatistics());
     let slicedGPXStatistics = writable(undefined);
+    let hoveredPoint = writable(null);
     let additionalDatasets = writable(['speed', 'atemp']);
     let elevationFill = writable(undefined);
 
@@ -197,6 +197,7 @@
             <ElevationProfile
                 {gpxStatistics}
                 {slicedGPXStatistics}
+                {hoveredPoint}
                 {additionalDatasets}
                 {elevationFill}
             />
@@ -270,23 +271,4 @@
             </Button>
         </div>
     </div>
-    <div class="px-12 md:px-24 flex flex-col items-center">
-        <div
-            class="max-w-4xl flex flex-col lg:flex-row items-center justify-center gap-x-12 gap-y-6 p-6 border rounded-2xl shadow-xl bg-secondary"
-        >
-            <div
-                class="shrink-0 flex flex-col sm:flex-row lg:flex-col items-center gap-x-4 gap-y-2"
-            >
-                <div class="text-lg font-semibold text-muted-foreground">
-                    ❤️ {i18n._('homepage.supported_by')}
-                </div>
-                <a href="https://www.maptiler.com/" target="_blank">
-                    <Logo company="maptiler" class="w-60" />
-                </a>
-            </div>
-            {#await data.maptilerModule then maptilerModule}
-                <DocsContainer module={maptilerModule.default} />
-            {/await}
-        </div>
-    </div>
 </div>

website/src/routes/[[language]]/+page.ts

@@ -9,6 +9,5 @@ export async function load({ params }) {
     return {
         fundingModule: getModule(language, 'funding'),
         translationModule: getModule(language, 'translation'),
-        maptilerModule: getModule(language, 'maptiler'),
     };
 }

website/src/routes/[[language]]/app/+page.svelte

@@ -16,7 +16,7 @@
     import { loadFiles } from '$lib/logic/file-actions';
     import { onDestroy, onMount } from 'svelte';
     import { page } from '$app/state';
-    import { gpxStatistics, slicedGPXStatistics } from '$lib/logic/statistics';
+    import { gpxStatistics, hoveredPoint, slicedGPXStatistics } from '$lib/logic/statistics';
     import { getURLForGoogleDriveFile } from '$lib/components/embedding/embedding';
     import { db } from '$lib/db';
     import { fileStateCollection } from '$lib/logic/file-state';
@@ -30,6 +30,11 @@
         elevationFill,
     } = settings;
 
+    let bottomPanelWidth: number | undefined = $state();
+    let bottomPanelOrientation = $derived(
+        bottomPanelWidth && bottomPanelWidth >= 540 && $elevationProfile ? 'horizontal' : 'vertical'
+    );
+
     onMount(async () => {
         settings.connectToDatabase(db);
         fileStateCollection.connectToDatabase(db).then(() => {
@@ -127,19 +132,23 @@
             />
         {/if}
         <div
-            class="{$elevationProfile ? '' : 'h-10'} flex flex-row gap-2 px-2 sm:px-4"
+            bind:offsetWidth={bottomPanelWidth}
+            class="flex {bottomPanelOrientation == 'vertical'
+                ? 'flex-col'
+                : 'flex-row py-2'} gap-1 px-2"
             style={$elevationProfile ? `height: ${$bottomPanelSize}px` : ''}
         >
             <GPXStatistics
                 {gpxStatistics}
                 {slicedGPXStatistics}
                 panelSize={$bottomPanelSize}
-                orientation={$elevationProfile ? 'vertical' : 'horizontal'}
+                orientation={bottomPanelOrientation == 'horizontal' ? 'vertical' : 'horizontal'}
             />
             {#if $elevationProfile}
                 <ElevationProfile
                     {gpxStatistics}
                     {slicedGPXStatistics}
+                    {hoveredPoint}
                     {additionalDatasets}
                     {elevationFill}
                 />