frontend/package-lock.json

@@ -15,7 +15,6 @@
       "devDependencies": {
         "@sveltejs/adapter-auto": "^2.1.1",
         "@sveltejs/kit": "^1.29.1",
-        "@types/leaflet": "^1.9.8",
         "@typescript-eslint/eslint-plugin": "^6.14.0",
         "@typescript-eslint/parser": "^6.14.0",
         "eslint": "^8.55.0",
@@ -955,27 +954,12 @@
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
       "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw=="
     },
-    "node_modules/@types/geojson": {
-      "version": "7946.0.13",
-      "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.13.tgz",
-      "integrity": "sha512-bmrNrgKMOhM3WsafmbGmC+6dsF2Z308vLFsQ3a/bT8X8Sv5clVYpPars/UPq+sAaJP+5OoLAYgwbkS5QEJdLUQ==",
-      "dev": true
-    },
     "node_modules/@types/json-schema": {
       "version": "7.0.15",
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
       "integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==",
       "dev": true
     },
-    "node_modules/@types/leaflet": {
-      "version": "1.9.8",
-      "resolved": "https://registry.npmjs.org/@types/leaflet/-/leaflet-1.9.8.tgz",
-      "integrity": "sha512-EXdsL4EhoUtGm2GC2ZYtXn+Fzc6pluVgagvo2VC1RHWToLGlTRwVYoDpqS/7QXa01rmDyBjJk3Catpf60VMkwg==",
-      "dev": true,
-      "dependencies": {
-        "@types/geojson": "*"
-      }
-    },
     "node_modules/@types/pug": {
       "version": "2.0.10",
       "resolved": "https://registry.npmjs.org/@types/pug/-/pug-2.0.10.tgz",

frontend/package.json

@@ -15,7 +15,6 @@
   "devDependencies": {
     "@sveltejs/adapter-auto": "^2.1.1",
     "@sveltejs/kit": "^1.29.1",
-    "@types/leaflet": "^1.9.8",
     "@typescript-eslint/eslint-plugin": "^6.14.0",
     "@typescript-eslint/parser": "^6.14.0",
     "eslint": "^8.55.0",

frontend/src/lib/components/Tabs.svelte

@@ -9,6 +9,10 @@
 
 	let ref: HTMLDivElement;
 	let component = InfoTab;
+	onMount(() => {
+		const gbcr = ref.getBoundingClientRect();
+		ref.style.height = `${gbcr.height}px`;
+	});
 
 	const activeClicked = (evt) => {
 		const clickedTab = evt.target.closest('button');
@@ -31,7 +35,7 @@
 				break;
 		}
 
-		dispatch('tab-click', { component });
+		dispatch('map-click', { component });
 	};
 </script>
 

frontend/src/lib/components/tabs/MapTab.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { onMount, onDestroy } from 'svelte';
-	import { fade } from 'svelte/transition';
+	import { fade, fly } from 'svelte/transition';
 
 	export let route;
 	const pianelloCoordinates = [43.14, 12.53];

frontend/src/routes/routes/[slug]/+page.svelte

@@ -1,17 +1,12 @@
 <script lang="ts">
 	import Header from '$lib/components/Header.svelte';
 	import Tabs from '$lib/components/Tabs.svelte';
-	import MapTab from '$lib/components/tabs/MapTab.svelte';
 
 	export let data: App.Route;
 
 	let divider;
 
-    const tabClick = (event) => {
-		if (event.detail.component === MapTab) {
-			
-		}
-	};
+    const mapClick = () => {};
 </script>
 
 <Header></Header>
@@ -22,7 +17,7 @@
 		<p class='path-name'>Percorso <b>{data.name_it}</b></p>
 		<p id="duration">Dislivello {data?.route_sport_details[0]?.elevation_gain} m</p>
 	</div>
-	<Tabs on:tab-click={tabClick} route={data}></Tabs>
+	<Tabs on:map-click={mapClick} route={data}></Tabs>
 </div>
 
 <style>