stonewareslord/this_algorithm
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Separate Map component

Browse Source
This commit is contained in:
Austen Adler 2023-03-01 22:22:42 -05:00
parent 1e4cd1fa4f
commit c034652d86
3 changed files with 107 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
web-frontend/src/lib/Map.svelte Normal file
View File

@ -0,0 +1,57 @@
<script>
import { onMount, onDestroy } from 'svelte';
import { browser } from '$app/environment';
let mapElement;
export let map;
// export const leaflet;
onMount(async () => {
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:
'&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
})
.addTo(map);
// let popup = leaflet.popup();
// map.on('click', (e) => {
// try {
// // TODO: Leaflet allows sending coordinates out of the standard range
// latlng = e.latlng;
// addr = 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);
// }
// });
}
});
onDestroy(async () => {
if (map) {
console.log('Unloading Leaflet map.');
map.remove();
}
});
</script>
<main>
<div bind:this={mapElement} />
</main>
<style>
@import 'leaflet/dist/leaflet.css';
main div {
height: 800px;
}
</style>

64
web-frontend/src/routes/+layout.svelte
View File

@ -3,30 +3,46 @@
</script> </script>
<header class="bg-white"> <header class="bg-white">
<nav class="flex items-center justify-between flex-wrap bg-teal-500 p-6"> <nav class="flex items-center justify-between flex-wrap bg-teal-500 p-6">
<div class="flex items-center flex-shrink-0 text-white mr-6"> <div class="flex items-center flex-shrink-0 text-white mr-6">
<svg class="fill-current h-8 w-8 mr-2" width="54" height="54" viewBox="0 0 54 54" xmlns="http://www.w3.org/2000/svg"><path 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> <svg
<span class="font-semibold text-xl tracking-tight">Tailwind CSS</span> class="fill-current h-8 w-8 mr-2"
</div> width="54"
<div class="block lg:hidden"> height="54"
<button class="flex items-center px-3 py-2 border rounded text-teal-200 border-teal-400 hover:text-white hover:border-white"> viewBox="0 0 54 54"
<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> xmlns="http://www.w3.org/2000/svg"
</button> ><path
</div> 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"
<div class="w-full block flex-grow lg:flex lg:items-center lg:w-auto"> /></svg
<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"> <span class="font-semibold text-xl tracking-tight">Tailwind CSS</span>
Home </div>
</a> <div class="block lg:hidden">
<a href="/encode" class="block mt-4 lg:inline-block lg:mt-0 text-teal-200 hover:text-white mr-4"> <button
Encode class="flex items-center px-3 py-2 border rounded text-teal-200 border-teal-400 hover:text-white hover:border-white"
</a> >
<a href="/decode" class="block mt-4 lg:inline-block lg:mt-0 text-teal-200 hover:text-white"> <svg class="fill-current h-3 w-3" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"
Decode ><title>Menu</title><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z" /></svg
</a> >
</div> </button>
</div> </div>
</nav> <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
href="/encode"
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> </header>
<slot /> <slot />

38
web-frontend/src/routes/encode/+page.svelte
View File

@ -4,8 +4,10 @@
import { onMount, onDestroy } from 'svelte'; import { onMount, onDestroy } from 'svelte';
import { browser } from '$app/environment'; import { browser } from '$app/environment';
let mapElement; import Map from '$lib/Map.svelte';
let map; let map;
let latlng = { lat: '', lng: '' }; let latlng = { lat: '', lng: '' };
let addr = ''; let addr = '';
let wasmStatus = WasmStatus.NotLoaded; let wasmStatus = WasmStatus.NotLoaded;
@ -24,18 +26,7 @@
if (browser) { if (browser) {
const leaflet = await import('leaflet'); 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:
'&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
})
.addTo(map);
let popup = leaflet.popup(); let popup = leaflet.popup();
map.on('click', (e) => { map.on('click', (e) => {
try { try {
// TODO: Leaflet allows sending coordinates out of the standard range // TODO: Leaflet allows sending coordinates out of the standard range
@ -51,29 +42,20 @@
} }
}); });
onDestroy(async () => { // onDestroy(async () => {
if (map) { // if (map) {
console.log('Unloading Leaflet map.'); // console.log('Unloading Leaflet map.');
map.remove(); // map.remove();
} // }
}); // });
</script> </script>
<style>
@import 'leaflet/dist/leaflet.css';
main div {
height: 800px;
}
</style>
<h2>Encode</h2> <h2>Encode</h2>
{#if wasmStatus == WasmStatus.Loaded || wasmStatus == WasmStatus.NotLoaded} {#if wasmStatus == WasmStatus.Loaded || wasmStatus == WasmStatus.NotLoaded}
<p>Current cursor: {addr} => ({latlng.lat}, {latlng.lng})</p> <p>Current cursor: {addr} => ({latlng.lat}, {latlng.lng})</p>
<main> <Map bind:map />
<div bind:this={mapElement} />
</main>
{:else if wasmStatus == WasmStatus.Errored} {:else if wasmStatus == WasmStatus.Errored}
<div class="flex"> <div class="flex">
<div class="py-1"> <div class="py-1">