31:T580, function geocodeDC(text) { return Promise.all([ fetch(geocodeEndpoint,{ method: 'POST', headers: { 'Accept': 'application/json', 'Content-Type': 'application/json' }, body: JSON.stringify({ str: text, f: 'json', }) }) .then(response => { if (response.status >= 400) { throw new Error('Bad response'); } return response.json(); }) ]) .then(data => { let passThrough = []; if (data[0].returnDataset && data[0].returnDataset.Table1) { let gcFeatures= data[0].returnDataset.Table1.map(n => ( { "type": "Feature", "geometry": { "type": "Point", "coordinates": [n.LONGITUDE,n.LATITUDE] }, "properties": { "name": n.FULLADDRESS, "label": n.FULLADDRESS, "SSL": n.SSL, ...n } })); return ({ "geocoding": { "version": "0.2", "attribution": "/v1/attribution", "query": { "text": "${text}", "querySize": 20, }, }, "type": "FeatureCollection", "features": gcFeatures }); }; }); }32:[] 2f:{"title":"District of Columbia Geosearch API!","cells":[{"id":0,"value":"md`# District of Columbia Geosearch API!\n\nFor [a GGW article](http://greatergreaterwashington.org/post/32529/help-us-map-out-dcs-vacant-buildings/)'s [mapping project](https://thadk.net/oc-map/) in 2016, I [proxied](https://en.wikipedia.org/wiki/Proxy_server) the official Washington DC Geocoder to mitigate accidental API [cross-origin limitations](https://en.wikipedia.org/wiki/Cross-origin_resource_sharing). My Heroku proxy and the javascript function to query it and get back GeoJSON are available in this page. \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":165,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":173,"value":"md`### (Sort of) Autocomplete:\n\nTry typing in an address such as \"1950 Calvert St NW\" or \"Kennedy\". Type slowly to watch the suggestions role in and get more accurate as you type. \nBecause of underlying API limitations for DC, **you need to start typing the street name** before it becomes correct.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"viewof search = text({title: \"Search:\", placeholder: \"Start typing an DC address here\", 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*0.75}px;height:${width * 0.75}px` });\n yield container;\n \n let map = L.map(container, {scrollWheelZoom: false}).setView([38.9,-77.03], 12);\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":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, geocodeDC(`${search}`))\n : null","pinned":false,"hidden":false,"mode":"ojs"},{"id":167,"value":"md`\n\nThe original API endpoint is:\n\n* http://citizenatlas.dc.gov/newwebservices/locationverifier.asmx/findLocation2\n* http://citizenatlas.dc.gov/newwebservices/locationverifier.asmx?op=findLocation2\n\nMore detailed information may be available here: https://octo.dc.gov/service/master-address-repository\n\nSSL is the identifier for each property or plot in DC.\n\n_\\*[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._\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":237,"value":"md`### A few examples`","pinned":false,"hidden":false,"mode":"ojs"},{"id":194,"value":"viewof selected = select({\n description: \"Some sample DC addresses to choose from\",\n options: [ \"1600 Pennsylvania Ave NW\", \"600 Independence Ave SW\",\"1500 S Capitol St SE\", \"1950 Calvert St NW\" ],\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, geocodeDC(`${selected}`))\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":430,"value":"md`All these fabulous items are available in properties:\n

\n${JSON.stringify(response2.features[0].properties, null, 2)}\n

\n\nFor instance, these might help you to:\n* look up tax records, \n* [the ANC](https://en.wikipedia.org/wiki/Advisory_Neighborhood_Commission) a resident might vote in,\n* zoning,\n* the API's confidence in its guess, etc.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":246,"value":"md`### Happy geocoding!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":260,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":263,"value":"// http://citizenatlas.dc.gov/newwebservices/locationverifier.asmx/findLocation2 has no CORS\ngeocodeEndpoint = \"https://ggwash-forms.herokuapp.com/geocode\"","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 Lab Geocoder](https://beta.observablehq.com/@clhenrick/hello-nyc-geosearch-api)\n- [The code for the endpoint proxy](https://github.com/thadk/ggwash-form-server/blob/develop/app/services/routes.js)`","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"}