2d:null 2e:["$","title",null,{"children":"Downtown Chicago 3D Buildings! | E. Kerney | Observable"}] 33:Tbdb,//This is where all of the magic happens function* mapBoxCHI() { // Method for showing a div container in Observable let container = html`

`; yield container; // generic token mapboxgl.accessToken = 'pk.eyJ1IjoibmhicHRlYWMiLCJhIjoiY2tvMjd3YmQ1MGY5ODJ4b3Z3MzNiZTJ3ZiJ9.kxfdkB_zmSrlWEUaKEhvbw'; // Create a new map, using the center of the bounding box for the focus // Basemap is selectable using the range slider, access through the mapStyles binding let map = new mapboxgl.Map({container, center: [((c.w + c.e)/2), ((c.n + c.s)/2)],zoom: 13,style: mapStyles[m], pitch: 55, bearing: 240, maxPitch: 85}); // map.on(load) add the source, layer, and interactivity map.on('load', function () { // Purple Air Sensors Live IoT data feed layer map.addSource('AQdata', {'type': 'geojson','data': AirSensorData}); // simple circle color based on PM2.5 value map.addLayer({'id': 'AirSensors', 'type': 'circle', 'source': 'AQdata', 'layout': {}, 'paint': { 'circle-color': ['interpolate',['linear'], ['to-number', ['get', 'PM2_5Value']],0,'#34eb40',5,'#deeb34',15,'#eb3434'], "circle-opacity": 1,'circle-radius':20,'circle-pitch-alignment':'map'} }); // the 'data' source is the url from chiBuildings, mapbox prefers the GeoJSON url directly as input map.addSource('chiBuild', {'type': 'geojson','data': chiBuildings}); // 'fill-extrusion' provides 3D capabilities, height is from number of (stories X 12/ft) avg per story! map.addLayer({'id': 'buildings', 'type': 'fill-extrusion', 'source': 'chiBuild', 'layout': {}, 'paint': {"fill-extrusion-color": '#0080ff', "fill-extrusion-opacity": .7, "fill-extrusion-height": ["*", 12, ['to-number', ['get', 'stories']]] } }); // Generate Popup on click, example code edited to obtain proper coordinates from the building features map.on('click', 'buildings', function (e) { // First center map on clicked building with flyTo, slight zoom map.flyTo({ center: e.features[0].geometry.coordinates[0][0], zoom:14 }); const coordinates = e.features[0].geometry.coordinates; // e.features[0].properties is destructured to access information for popup, 7 lines of code => 1 const {bldg_name1,year_built,t_add1,st_name1,st_type1,bldg_sq_fo, stories} = e.features[0].properties; new mapboxgl.Popup() .setLngLat(coordinates[0][0]) .setHTML(`

${bldg_name1}

