31: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._ `32:[] 2f:{"title":"Massachusetts & Boston Geosearch API","cells":[{"id":0,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":165,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":63,"value":"md`#### Search Results:`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":65,"value":"md`Results from the Geosearch API are returned as a GeoJSON Feature Collection:`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":167,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":237,"value":"md`### Search exact`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":201,"value":"result = response2 && response2.features.length ? html`

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

` : null","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":246,"value":"md`### Happy geocoding!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":186,"value":"searchEndpoint = `${baseURL}search`","pinned":false,"hidden":false,"mode":"ojs"},{"id":234,"value":"autocompleteEndpoint = `${baseURL}autocomplete`","pinned":false,"hidden":false,"mode":"ojs"},{"id":181,"value":"baseURL = \"https://pelias.mapc.org/v1/\"","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":81,"value":"md`### styles`","pinned":false,"hidden":false,"mode":"ojs"},{"id":94,"value":"leafletCSS = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":83,"value":"css = html`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"md`### dependencies`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"import {text, select} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"d3 = require(\"d3@5.7.0\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":98,"value":"L = require('leaflet@1.2.0')","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}