Map location and improvements
This commit is contained in:
parent
ce578ba8c4
commit
acc29a704f
2
justfile
2
justfile
@ -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
|
||||
|
@ -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>
|
||||
|
||||
|
@ -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()
|
||||
};
|
||||
}
|
||||
|
||||
|
@ -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}
|
||||
|
@ -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)
|
||||
|
Loading…
Reference in New Issue
Block a user