diff --git a/html/template/rmo/nuisance.html b/html/template/rmo/nuisance.html index eed8f5e3..673051ed 100644 --- a/html/template/rmo/nuisance.html +++ b/html/template/rmo/nuisance.html @@ -23,7 +23,6 @@ if (response !== undefined && response.features.length > 0) { const addressInput = document.querySelector("address-input"); addressInput.SetValue(response.features[0]); - setLocationInputs(response.features[0]); } } async function handleMarkerDrag(lngLat) { @@ -35,7 +34,6 @@ if (response !== undefined && response.features.length > 0) { const addressInput = document.querySelector("address-input"); addressInput.SetValue(response.features[0]); - setLocationInputs(response.features[0]); } } // Check for source identification @@ -112,8 +110,6 @@ center: l.geometry.coordinates, zoom: 14, }); - - setLocationInputs(l); }); document.querySelectorAll(".source-card").forEach((card) => { card.style.cursor = "pointer"; diff --git a/ts/rmo/content/Nuisance.vue b/ts/rmo/content/Nuisance.vue index 2f111103..640f283e 100644 --- a/ts/rmo/content/Nuisance.vue +++ b/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(null); const errorMessage = ref(""); @@ -516,6 +517,7 @@ const marker = ref(null); const showMore = ref(false); const selectedAddress = ref
(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 = { diff --git a/ts/store/geocode.ts b/ts/store/geocode.ts new file mode 100644 index 00000000..5c1bb5e6 --- /dev/null +++ b/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 { + 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, + }; +}); diff --git a/ts/type/stadia.ts b/ts/type/stadia.ts index 590133c0..35b6ab05 100644 --- a/ts/type/stadia.ts +++ b/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" }