Start work on styling map

web-frontend/src/lib/Map.svelte

@@ -45,13 +45,28 @@
 	});
 </script>
 
-<main>
+<div id="container">
-	<div bind:this={mapElement} />
+	<div id="map" bind:this={mapElement} class="h-full w-fill pt-12" />
-</main>
+</div>
 
 <style>
 	@import 'leaflet/dist/leaflet.css';
-	main div {
+	/*
-		height: 800px;
+	#container {
+		height: 100%;
+		width: 100px;
+	}
+	*/
+	/*
+	#map {
+		position: absolute;
+		top: 20rem;
+		bottom: 0;
+		padding: 10rem;
+	}
+	*/
+	#map {
+		height: 100%;
+		width: 100%;
 	}
 </style>

web-frontend/src/lib/common.js

@@ -1,4 +1,4 @@
-import init, { address_from_lat_lon } from 'xpin-wasm';
+import init from 'xpin-wasm';
 import * as xpinWasm from 'xpin-wasm';
 
 export const WasmStatus = {

web-frontend/src/routes/+layout.svelte

@@ -2,8 +2,14 @@
 	import '../app.css';
 </script>
 
+<meta
+	name="viewport"
+	content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
+/>
+
 <header class="bg-white">
-	<nav class="flex items-center justify-between flex-wrap bg-teal-500 p-6">
+	<!-- TODO: "justify-between" adds that space -->
+	<nav class="flex items-center justify-between flex-wrap bg-teal-500 p-2">
 		<div class="flex items-center flex-shrink-0 text-white mr-6">
 			<svg
 				class="fill-current h-8 w-8 mr-2"
@@ -15,37 +21,21 @@
 					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>
+			<span class="font-semibold text-xl tracking-tight">Xpin</span>
 		</div>
-		<div class="block lg:hidden">
+		<div class="block">
-			<button
+			<div class="text-sm">
-				class="flex items-center px-3 py-2 border rounded text-teal-200 border-teal-400 hover:text-white hover:border-white"
+				<a href="/" class="block mt-4 inline-block mt-0 text-teal-200 hover:text-white mr-4">
-			>
-				<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
+				<a href="./app" class="block mt-4 inline-block mt-0 text-teal-200 hover:text-white mr-4">
-					href="./encode"
+					App
-					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>
 
+<main class="p-6 h-full ">
 <slot />
+</main>

web-frontend/src/routes/app/+page.svelte

@@ -4,7 +4,8 @@
 	import { onMount, onDestroy } from 'svelte';
 	import AddressInput from '$lib/AddressInput.svelte';
 	import { browser } from '$app/environment';
-	import leaflet from 'leaflet';
+	let leaflet;
+	// import leaflet from 'leaflet';
 
 	import Map from '$lib/Map.svelte';
 
@@ -19,6 +20,7 @@
 	};
 
 	onMount(async () => {
+		leaflet = await import('leaflet');
 		wasm = await getWasm();
 
 		if (browser) {
@@ -48,11 +50,13 @@
 	let outputValue = '';
 	const input = () => {
 		try {
-			outputValue = wasm.call.address_to_lat_lon(addr);
+			if (browser) {
-			let latlng = new leaflet.LatLng(outputValue[0], outputValue[1]);
+				outputValue = wasm.call.address_to_lat_lon(addr);
-			map.panTo(latlng, 20);
+				let latlng = new leaflet.LatLng(outputValue[0], outputValue[1]);
-			leaflet.popup().setLatLng(latlng).setContent(`${outputValue}<br>hi`).openOn(map);
+				map.panTo(latlng, 20);
-			map.setView(latlng);
+				leaflet.popup().setLatLng(latlng).setContent(`${outputValue}<br>hi`).openOn(map);
+				map.setView(latlng);
+			}
 		} catch (e) {
 			console.error(e);
 			outputValue = `${e}`;

web-frontend/src/routes/decode/+page.svelte

@@ -1,53 +0,0 @@
-<script>
-	import { getWasm, WasmStatus } from '$lib/common.js';
-	import { onMount, onDestroy } from 'svelte';
-	import AddressInput from '$lib/AddressInput.svelte';
-	import Map from '$lib/Map.svelte';
-	import leaflet from 'leaflet';
-
-	// const leaflet = await import('leaflet');
-	let map;
-	let inputValue = '';
-	let outputValue = '';
-	let wasm = {
-		status: WasmStatus.NotLoaded,
-		error: undefined,
-		call: undefined
-	};
-
-	onMount(async () => {
-		wasm = await getWasm();
-	});
-
-	onDestroy(async () => {
-		if (map) {
-			console.log('Unloading Leaflet map.');
-			map.remove();
-		}
-	});
-
-	const input = () => {
-		try {
-			outputValue = wasm.call.address_to_lat_lon(inputValue);
-			let latlng = new leaflet.LatLng(outputValue[0], outputValue[1]);
-			map.panTo(latlng, 20);
-			leaflet.popup().setLatLng(latlng).setContent(`${outputValue}<br>hi`).openOn(map);
-			map.setView(latlng, 20);
-			// map.flyTo(new leaflet.LatLng(outputValue[0], outputValue[1]), 8);
-		} catch (e) {
-			console.error(e);
-			outputValue = `${e}`;
-		}
-	};
-</script>
-
-<h2>Decode</h2>
-
-<p class="inline">Status: {wasm.status}</p>
-<p class="inline">WasmError: {wasm.error}</p>
-<p class="inline">OutputValue: {outputValue}</p>
-<p class="inline">Input value: {inputValue}</p>
-
-<AddressInput bind:value={inputValue} on:input={input} />
-
-<!-- <Map bind:map /> -->