Fix leaflet
This commit is contained in:
Austen Adler
parent
15c18da03a
commit
3abb322ad1
@ -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', {
|
||||
|
||||
@ -19,6 +19,7 @@ export async function getWasm() {
|
||||
console.error('Error loading wasm module', e);
|
||||
wasmError = e;
|
||||
wasmStatus = WasmStatus.Errored;
|
||||
throw e;
|
||||
});
|
||||
|
||||
return {
|
||||
|
||||
1
web-frontend/src/routes/app-lite/+page.svelte
Normal file
1
web-frontend/src/routes/app-lite/+page.svelte
Normal file
@ -0,0 +1 @@
|
||||
<h1 class="font-bold text-2xl pb-4">App Lite</h1>
|
||||
@ -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,26 +20,36 @@
|
||||
call: undefined
|
||||
};
|
||||
|
||||
onMount(async () => {
|
||||
leaflet = await import('leaflet');
|
||||
wasm = await getWasm();
|
||||
const onMapClick = (e) => {
|
||||
let popup = leaflet.popup();
|
||||
|
||||
if (browser) {
|
||||
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);
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
addr = '';
|
||||
popup.setLatLng(e.latlng).setContent(`You clicked at ${e.latlng}`).openOn(map);
|
||||
}
|
||||
});
|
||||
try {
|
||||
latlng = e.latlng;
|
||||
addr = wasm.call.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);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
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}
|
||||
|
||||
29
web-frontend/src/routes/app/Error.svelte
Normal file
29
web-frontend/src/routes/app/Error.svelte
Normal 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>
|
||||
@ -437,6 +437,7 @@ BRAVO
|
||||
BRAY
|
||||
BRAZIL
|
||||
BRAZILIAN
|
||||
BREAST
|
||||
BREMEN
|
||||
BRENT
|
||||
BRETON
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user