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