Fix leaflet
This commit is contained in:
parent
15c18da03a
commit
3abb322ad1
@ -4,6 +4,7 @@
|
|||||||
|
|
||||||
let mapElement;
|
let mapElement;
|
||||||
|
|
||||||
|
export let onMapClick = () => {};
|
||||||
export let map;
|
export let map;
|
||||||
// export const leaflet;
|
// export const leaflet;
|
||||||
|
|
||||||
@ -12,6 +13,7 @@
|
|||||||
const leaflet = await import('leaflet');
|
const leaflet = await import('leaflet');
|
||||||
|
|
||||||
map = leaflet.map(mapElement).setView([51.505, -0.09], 13);
|
map = leaflet.map(mapElement).setView([51.505, -0.09], 13);
|
||||||
|
map.on('click', onMapClick);
|
||||||
|
|
||||||
leaflet
|
leaflet
|
||||||
.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
.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);
|
console.error('Error loading wasm module', e);
|
||||||
wasmError = e;
|
wasmError = e;
|
||||||
wasmStatus = WasmStatus.Errored;
|
wasmStatus = WasmStatus.Errored;
|
||||||
|
throw e;
|
||||||
});
|
});
|
||||||
|
|
||||||
return {
|
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 { onMount, onDestroy } from 'svelte';
|
||||||
import AddressInput from '$lib/AddressInput.svelte';
|
import AddressInput from '$lib/AddressInput.svelte';
|
||||||
import { browser } from '$app/environment';
|
import { browser } from '$app/environment';
|
||||||
let leaflet;
|
// import tick from 'svelte';
|
||||||
// import leaflet from 'leaflet';
|
import Error from './Error.svelte';
|
||||||
|
|
||||||
|
let leaflet;
|
||||||
import Map from '$lib/Map.svelte';
|
import Map from '$lib/Map.svelte';
|
||||||
|
|
||||||
let map;
|
let map;
|
||||||
@ -19,15 +20,10 @@
|
|||||||
call: undefined
|
call: undefined
|
||||||
};
|
};
|
||||||
|
|
||||||
onMount(async () => {
|
const onMapClick = (e) => {
|
||||||
leaflet = await import('leaflet');
|
|
||||||
wasm = await getWasm();
|
|
||||||
|
|
||||||
if (browser) {
|
|
||||||
let popup = leaflet.popup();
|
let popup = leaflet.popup();
|
||||||
map.on('click', (e) => {
|
|
||||||
try {
|
try {
|
||||||
// TODO: Leaflet allows sending coordinates out of the standard range
|
|
||||||
latlng = e.latlng;
|
latlng = e.latlng;
|
||||||
addr = wasm.call.address_from_lat_lon(latlng.lat, latlng.lng);
|
addr = wasm.call.address_from_lat_lon(latlng.lat, latlng.lng);
|
||||||
popup.setLatLng(e.latlng).setContent(`${addr}`).openOn(map);
|
popup.setLatLng(e.latlng).setContent(`${addr}`).openOn(map);
|
||||||
@ -36,9 +32,24 @@
|
|||||||
addr = '';
|
addr = '';
|
||||||
popup.setLatLng(e.latlng).setContent(`You clicked at ${e.latlng}`).openOn(map);
|
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 () => {
|
onDestroy(async () => {
|
||||||
if (map) {
|
if (map) {
|
||||||
@ -66,28 +77,25 @@
|
|||||||
|
|
||||||
<h1 class="font-bold text-2xl pb-4">App</h1>
|
<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>
|
<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>
|
<p>Current cursor: {addr} => ({latlng.lat}, {latlng.lng})</p>
|
||||||
|
|
||||||
<AddressInput bind:value={addr} on:input={input} />
|
<AddressInput bind:value={addr} on:input={input} />
|
||||||
|
|
||||||
<Map bind:map />
|
<Map bind:map {onMapClick} />
|
||||||
{:else if wasm.status == WasmStatus.Errored}
|
{:catch message}
|
||||||
<div class="flex text-xl">
|
<Error {message}>Could not start core module</Error>
|
||||||
<div class="py-1">
|
{/await}
|
||||||
<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}
|
|
||||||
|
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
|
BRAY
|
||||||
BRAZIL
|
BRAZIL
|
||||||
BRAZILIAN
|
BRAZILIAN
|
||||||
|
BREAST
|
||||||
BREMEN
|
BREMEN
|
||||||
BRENT
|
BRENT
|
||||||
BRETON
|
BRETON
|
||||||
|
|
Loading…
Reference in New Issue
Block a user