29:null 2a:["$","title",null,{"children":"Massachusetts & Boston Geosearch API | Thad Kerosky | Observable"}] 2f:T44b,md`# Massachusetts & Boston Geosearch API The [Massachusetts Area Planning Council](https://www.mapc.org/) has set up an unofficial API web service similar to the [NYC Planning Lab's](https://beta.observablehq.com/@clhenrick/hello-nyc-geosearch-api) own geosearch. You can use it as shown below. It includes cities from the whole state.

For certain metadata needs, you may wish to query the [MassGIS](https://gisprpxy.itd.state.ma.us/arcgisserver/rest/services/AGOL/MassGIS_Master_Address_Points/MapServer/find) or [Boston GIS](http://gis.cityofboston.gov/arcgis/rest/services/SAM/Live_SAM_Address/MapServer/find) geocoding servers instead, though they may not be CORS and/or SSL enabled. _\*[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._ `30:[] 2d:{"id":"f6321468178fbd1c","slug":"massachusetts-boston-geosearch-api","title":"Massachusetts & Boston Geosearch API","thumbnail":"7b8bb2d25b61d292a40f2af77dd32e0e1145d0887363fcaa1332156577773746","access_level":"public","create_time":"$D2018-10-19T03:27:34.579Z","update_time":"$D2020-10-26T23:34:28.207Z","view_time":null,"first_public_time":"$D2018-10-19T03:50:27.403Z","has_unpublished_edits":null,"fork":{"id":"092e1f09e0d399d8","slug":"hello-nyc-geosearch-api","title":"Hello, NYC Geosearch API!","owner":{"id":"38569aaf9cf67d70","login":"clhenrick","name":"Chris Henrick"}},"stars":1,"starred":false,"owner":{"type":"team","id":"5cd4a42aead2029f","login":"thadk","name":"Thad Kerosky","avatar_url":"https://avatars-next.observableusercontent.com/2f2413891eb0ff4669b49685946f849544a1e49e7047923d158638bc30666281","tier":"starter_2024"},"version":320,"publish_version":320,"role":null,"authored":false,"authors":[{"type":"individual","id":"be3e6e81af18a319","login":"thadk","name":"Thad Kerosky","avatar_url":"https://avatars-next.observableusercontent.com/2f2413891eb0ff4669b49685946f849544a1e49e7047923d158638bc30666281","tier":null}],"members":[{"type":"individual","id":"be3e6e81af18a319","login":"thadk","name":"Thad Kerosky","avatar_url":"https://avatars-next.observableusercontent.com/2f2413891eb0ff4669b49685946f849544a1e49e7047923d158638bc30666281","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"c92d21cb27561f8b","slug":"geocoders","title":"Geocoders","owner":{"id":"5cd4a42aead2029f","login":"thadk","name":"Thad Kerosky"}},"type":"notebook","body":{"title":"Massachusetts & Boston Geosearch API","cells":[{"id":0,"value":"$2f","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:\n\nTry typing in an address such as \"170 Tremont Street, Boston\". 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({title: \"Search:\", placeholder: \"Start typing an Massachusetts address\", description: \"autcomplete results will be displayed below.\"})","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', { style: `width:${width}px;height:${width * 0.3}px` });\n yield container;\n \n let map = L.map(container, {scrollWheelZoom: false}).setView([42.4072, -71.3824], 9);\n let osmLayer = L.tileLayer('http://a.tile.stamen.com/toner/{z}/{x}/{y}@2x.png', {\n attribution: '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 Massachusetts addresses to choose from\",\n options: [ \"Kendall/MIT\", \"20 W 34th St\",\"Insitute of Contemporary Art, Boston\", \"Massachusetts State House, Boston\", \"City Hall, Boston\", \"Springfield, MA\"],\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', { style: `width:${width}px;height:${width * 0.3}px` });\n yield container;\n \n let map = L.map(container, {scrollWheelZoom: false}).setView([40.7299, -73.9923], 11);\n let osmLayer = L.tileLayer('http://a.tile.stamen.com/toner/{z}/{x}/{y}@2x.png', {\n attribution: '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://pelias.mapc.org/v1/\"","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- Hat tip to [Matt Zagaja](https://beta.observablehq.com/@mzagaja) from MAPC.\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":"$W30","stdlib":"1","titling":"auto"}} 2e:"$2d:body"