From c034652d86089bb83bddbfbbbc5755ad52cff679 Mon Sep 17 00:00:00 2001
From: Austen Adler <agadler@austenadler.com>
Date: Wed, 1 Mar 2023 22:22:42 -0500
Subject: [PATCH] Separate Map component

---
 web-frontend/src/lib/Map.svelte             | 57 ++++++++++++++++++
 web-frontend/src/routes/+layout.svelte      | 64 +++++++++++++--------
 web-frontend/src/routes/encode/+page.svelte | 38 ++++--------
 3 files changed, 107 insertions(+), 52 deletions(-)
 create mode 100644 web-frontend/src/lib/Map.svelte

diff --git a/web-frontend/src/lib/Map.svelte b/web-frontend/src/lib/Map.svelte
new file mode 100644
index 0000000..d27a1ad
--- /dev/null
+++ b/web-frontend/src/lib/Map.svelte
@@ -0,0 +1,57 @@
+<script>
+	import { onMount, onDestroy } from 'svelte';
+	import { browser } from '$app/environment';
+
+	let mapElement;
+
+	export let map;
+	// export const leaflet;
+
+	onMount(async () => {
+		if (browser) {
+			const leaflet = await import('leaflet');
+
+			map = leaflet.map(mapElement).setView([51.505, -0.09], 13);
+
+			leaflet
+				.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+					attribution:
+						'&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+				})
+				.addTo(map);
+
+			// let popup = leaflet.popup();
+
+			// map.on('click', (e) => {
+			// 	try {
+			// 		// TODO: Leaflet allows sending coordinates out of the standard range
+			// 		latlng = e.latlng;
+			// 		addr = address_from_lat_lon(latlng.lat, latlng.lng);
+			// 		popup.setLatLng(e.latlng).setContent(`${addr}`).openOn(map);
+			// 	} catch (err) {
+			// 		console.error(err);
+			// 		addr = '';
+			// 		popup.setLatLng(e.latlng).setContent(`You clicked at ${e.latlng}`).openOn(map);
+			// 	}
+			// });
+		}
+	});
+
+	onDestroy(async () => {
+		if (map) {
+			console.log('Unloading Leaflet map.');
+			map.remove();
+		}
+	});
+</script>
+
+<main>
+	<div bind:this={mapElement} />
+</main>
+
+<style>
+	@import 'leaflet/dist/leaflet.css';
+	main div {
+		height: 800px;
+	}
+</style>
diff --git a/web-frontend/src/routes/+layout.svelte b/web-frontend/src/routes/+layout.svelte
index 438e620..d7c53e1 100644
--- a/web-frontend/src/routes/+layout.svelte
+++ b/web-frontend/src/routes/+layout.svelte
@@ -3,30 +3,46 @@
 </script>
 
 <header class="bg-white">
