31:T6c5,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); // red dot marker const marker = { radius: 6, fillColor: "#ff4e3b", color: "#ff0000", weight: 1, opacity: 1, fillOpacity: 0.8 }; // map markers const pointToLayer = function (feature, latlng) { return L.circleMarker(latlng, marker); } // add markers let geoLayer = L.geoJson(geoData, { pointToLayer: pointToLayer, onEachFeature: function (feature, layer) { const data = feature.properties; const html = ``; layer.bindPopup(html); layer.bindTooltip(`${data.intersection}
live since ${new Date(data.go_live_date).toLocaleDateString()}`, {sticky: true}); } }); map.addLayer(geoLayer); // map.fitBounds(markers.getBounds()); }32:[] 2f:{"title":"Chicago Red Light Camera Locations","cells":[{"id":0,"value":"md`# Chicago Red Light Camera Locations\n\n**Data Source:** [Chicago Transportation](https://data.cityofchicago.org/browse?category=Transportation)/[Red Light Camera Locations](https://data.cityofchicago.org/Transportation/Red-Light-Camera-Locations/thvf-6diy)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":48,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":89,"value":"markerStyles = html`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":82,"value":"md`## Data\n\nThere are **${data.length}** red light cameras in Chicago area.\n\n### Red Light Camera Locations\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":86,"value":"viewof dataTable = Inputs.table(data, {\n columns: columns\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":43,"value":"dataUrl = 'https://data.cityofchicago.org/resource/thvf-6diy.json'","pinned":false,"hidden":false,"mode":"ojs"},{"id":98,"value":"columns = [\n 'intersection',\n 'go_live_date',\n 'first_approach',\n 'second_approach',\n 'third_approach',\n 'latitude',\n 'longitude'\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"data = await fetch(dataUrl).then(data => data.json())","pinned":false,"hidden":false,"mode":"ojs"},{"id":50,"value":"geoData = getGeoDataPoints(data)","pinned":false,"hidden":false,"mode":"ojs"},{"id":127,"value":"import { getGeoDataPoints } from '@randomfractals/geo-data-utils'","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"md`## Leaftlet Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":62,"value":"leafletStyles = html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":19,"value":"L = require('leaflet@1.7.1')","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}