Add support for gpx rendering

frontend/package-lock.json

@@ -9,6 +9,7 @@
       "version": "0.6.0",
       "dependencies": {
         "leaflet": "^1.9.4",
+        "leaflet-gpx": "^1.7.0",
         "svelte-preprocess": "^5.1.3"
       },
       "devDependencies": {
@@ -2367,6 +2368,11 @@
       "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.9.4.tgz",
       "integrity": "sha512-nxS1ynzJOmOlHp+iL3FyWqK89GtNL8U8rvlMOsQdTTssxZwCXh8N2NB3GDQOL+YR3XnWyZAxwQixURb+FA74PA=="
     },
+    "node_modules/leaflet-gpx": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/leaflet-gpx/-/leaflet-gpx-1.7.0.tgz",
+      "integrity": "sha512-5NS5WKfp5zaAHMB2KM6OUaIng+SZ3e/UHK2++ABl2wELojYlmLqIL8t1Mj6DaZGkIh3kld+mAUvMGdIzC1yGRA=="
+    },
     "node_modules/levn": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",

frontend/package.json

@@ -33,6 +33,7 @@
   "type": "module",
   "dependencies": {
     "leaflet": "^1.9.4",
+    "leaflet-gpx": "^1.7.0",
     "svelte-preprocess": "^5.1.3"
   }
 }

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,
+			//dragging: leaflet.Browser.mobile,
-			tap: 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 () => {