-    <nav class="flex items-center justify-between flex-wrap bg-teal-500 p-6">
-  <div class="flex items-center flex-shrink-0 text-white mr-6">
-    <svg class="fill-current h-8 w-8 mr-2" width="54" height="54" viewBox="0 0 54 54" xmlns="http://www.w3.org/2000/svg"><path d="M13.5 22.1c1.8-7.2 6.3-10.8 13.5-10.8 10.8 0 12.15 8.1 17.55 9.45 3.6.9 6.75-.45 9.45-4.05-1.8 7.2-6.3 10.8-13.5 10.8-10.8 0-12.15-8.1-17.55-9.45-3.6-.9-6.75.45-9.45 4.05zM0 38.3c1.8-7.2 6.3-10.8 13.5-10.8 10.8 0 12.15 8.1 17.55 9.45 3.6.9 6.75-.45 9.45-4.05-1.8 7.2-6.3 10.8-13.5 10.8-10.8 0-12.15-8.1-17.55-9.45-3.6-.9-6.75.45-9.45 4.05z"/></svg>
-    <span class="font-semibold text-xl tracking-tight">Tailwind CSS</span>
-  </div>
-  <div class="block lg:hidden">
-    <button class="flex items-center px-3 py-2 border rounded text-teal-200 border-teal-400 hover:text-white hover:border-white">
-      <svg class="fill-current h-3 w-3" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>Menu</title><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"/></svg>
-    </button>
-  </div>
-  <div class="w-full block flex-grow lg:flex lg:items-center lg:w-auto">
-    <div class="text-sm lg:flex-grow">
-      <a href="/" class="block mt-4 lg:inline-block lg:mt-0 text-teal-200 hover:text-white mr-4">
-        Home
-      </a>
-      <a href="/encode" class="block mt-4 lg:inline-block lg:mt-0 text-teal-200 hover:text-white mr-4">
-        Encode
-      </a>
-      <a href="/decode" class="block mt-4 lg:inline-block lg:mt-0 text-teal-200 hover:text-white">
-        Decode
-      </a>
-    </div>
-  </div>
-</nav>
+	<nav class="flex items-center justify-between flex-wrap bg-teal-500 p-6">
+		<div class="flex items-center flex-shrink-0 text-white mr-6">
+			<svg
+				class="fill-current h-8 w-8 mr-2"
+				width="54"
+				height="54"
+				viewBox="0 0 54 54"
+				xmlns="http://www.w3.org/2000/svg"
+				><path
+					d="M13.5 22.1c1.8-7.2 6.3-10.8 13.5-10.8 10.8 0 12.15 8.1 17.55 9.45 3.6.9 6.75-.45 9.45-4.05-1.8 7.2-6.3 10.8-13.5 10.8-10.8 0-12.15-8.1-17.55-9.45-3.6-.9-6.75.45-9.45 4.05zM0 38.3c1.8-7.2 6.3-10.8 13.5-10.8 10.8 0 12.15 8.1 17.55 9.45 3.6.9 6.75-.45 9.45-4.05-1.8 7.2-6.3 10.8-13.5 10.8-10.8 0-12.15-8.1-17.55-9.45-3.6-.9-6.75.45-9.45 4.05z"
+				/></svg
+			>
+			<span class="font-semibold text-xl tracking-tight">Tailwind CSS</span>
+		</div>
+		<div class="block lg:hidden">
+			<button
+				class="flex items-center px-3 py-2 border rounded text-teal-200 border-teal-400 hover:text-white hover:border-white"
+			>
+				<svg class="fill-current h-3 w-3" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"
+					><title>Menu</title><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z" /></svg
+				>
+			</button>
+		</div>
+		<div class="w-full block flex-grow lg:flex lg:items-center lg:w-auto">
+			<div class="text-sm lg:flex-grow">
+				<a href="/" class="block mt-4 lg:inline-block lg:mt-0 text-teal-200 hover:text-white mr-4">
+					Home
+				</a>
+				<a
+					href="/encode"
+					class="block mt-4 lg:inline-block lg:mt-0 text-teal-200 hover:text-white mr-4"
+				>
+					Encode
+				</a>
+				<a href="/decode" class="block mt-4 lg:inline-block lg:mt-0 text-teal-200 hover:text-white">
+					Decode
+				</a>
+			</div>
+		</div>
+	</nav>
 </header>
 
 <slot />
diff --git a/web-frontend/src/routes/encode/+page.svelte b/web-frontend/src/routes/encode/+page.svelte
index 8fbdbe2..ef1e5a4 100644
--- a/web-frontend/src/routes/encode/+page.svelte
+++ b/web-frontend/src/routes/encode/+page.svelte
@@ -4,8 +4,10 @@
 	import { onMount, onDestroy } from 'svelte';
 	import { browser } from '$app/environment';
 
-	let mapElement;
+	import Map from '$lib/Map.svelte';
+
 	let map;
+
 	let latlng = { lat: '', lng: '' };
 	let addr = '';
 	let wasmStatus = WasmStatus.NotLoaded;
@@ -24,18 +26,7 @@
 
 		if (browser) {
 			const leaflet = await import('leaflet');
-
-			map = leaflet.map(mapElement).setView([51.505, -0.09], 13);
-
-			leaflet
-				.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
-					attribution:
-						'&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
-				})
-				.addTo(map);
-
 			let popup = leaflet.popup();
-
 			map.on('click', (e) => {
 				try {
 					// TODO: Leaflet allows sending coordinates out of the standard range
@@ -51,29 +42,20 @@
 		}
 	});
 
-	onDestroy(async () => {
-		if (map) {
-			console.log('Unloading Leaflet map.');
-			map.remove();
-		}
-	});
+	// onDestroy(async () => {
+	// 	if (map) {
+	// 		console.log('Unloading Leaflet map.');
+	// 		map.remove();
+	// 	}
+	// });
 </script>
 
-<style>
-	@import 'leaflet/dist/leaflet.css';
-	main div {
-		height: 800px;
-	}
-</style>
-
 <h2>Encode</h2>
 
 {#if wasmStatus == WasmStatus.Loaded || wasmStatus == WasmStatus.NotLoaded}
 	<p>Current cursor: {addr} => ({latlng.lat}, {latlng.lng})</p>
 
-	<main>
-		<div bind:this={mapElement} />
-	</main>
+	<Map bind:map />
 {:else if wasmStatus == WasmStatus.Errored}
 	<div class="flex">
 		<div class="py-1">