31:T480,// maps the results of the geocoder api call to an HTML un-ordered list with buttons for handling a click event htl.html`

Suggested Search Results:

No results to show yet, try searching for a place like "Paris".

`32:[] 2f:{"title":"Hello, Mapbox Geocoder API","cells":[{"id":0,"value":"# Hello, Mapbox Geocoder API\n\nDemo of using the [MapBox Geocoding API](https://docs.mapbox.com/api/search/geocoding/#forward-geocoding). Note that use of the API requires an [access token](https://docs.mapbox.com/help/getting-started/access-tokens/#how-access-tokens-work). Acquire one for free on [MapBox.com](https://account.mapbox.com/access-tokens).","pinned":false,"hidden":false,"mode":"md"},{"id":8,"value":"viewof searchValue = Inputs.text({\n label: \"Search for an address\",\n placeholder: \"Enter an address\",\n value: \"\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":113,"value":"{\n if (results && results.message) {\n return \"Something went wrong.\";\n }\n\n if (results && !selectedLocation) {\n return \"Select an address below to view more information.\";\n }\n\n if (selectedLocation) {\n return md`You selected: *${\n selectedLocation.place_name\n }* located at *${selectedLocation.center.join(\", \")}*.`;\n }\n\n return \"Search for an address then select a location from the list below.\";\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":47,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":128,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":178,"value":"## Implementation","pinned":false,"hidden":false,"mode":"md"},{"id":80,"value":"// will be populated when a suggested result is clicked on.\nmutable selectedLocation = null","pinned":true,"hidden":false,"mode":"ojs"},{"id":71,"value":"// update our mutable cell when this function is called\nfunction selectSuggestedLocation(id) {\n mutable selectedLocation = results.features.find(\n (feature) => feature.id === id\n );\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":84,"value":"{\n // reset the value of the mutable `selectedLocation` cell when the text input's value is cleared\n if (!results || !results.features || !results.features.length) {\n mutable selectedLocation = null;\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":21,"value":"// populated after the mapbox geocoder api call is made\nresults = geocodeSearchDebounced(searchValue)","pinned":true,"hidden":false,"mode":"ojs"},{"id":40,"value":"// use lodash.debounce to avoid calling the API on every keystroke to reduce the number of API calls\n// see: https://docs-lodash.com/v4/debounce/\ngeocodeSearchDebounced = debounce(geocodeSearch, 350, {\n leading: true,\n trailing: false,\n maxWait: 500\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":11,"value":"// the async lets us `await` the result of a Promise rather than use Promise.then\n// see: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function\nasync function geocodeSearch(searchText = \"\") {\n // we early return to avoid prematurely calling mapbox geocode API\n if (!searchText || searchText.length < 3) {\n return;\n }\n\n // wrap the API call in a try/catch for error handling\n try {\n const response = await fetch(\n `${baseUrl}/${encodeURIComponent(\n searchText\n )}.json?types=${placeTypes}&access_token=${accessToken}`\n );\n const json = await response.json();\n return json;\n } catch (error) {\n return error.message;\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":145,"value":"// the list of place types we'd like to search for using the geocoder\nplaceTypes = [\"postcode\", \"place\", \"locality\", \"district\"].join(\",\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":13,"value":"// the mapbox forward geocoder api route\nbaseUrl = \"https://api.mapbox.com/geocoding/v5/mapbox.places\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":5,"value":"// This token will only work on Observable notebooks by @clhenrick.\n// Please acquire your own Mapbox token at https://account.mapbox.com/access-tokens\naccessToken = \"pk.eyJ1IjoiY2hlbnJpY2siLCJhIjoiY2xhdmdtbGY3MDVseDNwcDVtdTJ6MzRnNyJ9.H3sT8bYytYXSxmxzyZnJ-A\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":38,"value":"// reference to lodash debounce\ndebounce = _.debounce","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}