Add geocoding logic/store

ts/rmo/content/Nuisance.vue

@@ -501,10 +501,11 @@ import { computed, onMounted, ref } from "vue";
 import AddressSuggestion from "@/components/AddressSuggestion.vue";
 import ImageUpload, { Image } from "@/components/ImageUpload.vue";
 import MapLocator from "@/components/MapLocator.vue";
+import { useGeocodeStore } from "@/store/geocode";
 import { useLocationStore } from "@/store/location";
 import type { Location, Marker } from "@/types";
 import type { Camera } from "@/type/map";
-import type { Address } from "@/type/stadia";
+import type { Address, Geocode } from "@/type/stadia";
 
 const currentCamera = ref<Camera | null>(null);
 const errorMessage = ref("");
@@ -516,6 +517,7 @@ const marker = ref<Marker | null>(null);
 const showMore = ref<boolean>(false);
 const selectedAddress = ref<Address | null>(null);
 const locationStore = useLocationStore();
+const geocode = useGeocodeStore();
 const markers = computed((): Marker[] => {
 	if (marker.value) {
 		return [marker.value];
@@ -550,6 +552,14 @@ function doMapClick(location: Location) {
 		id: "x",
 		location: location,
 	};
+	geocode
+		.reverse(location)
+		.then((code: Geocode) => {
+			console.log("geocoded", code);
+		})
+		.catch((e) => {
+			console.error("failed to reverse geocode after map click", e);
+		});
 }
 function doMapMarkerDragEnd(location: Location) {
 	marker.value = {

ts/store/geocode.ts

@@ -0,0 +1,30 @@
+import { defineStore } from "pinia";
+import { ref } from "vue";
+import type { Geocode } from "@/type/stadia";
+import type { Location } from "@/types";
+
+export const useGeocodeStore = defineStore("geocode", () => {
+	// State
+	const loading = ref(false);
+	const error = ref(null);
+
+	// Actions
+	async function reverse(location: Location): Promise<Geocode> {
+		loading.value = true;
+		error.value = null;
+		try {
+			const url = `https://api.stadiamaps.com/geocoding/v2/reverse?point.lat=${location.lat}&point.lon=${location.lng}`;
+			const response = await fetch(url);
+			const data = (await response.json()) as Geocode;
+			return data;
+		} catch (err) {
+			console.error("Error loading signals:", err);
+			throw err;
+		}
+	}
+
+	return {
+		// Actions
+		reverse,
+	};
+});

ts/type/stadia.ts

@@ -21,7 +21,7 @@ interface WhosOnFirstEntry {
 	gid: string; // "whosonfirst:county:102082877"
 	name: string; // "Salt Lake County"
 }
-interface AddressProperties {
+interface Properties {
 	address_components?: AddressComponents;
 	coarse_location?: string;
 	context: AddressContext;
@@ -36,10 +36,30 @@ interface AddressProperties {
 	name: string;
 }
 
-export interface Address {
-	properties: AddressProperties;
-	geometry?: {
-		type: string;
-		coordinates: [number, number];
-	};
+export interface Geometry {
+	type: string;
+	coordinates: [number, number];
+}
+export interface Address {
+	geometry?: Geometry;
+	properties: Properties;
+}
+export interface GeocodeFeature {
+	geometry: Geometry;
+	properties: Properties;
+	type: string; // "Feature"
+}
+export interface Query {
+	"point.lat": number;
+	"point.lng": number;
+}
+export interface Geocoding {
+	attribution: string; // https://stadiamaps.com/attribution
+	query: Query;
+}
+export interface Geocode {
+	bbox: [number, number, number, number];
+	features: GeocodeFeature[];
+	geocoding: Geocoding;
+	type: string; // "FeatureCollection"
 }