diff --git a/html/static/js/address-or-report-suggestion.js b/html/static/js/address-or-report-suggestion.js
index de41b5a6..ffca5716 100644
--- a/html/static/js/address-or-report-suggestion.js
+++ b/html/static/js/address-or-report-suggestion.js
@@ -88,7 +88,7 @@ class AddressOrReportInput extends HTMLElement {
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.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();
@@ -111,6 +111,33 @@ class AddressOrReportInput extends HTMLElement {
}
}
+ async _handleClick(el) {
+ const type = el.dataset.type;
+ let content = null;
+ if (type == "report") {
+ const index = parseInt(el.dataset.index);
+ content = this._reports[index];
+ this.value = _formatReportID(content.id);
+ this._suggestionsContainer.innerHTML = "";
+ } else if (type == "address") {
+ const gid = el.dataset.gid;
+ const url = `https://api.stadiamaps.com/geocoding/v2/place_details?ids=${gid}`;
+ const response = await fetch(url);
+ const data = await response.json();
+ content = data.features[0];
+ this.SetValue(content);
+ }
+ this.dispatchEvent(
+ new CustomEvent("suggestion-selected", {
+ bubbles: true,
+ composed: true, // Allows event to cross shadow DOM boundary
+ detail: {
+ content: content,
+ type: type,
+ },
+ }),
+ );
+ }
async _handleSuggestions(text) {
await Promise.all([
(async () => {
@@ -141,53 +168,20 @@ class AddressOrReportInput extends HTMLElement {
.join("");
const addressElements = addresses
.map((item, index) => {
- if (item.properties.place_formatted != "") {
- return `
-
-
${item.properties.name || item.properties.full_address}
-
${item.properties.place_formatted}
-
`;
- } else {
- return `
-
-
${item.properties.name || item.properties.full_address}
-
${item.properties.place_formatted}
-
`;
- }
+ return `
+
+
${item.properties.name}
+
${item.properties.coarse_location}
+
`;
})
.join("");
this._suggestionsContainer.innerHTML = reportElements + addressElements;
// Add click listeners to suggestions
this.shadowRoot.querySelectorAll(".suggestion-item").forEach((el) => {
el.addEventListener("click", (e) => {
- const type = el.dataset.type;
- let detail = null;
- if (type == "report") {
- const index = parseInt(el.dataset.index);
- detail = this._reports[index];
- this.value = _formatReportID(detail.id);
- this._suggestionsContainer.innerHTML = "";
- } else if (type == "address") {
- const index = parseInt(el.dataset.index);
- detail = this._addresses[index];
- this.SetValue(detail);
- // Dispatch custom event
- }
- this.dispatchEvent(
- new CustomEvent("suggestion-selected", {
- bubbles: true,
- composed: true, // Allows event to cross shadow DOM boundary
- detail: detail,
- }),
- );
+ this._handleClick(el);
});
});
}
@@ -254,7 +248,7 @@ class AddressOrReportInput extends HTMLElement {
}
SetValue(suggestion) {
- this.value = suggestion.properties.full_address;
+ this.value = suggestion.properties.formatted_address_line;
this._suggestionsContainer.innerHTML = "";
}
}
diff --git a/html/static/js/map-multipoint.js b/html/static/js/map-multipoint.js
index 0c9a5308..fd4ae6ff 100644
--- a/html/static/js/map-multipoint.js
+++ b/html/static/js/map-multipoint.js
@@ -100,6 +100,9 @@ class MapMultipoint extends HTMLElement {
addSource(a, b) {
return this._map.addSource(a, b);
}
+ flyTo(a, b) {
+ return this._map.flyTo(a, b);
+ }
jumpTo(args) {
return this._map.jumpTo(args);
}
@@ -113,6 +116,9 @@ class MapMultipoint extends HTMLElement {
once(a, b) {
return this._map.once(a, b);
}
+ panTo(a, b) {
+ return this._map.panTo(a, b);
+ }
queryRenderedFeatures(a) {
return this._map.queryRenderedFeatures(a);
}
diff --git a/html/template/rmo/status.html b/html/template/rmo/status.html
index 4538a7f3..14821a0f 100644
--- a/html/template/rmo/status.html
+++ b/html/template/rmo/status.html
@@ -144,8 +144,18 @@ function onLoad() {
report_table.addEventListener("row-clicked", (e) => {
window.location = "/status/" + e.detail.reportId;
})
-
- document.querySelector("address-or-report-input").addEventListener("suggestion-selected", maybeEnableLookupButton);
+ document.querySelector("address-or-report-input").addEventListener("suggestion-selected", (e) => {
+ maybeEnableLookupButton(e)
+ if (e.detail.type == "address") {
+ map.flyTo({
+ center: {
+ lng: e.detail.content.geometry.coordinates[0],
+ lat: e.detail.content.geometry.coordinates[1],
+ },
+ zoom: 15,
+ });
+ }
+ });
document.querySelector("address-or-report-input").addEventListener("input", maybeEnableLookupButton);
document.getElementById("lookup-form").addEventListener("submit", handleLookupFormSubmit);
}