Loading map data…
Super generates helpful tools and automates fact-checking across the internet proactively. If you enjoyed this tool, build your own with Super and share it with a friend.
`; const blob = new Blob([html], { type: 'text/html' }); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = `${props.NAME}_County_Flood_Preparedness.html`; document.body.appendChild(a); a.click(); document.body.removeChild(a); URL.revokeObjectURL(url); // Also open print dialog for PDF setTimeout(() => { const printWindow = window.open(url, '_blank'); if (printWindow) { printWindow.onload = () => printWindow.print(); } }, 100); } // ============================================================ // POPUPS FOR HISTORICAL EVENTS & GAUGES // ============================================================ function showHistoricalPopup(props, lngLat) { const popup = new maplibregl.Popup({ closeButton: true, closeOnClick: true }) .setLngLat(lngLat) .setHTML(`
${props.county} County
Date: ${props.date}
Event: ${props.event}
Fatalities: ${props.fatalities}
${props.source}
`) .addTo(map); } function showGaugePopup(props, lngLat) { const popup = new maplibregl.Popup({ closeButton: true, closeOnClick: true }) .setLngLat(lngLat) .setHTML(`
${props.name}
Station ID: ${props.id}
River: ${props.river}
County: ${props.county}
USGS NWIS
`) .addTo(map); } // ============================================================ // LAYER TOGGLES // ============================================================ function setupLayerToggles() { $$('.layer-btn').forEach(btn => { btn.addEventListener('click', () => { const layer = btn.dataset.layer; const isActive = btn.classList.toggle('active'); btn.setAttribute('aria-pressed', isActive); if (layer === 'historical') { historicalLayerVisible = isActive; const vis = isActive ? 'visible' : 'none'; if (map.getLayer('historical-floods-layer')) { map.setLayoutProperty('historical-floods-layer', 'visibility', vis); map.setLayoutProperty('historical-floods-label', 'visibility', vis); } } else if (layer === 'gauges') { gaugesLayerVisible = isActive; const vis = isActive ? 'visible' : 'none'; if (map.getLayer('usgs-gauges-layer')) { map.setLayoutProperty('usgs-gauges-layer', 'visibility', vis); map.setLayoutProperty('usgs-gauges-label', 'visibility', vis); } } }); }); } // ============================================================ // EVENT LISTENERS // ============================================================ function setupEventListeners() { $('#resetBtn').addEventListener('click', clearSelection); $('#panelClose').addEventListener('click', clearSelection); $('#mobileSheetClose').addEventListener('click', clearSelection); $('#generateChecklistBtn').addEventListener('click', generateChecklist); $('#mobileGenerateChecklistBtn').addEventListener('click', generateChecklist); $('#exportBtn').addEventListener('click', exportChecklist); $('#mobileExportBtn').addEventListener('click', exportChecklist); $('#retryBtn').addEventListener('click', () => { showLoading(true); initMap(); }); // Close mobile sheet on backdrop click (outside content) $('#mobileSheet').addEventListener('click', (e) => { if (e.target === $('#mobileSheet')) { clearSelection(); } }); // Keyboard: Escape to close document.addEventListener('keydown', (e) => { if (e.key === 'Escape' && selectedCounty) { clearSelection(); } }); } // ============================================================ // INITIALIZATION // ============================================================ document.addEventListener('DOMContentLoaded', () => { setupEventListeners(); setupLayerToggles(); initMap(); }); // Expose for debugging window.__INDIANA_FLOOD_TOOL__ = { map: () => map, selectCounty: (name) => { const feature = COUNTIES_GEOJSON.features.find(f => f.properties.NAME === name); if (feature) selectCounty(feature.properties); }, getSelected: () => selectedCounty };