From c9faabc9454ac618b8f28bbf03332f0611d37f78 Mon Sep 17 00:00:00 2001
From: Alessio Davoli <davoli.alessio@webdeploy.it>
Date: Fri, 22 Dec 2023 12:19:10 +0100
Subject: [PATCH] Add support for gpx rendering

---
 frontend/src/lib/components/tabs/MapTab.svelte | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/frontend/src/lib/components/tabs/MapTab.svelte b/frontend/src/lib/components/tabs/MapTab.svelte
index f3cb591..b8e4a3c 100644
--- a/frontend/src/lib/components/tabs/MapTab.svelte
+++ b/frontend/src/lib/components/tabs/MapTab.svelte
@@ -7,6 +7,7 @@
 	const pianelloCoordinates = [43.14, 12.53];
 	let mapElement: string | HTMLElement;
 	let leaflet;
+	let leafletGPX;
 	let map;
 	let layerGroup;
 	let latitude;
@@ -66,9 +67,10 @@
 		layerGroup = leaflet.layerGroup();
 
 		// Startup Map
+
 		map = leaflet.map(mapElement, {
-			dragging: leaflet.Browser.mobile,
-			tap: leaflet.Browser.mobile,
+			//dragging: leaflet.Browser.mobile,
+			//tap: leaflet.Browser.mobile,
 		});
 
 		map.setView(pianelloCoordinates, 13);
@@ -78,11 +80,21 @@
 			.addTo(map);
 	}
 
+	const renderGPX = () => {
+		const gpx = "/gpx/tidone.gpx"; // URL to your GPX file or the GPX itself
+		new leafletGPX(gpx, {async: true}).on('loaded', function(e) {
+			map.fitBounds(e.target.getBounds());
+		}).addTo(map);
+	}
+
 	onMount(async () => {
 		await watchPosition();
 		leaflet = await import('leaflet');
+		const {GPX} = await import('leaflet-gpx');
+		leafletGPX = GPX;
 
 		renderMap();
+		renderGPX();
 	});
 
 	onDestroy(async () => {