steven/gpx.studio
1
0
Fork 0
mirror of https://github.com/gpxstudio/gpx.studio.git synced 2025-08-31 15:43:25 +00:00
Code Issues Packages Projects Releases Wiki Activity

distance markers hierarchy

Browse Source
This commit is contained in:
vcoppe
2024-10-08 16:58:04 +02:00
parent 711825f5a3
commit d1e4588813
1 changed files with 34 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
website/src/lib/components/gpx-layer/DistanceMarkers.ts
View File

@@ -5,6 +5,8 @@ import { get } from "svelte/store";
const { distanceMarkers, distanceUnits } = settings; const { distanceMarkers, distanceUnits } = settings;
const stops = [[100, 0], [50, 7], [25, 8, 10], [10, 10], [5, 11], [1, 13]];
export class DistanceMarkers { export class DistanceMarkers {
map: mapboxgl.Map; map: mapboxgl.Map;
updateBinded: () => void = this.update.bind(this); updateBinded: () => void = this.update.bind(this);
@@ -31,30 +33,36 @@ export class DistanceMarkers {
data: this.getDistanceMarkersGeoJSON() data: this.getDistanceMarkersGeoJSON()
}); });
} }
if (!this.map.getLayer('distance-markers')) { stops.forEach(([d, minzoom, maxzoom]) => {
this.map.addLayer({ if (!this.map.getLayer(`distance-markers-${d}`)) {
id: 'distance-markers', this.map.addLayer({
type: 'symbol', id: `distance-markers-${d}`,
source: 'distance-markers', type: 'symbol',
layout: { source: 'distance-markers',
'text-field': ['get', 'distance'], filter: d === 5 ? ['any', ['==', ['get', 'level'], 5], ['==', ['get', 'level'], 25]] : ['==', ['get', 'level'], d],
'text-size': 14, minzoom: minzoom,
'text-font': ['Open Sans Bold'], maxzoom: maxzoom ?? 24,
'text-padding': 20, layout: {
}, 'text-field': ['get', 'distance'],
paint: { 'text-size': 14,
'text-color': 'black', 'text-font': ['Open Sans Bold'],
'text-halo-width': 2, },
'text-halo-color': 'white', paint: {
} 'text-color': 'black',
}); 'text-halo-width': 2,
} else { 'text-halo-color': 'white',
this.map.moveLayer('distance-markers'); }
} });
} else {
this.map.moveLayer(`distance-markers-${d}`);
}
});
} else { } else {
if (this.map.getLayer('distance-markers')) { stops.forEach(([d]) => {
this.map.removeLayer('distance-markers'); if (this.map.getLayer(`distance-markers-${d}`)) {
} this.map.removeLayer(`distance-markers-${d}`);
}
});
} }
} catch (e) { // No reliable way to check if the map is ready to add sources and layers } catch (e) { // No reliable way to check if the map is ready to add sources and layers
return; return;
@@ -73,6 +81,7 @@ export class DistanceMarkers {
for (let i = 0; i < statistics.local.distance.total.length; i++) { for (let i = 0; i < statistics.local.distance.total.length; i++) {
if (statistics.local.distance.total[i] >= currentTargetDistance * (get(distanceUnits) === 'metric' ? 1 : 1.60934)) { if (statistics.local.distance.total[i] >= currentTargetDistance * (get(distanceUnits) === 'metric' ? 1 : 1.60934)) {
let distance = currentTargetDistance.toFixed(0); let distance = currentTargetDistance.toFixed(0);
let [level, minzoom] = stops.find(([d]) => currentTargetDistance % d === 0) ?? [0, 0];
features.push({ features.push({
type: 'Feature', type: 'Feature',
geometry: { geometry: {
@@ -81,6 +90,8 @@ export class DistanceMarkers {
}, },
properties: { properties: {
distance, distance,
level,
minzoom,
} }
} as GeoJSON.Feature); } as GeoJSON.Feature);
currentTargetDistance += 1; currentTargetDistance += 1;