31:T8f4,map = { // create map container let mapContainer = DOM.element('div', { style: `width:${width}px;height:${width/1.6}px` }); yield mapContainer; // create leaflet map with attributions let map = L.map(mapContainer).setView([41.85, -87.68], 10); // Chicago origins let osmLayer = L.tileLayer( // 'https://maps.wikimedia.org/osm-intl/{z}/{x}/{y}@2x.png') 'https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png', { attribution: '© OpenStreetMap contributors, © CartoDB', detectRetina: false, maxZoom: 18, minZoom: 10, noWrap: false, subdomains: 'abc' }).addTo(map); // create hit points for the heatmap layer let hitPoints = geoData.features.map(feature => feature.geometry.coordinates.slice().reverse().concat([0.1])); // intensity // add heat layer let heatmapLayer = heatLayer(hitPoints, { minOpacity: 0.12, maxZoom: 18, max: 1.0, radius: 8, blur: 5, gradient: null }).addTo(map); // dot marker const marker = { radius: 6, fillColor: "steelblue", color: "#0000ff", weight: 1, opacity: 1, fillOpacity: 0.8 }; // map markers const pointToLayer = function (feature, latlng) { return L.circleMarker(latlng, marker); } // add markers let markers = markerCluster({}); let geoLayer = L.geoJson(geoData, { pointToLayer: pointToLayer, onEachFeature: function (feature, layer) { const data = feature.properties; const html = ``; layer.bindPopup(html); layer.bindTooltip(`${data.traffic_volume_count_location_address} ${data.street}
Vehicle Volume: ${data.total_passing_vehicle_volume.toLocaleString()}`, {sticky: true}); } }); markers.addLayer(geoLayer); map.addLayer(markers); // map.fitBounds(markers.getBounds()); }32:[] 2f:{"title":"Chicago Average Daily Traffic Counts","cells":[{"id":0,"value":"md`# Chicago Average Daily Traffic Counts\n\n**Data Source:** [Chicago Transportation](https://data.cityofchicago.org/browse?category=Transportation) / [Average Daily Traffic Counts](https://dev.socrata.com/foundry/data.cityofchicago.org/pf56-35rv)\n\n**Chicago Data Portal:** [Average Daily Traffic Counts Map](https://data.cityofchicago.org/Transportation/Average-Daily-Traffic-Counts-Map/pf56-35rv)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":55,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":139,"value":"markerStyles = html`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"md`## Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":160,"value":"viewof searchResults = Inputs.search(dataTable)","pinned":false,"hidden":false,"mode":"ojs"},{"id":38,"value":"viewof tableView = Inputs.table(searchResults, {\n columns: columns,\n reverse: true\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"md`## Data Queries and Filters`","pinned":false,"hidden":false,"mode":"ojs"},{"id":40,"value":"columns = [\n 'id',\n 'date_of_count',\n 'traffic_volume_count_location_address',\n 'street',\n 'total_passing_vehicle_volume',\n 'vehicle_volume_by_each_direction_of_traffic',\n 'latitude',\n 'longitude'\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"dataUrl = 'https://data.cityofchicago.org/resource/pf56-35rv.json'","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"query = `?$limit=100000`","pinned":false,"hidden":false,"mode":"ojs"},{"id":31,"value":"data = await fetch(dataUrl + query).then(data => data.json())","pinned":false,"hidden":false,"mode":"ojs"},{"id":66,"value":"geoData = getGeoDataPoints(dataTable.objects())","pinned":false,"hidden":false,"mode":"ojs"},{"id":93,"value":"dataTable = aq.from(data)\n .derive({\n date: d => op.parse_date(d.date_of_count)\n })\n .orderby('total_passing_vehicle_volume')","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"import { aq, op } from '@uwdata/arquero'","pinned":false,"hidden":false,"mode":"ojs"},{"id":62,"value":"import { getGeoDataPoints } from '@randomfractals/geo-data-utils'","pinned":false,"hidden":false,"mode":"ojs"},{"id":56,"value":"leafletStyles = html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":59,"value":"L = require('leaflet@1.7.1')","pinned":true,"hidden":false,"mode":"ojs"},{"id":74,"value":"heatLayer = L, require('leaflet.heat').catch(() => L.heatLayer)","pinned":true,"hidden":false,"mode":"ojs"},{"id":68,"value":"markerClusterStyles = html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":70,"value":"markerCluster = L, require('leaflet.markercluster@1.2.0').catch(() => L.markerClusterGroup)","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}