Weather Alerts Interactive Map

A real-time interactive map displaying active weather alerts and natural hazards from the National Weather Service (NWS) and NASA EONET data sources.

Features

• Real-time Alerts: Fetches active weather alerts from NWS/API and NASA EONET natural disasters
• Interactive Map: Leaflet-based map with multiple base layers (Default, Satellite, Topographic)
• Alert Clustering: Smart marker clustering that groups nearby alerts by type
• Severity Coloring: Visual indicators for alert severity (Extreme, Severe, Moderate, Minor)
• Icon Classification: Different icons for different hazard types (floods, storms, wildfires, earthquakes, etc.)
• Alert Details: Click markers for full alert information including event type, severity, urgency, and affected areas
• Glossary: Built-in searchable glossary of weather terms and disaster-related vocabulary
• Geolocation: Auto-centers map based on user location and nearest alerts
• Keyboard Shortcuts:
  • Shift+Ctrl+A (or Shift+Cmd+A on Mac): Show all alerts
  • Shift+Ctrl+H (or Shift+Cmd+H on Mac): Hide all alerts
  • Escape: Close alert popups

Data Sources

• NWS (National Weather Service): Active weather alerts with detailed geographic zones
• NASA EONET (Earth Observation Natural Event Tracking): Natural disaster events including volcanic eruptions, earthquakes, floods, wildfires, etc. (UNOPERATIONAL AT THE MOMENT)

Alert Categories

• Flooding & Water Hazards
• Severe Storms & High Winds
• Winter Weather & Snow
• Wildfires & Fire Danger
• Air Quality & Visibility
• Marine & Coastal Hazards
• Geological Hazards (Earthquakes, Avalanches, Volcanoes)
• Temperature Extremes
• And more...

Installation

1. Open index.html in a web browser
2. Map loads with real-time data from NWS and NASA APIs automatically

No server or build process required - runs entirely in the browser.

File Structure

weather-alerts/
├── index.html                 # Main HTML page with map container and UI
├── script.js                  # Core application logic
├── style.css                  # Styling and layout
├── leaflet.markercluster.js  # Marker clustering library
├── MarkerCluster.css         # Clustering styles
├── MarkerCluster.Default.css # Clustering theme
├── configs/
│   ├── alertTypes.js        # Predefined NWS alert types
│   ├── eonetCategories.js   # NASA EONET event categories
│   └── glossary.json        # Weather and disaster terminology
└── icons/                    # SVG icons for different alert types

How It Works

1. Initialization: Loads Leaflet and marker clustering libraries
2. Data Fetching:
   • Fetches NWS alerts from api.weather.gov/alerts/active
   • Fetches NASA EONET events from NASA API
3. Data Processing:
   • Merges duplicate alerts with same event type and affected area
   • Categorizes alerts based on event type
   • Assigns appropriate icons and severity colors
4. Map Rendering:
   • Creates polygons for affected areas
   • Places markers at centroids of alert areas
   • Groups markers into clusters by type
5. User Interface:
   • Displays alert counter
   • Provides toggles to show/hide alert groups
   • Shows/hides all alerts buttons
   • Offers searchable glossary of terms

Browser Support

Works on all modern browsers that support:

• ES6 JavaScript modules
• Fetch API
• Geolocation API

Performance Notes

• Zone geometries are fetched in batches of 15 to prevent browser blocking
• Complex polygons with >100 points are simplified for rendering performance
• Zone data is cached to avoid duplicate fetches
• Clustering disabled at zoom level 15 for detailed views

API Limitations

• NWS API has no rate limits for public use
• NASA EONET API uses DEMO_KEY (limited requests; for production use own API key)
• Zone geometry fetches have 5-second timeout per request

Customization

• Modify alert category patterns in script.js to adjust alert grouping
• Add custom base layers by editing the baseLayers object in script.js
• Customize icon mappings in getIconForEvent() function
• Update glossary terms in configs/glossary.json

Troubleshooting

Map doesn't load: Check browser console for errors. Ensure libraries loaded (Leaflet, axios).

No alerts showing: APIs may be down or returning no data. Check network requests in browser DevTools.

Geolocation prompt: Browser will ask permission to access location. Allow to center map on your location.

Slow performance: Reduce zoom level or disable some alert categories to improve rendering.

License

This project uses:

• Leaflet (BSD 2-Clause License)
• Leaflet.markercluster (MIT License)
• OpenStreetMap data (ODbL)
• Esri satellite imagery
• MapTiler topographic maps

Credits

• National Weather Service for alert data
• NASA Earth Observation Natural Events Tracking for disaster data
• OpenStreetMap for map data
• Leaflet for interactive mapping functionality