crimeMap = { // You'll often see Leaflet examples initializing a map like L.map('map'), // which tells the library to look for a div with the id 'map' on the page. // In Observable, we instead create a div from scratch in this cell, so it's // completely self-contained. let container = DOM.element('div', { style: `width:${width}px;height:${width/1.6}px` }); // Note that I'm yielding the container pretty early here: this allows the // div to be placed on the page. This is important, because Leaflet uses // the div's .offsetWidth and .offsetHeight to size the map. If I were // to only return the container at the end of this method, Leaflet might // get the wrong idea about the map's size. yield container; // Now we create a map object and add a layer to it. let map = L.map(container).setView([43.0927993, -89.4171004], 11); let osmLayer = L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}@2x.png', { attribution: '© OpenStreetMap contributors' }).addTo(map); // let osmLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { // attribution: '© OpenStreetMap contributors' // }).addTo(map); // Process DC's crime data into the [latitude, longitude, intensity] form that // Leaflet.heat desires. // let crimePoints = madCrimes.features.map(feature => // feature.geometry.coordinates.slice().reverse().concat([0.1])); let selectedCrimes = madCrimes.features.filter((d) => { if (crimeCategory.length > 0){ return crimeCategory.includes(d.properties.incident) && new Date(d.properties.Occur_date) >= start_date_formatted && new Date(d.properties.Occur_date) <= end_date_formatted } else if (crimeCategory.length === 0) { return uniqueCrimes.includes(d.properties.incident) && new Date(d.properties.Occur_date) >= start_date_formatted && new Date(d.properties.Occur_date) <= end_date_formatted } }) let crimePoints = selectedCrimes.map(feature => feature.geometry.coordinates.slice().reverse().concat([0.1])); let crimeLayer = heatLayer(crimePoints, { minOpacity: 0.5, maxZoom: 18, max: 1.0, radius: 8, blur: 4, gradient: null }).addTo(map); let markers = markerCluster({}); let schoolsLayer = L.geoJson(selectedCrimes, { onEachFeature: function (feature, layer) { const school = feature.properties; // const html = `` // layer.bindPopup(html); layer.bindTooltip(`${school.incident}, ${school.Occur_date}`, {sticky: true}); } }); markers.addLayer(schoolsLayer); map.addLayer(markers); }

${school.name}