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

Start work on styling map

Browse Source
This commit is contained in:
Austen Adler 2023-03-02 21:23:40 -05:00
parent 1bdd18adb4
commit 766e5dd9c5
5 changed files with 46 additions and 90 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
web-frontend/src/lib/Map.svelte
View File

@ -45,13 +45,28 @@
});
</script>
<main>
<div bind:this={mapElement} />
</main>
<div id="container">
<div id="map" bind:this={mapElement} class="h-full w-fill pt-12" />
</div>
<style>
@import 'leaflet/dist/leaflet.css';
main div {
height: 800px;
/*
#container {
height: 100%;
width: 100px;
}
*/
/*
#map {
position: absolute;
top: 20rem;
bottom: 0;
padding: 10rem;
}
*/
#map {
height: 100%;
width: 100%;
}
</style>

2
web-frontend/src/lib/common.js
View File

@ -1,4 +1,4 @@
import init, { address_from_lat_lon } from 'xpin-wasm';
import init from 'xpin-wasm';
import * as xpinWasm from 'xpin-wasm';
export const WasmStatus = {

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

@ -2,8 +2,14 @@
import '../app.css';
</script>
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
/>
<header class="bg-white">
<nav class="flex items-center justify-between flex-wrap bg-teal-500 p-6">
<!-- TODO: "justify-between" adds that space -->
<nav class="flex items-center justify-between flex-wrap bg-teal-500 p-2">
<div class="flex items-center flex-shrink-0 text-white mr-6">
<svg
class="fill-current h-8 w-8 mr-2"
@ -15,37 +21,21 @@
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
>
<span class="font-semibold text-xl tracking-tight">Tailwind CSS</span>
<span class="font-semibold text-xl tracking-tight">Xpin</span>
</div>
<div class="block lg:hidden">
<button
class="flex items-center px-3 py-2 border rounded text-teal-200 border-teal-400 hover:text-white hover:border-white"
>
<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
>
</button>
</div>
<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">
<div class="block">
<div class="text-sm">
<a href="/" class="block mt-4 inline-block 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 href="./app" class="block mt-4 inline-block mt-0 text-teal-200 hover:text-white mr-4">
App
</a>
</div>
</div>
</nav>
</header>
<main class="p-6 h-full ">
<slot />
</main>

6
web-frontend/src/routes/encode/+page.svelte → web-frontend/src/routes/app/+page.svelte
View File

@ -4,7 +4,8 @@
import { onMount, onDestroy } from 'svelte';
import AddressInput from '$lib/AddressInput.svelte';
import { browser } from '$app/environment';
import leaflet from 'leaflet';
let leaflet;
// import leaflet from 'leaflet';
import Map from '$lib/Map.svelte';
@ -19,6 +20,7 @@
};
onMount(async () => {
leaflet = await import('leaflet');
wasm = await getWasm();
if (browser) {
@ -48,11 +50,13 @@
let outputValue = '';
const input = () => {
try {
if (browser) {
outputValue = wasm.call.address_to_lat_lon(addr);
let latlng = new leaflet.LatLng(outputValue[0], outputValue[1]);
map.panTo(latlng, 20);
leaflet.popup().setLatLng(latlng).setContent(`${outputValue}<br>hi`).openOn(map);
map.setView(latlng);
}
} catch (e) {
console.error(e);
outputValue = `${e}`;

53
web-frontend/src/routes/decode/+page.svelte
View File

@ -1,53 +0,0 @@
<script>
import { getWasm, WasmStatus } from '$lib/common.js';
import { onMount, onDestroy } from 'svelte';
import AddressInput from '$lib/AddressInput.svelte';
import Map from '$lib/Map.svelte';
import leaflet from 'leaflet';
// const leaflet = await import('leaflet');
let map;
let inputValue = '';
let outputValue = '';
let wasm = {
status: WasmStatus.NotLoaded,
error: undefined,
call: undefined
};
onMount(async () => {
wasm = await getWasm();
});
onDestroy(async () => {
if (map) {
console.log('Unloading Leaflet map.');
map.remove();
}
});
const input = () => {
try {
outputValue = wasm.call.address_to_lat_lon(inputValue);
let latlng = new leaflet.LatLng(outputValue[0], outputValue[1]);
map.panTo(latlng, 20);
leaflet.popup().setLatLng(latlng).setContent(`${outputValue}<br>hi`).openOn(map);
map.setView(latlng, 20);
// map.flyTo(new leaflet.LatLng(outputValue[0], outputValue[1]), 8);
} catch (e) {
console.error(e);
outputValue = `${e}`;
}
};
</script>
<h2>Decode</h2>
<p class="inline">Status: {wasm.status}</p>
<p class="inline">WasmError: {wasm.error}</p>
<p class="inline">OutputValue: {outputValue}</p>
<p class="inline">Input value: {inputValue}</p>
<AddressInput bind:value={inputValue} on:input={input} />
<!-- <Map bind:map /> -->