progress

2025-09-03 17:12:31 +00:00 · 2025-06-21 21:07:36 +02:00
parent f0230d4634
commit 1cc07901f6
803 changed files with 7937 additions and 6329 deletions
--- a/website/src/lib/components/map/gpx-layer/DistanceMarkers.ts
+++ b/website/src/lib/components/map/gpx-layer/DistanceMarkers.ts
@@ -0,0 +1,130 @@
+import { settings } from '$lib/db';
+import { gpxStatistics } from '$lib/stores';
+import type { GeoJSONSource } from 'mapbox-gl';
+import { get } from 'svelte/store';
+
+// const { distanceMarkers, distanceUnits } = settings;
+
+const stops = [
+    [100, 0],
+    [50, 7],
+    [25, 8, 10],
+    [10, 10],
+    [5, 11],
+    [1, 13],
+];
+
+export class DistanceMarkers {
+    map: mapboxgl.Map;
+    updateBinded: () => void = this.update.bind(this);
+    unsubscribes: (() => void)[] = [];
+
+    constructor(map: mapboxgl.Map) {
+        this.map = map;
+
+        this.unsubscribes.push(gpxStatistics.subscribe(this.updateBinded));
+        this.unsubscribes.push(distanceMarkers.subscribe(this.updateBinded));
+        this.unsubscribes.push(distanceUnits.subscribe(this.updateBinded));
+        this.map.on('style.import.load', this.updateBinded);
+    }
+
+    update() {
+        try {
+            if (get(distanceMarkers)) {
+                let distanceSource: GeoJSONSource | undefined =
+                    this.map.getSource('distance-markers');
+                if (distanceSource) {
+                    distanceSource.setData(this.getDistanceMarkersGeoJSON());
+                } else {
+                    this.map.addSource('distance-markers', {
+                        type: 'geojson',
+                        data: this.getDistanceMarkersGeoJSON(),
+                    });
+                }
+                stops.forEach(([d, minzoom, maxzoom]) => {
+                    if (!this.map.getLayer(`distance-markers-${d}`)) {
+                        this.map.addLayer({
+                            id: `distance-markers-${d}`,
+                            type: 'symbol',
+                            source: 'distance-markers',
+                            filter:
+                                d === 5
+                                    ? [
+                                          'any',
+                                          ['==', ['get', 'level'], 5],
+                                          ['==', ['get', 'level'], 25],
+                                      ]
+                                    : ['==', ['get', 'level'], d],
+                            minzoom: minzoom,
+                            maxzoom: maxzoom ?? 24,
+                            layout: {
+                                'text-field': ['get', 'distance'],
+                                'text-size': 14,
+                                'text-font': ['Open Sans Bold'],
+                            },
+                            paint: {
+                                'text-color': 'black',
+                                'text-halo-width': 2,
+                                'text-halo-color': 'white',
+                            },
+                        });
+                    } else {
+                        this.map.moveLayer(`distance-markers-${d}`);
+                    }
+                });
+            } else {
+                stops.forEach(([d]) => {
+                    if (this.map.getLayer(`distance-markers-${d}`)) {
+                        this.map.removeLayer(`distance-markers-${d}`);
+                    }
+                });
+            }
+        } catch (e) {
+            // No reliable way to check if the map is ready to add sources and layers
+            return;
+        }
+    }
+
+    remove() {
+        this.unsubscribes.forEach((unsubscribe) => unsubscribe());
+    }
+
+    getDistanceMarkersGeoJSON(): GeoJSON.FeatureCollection {
+        let statistics = get(gpxStatistics);
+
+        let features = [];
+        let currentTargetDistance = 1;
+        for (let i = 0; i < statistics.local.distance.total.length; i++) {
+            if (
+                statistics.local.distance.total[i] >=
+                currentTargetDistance * (get(distanceUnits) === 'metric' ? 1 : 1.60934)
+            ) {
+                let distance = currentTargetDistance.toFixed(0);
+                let [level, minzoom] = stops.find(([d]) => currentTargetDistance % d === 0) ?? [
+                    0, 0,
+                ];
+                features.push({
+                    type: 'Feature',
+                    geometry: {
+                        type: 'Point',
+                        coordinates: [
+                            statistics.local.points[i].getLongitude(),
+                            statistics.local.points[i].getLatitude(),
+                        ],
+                    },
+                    properties: {
+                        distance,
+                        level,
+                        minzoom,
+                    },
+                } as GeoJSON.Feature);
+                currentTargetDistance += 1;
+            }
+        }
+
+        return {
+            type: 'FeatureCollection',
+            features,
+        };
+    }
+}