31:T44e,map = { // create map container and leaflet map const mapContainer = DOM.element('div', {style: `width:${width}px;height:${width/1.6}px`}); yield mapContainer; const map = createMap(mapContainer); // create data points for the heatmap layer let dataPoints = homicides.map(h => [h.Latitude, h.Longitude, 0.1]); // intensity // add heatmap layer /* let dataHeatLayer = heatLayer(dataPoints, { minOpacity: 0.5, maxZoom: 18, max: 1.0, radius: 8, blur: 5, gradient: null }).addTo(map); */ // add clustered markers let markers = markerCluster({}); let markersLayer = L.geoJson(createGeoData(homicides), { onEachFeature: function (feature, layer) { const data = feature.properties; const html = ``; layer.bindPopup(html); layer.bindTooltip(html, {sticky: true}); } }); markers.addLayer(markersLayer); map.addLayer(markers); // map.fitBounds(markers.getBounds()); }32:[] 2f:{"title":"Chicago Homicides Leaflet Map","cells":[{"id":0,"value":"md`# Chicago Homicides Leaflet Map\n\nJust a simple Chicago homicides Leaflet JS map with clustered markers.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":300,"value":"md `## Chicago Homicides Data, 2001-2018\n\nData Source: [Chicago Data Portal/Public Safety/Crimes 2001 to present](https://data.cityofchicago.org/Public-Safety/Crimes-2001-to-present/ijzp-q8t2)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":304,"value":"dataUrl = 'https://raw.githubusercontent.com/RandomFractals/ChicagoCrimes/master/data/2018/chicago-homicides-2001-2018.csv'","pinned":false,"hidden":false,"mode":"ojs"},{"id":307,"value":"homicides = d3.csv(dataUrl)","pinned":false,"hidden":false,"mode":"ojs"},{"id":95,"value":"md `## Mapping Chicago Homicides with [LeafletJS](https://leafletjs.com/)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":159,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":156,"value":"function createMap(mapContainer) {\n // create Stamen leaflet toner map with attributions\n const map = L.map(mapContainer).setView([41.85, -87.68], 10); // Chicago origins\n const mapTiles = '//stamen-tiles-{s}.a.ssl.fastly.net/toner/{z}/{x}/{y}.png';\n const osmCPLink = 'OpenStreetMap';\n const mapCPLink = 'Stamen Design';\n const tileLayer = L.tileLayer(mapTiles, {\n attribution: `${osmCPLink} | ${mapCPLink}`,\n detectRetina: false,\n maxZoom: 18,\n minZoom: 10,\n noWrap: false,\n subdomains: 'abc'\n }).addTo(map);\n return map;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":342,"value":"popUpCss = html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":377,"value":"createGeoData(homicides)","pinned":false,"hidden":false,"mode":"ojs"},{"id":369,"value":"function createGeoData(homicides) {\n const geoData = {\n type: 'FeatureCollection',\n crs: {type: 'name', properties: {name: 'urn:ogc:def:crs:OGC:1.3:CRS84'}},\n features: []\n };\n homicides.map(h => {\n geoData.features.push({\n type: 'Feature',\n properties: {\n block: h.Block,\n location: h['Location Description'],\n info: h.Description,\n date: h.Date\n },\n geometry: {\n type: 'Point',\n coordinates: [h.Longitude, h.Latitude]\n }\n });\n });\n return geoData;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":43,"value":"md `## Leaflet JS, CSS and Plugins Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":349,"value":"d3 = require('d3') // for csv data load","pinned":true,"hidden":false,"mode":"ojs"},{"id":99,"value":"L = require('leaflet@1.3.2')","pinned":true,"hidden":false,"mode":"ojs"},{"id":330,"value":"leafletCSS = html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":334,"value":"heatLayer = L, require('leaflet.heat').catch(() => L.heatLayer)","pinned":true,"hidden":false,"mode":"ojs"},{"id":336,"value":"markerCluster = L, require('leaflet.markercluster@1.1.0').catch(() => L.markerClusterGroup)","pinned":true,"hidden":false,"mode":"ojs"},{"id":340,"value":"markerClusterCSS = html``","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}

${data.block}