steven/gpx.studio
1
0
Fork 0
mirror of https://github.com/gpxstudio/gpx.studio.git synced 2025-09-02 16:52:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

start-end markers

Browse Source
This commit is contained in:
vcoppe
2024-06-10 13:21:53 +02:00
parent 9190d85bcd
commit 69a945aa4d
2 changed files with 40 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
website/src/lib/components/gpx-layer/GPXLayers.svelte
View File

@@ -5,8 +5,10 @@
import WaypointPopup from './WaypointPopup.svelte'; import WaypointPopup from './WaypointPopup.svelte';
import { fileObservers } from '$lib/db'; import { fileObservers } from '$lib/db';
import { DistanceMarkers } from './DistanceMarkers'; import { DistanceMarkers } from './DistanceMarkers';
import { StartEndMarkers } from './StartEndMarkers';
let distanceMarkers: DistanceMarkers; let distanceMarkers: DistanceMarkers;
let startEndMarkers: StartEndMarkers;
$: if ($map && $fileObservers) { $: if ($map && $fileObservers) {
// remove layers for deleted files // remove layers for deleted files
@@ -26,6 +28,7 @@
$: if ($map) { $: if ($map) {
distanceMarkers = new DistanceMarkers(get(map)); distanceMarkers = new DistanceMarkers(get(map));
startEndMarkers = new StartEndMarkers(get(map));
} }
</script> </script>

37
website/src/lib/components/gpx-layer/StartEndMarkers.ts Normal file
View File

@@ -0,0 +1,37 @@
import { gpxStatistics, currentTool, Tool } from "$lib/stores";
import mapboxgl from "mapbox-gl";
import { get } from "svelte/store";
export class StartEndMarkers {
map: mapboxgl.Map;
start: mapboxgl.Marker;
end: mapboxgl.Marker;
updateBinded: () => void = this.update.bind(this);
constructor(map: mapboxgl.Map) {
this.map = map;
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 mapboxgl.Marker({ element: startElement });
this.end = new mapboxgl.Marker({ element: endElement });
gpxStatistics.subscribe(this.updateBinded);
currentTool.subscribe(this.updateBinded);
}
update() {
let statistics = get(gpxStatistics);
if (statistics.local.points.length > 0 && get(currentTool) !== Tool.ROUTING) {
this.start.setLngLat(statistics.local.points[0].getCoordinates()).addTo(this.map);
this.end.setLngLat(statistics.local.points[statistics.local.points.length - 1].getCoordinates()).addTo(this.map);
} else {
this.start.remove();
this.end.remove();
}
}
}