Map location and improvements

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

web-frontend/src/lib/Map.svelte

@@ -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>
 

web-frontend/src/lib/common.js

@@ -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()
 	};
 }
 

web-frontend/src/routes/app/+page.svelte

@@ -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}
+			bind:value={addr.decimalDegrees}
-			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}
 			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}

xpin-wasm/src/lib.rs

@@ -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)