refactoring for tools and start waypoint

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

@@ -1,7 +1,7 @@
-import type { GPXFile } from "gpx";
+import type { GPXFile, Waypoint } from "gpx";
 import { map, selectFiles, currentTool, Tool } from "$lib/stores";
 import { get, type Writable } from "svelte/store";
-import type mapboxgl from "mapbox-gl";
+import mapboxgl from "mapbox-gl";
 
 let id = 0;
 function getLayerId() {
@@ -46,16 +46,21 @@ export class GPXLayer {
     file: Writable<GPXFile>;
     layerId: string;
     layerColor: string;
+    popup: mapboxgl.Popup;
+    popupElement: HTMLElement;
+    markers: mapboxgl.Marker[] = [];
     unsubscribe: () => void;
 
     addBinded: () => void = this.add.bind(this);
     selectOnClickBinded: (e: any) => void = this.selectOnClick.bind(this);
 
-    constructor(map: mapboxgl.Map, file: Writable<GPXFile>) {
+    constructor(map: mapboxgl.Map, file: Writable<GPXFile>, popup: mapboxgl.Popup, popupElement: HTMLElement) {
         this.map = map;
         this.file = file;
         this.layerId = getLayerId();
         this.layerColor = getColor();
+        this.popup = popup;
+        this.popupElement = popupElement;
         this.unsubscribe = file.subscribe(this.updateData.bind(this));
 
         get(this.file)._data = {
@@ -97,6 +102,23 @@ export class GPXLayer {
             this.map.on('mouseenter', this.layerId, toPointerCursor);
             this.map.on('mouseleave', this.layerId, toDefaultCursor);
         }
+
+        if (this.markers.length == 0) {
+            get(this.file).wpt.forEach((waypoint) => {
+                let marker = new mapboxgl.Marker().setLngLat(waypoint.getCoordinates());
+                marker.getElement().addEventListener('click', (e) => {
+                    marker.setPopup(this.popup);
+                    marker.togglePopup();
+                    e.stopPropagation();
+                });
+
+                this.markers.push(marker);
+            });
+        }
+
+        this.markers.forEach((marker) => {
+            marker.addTo(this.map);
+        });
     }
 
     updateData() {
@@ -115,6 +137,10 @@ export class GPXLayer {
         this.map.removeLayer(this.layerId);
         this.map.removeSource(this.layerId);
 
+        this.markers.forEach((marker) => {
+            marker.remove();
+        });
+
         this.unsubscribe();
 
         decrementColor(this.layerColor);

website/src/lib/components/gpx-layer/GPXLayers.svelte

@@ -1,31 +1,48 @@
 <script lang="ts">
-	import { map, files, selectedFiles, getFileStore } from '$lib/stores';
-	import type { GPXFile } from 'gpx';
+	import { map, files, selectedFiles, getFileStore, gpxLayers } from '$lib/stores';
 	import { GPXLayer } from './GPXLayer';
-	import { get, type Writable } from 'svelte/store';
+	import { get } from 'svelte/store';
+	import { onMount } from 'svelte';
+	import mapboxgl from 'mapbox-gl';
+	import WaypointPopup from './WaypointPopup.svelte';
 
-	let gpxLayers: Map<Writable<GPXFile>, GPXLayer> = new Map();
+	let popupElement: HTMLElement;
+	let popup: mapboxgl.Popup | null = null;
 
 	$: if ($map) {
-		// remove layers for deleted files
-		gpxLayers.forEach((layer, file) => {
-			if (!get(files).includes(file)) {
-				layer.remove();
-				gpxLayers.delete(file);
-			}
-		});
-		// add layers for new files
-		$files.forEach((file) => {
-			if (!gpxLayers.has(file)) {
-				gpxLayers.set(file, new GPXLayer(get(map), file));
-			}
+		gpxLayers.update(($layers) => {
+			// remove layers for deleted files
+			$layers.forEach((layer, file) => {
+				if (!get(files).includes(file)) {
+					layer.remove();
+					$layers.delete(file);
+				}
+			});
+			// add layers for new files
+			$files.forEach((file) => {
+				if (!$layers.has(file)) {
+					$layers.set(file, new GPXLayer(get(map), file, popup, popupElement));
+				}
+			});
+			return $layers;
 		});
 	}
 
 	$: $selectedFiles.forEach((file) => {
 		let fileStore = getFileStore(file);
-		if (gpxLayers.has(fileStore)) {
-			gpxLayers.get(fileStore)?.moveToFront();
+		if ($gpxLayers.has(fileStore)) {
+			$gpxLayers.get(fileStore)?.moveToFront();
 		}
 	});
+
+	onMount(() => {
+		popup = new mapboxgl.Popup({
+			closeButton: false,
+			maxWidth: undefined
+		});
+		popup.setDOMContent(popupElement);
+		popupElement.classList.remove('hidden');
+	});
 </script>
+
+<WaypointPopup bind:element={popupElement} />

website/src/lib/components/gpx-layer/WaypointPopup.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+	import * as Card from '$lib/components/ui/card';
+
+	import { _ } from 'svelte-i18n';
+
+	export let element: HTMLElement;
+</script>
+
+<div bind:this={element} class="hidden">
+	<Card.Root class="border-none shadow-md text-base">
+		<Card.Content class="flex flex-col p-1">Waypoint info (TODO)</Card.Content>
+	</Card.Root>
+</div>