${t_add1} ${st_name1} ${st_type1}
Built: ${year_built} - ${stories} Stories - ${bldg_sq_fo} sqft`) .addTo(map); }); // Change mouse to point when over buildings, back to cursor when leaving buildings map.on('mouseenter', 'buildings', function () { map.getCanvas().style.cursor = 'pointer'; }); map.on('mouseleave', 'buildings', function () { map.getCanvas().style.cursor = ''; }); }); }34:[] 31:{"id":"5698ea29d91cd3ed","slug":"downtown-chicago-3d-buildings","title":"Downtown Chicago 3D Buildings!","thumbnail":"d1545b5a8b91e5fbdf23237f85e5c01c2d6320fa2a3a08af442bfd462591eb20","access_level":"public","create_time":"$D2021-04-21T01:03:05.479Z","update_time":"$D2022-07-04T02:00:03.899Z","view_time":null,"first_public_time":"$D2021-04-24T01:00:06.052Z","has_unpublished_edits":null,"fork":false,"stars":7,"starred":false,"owner":{"type":"team","id":"6773b9d940faa10e","login":"location-artistry","name":"E. Kerney","avatar_url":"https://avatars-next.observableusercontent.com/6a41b9491e318e4761cdb6210d6adb0880ed593495f2090cabed95169e3165f2","tier":"starter_2024"},"version":293,"publish_version":293,"role":null,"authored":false,"authors":[{"type":"individual","id":"06ed914427a4c051","login":"location-artistry","name":"E. Kerney","avatar_url":"https://avatars-next.observableusercontent.com/6a41b9491e318e4761cdb6210d6adb0880ed593495f2090cabed95169e3165f2","tier":null}],"members":[{"type":"individual","id":"06ed914427a4c051","login":"location-artistry","name":"E. Kerney","avatar_url":"https://avatars-next.observableusercontent.com/6a41b9491e318e4761cdb6210d6adb0880ed593495f2090cabed95169e3165f2","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":4,"collection":null,"type":"notebook","body":{"title":"Downtown Chicago 3D Buildings!","cells":[{"id":0,"value":"md`# Downtown Chicago 3D Buildings!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":223,"value":"md`## + Live Air Quality Sensors\n### #locationVisualization May 2021`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"md`A prototype Mapbox GL 3D Map of Downtown Chicago. \nThe purpose is to test out various 3D JavaScript Mapping Libraries, determine which are most performant and well documented, and also work in [ObservableHQ](https://observablehq.com/). \nObservable are reactive Notebooks built on JavaScript, similar to a Jupyter, though built for a web context and are effective for testing proof-of-concept data visualizations.\nThis project combines the [Mapbox GL 3D](https://docs.mapbox.com/mapbox-gl-js/api/), and brings in the buildings from a unique source, the [Chicago Open Data Portal](https://data.cityofchicago.org/). \n[CesiumJS](https://cesium.com/) was also tested as a 3D interface, but didn't display well within Observable.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":186,"value":"md`The circles shown on the map are live air quality sensors, from the Purple Air API. Symbolized from Green to Red for Good to Poor Air Quality based on PM2.5 values.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"md`The resulting Mapbox 3D map with clickable 3D buildings is shown below. \nThe rest of the Notebook documents the components and data in the visualization. Also try the basemap slider below to try some different looks!\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"{\n b2;\n return mapBoxCHI();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"viewof m = Range([0, 9], {step: 1, value: 7, label: \"Basemap Selector\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"viewof b2 = button({value: \"RELOAD MAP\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"md`First define the bounding box coordinates for downtown Chicago. \nThis allows programmatic access to these values in other cells`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"c = {return {'n':41.91,'w':-87.65,'e':-87.60,'s':41.865}} ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"md`Next, test Chicago building data query using the bounding box coordinates. \nThis sets the result limit at $limit=100, and uses d3 to parse into json, which is imported below.\nChicago Open Data does not provide building height, as some other cities have generated from LiDAR data. Instead it is reported in stories, which I have multiplied by 12ft as an average height per story.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"chiQuery = {\n const chiBuild = (`https://data.cityofchicago.org/resource/syp8-uezg.geojson?$limit=100&$$app_token=4YGsjiKvGwEYr9zDF6P0Ndvz9&$where=within_box(the_geom,${c.n},${c.w},${c.s},${c.e})`);\n const geoData = d3.json(chiBuild, d3.autoType,);\n return geoData;\n} ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"md`\n\\`\\`\\`javascript \nchiQuery = {\n const chiBuild = (\"https://data.cityofchicago.org/resource/syp8-uezg.geojson?$limit=100&$$app_token=xxxxxxxxxxxxxxxxxx&\n $where=within_box(the_geom,${c.n},${c.w},${c.s},${c.e})\");\n const geoData = d3.json(chiBuild, d3.autoType,);\n return geoData;\n}\n\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"// The query url on it's own, which is used as the datasource for Mapbox \nchiBuildings = (`https://data.cityofchicago.org/resource/syp8-uezg.geojson?$limit=6000&$$app_token=4YGsjiKvGwEYr9zDF6P0Ndvz9&$where=within_box(the_geom,${c.n},${c.w},${c.s},${c.e})`);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":87,"value":"md`The mapboxgl library also needs to be imported to draw the map... \nAs usual thanks to [Tom MacWright](https://observablehq.com/@tmcw) for providing the example for loading Mapbox GL JS into Observable:\n[https://observablehq.com/@tmcw/using-mapbox-gl-js](https://observablehq.com/@tmcw/using-mapbox-gl-js)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"mapboxgl = {\n let mapboxgl = await require('mapbox-gl@2.2.0');\n // generic token\n mapboxgl.accessToken = 'pk.eyJ1IjoibmhicHRlYWMiLCJhIjoiY2tvMjd3YmQ1MGY5ODJ4b3Z3MzNiZTJ3ZiJ9.kxfdkB_zmSrlWEUaKEhvbw';\n const href = await require.resolve(\"mapbox-gl@1.9.1/dist/mapbox-gl.css\");\n document.head.appendChild(html``);\n return mapboxgl; \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":192,"value":"md`### Custom GeoJSON Classes and Live Air Quality Data\nNext are custom JavaScript Classes to assist in constructing GeoJSON Feature Collections. The GeoPoint extends Feature, and the FeatureCollection is built on GeoPoint. A quick template to feed in JSON based records and convert into GeoJSON which is consumed by most mapping libraries. \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":127,"value":"class Feature {\n constructor(id) {\n this.type = 'Feature';\n this.properties = {'ID':id,'label':'','info':'','status':'','val':-1,'units':''};\n }\n id() {return this.properties.ID}\n info() {return this.properties}\n addProp(name,value) {\n try {\n this.properties[name] = value;\n return (`${name}: ${value} added to Feature ID: ${this.id()}`); }\n catch { (`Could NOT add ${name}: ${value}!`) }\n }\n addProps(arr) {\n try { arr.forEach(d => this.properties[d[0]] = d[1])}\n catch { return (`Could NOT add ${arr} to ${this.id()}`) }\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":130,"value":"class GeoPoint extends Feature {\n constructor(id,[lon,lat],props = {}) {\n super(id);\n this.properties.EPSG = 4326, this.properties.source = '', this.properties.crs = 'WGS 84';\n this.geometry = {'type':'Point','coordinates':[lon,lat]};\n Object.entries(props).forEach(([d,i]) => (this.properties[d] = i));\n } \n geo() {return this.geometry.coordinates}\n crs() {return [(`EPSG:${this.properties.EPSG}`),this.properties.crs]}\n};","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":133,"value":"class FeatureCollection {\n constructor(meta) {\n this.type = 'FeatureCollection';\n this.metadata = meta;\n this.features = [];\n }\n geoType() { try {return this.features[0].geometry.type}\n catch {return \"It doesn't appear their are any features yet...\"} }\n fCount() {return this.features.length};\n fProps() {try {return this.features[0].properties}\n catch {return \"It doesn't appear their are any features yet...\"} }\n fPush(feature) {\n try { this.features.push(feature);\n return `Added Feature Number ${this.fCount()}`; }\n catch { return \"Cannot add ${feature} to Feature Collection\"} }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":206,"value":"md`First we fetch the data for the sensors located around downtown Chicago, and parse into JSON with d3.\nThen transform into GeoJSON using the custom FeatureCollection Class. The Lon, Lat of each feature is pulled from the feature attributes to provide the recognized geometry. \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":291,"value":"d3 = require('d3')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":142,"value":"AQdata = {\n const staList = '36901|5588|8476|41581|58865|52011|51951|11314|12927|12909|12981';\n const AQurl = (`https://www.purpleair.com/json?show=${staList}`);\n return d3.json(AQurl, d3.autoType,);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":137,"value":"AirSensorData = {\n const geo = new FeatureCollection('IoT Air sensors in Chicago,Purple Air: https://www2.purpleair.com/');\n AQdata.results.forEach(d => geo.fPush(new GeoPoint(d.ID,[d.Lon,d.Lat],d)))\n return geo;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":275,"value":"md`The sensors are symbolized from green to red for good to bad Air Quality. For this project I have used a very simplified scale based directly on the PM2.5 readings. For a more detailed calculation of the Air Quality Index based on the EPA AQI equation please see [https://github.com/Location-Artistry/AirQualityDataServices](https://github.com/Location-Artistry/AirQualityDataServices) \nThat project features an air quality dashboard which uses both Purple Air and AirNow.gov sensors, has an AQ widget, and shows the live sensors on an ESRI JavaScript API map.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":93,"value":"md`## Appendices`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"mapStyles = ['mapbox://styles/mapbox/streets-v11','mapbox://styles/mapbox/outdoors-v11', 'mapbox://styles/mapbox/light-v10','mapbox://styles/mapbox/dark-v10','mapbox://styles/mapbox/satellite-v9',\n'mapbox://styles/mapbox/satellite-streets-v11','mapbox://styles/mapbox/navigation-preview-day-v4',\n'mapbox://styles/mapbox/navigation-preview-night-v4','mapbox://styles/mapbox/navigation-guidance-day-v4',\n'mapbox://styles/mapbox/navigation-guidance-night-v4']","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":96,"value":"import {button} from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":283,"value":"// Existing Observable modules for user input","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"Inputs = require(\"@observablehq/inputs@0.7.21/dist/inputs.umd.min.js\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":100,"value":"Range = Inputs.Range","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 32:"$31:body"