`;
}
// Update the selected-county panel for the current selection state.
function updateCountyDetails(countyFips) {
if (!countyFips) {
stateDetails.innerHTML = `
Selected County
Click a county to inspect climate details.
Editable data file: data/climate-data.csv
County polygons loaded: ${countyStats.size}
Editable county records loaded: ${COUNTY_OVERRIDE_RECORD_COUNT}
`;
return;
}
const stats = countyStats.get(countyFips);
const meta = countyMeta.get(countyFips);
if (!stats || !meta) {
stateDetails.innerHTML = "
Selected County
No climate record found.
";
return;
}
stateDetails.innerHTML = buildCountyDetailsBody(meta, stats);
}
// Batch county redraws into one animation-frame callback.
function queueCountyLayerRedraw() {
if (!countiesLayer || redrawQueued) {
return;
}
redrawQueued = true;
window.requestAnimationFrame(() => {
redrawQueued = false;
countiesLayer.eachLayer((layer) => {
if (typeof layer.redraw === "function") {
layer.redraw();
}
});
});
}
// Remove the manually managed county hover tooltip.
function closeActiveCountyTooltip() {
if (activeCountyTooltip && map.hasLayer(activeCountyTooltip)) {
map.removeLayer(activeCountyTooltip);
}
activeCountyTooltip = null;
}
// Close both manual and Leaflet-bound county tooltips.
function closeCountyTooltips() {
closeActiveCountyTooltip();
if (!countiesLayer) {
return;
}
countiesLayer.eachLayer((layer) => {
if (typeof layer.closeTooltip === "function") {
layer.closeTooltip();
}
});
}
// Reset all county paths to their current data-driven style.
function resetCountyStyles() {
if (countiesLayer) {
countiesLayer.setStyle(styleForCounty);
}
}
// Remove keyboard focus from Leaflet map paths during drag interactions.
function blurFocusedMapFeature() {
const activeElement = document.activeElement;
if (!activeElement || activeElement === document.body) {
return;
}
const mapContainer = map.getContainer();
if (mapContainer.contains(activeElement) && activeElement.classList.contains("leaflet-interactive")) {
activeElement.blur();
}
}
// Move keyboard focus back to the selected county path.
function focusSelectedCountyLayer() {
if (!selectedCountyLayer || !selectedCountyFips || typeof selectedCountyLayer.getElement !== "function") {
return;
}
const selectedElement = selectedCountyLayer.getElement();
if (selectedElement && typeof selectedElement.focus === "function") {
selectedElement.focus({ preventScroll: true });
}
}
// Restore selected-county focus after map movement settles.
function restoreSelectedCountyFocus() {
blurFocusedMapFeature();
if (selectedCountyLayer && selectedCountyFips) {
window.setTimeout(focusSelectedCountyLayer, 0);
}
}
// Toggle the global county-tooltip suppression state during map gestures.
function setCountyTooltipSuppression(nextIsSuppressed) {
areCountyTooltipsSuppressed = nextIsSuppressed;
map.getContainer().classList.toggle("is-map-dragging", nextIsSuppressed);
if (nextIsSuppressed) {
blurFocusedMapFeature();
closeCountyTooltips();
resetCountyStyles();
}
}
// Start suppressing county hover UI when a pointer gesture begins.
function beginCountyTooltipSuppression() {
didMapDragGesture = false;
clearTooltipSuppressionOnNextMove = false;
setCountyTooltipSuppression(true);
}
// Mark the current pointer gesture as a map drag or zoom.
function markMapDragGesture() {
didMapDragGesture = true;
clearTooltipSuppressionOnNextMove = false;
setCountyTooltipSuppression(true);
}
// Finish a pointer gesture and decide when hover tooltips can return.
function finishCountyTooltipSuppressionGesture() {
closeCountyTooltips();
restoreSelectedCountyFocus();
if (didMapDragGesture) {
clearTooltipSuppressionOnNextMove = true;
return;
}
setCountyTooltipSuppression(false);
}
// Keep tooltips closed until the first mouse movement after a drag.
function closeSuppressedCountyTooltips() {
if (!areCountyTooltipsSuppressed) {
return;
}
closeCountyTooltips();
if (clearTooltipSuppressionOnNextMove) {
clearTooltipSuppressionOnNextMove = false;
didMapDragGesture = false;
window.setTimeout(() => setCountyTooltipSuppression(false), 0);
}
}
// Show the simple county hover tooltip when hover UI is allowed.
function openCountyTooltip(layer, label, countyFips) {
if (areCountyTooltipsSuppressed || selectedCountyFips === countyFips) {
closeActiveCountyTooltip();
return;
}
const bounds = layer.getBounds?.();
if (!bounds || !bounds.isValid()) {
return;
}
if (!activeCountyTooltip) {
activeCountyTooltip = L.tooltip({
direction: "top",
opacity: 0.95,
permanent: false,
interactive: false
});
}
activeCountyTooltip
.setLatLng(bounds.getCenter())
.setContent(label)
.addTo(map);
}
// Refresh county styles, legend text, detail text, and range labels together.
function restyleAllCounties() {
if (countiesLayer) {
countiesLayer.setStyle(styleForCounty);
queueCountyLayerRedraw();
}
updateLegend();
updateCountyDetails(selectedCountyFips);
updateRangeLabels();
}
// Update the visible min and max labels below the range sliders.
function updateRangeLabels() {
if (isCurrentMetricCategorical()) {
minValue.textContent = "";
maxValue.textContent = "";
return;
}
const { min, max } = clampRanges();
minValue.textContent = formatMetricValue(currentMetricKey, min);
maxValue.textContent = formatMetricValue(currentMetricKey, max);
}
// Zoom the map to a county without animation.
function focusCounty(layer) {
map.stop();
map.fitBounds(layer.getBounds(), {
padding: [24, 24],
maxZoom: STATE_FOCUS_MAX_ZOOM,
animate: false
});
queueCountyLayerRedraw();
}
// Open the selected-county popup with the current metric summary.
function openCountyPopup(layer, countyFips) {
const stats = countyStats.get(countyFips);
const meta = countyMeta.get(countyFips);
if (!stats || !meta) {
return;
}
layer
.bindPopup(
`${meta.displayName} ${METRICS[currentMetricKey].label}: ${formatMetricValue(
currentMetricKey,
stats[currentMetricKey]
)}`,
{ autoPan: false }
)
.openPopup();
}
// Attach hover and click behavior to one county layer.
function wireCountyInteractions(feature, layer) {
const countyFips = normalizeFips(feature.id, 5);
const meta = countyMeta.get(countyFips);
const tooltipLabel = meta ? meta.displayName : countyFips;
layer.on("mouseover", () => {
if (areCountyTooltipsSuppressed) {
closeActiveCountyTooltip();
return;
}
openCountyTooltip(layer, tooltipLabel, countyFips);
});
layer.on("mouseout", () => {
closeActiveCountyTooltip();
});
layer.on("click", (event) => {
if (event.originalEvent?.detail > 1) {
return;
}
if (event.originalEvent) {
L.DomEvent.stopPropagation(event.originalEvent);
}
const wasAlreadySelected = selectedCountyFips === countyFips;
const shouldAutoFocus = map.getZoom() <= STATE_FOCUS_MAX_ZOOM;
selectedCountyFips = countyFips;
selectedCountyLayer = layer;
closeActiveCountyTooltip();
if (!wasAlreadySelected && shouldAutoFocus) {
focusCounty(layer);
}
updateCountyDetails(countyFips);
restyleAllCounties();
restoreSelectedCountyFocus();
openCountyPopup(layer, countyFips);
});
}
// Populate the group select element from the configured metric groups.
function configureMetricGroupControl() {
const groupOptions = METRIC_GROUPS.map((group) => ``).join("");
metricGroupSelect.innerHTML = groupOptions;
metricGroupSelect.value = currentMetricGroupKey;
}
// Populate the metric select element from the active group.
function configureMetricControl() {
const group = getCurrentMetricGroup();
const metricKeys = group?.metricKeys || [];
if (!metricKeys.includes(currentMetricKey)) {
currentMetricKey = metricKeys[0] || DATA_METRIC_KEYS[0];
}
metricSelectWrap.classList.toggle("is-hidden", metricKeys.length <= 1);
metricSelect.innerHTML = metricKeys
.map((metricKey) => ``)
.join("");
metricSelect.value = currentMetricKey;
}
// Read a persisted panel state, falling back when storage is blocked or absent.
function readStoredPanelState(storageKey, defaultExpanded) {
try {
const storedValue = window.localStorage.getItem(storageKey);
if (storedValue === "true") {
return true;
}
if (storedValue === "false") {
return false;
}
} catch (error) {
return defaultExpanded;
}
return defaultExpanded;
}
// Persist a panel state when localStorage is available.
function writeStoredPanelState(storageKey, isExpanded) {
try {
window.localStorage.setItem(storageKey, String(isExpanded));
} catch (error) {
// Some privacy modes block localStorage; the panel still works for this session.
}
}
// Apply collapsed or expanded state to a map overlay panel.
function setCollapsiblePanelState(panel, toggle, isExpanded, expandedLabel, collapsedLabel) {
panel.classList.toggle("is-collapsed", !isExpanded);
toggle.setAttribute("aria-expanded", String(isExpanded));
toggle.textContent = isExpanded ? expandedLabel : collapsedLabel;
}
// Wire one collapsible map overlay panel and remember its state.
function configureCollapsiblePanel(panel, toggle, options) {
if (!panel || !toggle) {
return;
}
const initialExpanded = readStoredPanelState(options.storageKey, options.defaultExpanded);
setCollapsiblePanelState(panel, toggle, initialExpanded, options.expandedLabel, options.collapsedLabel);
L.DomEvent.disableClickPropagation(panel);
L.DomEvent.disableScrollPropagation(panel);
toggle.addEventListener("click", () => {
const nextExpanded = panel.classList.contains("is-collapsed");
setCollapsiblePanelState(panel, toggle, nextExpanded, options.expandedLabel, options.collapsedLabel);
writeStoredPanelState(options.storageKey, nextExpanded);
});
}
// Configure the county metrics and legend overlay panels.
function configureMapOverlayPanels() {
configureCollapsiblePanel(metricInfoPanel, metricInfoToggle, {
storageKey: PANEL_STATE_STORAGE_KEYS.metricInfo,
defaultExpanded: true,
expandedLabel: "Hide County Metrics",
collapsedLabel: "Show County Metrics"
});
configureCollapsiblePanel(legendInfoPanel, legendInfoToggle, {
storageKey: PANEL_STATE_STORAGE_KEYS.legendInfo,
defaultExpanded: false,
expandedLabel: "Hide Legend",
collapsedLabel: "Show Legend"
});
}
// Populate the categorical filter from values present in the data.
function configureCategoricalFilterControl() {
if (!koppenFilterSelect) {
return;
}
const metric = getCurrentMetric();
const values = getUniqueCategoryValuesInData(currentMetricKey);
const options = [``];
values.forEach((value) => {
options.push(``);
});
koppenFilterSelect.innerHTML = options.join("");
if (!values.includes(currentCategoricalFilter)) {
currentCategoricalFilter = "all";
}
koppenFilterSelect.value = currentCategoricalFilter;
}
// Reset range sliders for the currently selected numeric metric.
function configureRangeControls() {
if (isCurrentMetricCategorical()) {
return;
}
const metric = getCurrentMetric();
configureRangeInput(minRange, metric, metric.min);
configureRangeInput(maxRange, metric, metric.max);
updateRangeLabels();
}
// Apply min, max, step, and value attributes to one range input.
function configureRangeInput(input, metric, value) {
input.min = String(metric.min);
input.max = String(metric.max);
input.step = String(metric.sliderStep ?? 1);
input.value = String(value);
}
// Show either numeric range controls or the categorical filter.
function updateFilterControlVisibility() {
const useCategorical = isCurrentMetricCategorical();
rangeWraps.forEach((wrap) => {
wrap.classList.toggle("is-hidden", useCategorical);
});
if (koppenFilterWrap) {
koppenFilterWrap.classList.toggle("is-hidden", !useCategorical);
}
const filterLabel = koppenFilterWrap?.querySelector("label");
if (filterLabel && useCategorical) {
filterLabel.textContent = `${getCurrentMetric().label} Filter`;
}
}
// Handle a metric dropdown change and rebuild the matching controls.
function onMetricChange() {
currentMetricKey = metricSelect.value;
currentMetricGroupKey = getMetricGroupKeyForMetric(currentMetricKey);
metricGroupSelect.value = currentMetricGroupKey;
configureMetricControl();
updateFilterControlsForMetricChange();
}
// Handle a group dropdown change and use its first metric when needed.
function onMetricGroupChange() {
currentMetricGroupKey = metricGroupSelect.value;
const group = getCurrentMetricGroup();
currentMetricKey = group.metricKeys[0] || DATA_METRIC_KEYS[0];
configureMetricControl();
updateFilterControlsForMetricChange();
}
// Rebuild filters and map styling after a group or metric selection changes.
function updateFilterControlsForMetricChange() {
updateFilterControlVisibility();
if (isCurrentMetricCategorical()) {
configureCategoricalFilterControl();
} else {
configureRangeControls();
}
restyleAllCounties();
}
// Clear county selection, focus styling, popup, and selected-county details.
function clearSelection() {
selectedCountyFips = null;
selectedCountyLayer = null;
blurFocusedMapFeature();
map.closePopup();
restyleAllCounties();
}
// Clear selection when the user clicks map background rather than a county.
function clearSelectionFromMapBackground(event) {
const target = event.originalEvent?.target;
const clickedInteractiveLayer = typeof target?.closest === "function" && target.closest(".leaflet-interactive");
if (clickedInteractiveLayer) {
return;
}
if (!selectedCountyFips) {
blurFocusedMapFeature();
return;
}
clearSelection();
}
// Prevent attribution-control clicks from affecting map selection or zoom behavior.
function guardAttributionControlInteraction() {
const mapContainer = map.getContainer();
const attributionControl = mapContainer.querySelector(".leaflet-control-attribution");
if (!attributionControl || attributionControl.dataset.interactionGuarded === "true") {
return;
}
attributionControl.dataset.interactionGuarded = "true";
L.DomEvent.disableClickPropagation(attributionControl);
L.DomEvent.on(attributionControl, "dblclick", L.DomEvent.stopPropagation);
L.DomEvent.on(attributionControl, "mousedown", L.DomEvent.stopPropagation);
L.DomEvent.on(attributionControl, "mouseup", L.DomEvent.stopPropagation);
}
// Replace the active basemap with the requested tile provider.
function setBaseLayer(providerKey) {
if (baseLayer) {
map.removeLayer(baseLayer);
}
const provider = TILE_PROVIDERS[providerKey];
baseLayer = L.tileLayer(provider.url, provider.options).addTo(map);
window.requestAnimationFrame(guardAttributionControlInteraction);
return baseLayer;
}
// Add a one-time basemap status message to the details panel.
function addBasemapNotice(text) {
if (document.getElementById("basemapNotice")) {
return;
}
const notice = document.createElement("p");
notice.id = "basemapNotice";
notice.textContent = text;
stateDetails.appendChild(notice);
}
// Choose the initial basemap and fallback behavior for blocked tile requests.
function configureBaseLayer() {
const openedFromFile = window.location.protocol === "file:";
if (openedFromFile) {
setBaseLayer("esriWorldStreetMap");
addBasemapNotice("Opened from file://. Using a basemap that works without a Referer header.");
return;
}
const osmLayer = setBaseLayer("openStreetMap");
let tileErrors = 0;
let switchedToFallback = false;
osmLayer.on("tileerror", () => {
tileErrors += 1;
if (switchedToFallback || tileErrors < 3) {
return;
}
switchedToFallback = true;
setBaseLayer("esriWorldStreetMap");
addBasemapNotice("OpenStreetMap tiles were blocked here. Basemap switched automatically.");
});
}
// Load county GeoJSON and build the Leaflet county layer.
async function loadCounties() {
try {
const response = await fetch(US_COUNTIES_GEOJSON_URL);
if (!response.ok) {
throw new Error(`Failed to load counties: HTTP ${response.status}`);
}
const geojson = await response.json();
geojson.features = geojson.features.filter(prepareCountyFeature);
applyNumericMetricBoundsFromData();
configureCategoricalFilterControl();
configureRangeControls();
updateFilterControlVisibility();
countiesLayer = L.geoJSON(geojson, {
style: styleForCounty,
onEachFeature: wireCountyInteractions
}).addTo(map);
restyleAllCounties();
} catch (error) {
renderLoadError(error);
}
}
// Render a load error without injecting dynamic text as HTML.
function renderLoadError(error) {
const message = error instanceof Error ? error.message : "Unable to load county data.";
stateDetails.innerHTML = "
Load Error
";
const details = document.createElement("p");
details.textContent = message;
stateDetails.appendChild(details);
}
// Normalize and register a county feature before it is added to the map.
function prepareCountyFeature(feature) {
const meta = buildCountyMeta(feature);
if (!meta.countyFips || meta.stateFips === "72") {
return false;
}
feature.id = meta.countyFips;
normalizeAntimeridianFeature(feature);
countyMeta.set(meta.countyFips, meta);
countyStats.set(meta.countyFips, buildStatsForCounty(meta));
return true;
}
// Clear selection and return to the default national map view.
function resetMapView() {
clearSelection();
map.stop();
map.flyTo(DEFAULT_COUNTRY_VIEW.center, DEFAULT_COUNTRY_VIEW.zoom, {
duration: 0.75
});
}
// Attach DOM event listeners for controls outside the Leaflet map.
function configureDomEventListeners() {
metricGroupSelect.addEventListener("change", onMetricGroupChange);
metricSelect.addEventListener("change", onMetricChange);
minRange.addEventListener("input", restyleAllCounties);
maxRange.addEventListener("input", restyleAllCounties);
resetViewButton.addEventListener("click", resetMapView);
clearSelectionButton.addEventListener("click", clearSelection);
koppenFilterSelect?.addEventListener("change", () => {
currentCategoricalFilter = koppenFilterSelect.value;
restyleAllCounties();
});
}
// Attach Leaflet map event listeners for redraws, clicks, drags, and tooltips.
function configureMapEventListeners() {
map.whenReady(guardAttributionControlInteraction);
map.on("moveend zoomend popupclose", queueCountyLayerRedraw);
map.on("click", (event) => {
clearSelectionFromMapBackground(event);
queueCountyLayerRedraw();
});
map.on("mousedown touchstart", beginCountyTooltipSuppression);
map.on("dragstart zoomstart", markMapDragGesture);
map.on("drag", () => {
blurFocusedMapFeature();
closeSuppressedCountyTooltips();
});
map.on("mousemove touchmove", closeSuppressedCountyTooltips);
map.on("mouseup touchend dragend zoomend", finishCountyTooltipSuppressionGesture);
}
// Configure controls, map behavior, base layers, and county data loading.
async function initializeApp() {
configureMetricGroupControl();
configureMetricControl();
configureMapOverlayPanels();
configureSourcesModal();
updateFilterControlVisibility();
configureBaseLayer();
configureDomEventListeners();
configureMapEventListeners();
try {
await loadClimateData();
} catch (error) {
renderLoadError(error);
return;
}
loadCounties();
}
initializeApp();