From 60ec4ef25efc41aa415aad0ff519850abae09799 Mon Sep 17 00:00:00 2001
From: Alessio Davoli <davoli.alessio@webdeploy.it>
Date: Tue, 11 Jul 2023 00:32:33 +0200
Subject: [PATCH] Add map and description

---
 frontend/package.json                         |  1 +
 .../src/lib/components/tabs/MapTab.svelte     | 57 ++++++++++++++++---
 frontend/yarn.lock                            |  5 ++
 3 files changed, 55 insertions(+), 8 deletions(-)

diff --git a/frontend/package.json b/frontend/package.json
index 643eace..ef5a02e 100644
--- a/frontend/package.json
+++ b/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"
 	}
 }
diff --git a/frontend/src/lib/components/tabs/MapTab.svelte b/frontend/src/lib/components/tabs/MapTab.svelte
index 5fbd89a..5064397 100644
--- a/frontend/src/lib/components/tabs/MapTab.svelte
+++ b/frontend/src/lib/components/tabs/MapTab.svelte
@@ -1,8 +1,49 @@
-<div>
-	The standard Lorem Ipsum passage, used since the 1500s "Lorem ipsum dolor sit amet, consectetur
-	adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
-	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
-	pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
-	mollit anim id est laborum."
-</div>
\ No newline at end of file
+<script lang="ts">
+	import { onMount, onDestroy } from 'svelte';
+	import { fade, fly } from 'svelte/transition';
+
+	const parmaCoordinates = [44.8, 10.32];
+	let mapElement: string | HTMLElement;
+	let leaflet;
+	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>
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index b4b8ed1..47d0853 100644
--- a/frontend/yarn.lock
+++ b/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"