Fix leaflet

This commit is contained in:
Austen Adler 2023-03-14 23:26:17 -04:00
parent 15c18da03a
commit 3abb322ad1
6 changed files with 82 additions and 40 deletions

View File

@ -4,6 +4,7 @@
let mapElement;
export let onMapClick = () => {};
export let map;
// export const leaflet;
@ -12,6 +13,7 @@
const leaflet = await import('leaflet');
map = leaflet.map(mapElement).setView([51.505, -0.09], 13);
map.on('click', onMapClick);
leaflet
.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {

View File

@ -19,6 +19,7 @@ export async function getWasm() {
console.error('Error loading wasm module', e);
wasmError = e;
wasmStatus = WasmStatus.Errored;
throw e;
});
return {

View File

@ -0,0 +1 @@
<h1 class="font-bold text-2xl pb-4">App Lite</h1>

View File

@ -4,9 +4,10 @@
import { onMount, onDestroy } from 'svelte';
import AddressInput from '$lib/AddressInput.svelte';
import { browser } from '$app/environment';
let leaflet;
// import leaflet from 'leaflet';
// import tick from 'svelte';
import Error from './Error.svelte';
let leaflet;
import Map from '$lib/Map.svelte';
let map;
@ -19,15 +20,10 @@
call: undefined
};
onMount(async () => {
leaflet = await import('leaflet');
wasm = await getWasm();
if (browser) {
const onMapClick = (e) => {
let popup = leaflet.popup();
map.on('click', (e) => {
try {
// TODO: Leaflet allows sending coordinates out of the standard range
latlng = e.latlng;
addr = wasm.call.address_from_lat_lon(latlng.lat, latlng.lng);
popup.setLatLng(e.latlng).setContent(`${addr}`).openOn(map);
@ -36,9 +32,24 @@
addr = '';
popup.setLatLng(e.latlng).setContent(`You clicked at ${e.latlng}`).openOn(map);
}
};
let init = async () => {
await getWasm()
.then((w) => (wasm = w))
.then(async () => {
leaflet = await import('leaflet');
})
.catch((err) => {
console.log('Erroring');
console.error(err);
throw err;
});
}
});
};
// onMount(async () => {
// leaflet = await import('leaflet');
// });
onDestroy(async () => {
if (map) {
@ -66,28 +77,25 @@
<h1 class="font-bold text-2xl pb-4">App</h1>
<noscript>
<style>
.js-only {
display: none;
}
</style>
<Error>Your javascript is disabled</Error>
</noscript>
<p>{outputValue}</p>
{#if wasm.status == WasmStatus.Loaded || wasm.status == WasmStatus.NotLoaded}
{#await init()}
<p class="text-lg js-only">Loading WebAssembly module...</p>
{:then}
<p>Current cursor: {addr} => ({latlng.lat}, {latlng.lng})</p>
<AddressInput bind:value={addr} on:input={input} />
<Map bind:map />
{:else if wasm.status == WasmStatus.Errored}
<div class="flex text-xl">
<div class="py-1">
<svg
class="fill-current h-6 w-6 text-teal-500 mr-4"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
><path
d="M2.93 17.07A10 10 0 1 1 17.07 2.93 10 10 0 0 1 2.93 17.07zm12.73-1.41A8 8 0 1 0 4.34 4.34a8 8 0 0 0 11.32 11.32zM9 11V9h2v6H9v-4zm0-6h2v2H9V5z"
/></svg
>
</div>
<div>
<p class="font-bold">Could not start core module</p>
<p class="text-sm">Error: {wasm.error}.</p>
</div>
</div>
{/if}
<Map bind:map {onMapClick} />
{:catch message}
<Error {message}>Could not start core module</Error>
{/await}

View File

@ -0,0 +1,29 @@
<script>
export let message;
</script>
<div class="flex text-xl mt-4 mb-6">
<div class="py-1">
<svg
class="fill-current h-6 w-6 text-teal-500 mr-4"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
><path
d="M2.93 17.07A10 10 0 1 1 17.07 2.93 10 10 0 0 1 2.93 17.07zm12.73-1.41A8 8 0 1 0 4.34 4.34a8 8 0 0 0 11.32 11.32zM9 11V9h2v6H9v-4zm0-6h2v2H9V5z"
/></svg
>
</div>
<div>
<p class="font-bold"><slot /></p>
{#if message}
<p class="text-sm">Message: {message}.</p>
{/if}
<p class="text-base pt-4">
You can still use xpin, but you have to go to the <a href="app-lite" class="text-blue-500"
>lite</a
> version of the app
</p>
</div>
</div>

View File

@ -437,6 +437,7 @@ BRAVO
BRAY
BRAZIL
BRAZILIAN
BREAST
BREMEN
BRENT
BRETON

1 WORD
437 BRAY
438 BRAZIL
439 BRAZILIAN
440 BREAST
441 BREMEN
442 BRENT
443 BRETON