28:null 29:["$","title",null,{"children":"NB.ai Forward Geocoding Examples | Jim Welch | Observable"}] 2e:T1a8b,discover = { // todo: map excluded countries based on country selection in options const excludedCountries = ["JP"]; function getCountryCode(addressComponents = []) { const country = addressComponents.find((c) => c.types?.includes("country")); return country?.shortText || null; } async function googlePlacesGeocode(query, config) { const response = await fetch( "https://places.googleapis.com/v1/places:searchText", { method: "POST", headers: { "Content-Type": "application/json", "X-Goog-Api-Key": gmapsApiKey, "X-Goog-FieldMask": "places.displayName,places.formattedAddress,places.location,places.addressComponents" }, body: JSON.stringify({ textQuery: query, locationBias: { circle: { center: { latitude: panel.city.centroid.split(",")[0], longitude: panel.city.centroid.split(",")[1] }, radius: 10000 } } }) } ); const data = await response.json(); const collection = { type: "FeatureCollection", features: [] }; if (data.places) { data.places.forEach((place) => { if (!place.location) return; const countryCode = getCountryCode(place.addressComponents); if (excludedCountries.includes(countryCode)) return; const ft = { type: "Feature", geometry: { type: "Point", coordinates: [place.location.longitude, place.location.latitude] }, properties: { address: place.formattedAddress, full_result: place }, place_name: `${place.displayName?.text} ${place.formattedAddress}`, result_type: "place", scoring: 1.0, // Fallback result, arbitrarily scored high place_type: "N/A", center: [place.location.longitude, place.location.latitude], access: [place.location.longitude, place.location.latitude] }; collection.features.push(ft); }); } return collection.features; } async function externalGeocoder(input, _features, config) { const nbaiResults = await nbaiDiscoverGeocode({ query: input, proximity: config.proximity, nbaiKey: config.nbaiKey }); const highScoring = nbaiResults.features.filter((f) => f.scoring >= 0.75); const lowScoring = nbaiResults.features.filter((f) => f.scoring < 0.75); // Fetch Google fallback if necessary let googleResults = []; if (highScoring.length === 0 && panel.options.includes("GMAPS")) { googleResults = await googlePlacesGeocode(input, config); } // Tag sources const taggedHigh = highScoring.map((f) => ({ ...f, properties: { ...f.properties, source: "nbai" } })); const taggedLow = lowScoring.map((f) => ({ ...f, properties: { ...f.properties, source: "nbai-low" } })); const taggedGoogle = googleResults.map((f) => ({ ...f, properties: { ...f.properties, source: "google" } })); // Combine all results const allResults = [...taggedGoogle, ...taggedHigh, ...taggedLow]; // Sort: Google results first (1.0 score), then NextBillion results by descending score allResults.sort((a, b) => { if (a.properties.source === "google" && b.properties.source !== "google") return -1; if (a.properties.source !== "google" && b.properties.source === "google") return 1; return (b.scoring || 0) - (a.scoring || 0); }); debugger; mutable discover_result = allResults; return allResults; } async function nbaiDiscoverGeocode(config) { let countryList = panel.geo_nam.concat( panel.geo_eu.concat( panel.geo_latam.concat(panel.geo_mea.concat(panel.geo_af)) ) ); const response = await fetch( `https://api.nextbillion.io/h/discover?q=${config.query}&limit=${ panel.resultLimit }&in=countryCode:${countryList.toString()}&lang=${ panel.language.value }&at=${panel.city.centroid}&key=${geocoder.options.nbaiKey}` ); let data = await response.json(); let collection = { type: "FeatureCollection", features: [] }; data.items.forEach((itm) => { let ft = { type: "Feature", geometry: { type: "Point", coordinates: [itm.position.lng, itm.position.lat] }, properties: { address: itm.address.label, full_result: itm }, place_name: itm.address.label, result_type: itm.resultType, scoring: itm.scoring.queryScore, place_type: itm.categories ? itm.categories[0].name : "N/A", center: [itm.position.lng, itm.position.lat], access: [itm.access[0].lng, itm.access[0].lat] }; collection.features.push(ft); }); mutable discover_result = collection.features; return collection; } const container3 = html`

Some results

`; yield container3; var geocoder = new nbaiGeocodePlugin({ externalGeocoder: externalGeocoder, limit: panel.resultLimit, placeholder: "Discover", nbaiKey: apiKey, render: function (item) { let maki = "location-dot"; const source = item.properties?.source || "nbai"; if (source === "google") { maki = "globe"; // or use another distinctive icon like 'google', 'search', etc. } else { switch (item.result_type) { case "place": const place_type = place_types.find( (t) => t.name === item.place_type ); maki = place_type ? place_type.icon : "location-dot"; break; case "locality": maki = "city"; break; case "street": maki = "road"; break; case "houseNumber": maki = "house"; break; default: maki = "location-dot"; } } return ``; } //const maki = item.properties.maki || 'grocery'; }); geocoder.setMinLength(2); geocoder.addTo(container3); geocoder.on("result", function (e) { //console.log(e.result); debugger; mutable discover_result = []; mutable discover_result.push(e.result); }); geocoder.on("clear", function (e) { mutable discover_result = []; }); geocoder.on("loading", function (e) {}); geocoder.on("error", function (e) {}); }2f:Tbb3,autocompletion = { var geocoder = undefined; async function externalGeocoder(input, _features, config) { const { features } = await nbaiforwardGeocode({ query: input, proximity: config.proximity, nbaiKey: config.nbaiKey }); return features; } async function nbaiforwardGeocode(config) { let countryList = panel.geo_nam.concat( panel.geo_eu.concat( panel.geo_latam.concat(panel.geo_mea.concat(panel.geo_af)) ) ); const response = await fetch( `https://api.nextbillion.io/h/autocomplete?q=${config.query}&limit=${ panel.resultLimit }&in=countryCode:${countryList.toString()}&lang=${ panel.language.value }&key=${geocoder.options.nbaiKey}` ); let data = await response.json(); let collection = { type: "FeatureCollection", features: [] }; data.items.forEach((itm) => { let ft = { type: "Feature", properties: { address: itm.address.label, full_result: itm }, place_name: itm.address.label, //result_type: itm.resultType, id: itm.id }; collection.features.push(ft); }); mutable autocomplete_result = collection; return collection; } const ac_container = html`

`; yield ac_container; geocoder = new nbaiGeocodePlugin({ externalGeocoder: externalGeocoder, limit: 20, placeholder: "Autocomplete", nbaiKey: apiKey, render: function (item) { //const result_type = item.result_type; let place_type = ""; let maki = "location-dot"; switch ("location-dot") { case "locality": maki = "city"; break; case "street": maki = "road"; break; case "houseNumber": maki = "house"; break; default: maki = "location-dot"; } let tmpLabel = item.place_name; //item.properties.full_result.highlights.address.label.forEach(hl => { // let highlight = item.place_name.substring(hl.start,hl.end); // tmpLabel = tmpLabel.replace(highlight,`${highlight}`); //}); return ``; } }); geocoder.addTo(ac_container); geocoder.on("result", async function (e) { const response = await fetch( `https://api.nextbillion.io/h/discover?id=${e.result.id}&lang=${panel.language.value}&key=${geocoder.options.nbaiKey}` ); let data = await response.json(); mutable autocomplete_result = data; //geocoder.setQuery(e.result.properties.full_result.address.original_label); }); geocoder.on("clear", function (e) {}); geocoder.on("loading", function (e) {}); geocoder.on("error", function (e) {}); }30:Tf2e,autosuggestion = { async function externalGeocoder(input, _features, config) { console.log(config); const { features } = await nbaiforwardGeocode({ query: input, proximity: config.proximity, nbaiKey: config.nbaiKey, endpoint: geocoder.getOrigin(), category: geocoder.getCategory() }); return features; } async function nbaiforwardGeocode(config) { let ontology = config.category; let countryList = panel.geo_nam.concat(panel.geo_eu.concat(panel.geo_latam.concat(panel.geo_mea.concat(panel.geo_af)))); const response = await fetch(`${config.endpoint}?q=${config.query}&in=countryCode:${countryList.toString()}&limit=${panel.resultLimit}&at=${panel.city.centroid}${ontology?`&_ontology=${geocoder.options.category}`:''}&key=${geocoder.options.nbaiKey}`); let data = await response.json(); let collection = { type: "FeatureCollection", features: [] }; data.items.forEach(itm => { console.log(itm); let ft = { type: 'Feature', properties: { full_result: itm }, place_name: itm.resultType === 'categoryQuery'||itm.resultType === 'chainQuery'?itm.title:itm.address.label, place_type: itm.categories?(itm.categories[0].name):'Generic', result_type: itm.resultType, id: itm.id } collection.features.push(ft); }); mutable autosuggest_result = collection; return collection; } const as_container = html`

`; yield as_container; var geocoder = new nbaiGeocodePlugin({ externalGeocoder: externalGeocoder, limit: 10, placeholder: 'Autosuggest', origin: 'https://api.nextbillion.io/h/autosuggest', nbaiKey: apiKey, render: function (item) { // extract the item's maki icon or use a default const result_type = item.result_type; let place_type = '';let maki = 'location-dot'; switch (result_type) { case 'place': place_type = place_types.find(t => item.place_type.includes(t.name)); if (place_type != undefined) { maki = place_type.icon; } else { maki = 'location-dot'; } break; case 'locality': maki = 'city'; break; case 'street': maki = 'road'; break; case 'intersection': maki = 'arrow-down-up-across-line'; break; case 'houseNumber': maki = 'house'; break; case 'categoryQuery': maki = 'link'; break; default: maki = 'location-dot'; } return ``; }, }); geocoder.setOrigin('https://api.nextbillion.io/h/autosuggest'); geocoder.setCategory(''); geocoder.addTo(as_container); geocoder.on('result', async function(e) { if (!e.result.properties.full_result.href) { const response = await fetch(`https://api.nextbillion.io/h/lookup?id=${e.result.id}&key=${geocoder.options.nbaiKey}`); let data = await response.json(); mutable autosuggest_result = data; geocoder.setOrigin('https://api.nextbillion.io/h/autosuggest'); } else { // submit HREF query geocoder.setOrigin('https://api.nextbillion.io/h/discover'); geocoder.setInput(e.result.properties.full_result.href.substr(e.result.properties.full_result.href.indexOf("&q=")+3).split('&')[0]); geocoder.setCategory(e.result.properties.full_result.id.split(':')[3] ) } }); geocoder.on('clear', function(e) { geocoder.setOrigin('https://api.nextbillion.io/h/autosuggest'); geocoder.setCategory(''); geocoder.setInput(''); }); geocoder.on('loading', function(e) { }); geocoder.on('error', function(e) { }); }31:Taef,geocode = { async function externalGeocoder(input, _features, config) { const { features } = await nbaiGeocode({ query: input, proximity: config.proximity, nbaiKey: config.nbaiKey }); return features; } async function nbaiGeocode(config) { let countryList = panel.geo_nam.concat(panel.geo_eu.concat(panel.geo_latam.concat(panel.geo_mea.concat(panel.geo_af)))); const response = await fetch(`https://api.nextbillion.io/h/geocode?q=${config.query}&limit=${panel.resultLimit}&in=countryCode:${countryList.toString()}&lang=${panel.language.value}&at=${panel.city.centroid}&key=${geocoder.options.nbaiKey}`); let data = await response.json(); let collection = { type: "FeatureCollection", features: [] }; data.items.forEach(itm => { let ft = { type: 'Feature', geometry: { type: 'Point', coordinates: [itm.position.lng,itm.position.lat] }, properties: { address: itm.address.label, full_result: itm }, place_name: itm.address.label, result_type: itm.resultType, place_type: itm.categories?(itm.categories[0].name):'Generic', center: [itm.position.lng,itm.position.lat] } collection.features.push(ft); }); mutable geocode_results = collection.features return collection; } const container0 = html`

Some results

`; yield container0; var geocoder = new nbaiGeocodePlugin({ externalGeocoder: externalGeocoder, limit: panel.resultLimit, placeholder: 'Geocode', nbaiKey: apiKey, render: function (item) { // extract the item's maki icon or use a default const result_type = item.result_type; let place_type = '';let maki = 'location-dot'; switch (result_type) { case 'place': place_type = place_types.find(t => t.name === item.place_type); if (place_type != undefined) { maki = place_type.icon; } else { maki = 'location-dot'; } break; case 'locality': maki = 'city'; break; case 'street': maki = 'road'; break; case 'houseNumber': maki = 'house'; break; default: maki = 'location-dot'; } return ``; } //const maki = item.properties.maki || 'grocery'; }); geocoder.setMinLength(2); geocoder.addTo(container0); geocoder.on('result', function(e) { mutable geocode_results = e.result; }); geocoder.on('clear', function(e) { }); geocoder.on('loading', function(e) { }); geocoder.on('error', function(e) { }); }32:T4f3,inputs = { const inputs = { city: Inputs.select(cities, { label: "Select City (bias for search)", format: (x) => x.name, value: cities.find((t) => t.name === "Los Angeles") }), language: Inputs.select(languages, { label: "Select Language", format: (x) => x.name, value: languages.find((t) => t.name === "English") }), options: Inputs.checkbox(new Map([["Google Maps Places", "GMAPS"]]), { value: [], label: "Fallback" }), geo_nam: Inputs.checkbox(new Map(geo_nam), { value: ["USA", "CAN"], label: "North America" }), geo_eu: Inputs.checkbox(new Map(geo_eu), { value: ["FRA", "DEU", "CAN", "GBR"], label: "Europe" }), geo_mea: Inputs.checkbox(new Map(geo_mea), { value: ["IND", "SGP"], label: "Middle East-Asia" }), geo_latam: Inputs.checkbox(new Map(geo_latam), { value: [], label: "Latin America" }), geo_af: Inputs.checkbox(new Map(geo_af), { value: ["ZAF"], label: "Africa" }), resultLimit: Inputs.range([1, 15], { label: "Result Limit", step: 1, value: 5 }), highlightColor: Inputs.color({ label: "Highlight color", value: "#46b458" }) }; return inputs; }33:[] 2c:{"id":"c90acda2bec1cd70","slug":"nbai-search","title":"NB.ai Forward Geocoding Examples","thumbnail":"22d85a76df5049e3e5efafdb0904539a5602eede0ae97bbceaf176973ccb4189","access_level":"public","create_time":"$D2022-12-29T15:22:48.138Z","update_time":"$D2025-05-06T14:46:34.859Z","view_time":null,"first_public_time":"$D2022-12-29T15:22:48.138Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"cba4b0d8f6321c5a","login":"jim-welch","name":"Jim Welch","avatar_url":"https://avatars-next.observableusercontent.com/b0c285df0f16b55411bdf9198e41f0c8dc60e3edc4f0d37a037e2f908450f72e","tier":"starter_2024"},"version":641,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"bcb6b2e256659128","login":"jim-welch","name":"Jim Welch","avatar_url":"https://avatars-next.observableusercontent.com/6334ed2ccd004bd8ab34e9f05c047bf4ef291dea914767f26079d7756d073607","tier":null}],"members":[{"type":"individual","id":"bcb6b2e256659128","login":"jim-welch","name":"Jim Welch","avatar_url":"https://avatars-next.observableusercontent.com/6334ed2ccd004bd8ab34e9f05c047bf4ef291dea914767f26079d7756d073607","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"NB.ai Forward Geocoding Examples","cells":[{"id":0,"value":"# NB.ai Forward Geocoding Examples","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":8,"value":"viewof apiKey = secret2(\"apiKey\", {\n title: \"NextBillion.ai API Key\",\n submit: \"Set\",\n description: \"Contact support@nextbillion.ai to get your API key\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":629,"value":"viewof gmapsApiKey = secret2(\"gmapsApiKey\", {\n title: \"Google Maps API Key\",\n submit: \"Set\",\n description: \"For fallback geocoding\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":498,"value":"## Common Search Settings","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":497,"value":"viewof panel = Inputs.form(inputs, {template: v => htl.html`\n

\n ${v.city}
\n ${v.language}
\n ${v.options}
\n ${v.geo_nam}
\n

\n ${v.geo_eu}
\n

\n ${v.geo_mea}
\n

\n ${v.geo_latam}
\n

\n ${v.geo_af}
\n ${v.resultLimit}
\n ${v.highlightColor}\n

\n \n

\n\n

\n`})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":496,"value":"## Example 1 - Discover Search\nThis endpoint processes a free-form text query for an address or place, and returns results in order of relevance.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":525,"value":"{\n if (discover_result.length) {\n return table(discover_result, {\n columns: [\n { key: \"place_name\", name: \"Title\" },\n { key: \"scoring\", name: \"Scoring\" },\n {\n key: \"geometry\",\n render: (val) =>\n `${val.coordinates[1].toFixed(4)},${val.coordinates[0].toFixed(4)}`,\n name: \"Position\"\n },\n {\n key: \"access\",\n render: (val) => `${val[1].toFixed(4)},${val[0].toFixed(4)}`,\n name: \"Access\"\n }\n ]\n });\n } else {\n return md``;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":494,"value":"$2e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":493,"value":"

\n\n--- \n## Example 2 - Autocomplete Search\n\nThis endpoint completes a search using the few entered keystrokes to retrieve valid street address or administrative areas - this speeds-up entering valid address queries. \n\nIn the response from the API endpoint, there are highlight hints that can be used to have valid portions of the input emphasized. In the example here, we highlight in ${panel.highlightColor} the valid input as the user types. \n\nIt is limited to address or admin searches i.e. `944 Sherwood..`, `Columbus, OH`. If Points-of-Interest need to be found, the `Discover` or `Autosuggest` examples are better choices.\n\nIn the search box below, try some more complex addresses with tokens out of sequence - `16710 126th ave ne, woodinville, wa 98072`. Type `16710 126th 98072` and the tokens that match will be highlighted in the results.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":495,"value":"mutable discover_result = []","pinned":false,"hidden":true,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":492,"value":"mutable autocomplete_result = []","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":491,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":490,"value":"

\n\n---\n\n## Example 3 - Autosuggest Search\n\nThis endpoint will suggest either a result or followup query based on the user input. In the example here, try typing something generic like `grocery` or `gas station`. The results that are received should be a mix of matching results _or_ a category search suggestion () that can help further refine the results. If you select a search suggestion from the list, that result will be used to initiate another search with more refined results.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":489,"value":"mutable autosuggest_result = []","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":488,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":487,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":507,"value":"---\n\n## Example 4 - Geocode Search\nThis API allows you to find the geo-coordinates of a known address, place, locality or administrative area, even if the query is incomplete or partly incorrect. It also returns a complete postal address string and address details.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":506,"value":"mutable geocode_results = [];","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":505,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":504,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":486,"value":"nbaiGeocodePlugin = require(\"https://d12qcqjlhp2ahm.cloudfront.net/mbac_test2.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":485,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":484,"value":"import {\n nextbillion,\n cities,\n geo_nam,\n geo_eu,\n geo_latam,\n geo_mea,\n geo_af,\n place_types,\n languages,\n styles,\n secret2\n} from \"@jim-welch/nextbillion-ai-dependencies\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":483,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":482,"value":"styling = htl.html`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":522,"value":"import { table } from \"@gampleman/table\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":481,"value":"fontawesome = {require(\"https://kit.fontawesome.com/9172e50b68.js\")}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 2d:"$2c:body"