Add map and description

frontend/package.json

@@ -30,6 +30,7 @@
 	"type": "module",
 	"dependencies": {
 		"@sveltejs/adapter-node": "^1.3.1",
+		"leaflet": "^1.9.4",
 		"svelte-preprocess": "^5.0.4"
 	}
 }

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

@@ -1,8 +1,49 @@
-<div>
+<script lang="ts">
-	The standard Lorem Ipsum passage, used since the 1500s "Lorem ipsum dolor sit amet, consectetur
+	import { onMount, onDestroy } from 'svelte';
-	adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
+	import { fade, fly } from 'svelte/transition';
-	minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+
-	Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+	const parmaCoordinates = [44.8, 10.32];
-	pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
+	let mapElement: string | HTMLElement;
-	mollit anim id est laborum."
+	let leaflet;
-</div>
+	let map;
+	let layerGroup;
+
+	onMount(async () => {
+		leaflet = await import('leaflet');
+		layerGroup = leaflet.layerGroup();
+
+		// Startup Map
+		map = leaflet.map(mapElement, {
+			dragging: leaflet.Browser.mobile,
+			tap: leaflet.Browser.mobile,
+			minZoom: 12
+		});
+
+		map.setView(parmaCoordinates, 13);
+		map.setMaxBounds(map.getBounds());
+
+		leaflet
+			.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
+				attribution:
+					'&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+			})
+			.addTo(map);
+	});
+
+	onDestroy(async () => {
+		if (map) {
+			console.log('Unloading Leaflet map.');
+			map.remove();
+		}
+	});
+</script>
+
+<div id="map" in:fade bind:this={mapElement} />
+
+<style>
+	@import 'leaflet/dist/leaflet.css';
+	#map {
+		height: 60vh;
+		z-index: 1;
+	}
+</style>

frontend/yarn.lock

@@ -1167,6 +1167,11 @@ known-css-properties@^0.27.0:
   resolved "https://registry.yarnpkg.com/known-css-properties/-/known-css-properties-0.27.0.tgz#82a9358dda5fe7f7bd12b5e7142c0a205393c0c5"
   integrity sha512-uMCj6+hZYDoffuvAJjFAPz56E9uoowFHmTkqRtRq5WyC5Q6Cu/fTZKNQpX/RbzChBYLLl3lo8CjFZBAZXq9qFg==
 
+leaflet@^1.9.4:
+  version "1.9.4"
+  resolved "https://registry.yarnpkg.com/leaflet/-/leaflet-1.9.4.tgz#23fae724e282fa25745aff82ca4d394748db7d8d"
+  integrity sha512-nxS1ynzJOmOlHp+iL3FyWqK89GtNL8U8rvlMOsQdTTssxZwCXh8N2NB3GDQOL+YR3XnWyZAxwQixURb+FA74PA==
+
 levn@^0.4.1:
   version "0.4.1"
   resolved "https://registry.yarnpkg.com/levn/-/levn-0.4.1.tgz#ae4562c007473b932a6200d403268dd2fffc6ade"