π Live at: MebaneWeather.com - Your trusted source for Mebane, NC weather monitoring!
MebaneWeather.com features a sophisticated, real-time severe weather monitoring dashboard specifically designed for Mebane, North Carolina (Alamance County). This dashboard integrates official NOAA Storm Prediction Center (SPC) threat assessments with National Weather Service (NWS) alerts and forecast discussions to provide residents with accurate, up-to-date severe weather information.
| Feature | Description | Status |
|---|---|---|
| β‘ SPC Threat Integration | Real-time Storm Prediction Center risk levels | β Active |
| π― Location-Specific | Precision targeting for Mebane, NC (36.096Β°N, -79.267Β°W) | β Active |
| π± Mobile Responsive | Optimized for all device sizes | β Active |
| π Auto-Refresh | Updates every 15 minutes with 3-minute alert polling | β Active |
| π±οΈ Interactive Panels | Clickable sections linking to official sources | β Active |
| π Intelligent AFD Summarization | Extracts key severe weather highlights from forecast discussions | β Active |
| βοΈ Winter Weather Detection | Detects winter weather alerts from NWS alerts API (advisories only from alerts, warnings from alerts or forecast discussion) | β Active |
| π Weebly Optimized | Self-contained HTML for easy Weebly integration | β Active |
December 2024 - Fixed winter weather advisory detection logic:
- Issue: Dashboard was showing "Monitor for Winter Conditions" based on forecast discussion text analysis even when no active winter weather advisories existed
- Fix: Modified detection logic so that advisories only come from actual NWS alerts API. Text detection from forecast discussions now only sets warning status, not advisory status
- Result: "Monitor for Winter Conditions" now only appears when there are active winter weather advisories from official NWS alerts
- π©οΈ MebaneWeather.com - Enhanced Severe Weather Dashboard
- π― Project Overview
- π Table of Contents
- π‘οΈ Smart Threat Assessment
- π§ Technical Architecture
- π Installation & Configuration
- π Troubleshooting
- π§ͺ Testing
- π Browser Compatibility
- π Code Documentation
- π€ Contributing
- π License & Project Info
- π¨ Emergency Weather Information
The dashboard uses a four-tier threat classification system with priority-based evaluation:
| Threat Level | Icon | Color | Description | Trigger |
|---|---|---|---|---|
| WARNING | π΄ Red | Active weather warnings in effect | Active NWS warnings (includes winter weather warnings) | |
| CAUTION | β‘ | π Orange | Elevated severe weather risk | SPC Enhanced/Moderate/High risk |
| MONITOR | βοΈ/β‘ | π‘ Yellow | Monitor conditions for development | Winter weather advisories, SPC Marginal/Slight risk |
| SAFE | β | π’ Green | No severe weather expected | No warnings, no SPC risk |
Priority: Warnings override all other indicators, followed by winter weather advisories (MONITOR), then elevated SPC risks (CAUTION), then lower risks (MONITOR).
Winter Weather: Detects winter weather alerts and conditions. "Winter Precipitation Imminent and/or Occurring" displays for active warnings. "Monitor for Winter Conditions" only displays when there are active winter weather advisories from the NWS alerts API (not from forecast discussion text analysis).
SPC Risk Categories: TSTM, MRGL, SLGT, ENH, MDT, HIGH - Maps official Storm Prediction Center outlook levels with intelligent forecast discussion summarization.
- SPC GIS MapServer - Storm threat polygons via point-in-polygon spatial analysis (Mebane coordinates)
- NWS Alerts API - Zone-specific alerts (NCZ023) with statewide fallback, filtered for warnings/watches/advisories (includes winter weather detection)
- NWS Forecast Discussion - AFD from NWS Raleigh (RAH) with intelligent text processing and summarization (includes winter weather keyword detection)
Dual-interval strategy:
- Full Refresh: Every 15 minutes - SPC risk, alerts, forecast discussion, threat level calculation
- Fast Alert Polling: Every 3 minutes - Immediate warning detection triggers threat update
- Visibility Refresh: Updates when browser tab regains focus after inactivity
Data Flow: Initialize β SPC Risk Check β Alert Processing (zone β statewide fallback) β Threat Calculation β AFD Processing β UI Update
- Log into Weebly Editor β Drag "Embed Code" element to page
- Copy entire code from
Severe-Weather-Dashboard.html - Paste into Custom HTML box β Click "Update" β Publish
Other Platforms: WordPress (HTML widget), Squarespace (Code block), Wix (HTML iframe), Static HTML (direct include), GitHub Pages (reference in page)
To customize the dashboard for a different location, modify the LOCATION_CONFIG object in the JavaScript section:
-
Open
Severe-Weather-Dashboard.htmland find theLOCATION_CONFIGsection (near the top of the JavaScript code) -
Update all values in the configuration object:
const LOCATION_CONFIG = {
coords: { lat: 36.096, lng: -79.267 }, // Your location coordinates
nwsZone: 'NCZ023', // Your NWS zone code
stateCode: 'NC', // Your state code
nwsOffice: 'RAH', // Your NWS office identifier
locationName: 'Mebane, NC' // Display name
};Finding Your Location Values:
- Coordinates (lat/lng): Use Google Maps - right-click your location β coordinates
- NWS Zone Code: Visit forecast.weather.gov β click your location β check the URL for
zoneid=(format: STATEZONENUMBER, e.g.,TXZ123,CAZ045) - State Code: Two-letter state abbreviation (e.g.,
TX,CA,FL,NY) - NWS Office: Find your office at weather.gov/organization (e.g.,
OUNfor Norman, OK;SFOfor San Francisco, CA) - Location Name: Any display name you prefer
Example for Oklahoma City, OK:
const LOCATION_CONFIG = {
coords: { lat: 35.4676, lng: -97.5164 },
nwsZone: 'OKZ020',
stateCode: 'OK',
nwsOffice: 'OUN',
locationName: 'Oklahoma City, OK'
};Other Customizations:
- Update Intervals: Modify
updateInterval(default: 900000ms = 15min) and alert polling (default: 180000ms = 3min) - Visual Styling: Edit inline CSS - Backgrounds (
#1a1a1a,#2d2d2d,#373737), Accent colors (primary#4fc3f7, warning#f44336, etc.) - Advanced: Modify alert filtering in
updateLocalAlertsAndGetStatus()or AFD scoring inupdateForecastDiscussion()
| Issue | Solution |
|---|---|
| "SPC: Data temporarily unavailable" | Wait 15min auto-retry, check console - defaults to SAFE if unavailable. Dashboard continues functioning. |
| "Loading threat assessment..." persists | Check console (F12) for JS errors, verify code embedding, check browser compatibility |
| "Alert system temporarily unavailable" | Alert API failed - dashboard automatically falls back from zone to statewide alerts. Check network connection. |
| Not responsive on mobile | Code includes !important overrides - check responsive breakpoints if issues persist |
| Alerts not updating quickly | Alert polling is 3min - adjust 180000ms interval if needed (mind API rate limits) |
| "No significant weather" in AFD | Check console for fetch errors - uses API then HTML fallback. Scoring algorithm requires specific keywords. |
The dashboard includes robust error handling for all external APIs:
Timeout Protection: All API calls have configurable timeouts (8-10 seconds) to prevent hanging requests
Fallback Strategies:
- Alerts: Zone-specific β Statewide fallback if zone query fails
- Forecast Discussion: NWS API β HTML scrape fallback if API unavailable
- SPC Data: Graceful degradation - defaults to SAFE if unavailable
Response Validation: All API responses are validated before processing to prevent crashes from malformed data
Independent Error Handling: Each data source (SPC, alerts, AFD) has independent error handling - one failure doesn't block others
Network Error Detection: Specific handling for network failures vs API errors vs timeout errors
Debug Mode: Open Developer Tools (F12) β Console tab shows detailed error messages, API responses, and processing status
Verify Functionality: Check console for fetch requests to mapservices.weather.noaa.gov, api.weather.gov, forecast.weather.gov. Compare threat level with SPC outlook.
Quick Start:
./run-tests.sh # or: python3 run_tests.pyTest Coverage (34 tests): SPC Risk Mapping (7), Threat Level Calculation (7), Alert Processing (3), Winter Weather Detection (11), Error Handling (4)
Test Files: run_tests.py (Python, primary), run-tests.js (Node.js, optional), run-tests.sh (shell wrapper), test-dashboard.html (browser test suite)
Approach: Elegant, conservative, mock-based tests focusing on critical business logic. Fast execution (<1s) with colored terminal output. For visual verification, open test-dashboard.html in browser.
Supported: Chrome, Firefox, Safari (iOS 12+), Edge - Full desktop & mobile support
Not Supported: IE 11 (requires ES6+, Fetch API, CSS Grid, AbortController)
Comprehensive inline documentation in docstring style: File headers, JSDoc-style function docs, section comments, and inline explanations covering threat level hierarchy, alert filtering, AFD processing, polling intervals, and error handling.
Development: Fork β Clone β Make changes β Test thoroughly β Submit PR with detailed description
Guidelines: Maintain weather data accuracy, preserve responsive design, keep code lightweight, follow documentation style, include error handling, test on multiple browsers/devices.
Feature Requests: Open issue with clear description, use case, implementation suggestions, and impact assessment.
Bug Reports: Include browser/version, steps to reproduce, expected vs actual behavior, console errors, and screenshots.
License: MIT License - see LICENSE file for details
Project Stats: Created June 2025 β’ Last Updated December 2024 β’ Location: Mebane, NC (Alamance County, Zone NCZ023) β’ NWS Office: Raleigh, NC (RAH) β’ Maintainer: @StewAlexander-com
Acknowledgments: NOAA/National Weather Service, Storm Prediction Center, Weebly Platform
Live Site: MebaneWeather.com
In case of severe weather: Follow local authority instructions, seek immediate shelter if warnings issued, monitor multiple sources, have an emergency plan ready.
Built with β€οΈ for the Mebane, NC community