LeafletPlot = { const legendWidth = 50, height = 640, admMaps = [admMap1, admMap2], dataMaps = [dataMap1, dataMap2], mapContainer1 = html`

`, mapContainer2 = html`

`, legendContainer1 = html``, legendContainer2 = html``, container = html`

${ leafletDisplayBy === "max" ? "Maximum recorded values" : d3.timeFormat("%B %-d, %Y")(new Date(leafletTimestep)) }

${ mapContainer1 } ${ legendContainer1 }

${ mapContainer2 } ${ legendContainer2 }

`; yield container; /* ---------------- */ const [map1, map2] = [mapContainer1, mapContainer2].map((el, i) => { const geojson = { bgd1: L.geoJSON(geojsonBGD1, { color: "#000", fillOpacity: 0, opacity: 0.5, weight: 1 }), bgd2: L.geoJSON(geojsonBGD2, { color: "#fff", opacity: 0.0, weight: 0}), bgd3: L.geoJSON(geojsonBGD3, { color: "#fff", opacity: 0.0, weight: 0}) }, map = L.map(el, ({ layers: [ geojson[`bgd${ admMaps[i] }`], geojson.bgd1 ], // dragging: false, // for scrolling on mobile devices scrollWheelZoom: false // for scrolling on computer browsers })).fitBounds(geojson.bgd1.getBounds()); L.tileLayer('https://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}{r}.png').addTo(map); geojson[`bgd${ admMaps[i] }`].eachLayer(layer => { const { NAME_1, NAME_2, NAME_3 } = layer.feature.properties, dataChartsFilter = dataCharts.filter( el => admMaps[i] === "3" ? el.level === 3 && el.name1 === NAME_1 && el.name2 === NAME_2 && el.name3 === NAME_3 : admMaps[i] === "2" ? el.level === 2 && el.name1 === NAME_1 && el.name2 === NAME_2 : admMaps[i] === "1" ? el.level === 1 && el.name1 === NAME_1 : el.level === 0 ); if(leafletDisplayBy === "max") { const value = d3.max(dataChartsFilter, d => d[dataMaps[i]]), row = dataCharts.find(el => el[dataMaps[i]] === value), timestep = row ? row.timestep : null; layer.setStyle({ fillColor: leafletColorScale[dataMaps[i] === "moth" ? "moth" : "infestation"](value), fillOpacity: dataChartsFilter.length > 0 ? 0.85 : 0 }); // if(dataChartsFilter.length > 0) layer.bindTooltip( // `

${ timestep ? d3.timeFormat("%-m/%-d")(timestep) : "" }: ${ value ?? '' }

`, // { permanent: true, direction: "center", className: "feature-tooltip" } // ).openTooltip(); } else { const selectedTimestepFormatted = d3.timeFormat("%Y%m%d")(new Date(leafletTimestep)), row = dataChartsFilter.find( el => d3.timeFormat("%Y%m%d")(el.timestep) === selectedTimestepFormatted ), value = row ? row[dataMaps[i]] : null; layer.setStyle({ fillColor: value || value == 0 ? leafletColorScale[dataMaps[i] === "moth" ? "moth" : "infestation"](value) : "#969696", fillOpacity: dataChartsFilter.length > 0 ? 0.85 : 0 }); // if(dataChartsFilter.length > 0 && (value || value == 0)) layer.bindTooltip( // `

${ value }

`, // { permanent: true, direction: "center", className: "feature-tooltip" } // ).openTooltip(); } }); return { map, geojson } }); /* ---------------- */ const padding = 0, legendContainers = [legendContainer1, legendContainer2]; legendContainers.forEach((svg, index) => { const defs = d3.select(svg).append("defs"), linearGradient = defs .append("linearGradient") .attr("id", `spectral-${ index + 1 }`) .attr("x1", "0%") .attr("y1", "0%") .attr("x2", "0%") .attr("y2", "100%"), defsStops = linearGradient .selectAll("stop") .data( leafletColorScale[dataMaps[index] === "moth" ? "moth" : "infestation"] .ticks() .map((el, i, arr) => ({ offset: `${ 100 * (i) / (arr.length - 1) }%`, color: leafletColorScale[dataMaps[index] === "moth" ? "moth" : "infestation"](el) })) ) .enter() .append("stop") .attr("offset", d => d.offset) .attr("stop-color", d => d.color), legendScale = d3.scaleLinear() .range([height - padding, padding]) .domain(leafletColorDomain[dataMaps[index] === "moth" ? "moth" : "infestation"]); d3.select(svg).append("g") .attr("transform", `translate(${ legendWidth - 25 }, ${ 0 })`) .call(d3.axisRight(legendScale).tickSizeOuter(0)); d3.select(svg).append("g") .append("rect") .attr("stroke", "black") .attr("stroke-width", 2) .attr("height", height - padding * 2) .attr("width", legendWidth - 27) .attr("transform", `translate(${ 2 }, ${ padding })`) .attr("fill", `url(#spectral-${ index + 1 })`); }); /* ---------------- */ /* const svg = d3.select(container) .select("#time-bars") .attr("width", width) .attr("height", 28), gTimeSteps = svg.append("g"), gTimeStepLabels = svg.append("g") .attr("transform", `translate(0, 24)`), xScale = d3.scaleBand() .domain(timesteps) .range([0, width]) .paddingInner(0.05), textTimeSteps = gTimeStepLabels .selectAll("text") .data(timesteps) .enter() .append("text") .attr("x", d => xScale(d) + xScale.bandwidth() / 2) .attr("font-size", 11) .attr("text-anchor", "middle") .text(d => d3.timeFormat("%b %-d")(d)), rectTimeSteps = gTimeSteps .selectAll("rect") .data(timesteps) .enter() .append("rect") .attr("x", (d, i) => xScale(d)) .attr("width", xScale.bandwidth()) .attr("y", 0) .attr("height", 12) .attr("fill", "#f0f0f0") .attr("cursor", "pointer") .on("mouseover", function(e, d) { d3.select(this).attr("fill", "#bdd7e7"); map1.geojson.bgd2.eachLayer(function(layer) { const { NAME_1, NAME_2, NAME_3 } = layer.feature.properties, dataChartsFilter = dataCharts.filter( el => admMaps[0] === "3" ? el.level === 3 && el.name1 === NAME_1 && el.name2 === NAME_2 && el.name3 === NAME_3 : admMaps[0] === "2" ? el.level === 2 && el.name1 === NAME_1 && el.name2 === NAME_2 : admMaps[0] === "1" ? el.level === 1 && el.name1 === NAME_1 : el.level === 0 ), dRow = dataChartsFilter.find( el => d3.timeFormat("%Y%m%d")(el.timestep) === d3.timeFormat("%Y%m%d")(d) ), value = dRow ? dRow[dataMaps[0]] : null; layer.setStyle({ fill: value ? colorScale[dataMaps[0] === "moth" ? "moth" : "infestation"](value) : "#969696", fillOpacity: dataChartsFilter.length > 0 ? 0.85 : 0 }); }); // [map1, map2].forEach((map, i) => { // [map.geojson.bgd2, map.geojson.bgd3].forEach(bgd => { // bgd.eachLayer(function(layer) { // const // { NAME_1, NAME_2, NAME_3 } = layer.feature.properties, // dataChartsFilter = dataCharts.filter( // el => admMaps[i] === "3" // ? el.level === 3 && el.name1 === NAME_1 && el.name2 === NAME_2 && el.name3 === NAME_3 // : admMaps[i] === "2" // ? el.level === 2 && el.name1 === NAME_1 && el.name2 === NAME_2 // : admMaps[i] === "1" // ? el.level === 1 && el.name1 === NAME_1 // : el.level === 0 // ), // dRow = dataChartsFilter.find( // el => d3.timeFormat("%Y%m%d")(el.timestep) === d3.timeFormat("%Y%m%d")(d) // ), // value = dRow ? dRow[dataMaps[i]] : null; // layer.setStyle({ // fill: value ? colorScale[dataMaps[i] === "moth" ? "moth" : "infestation"](value) : "#969696", // fillOpacity: dataChartsFilter.length > 0 ? 0.85 : 0 // }); // }); // }); // }); }) .on("mouseout", function(e, d) { d3.select(this).attr("fill", "#f0f0f0"); }); */ return container }

Purpose-built for displays of data