Merge pull request #3 from derGraph/show-tracks-on-map

Show tracks on map

src/lib/Leaflet.svelte

@@ -1,11 +1,26 @@
 <script lang="ts">
 	import L from 'leaflet';
+	import 'leaflet/dist/leaflet.css';
 	import { onDestroy, onMount, setContext } from 'svelte';
 	import { modeCurrent } from '@skeletonlabs/skeleton';
 
 	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);
 
@@ -21,7 +36,7 @@
 		});
 
 		osmLayer.addTo(map);
-		seamarkLayer.addTo(map);
+		//seamarkLayer.addTo(map);
 	});
 
 	onDestroy(() => {
@@ -36,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)) {
@@ -49,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>
 

src/routes/+page.svelte

@@ -2,10 +2,30 @@
 	// @ts-ignore
 	import type { LatLngExpression } from 'leaflet';
 	import Leaflet from '$lib/Leaflet.svelte';
+	import { onMount } from 'svelte';
+	import errorStore from '$lib/errorStore.js';
+
+	export let data;
+	let tracks: null = null;
 
 	const initialView: LatLngExpression = [43.95, 14.79];
+
+	async function getTrip(tripId: String) {
+		let response = await fetch('/api/Datapoints?tripId='+tripId);
+		if(!response.ok){
+			$errorStore = response;
+		}
+		tracks = await response.json();
+	}
+
+	onMount(()=>{
+		if(data.user){
+			getTrip(data.user?.activeTripId);
+		}
+	});
+
 </script>
 
 <div class="md:container md:mx-auto py-3 h-full rounded">
-	<Leaflet view={initialView} zoom={8} />
+	<Leaflet view={initialView} zoom={8} tracks={tracks}/>
 </div>