modify Leaflet to show tracks

derGraph · Aug 20, 2024 · 24b45c6 · 24b45c6
1 parent 39d98c8
commit 24b45c6
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 1 deletion.
diff --git a/src/lib/Leaflet.css b/src/lib/Leaflet.css
diff --git a/src/lib/Leaflet.svelte b/src/lib/Leaflet.svelte
@@ -7,6 +7,20 @@
 	let map: L.Map | undefined;
 	let mapElement: HTMLDivElement;
 
+	interface Datapoint {
+		id?: string;
+		time?: Date;
+		tripId: string;
+		lat: number;
+		long: number;
+		speed?: number;
+		heading?: number;
+		depth?: number;
+		h_accuracy?: number;
+		v_accuracy?: number;
+		propulsion?: number;
+	}
+
 	onMount(() => {
 		map = L.map(mapElement);
 
@@ -22,7 +36,7 @@
 		});
 
 		osmLayer.addTo(map);
-		seamarkLayer.addTo(map);
+		//seamarkLayer.addTo(map);
 	});
 
 	onDestroy(() => {
@@ -37,6 +51,7 @@
 	export let bounds: L.LatLngBoundsExpression | undefined = undefined;
 	export let view: L.LatLngExpression | undefined = undefined;
 	export let zoom: number | undefined = undefined;
+	export let tracks: Datapoint[]  | null = null;
 
 	onMount(() => {
 		if (!bounds && (!view || !zoom)) {
@@ -50,6 +65,14 @@
 		} else if (view && zoom) {
 			map.setView(view, zoom);
 		}
+		let latlngs: L.LatLng[] = [];
+		if(tracks != null){
+			for(let point of tracks){
+				latlngs.push(new L.LatLng(point.lat, point.long))
+			}
+			let polyline = L.polyline(latlngs, {color: 'red'}).addTo(map);
+		}
+
 	}
 </script>