map = { const container = yield htl.html`

`; const map = L.map(container).setView([37.774, -122.423], 5); L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", { attribution: "© OpenStreetMap contributors" }).addTo(map); const sortedData= data.map(f => f.properties.lbs_chem_used).sort((a,b)=>a-b) let quintiles = [.8, .6, .4, .2].map(n => d3.quantile(sortedData, n)) function getColor(d) { return d > quintiles[0] ? '#b30000' : d > quintiles[1] ? '#e34a33' : d > quintiles[2] ? '#fc8d59' : d > quintiles[3] ? '#fdcc8a' : '#fef0d9'; } function style(feature) { return { fillColor: getColor(feature.properties.lbs_chem_used), weight: 1, opacity: 1, color: 'white', dashArray: '3', fillOpacity: 0.7 }; } var geojson = L.geoJSON(data, { style }).addTo(map).addData(data) var legend = L.control({position: 'bottomright'}); const handleClick = (e) => { const tooltip = document.querySelector('.tooltip') const props = e.sourceTarget.feature.properties geojson.eachLayer((layer) => { if (layer.feature.properties.NAME == props.NAME) { layer.setStyle({ color: 'black', weight: 2 }); // set the style of the clicked feature } else { layer.setStyle({ color: 'white', weight: 1 }); // set the style of all other features } }) tooltip.innerHTML = ` ${Object.entries(props).map(f => f[0] == 'geometry' ? `` : ``)}

${f[0]}

${f[1]}

` } geojson.on('click', e => handleClick(e)) legend.onAdd = function (map) { var div = L.DomUtil.create('div', 'info legend'), grades = [...quintiles, 0], labels = []; div.innerHTML += `Pounds used of
Active Ingredients Chem
AI Type: ${PESTICIDE_TYPE}
` // loop through our density intervals and generate a label with a colored square for each interval for (var i = 0; i < grades.length; i++) { div.innerHTML += '' + `Quintile ${5-i}
` } return div; }; var tooltip = L.control({position: 'topright'}); tooltip.onAdd = function (map) { var div = L.DomUtil.create('div', 'info legend tooltip') return div; }; legend.addTo(map); tooltip.addTo(map); }