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 @@
+
+
+
+
+
+
+
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 @@
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:
- '© OpenStreetMap 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();
+ // }
+ // });
-
-
Encode
{#if wasmStatus == WasmStatus.Loaded || wasmStatus == WasmStatus.NotLoaded}
Current cursor: {addr} => ({latlng.lat}, {latlng.lng})
-
-
-
+
{:else if wasmStatus == WasmStatus.Errored}