viewof map = { let c = d3.create("div") .style("width", `${450}px`) .style("height", `${450}px`) .style("border-radius", "10px") yield c.node() c.node().value = data[0] let map = L.map(c.node(), {attributionControl: false, zoomControl: false}); let osmLayer = L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}@2x.png', { attribution: '© OpenStreetMap contributors' }).addTo(map); let beats_layer = L.geoJson(beats, { weight: 1, color: 'blue', fillOpacity: 0, opacity: .75, lineCap: 'square', })//.addTo(map); let city_layer = L.geoJson(city, { weight: 1, color: '#aaaaaa', fillOpacity: 0, opacity: .75, lineCap: 'square', }).addTo(map); let case_layer = L.geoJson(data.map(d => turf.point(d.coords, d) ), { onEachFeature: popupaction, pointToLayer: function(feature, latlng) { return L.circleMarker(latlng, markerstyle) } }).addTo(map); let heat_layer = heatLayer(heat_data, heat_params).addTo(map) var overlays = { "Heatmap": heat_layer, "Beats":beats_layer, "Cases": case_layer, }; L.control.layers({},overlays).addTo(map); //park.bindPopup("Washington/Jefferson Park"); map.fitBounds(city_layer.getBounds()); function popupaction(feature, layer) { if (feature.properties) { layer.bindPopup(` CASE: ${feature.properties.case_id}
INCI: CAD-${feature.properties.cad_id}
ADDR: ${feature.properties.addr}
DATE: ${feature.properties.dt.occur.split("T")[0]}
TIME: ${feature.properties.dt.occur.split("T")[1]}
BEAT: ${feature.properties.beat}
SITE: ${feature.properties.site}
` ) layer.on('mouseover', function (e) { c.node().value = this.feature.properties c.node().dispatchEvent(new CustomEvent("input")) }); layer.on('mouseout', function (e) { }); } } }