31:T57f,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); // add markers let markers = markerCluster({}); let geoLayer = L.geoJson(geoData, { onEachFeature: function (feature, layer) { const data = feature.properties; const html = ``; layer.bindPopup(html); layer.bindTooltip(`${data.address}
live since ${data.go_live_date}`, {sticky: true}); } }); markers.addLayer(geoLayer); map.addLayer(markers); // map.fitBounds(markers.getBounds()); }32:[] 2f:{"title":"Chicago Speed Camera Locations","cells":[{"id":0,"value":"md`# Chicago Speed Camera Locations\n\n**Data Source:** [Chicago Transportation](https://data.cityofchicago.org/browse?category=Transportation)/[Speed Camera Locations](https://data.cityofchicago.org/Transportation/Speed-Camera-Locations/4i42-qv3h)`","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}** speed cameras in Chicago area.\n\n### Speed 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/4i42-qv3h.json'","pinned":false,"hidden":false,"mode":"ojs"},{"id":98,"value":"columns = [\n 'address',\n 'go_live_date',\n 'first_approach',\n 'second_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":109,"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"},{"id":58,"value":"markerClusterStyles = html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":28,"value":"markerCluster = L, require('leaflet.markercluster@1.2.0').catch(() => L.markerClusterGroup)","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}