Map location and improvements

This commit is contained in:
Austen Adler 2023-03-19 13:03:19 -04:00
parent ce578ba8c4
commit acc29a704f
5 changed files with 48 additions and 22 deletions

View File

@ -12,7 +12,7 @@ rust-build: docs-build output-clean
cargo build -p web --release --target x86_64-unknown-linux-musl
earthly +rust-image
wasm-build: output-clean
wasm-build:
wasm-pack build --target web xpin-wasm
# wasm2js xpin-wasm/pkg/xpin_wasm_bg.wasm -o xpin-wasm/pkg/xpin_wasm_bg.wasm.js
# sed -i 's/xpin_wasm_bg.wasm/xpin_wasm_bg.wasm.js/' xpin-wasm/pkg/wasm2js.js xpin-wasm/pkg/wasm2js_bg.js

View File

@ -1,12 +1,23 @@
<script>
import { onMount, onDestroy } from 'svelte';
import { browser } from '$app/environment';
import { createEventDispatcher } from 'svelte';
const dispatch = createEventDispatcher();
let mapElement;
let locationChecked;
export let onMapClick = () => {};
export let map;
// export const leaflet;
const locationCheckedChanged = () => {
if (locationChecked) {
map.locate({ setView: true, watch: true, enableHighAccuracy: true });
} else {
map.stopLocate();
}
};
onMount(async () => {
if (browser) {
@ -14,6 +25,9 @@
map = leaflet.map(mapElement).setView([51.505, -0.09], 13);
map.on('click', onMapClick);
map.on('locationfound', (e) => {
dispatch('locationfound', e);
});
leaflet
.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
@ -48,6 +62,10 @@
</script>
<div id="container" class="h-3/4">
<label>
<input type="checkbox" bind:checked={locationChecked} on:change={locationCheckedChanged} />
Watch my location
</label>
<div id="map" bind:this={mapElement} class="h-full w-full" />
</div>

View File

@ -12,7 +12,8 @@ export function getxpin(xpin) {
}
return {
address: xpin.get_address(),
latLon: xpin.get_lat_lon()
latLon: xpin.get_lat_lon(),
decimalDegrees: xpin.get_decimal_degrees()
};
}

View File

@ -12,7 +12,7 @@
let map;
let latlng = { lat: '', lng: '' };
// let latlngInputValue = { lat: '', lng: '' };
let addr = emptyxpin;
let addrInputValue = '';
@ -22,11 +22,9 @@
call: undefined
};
const onMapClick = (e) => {
const updateEditedAddress = (latlng) => {
let popup = leaflet.popup();
try {
latlng = e.latlng;
addr = getxpin(wasm.call.EncodedAddress.from_lat_lon(latlng.lat, latlng.lng));
addrInputValue = addr.address;
popup
@ -36,15 +34,25 @@
})
.setContent(`${addr.address}`)
.openOn(map);
// popup.setLatLng(e.latlng).setContent(`${addr.address}`).openOn(map);
// latlngInputValue = { lat: latlng.lat, lng: latlng.lng };
// popup.setLatLng(latlng).setContent(`${addr.address}`).openOn(map);
} catch (err) {
console.error(err);
// addr = emptyxpin;
addrInputValue = '';
popup.setLatLng(e.latlng).setContent(`You clicked at ${e.latlng}`).openOn(map);
popup.setLatLng(latlng).setContent(`You clicked at ${latlng}`).openOn(map);
}
};
const locationfound = (e) => {
console.log('Updating current location event', e);
updateEditedAddress(e.detail.latlng);
};
const onMapClick = (e) => {
updateEditedAddress(e.latlng);
};
let init = async () => {
await getWasm()
.then((w) => (wasm = w))
@ -106,30 +114,22 @@
<p class="text-lg js-only">Loading WebAssembly module...</p>
{:then}
<p>Address: <span class="font-bold">{addr.address}</span></p>
<p class="text-sm">({addr.latLon}) => ({latlng.lat}, {latlng.lng})</p>
<p class="text-sm">({addr.latLon}) => ({addr.decimalDegrees})</p>
<AddressInput bind:value={addrInputValue} on:input={input} />
<div class="mb-4">
<label class="text-gray-700 text-sm font-bold mb-2" for="username">Latitude</label>
<label class="text-gray-700 text-sm font-bold mb-2" for="username">Lat/Lon</label>
<input
class="shadow appearance-none border rounded py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
class="shadow appearance-none border rounded py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline w-full"
disabled
type="text"
bind:value={latlng.lat}
placeholder="0.00"
/>
<label class="text-gray-700 text-sm font-bold mb-2" for="username">Longitude</label>
<input
class="shadow appearance-none border rounded py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
disabled
type="text"
bind:value={latlng.lng}
bind:value={addr.decimalDegrees}
placeholder="0.00"
/>
</div>
<Map bind:map {onMapClick} />
<Map bind:map {onMapClick} on:locationfound={locationfound} />
{:catch message}
<Error {message}>Could not start core module</Error>
{/await}

View File

@ -12,6 +12,13 @@ pub struct EncodedAddress {
#[wasm_bindgen]
impl EncodedAddress {
/// Get the current address as decimal degrees
#[wasm_bindgen]
pub fn get_decimal_degrees(&self) -> String {
format!("{}, {}", self.lat, self.lon)
}
/// Get an encoded address from a latitude/longitude
#[wasm_bindgen]
pub fn from_lat_lon(lat: f64, lon: f64) -> Result<EncodedAddress, String> {
xpin::Address::from_lat_lon(lat, lon)