Gleipnir/nidus-sync
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Move address suggestion over to stadia map

Browse source
This commit is contained in:
Eli Ribble 2026-03-10 15:31:02 +00:00
parent a2b8e8f7c7
commit 78d47c4035
No known key found for this signature in database
2 changed files with 44 additions and 37 deletions
Download patch file Download diff file Expand all files Collapse all files

64
html/static/js/address-suggestion.js
View file

@ -83,10 +83,33 @@ class AddressInput extends HTMLElement {
});
}, 300);
}
async _handleClick(gid) {
try {
const url = `https://api.stadiamaps.com/geocoding/v2/place_details?ids=${gid}`;
const response = await fetch(url);
const data = await response.json();
const suggestion = data.features[0];
this.SetValue(suggestion);
// Dispatch custom event for clients of this library
this.dispatchEvent(
new CustomEvent("address-selected", {
bubbles: true,
composed: true, // Allows event to cross shadow DOM boundary
detail: {
location: suggestion,
},
}),
);
} catch (error) {
console.error("Error fetching geocode of suggestion:", error);
}
}
async _fetchAddressSuggestions(text) {
try {
const url = `https://api.mapbox.com/search/geocode/v6/forward?q=${encodeURIComponent(text)}&access_token=${this._apiKey}`;
//const url = `https://api.mapbox.com/search/geocode/v6/forward?q=${encodeURIComponent(text)}&access_token=${this._apiKey}`;
const url = `https://api.stadiamaps.com/geocoding/v2/autocomplete?text=${encodeURIComponent(text)}&focus.point.lat=35&focus.point.lon=-115`;
const response = await fetch(url);
const data = await response.json();
@ -100,44 +123,19 @@ class AddressInput extends HTMLElement {
console.log("Rendering suggestions", suggestions);
this._suggestions.innerHTML = suggestions
.map((item, index) => {
if (item.properties.place_formatted != "") {
return `
<div class="suggestion-item list-group-item"
data-index="${index}"
data-lat="${item.geometry.coordinates[1]}"
data-lng="${item.geometry.coordinates[0]}">
<div class="main-address">${item.properties.name || item.properties.full_address}</div>
<div class="place-info">${item.properties.place_formatted}</div>
</div>`;
} else {
return `
<div class="suggestion-item list-group-item"
data-index="${index}"
data-lat="${item.coordinates.lat}"
data-lng="${item.coordinates.lng}">
<div class="main-address">${item.properties.name || item.properties.full_address}</div>
<div class="place-info">${item.properties.place_formatted}</div>
</div>`;
}
return `
<div class="suggestion-item list-group-item"
data-gid="${item.properties.gid}">
<div class="main-address">${item.properties.name}</div>
<div class="place-info">${item.properties.coarse_location}</div>
</div>`;
})
.join("");
// Add click listeners to suggestions
this.shadowRoot.querySelectorAll(".suggestion-item").forEach((el) => {
el.addEventListener("click", (e) => {
const index = parseInt(el.dataset.index);
const suggestion = suggestions[index];
this.SetValue(suggestion);
// Dispatch custom event
this.dispatchEvent(
new CustomEvent("address-selected", {
bubbles: true,
composed: true, // Allows event to cross shadow DOM boundary
detail: {
location: suggestion,
},
}),
);
this._handleClick(el.dataset.gid);
});
});
}

17
html/template/rmo/water.html
View file

@ -63,7 +63,7 @@
);
let number = document.getElementById("address-number");
let postalcode = document.getElementById("address-postalcode");
let place = document.getElementById("address-place");
let locality = document.getElementById("address-locality");
let region = document.getElementById("address-region");
let street = document.getElementById("address-street");
@ -75,8 +75,8 @@
country.value = context.iso_3166_a3;
latitude.value = location.geometry.coordinates[1];
longitude.value = location.geometry.coordinates[0];
latlngAccuracyType.value = props.precision;
latlngAccuracyValue.value = props.distance;
latlngAccuracyType.value = props.precision || 0;
latlngAccuracyValue.value = props.distance || 0;
number.value = props.address_components.number;
postalcode.value = props.address_components.postal_code;
locality.value = context.whosonfirst.locality.name;
@ -272,8 +272,17 @@
id="address-postcode"
name="address-postcode"
/>
<input
type="hidden"
id="address-locality"
name="address-locality"
/>
<input type="hidden" id="address-number" name="address-number" />
<input type="hidden" id="address-place" name="address-place" />
<input
type="hidden"
id="address-postalcode"
name="address-postalcode"
/>
<input type="hidden" id="address-region" name="address-region" />
<input type="hidden" id="address-street" name="address-street" />
<input type="hidden" id="latitude" name="latitude" />