2e:null 2f:["$","title",null,{"children":"Hello, NYC Geosearch API! | Chris Henrick | Observable"}] 34:T599,md`# Hello, NYC Geosearch API! [NYC Planning Labs](https://planninglabs.nyc/) has its very own geocoder\*, [featuring autocomplete!](https://geosearch.planninglabs.nyc/docs/#autocomplete) \`${autocompleteEndpoint}\` This might not seem like a big deal, but it's in fact very useful as geocoding in NYC is often difficult to do correctly. Take for example, the [confusing addresses in the borough of Queens](https://www.brownstoner.com/queens/real-estate-categories/how-to-make-sense-of-the-street-addresses-and-grid-in-queens/) where adjacent streets share the same name but have different suffixes, and address numbers consist of two hyphenated numbers, the first indicating the lower cross street and the second indicating the building on the block, followed by a 3rd number to represent the street or avenue the building is located on. Other NYC address oddities include the same building having multiple addresses, such as if a building is located on a corner of an intersection. Nuances such as these may throw off geocoders, giving incorrect results or no results at all. The NYC Planning Labs team's geocoder however is backed by the NYC Planning department geo data and does a pretty good job. Plus it's free to use! _\*[read more on geocoding](https://en.wikipedia.org/wiki/Geocoding), the process of translating human readable place names to geographic data representations such as latitude, longitude coordinates._ `35:[] 32:{"id":"092e1f09e0d399d8","slug":"hello-nyc-geosearch-api","title":"Hello, NYC Geosearch API!","thumbnail":"ba10aafc5470b0370478d7e9781c85cc3c31446d9e450d08461ca092ea85106f","access_level":"public","create_time":"$D2018-10-17T22:12:22.322Z","update_time":"$D2020-10-06T17:00:45.065Z","view_time":null,"first_public_time":"$D2018-10-18T04:07:28.246Z","fork":false,"stars":9,"starred":false,"owner":{"type":"team","id":"38569aaf9cf67d70","login":"clhenrick","name":"Chris Henrick","avatar_url":"https://avatars-next.observableusercontent.com/d2bdcdbb972dc7a42dd08637fca131b9f4f8f7d26f2896497815c62952cbbabe","tier":"starter_2024"},"version":272,"publish_version":272,"role":null,"authored":false,"authors":[{"type":"individual","id":"152f84cb3c7f97b6","login":"clhenrick","name":"Chris Henrick","avatar_url":"https://avatars-next.observableusercontent.com/d2bdcdbb972dc7a42dd08637fca131b9f4f8f7d26f2896497815c62952cbbabe","tier":null}],"members":[{"type":"individual","id":"152f84cb3c7f97b6","login":"clhenrick","name":"Chris Henrick","avatar_url":"https://avatars-next.observableusercontent.com/d2bdcdbb972dc7a42dd08637fca131b9f4f8f7d26f2896497815c62952cbbabe","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":9,"collection":{"id":"0f1b93b67af83521","slug":"maps","title":"maps and geo","owner":{"id":"38569aaf9cf67d70","login":"clhenrick","name":"Chris Henrick"}},"type":"notebook","body":{"title":"Hello, NYC Geosearch API!","cells":[{"id":0,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":165,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":173,"value":"md`### Autocomplete FTW:\n\nTry typing in an address such as \"231 Rutland Road\" or \"866 Park Place\". Type slowly to watch the suggestions role in and get more accurate as you type.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"viewof search = text({\n title: \"Search:\",\n placeholder: \"Enter an NYC address\",\n description: \"autcomplete results will be displayed below.\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"md`#### Search Results:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":133,"value":"resultsList = {\n if (response && response.features.length) {\n return html`\n

${feature.properties.label}

\n `;\n }\n return null\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":100,"value":"map = {\n let container = DOM.element('div', {\n style: `width:${width}px;height:${width * 0.3}px`\n });\n yield container;\n\n let map = L.map(container, { scrollWheelZoom: false }).setView(\n [40.7299, -73.9923],\n 11\n );\n let osmLayer = L.tileLayer(tilesURI, {\n attribution:\n 'Wikimedia maps beta | © OpenStreetMap contributors'\n }).addTo(map);\n\n if (response && response.features.length) {\n const resultsLayer = L.geoJson(response, {\n onEachFeature: function(feature, layer) {\n layer.bindPopup(`

${feature.properties.label}

`);\n }\n }).addTo(map);\n map.fitBounds(resultsLayer.getBounds());\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"md`Results from the Geosearch API are returned as a GeoJSON Feature Collection:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"response = search.length\n // delay the request by a couple hundred milliseconds to politely avoid bombarding the API with too many requests\n ? Promises.delay(200, d3.json(`${autocompleteEndpoint}?text=${search}`))\n : null","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":167,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":237,"value":"md`### Search exact`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":171,"value":"md`The NYC GeoSearch API also has a regular \\`search\\` endpoint that you may query:\n\n\\`${searchEndpoint}\\`\n\nThis endpoint is better to use when you have an exact address you are looking for. Try one of the following:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":194,"value":"viewof selected = select({\n description: \"Some sample NYC addresses to choose from\",\n options: [\"20 W 34th St\", \"89 E 42nd St\", \"11 W 53rd St\", \"Metropolitan Museum of Art\", \"Coney Island\", \"World Trade Center\", \"Prospect Park\"],\n multiple: false\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":201,"value":"result = response2 && response2.features.length ? html`

${response2.features[0].properties.label}

` : null","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":205,"value":"map2 = {\n let container = DOM.element('div', {\n style: `width:${width}px;height:${width * 0.3}px`\n });\n yield container;\n\n let map = L.map(container, { scrollWheelZoom: false }).setView(\n [40.7299, -73.9923],\n 11\n );\n let osmLayer = L.tileLayer(tilesURI, {\n attribution:\n 'Wikimedia maps beta | © OpenStreetMap contributors'\n }).addTo(map);\n\n if (response2 && response2.features.length) {\n const [lng, lat] = response2.features[0].geometry.coordinates;\n const resultsLayer = L.geoJson(response2, {\n onEachFeature: function(feature, layer) {\n layer.bindPopup(`

${feature.properties.label}

`);\n }\n }).addTo(map);\n map.setView([lat, lng], 14);\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":198,"value":"response2 = {\n // delay the request by a couple hundred milliseconds to politely avoid bombarding the API with too many requests\n return Promises.delay(200, d3.json(`${searchEndpoint}?text=${selected}&size=1`))\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":246,"value":"md`### Happy geocoding!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":186,"value":"searchEndpoint = `${baseURL}search`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":234,"value":"autocompleteEndpoint = `${baseURL}autocomplete`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":181,"value":"baseURL = \"https://geosearch.planninglabs.nyc/v1/\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":263,"value":"tilesURI = \"https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}@2x.png\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":239,"value":"md`### credits\n\n- [Using Leaflet.JS](https://beta.observablehq.com/@tmcw/leaflet) by Tom MacWright\n- [NYC Planning Labs Geosearch docs](https://geosearch.planninglabs.nyc/docs/)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":81,"value":"md`### styles`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":94,"value":"leafletCSS = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"css = html`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"md`### dependencies`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"import {text, select} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"d3 = require(\"d3@5.7.0\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"L = require('leaflet@1.2.0')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 33:"$32:body"