diff --git a/website/src/lib/components/map/gpx-layer/GPXLayers.svelte b/website/src/lib/components/map/gpx-layer/GPXLayers.svelte index 3ae77206..7a088c4a 100644 --- a/website/src/lib/components/map/gpx-layer/GPXLayers.svelte +++ b/website/src/lib/components/map/gpx-layer/GPXLayers.svelte @@ -1,41 +1,33 @@ diff --git a/website/src/lib/components/map/gpx-layer/DistanceMarkers.ts b/website/src/lib/components/map/gpx-layer/distance-markers.ts similarity index 79% rename from website/src/lib/components/map/gpx-layer/DistanceMarkers.ts rename to website/src/lib/components/map/gpx-layer/distance-markers.ts index 40219c59..652ee0c4 100644 --- a/website/src/lib/components/map/gpx-layer/DistanceMarkers.ts +++ b/website/src/lib/components/map/gpx-layer/distance-markers.ts @@ -1,6 +1,9 @@ import { settings } from '$lib/logic/settings'; +import { gpxStatistics } from '$lib/logic/statistics'; +import { getConvertedDistanceToKilometers } from '$lib/units'; import type { GeoJSONSource } from 'mapbox-gl'; import { get } from 'svelte/store'; +import { map } from '$lib/components/map/map'; const { distanceMarkers, distanceUnits } = settings; @@ -14,35 +17,40 @@ const stops = [ ]; export class DistanceMarkers { - map: mapboxgl.Map; updateBinded: () => void = this.update.bind(this); unsubscribes: (() => void)[] = []; - constructor(map: mapboxgl.Map) { - this.map = map; - + constructor() { 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); + this.unsubscribes.push( + map.subscribe((map_) => { + if (map_) { + map_.on('style.import.load', this.updateBinded); + } + }) + ); } update() { + const map_ = get(map); + if (!map_) return; + try { if (get(distanceMarkers)) { - let distanceSource: GeoJSONSource | undefined = - this.map.getSource('distance-markers'); + let distanceSource: GeoJSONSource | undefined = map_.getSource('distance-markers'); if (distanceSource) { distanceSource.setData(this.getDistanceMarkersGeoJSON()); } else { - this.map.addSource('distance-markers', { + map_.addSource('distance-markers', { type: 'geojson', data: this.getDistanceMarkersGeoJSON(), }); } stops.forEach(([d, minzoom, maxzoom]) => { - if (!this.map.getLayer(`distance-markers-${d}`)) { - this.map.addLayer({ + if (!map_.getLayer(`distance-markers-${d}`)) { + map_.addLayer({ id: `distance-markers-${d}`, type: 'symbol', source: 'distance-markers', @@ -68,13 +76,13 @@ export class DistanceMarkers { }, }); } else { - this.map.moveLayer(`distance-markers-${d}`); + map_.moveLayer(`distance-markers-${d}`); } }); } else { stops.forEach(([d]) => { - if (this.map.getLayer(`distance-markers-${d}`)) { - this.map.removeLayer(`distance-markers-${d}`); + if (map_.getLayer(`distance-markers-${d}`)) { + map_.removeLayer(`distance-markers-${d}`); } }); } @@ -96,7 +104,7 @@ export class DistanceMarkers { for (let i = 0; i < statistics.local.distance.total.length; i++) { if ( statistics.local.distance.total[i] >= - currentTargetDistance * (get(distanceUnits) === 'metric' ? 1 : 1.60934) + getConvertedDistanceToKilometers(currentTargetDistance) ) { let distance = currentTargetDistance.toFixed(0); let [level, minzoom] = stops.find(([d]) => currentTargetDistance % d === 0) ?? [ diff --git a/website/src/lib/components/map/gpx-layer/StartEndMarkers.ts b/website/src/lib/components/map/gpx-layer/start-end-markers.ts similarity index 78% rename from website/src/lib/components/map/gpx-layer/StartEndMarkers.ts rename to website/src/lib/components/map/gpx-layer/start-end-markers.ts index 9776e741..ff211849 100644 --- a/website/src/lib/components/map/gpx-layer/StartEndMarkers.ts +++ b/website/src/lib/components/map/gpx-layer/start-end-markers.ts @@ -1,17 +1,16 @@ -import { gpxStatistics, slicedGPXStatistics, currentTool, Tool } from '$lib/stores'; +import { currentTool, Tool } from '$lib/components/toolbar/tools'; +import { gpxStatistics, slicedGPXStatistics } from '$lib/logic/statistics'; import mapboxgl from 'mapbox-gl'; import { get } from 'svelte/store'; +import { map } from '$lib/components/map/map'; export class StartEndMarkers { - map: mapboxgl.Map; start: mapboxgl.Marker; end: mapboxgl.Marker; updateBinded: () => void = this.update.bind(this); unsubscribes: (() => void)[] = []; - constructor(map: mapboxgl.Map) { - this.map = map; - + 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`; @@ -28,15 +27,18 @@ export class StartEndMarkers { } update() { - let tool = get(currentTool); - let statistics = get(slicedGPXStatistics)?.[0] ?? get(gpxStatistics); + const map_ = get(map); + if (!map_) return; + + const tool = get(currentTool); + const statistics = get(slicedGPXStatistics)?.[0] ?? get(gpxStatistics); if (statistics.local.points.length > 0 && tool !== Tool.ROUTING) { - this.start.setLngLat(statistics.local.points[0].getCoordinates()).addTo(this.map); + this.start.setLngLat(statistics.local.points[0].getCoordinates()).addTo(map_); this.end .setLngLat( statistics.local.points[statistics.local.points.length - 1].getCoordinates() ) - .addTo(this.map); + .addTo(map_); } else { this.start.remove(); this.end.remove(); diff --git a/website/src/lib/units.ts b/website/src/lib/units.ts index 204b5ea3..dd0bee30 100644 --- a/website/src/lib/units.ts +++ b/website/src/lib/units.ts @@ -178,6 +178,20 @@ export function getConvertedDistance(value: number, targetDistanceUnits = get(di } } +export function getConvertedDistanceToKilometers( + value: number, + sourceDistanceUnits = get(distanceUnits) +) { + switch (sourceDistanceUnits) { + case 'metric': + return value; + case 'imperial': + return milesToKilometers(value); + case 'nautical': + return nauticalMilesToKilometers(value); + } +} + export function getConvertedElevation(value: number, targetDistanceUnits = get(distanceUnits)) { switch (targetDistanceUnits) { case 'metric':