in src/js/modules/choropleth.js [1247:1300]
function passThru(d, i, nodes) {
// Get the current event
const event = d3.event || window.event;
// Store the overlay data
var overlayData = d;
// Temporarily disable pointer events on this element
var prev = this.style.pointerEvents;
this.style.pointerEvents = 'none';
// Get the element below
var element = document.elementFromPoint(event.clientX, event.clientY);
// Restore pointer events immediately to prevent mouse event issues
this.style.pointerEvents = prev;
// If we found an element and it's a map area
if (element && element.classList.contains('mapArea')) {
// Remove highlight from all paths
d3.selectAll('.mapArea').classed('highlighted', false);
// Add highlight to current path
d3.select(element).classed('highlighted', true);
// Get the data from the underlying element
var baseData = d3.select(element).datum();
// Show combined tooltip
d3.select(".tooltip")
.style("visibility", "visible")
.select("#tooltip")
.html(() => {
// Combine data from both layers
let baseHtml = baseData.properties[self.database.currentKey] !== null ?
mustache(self.database.mapping[self.database.currentIndex].tooltip, {...utilities, ...baseData.properties}) :
"No data available";
let overlayHtml = overlayData.properties ?
mustache(self.database.mapping[self.database.currentIndex].overlayTooltip, {...utilities, ...overlayData.properties}) :
"";
return `${overlayHtml}<hr style="margin: 5px 0;">${baseHtml}`;
});
// Update tooltip position
updateTooltipPosition(event);
} else {
// If we're not over a map area, remove all highlights
d3.selectAll('.mapArea').classed('highlighted', false);
}
// Prevent event from continuing
event.stopPropagation();
}