MebaneWeather.com is a self-contained severe weather dashboard and forecast widget designed for easy embedding (Weebly, WordPress, static HTML) with real-time SPC, NWS, and radar integration for Mebane, NC. You can also adapt it to any U.S. location with a few configuration changes.
Live at: MebaneWeather.com — Your trusted source for Mebane, NC weather monitoring.
MebaneWeather.com provides real-time weather and severe-weather monitoring for Mebane, NC (Alamance County). The repo includes three embeddable components:
| Component | File | Description |
|---|---|---|
| Severe Weather Dashboard | Severe-Weather-Dashboard.html |
SPC threat levels, NWS alerts, summarized NWS AFD, winter weather detection |
| Forecast Widget | MebaneWeather Forecast.css |
Current conditions (Open‑Meteo + NWS AFD), 7‑day forecast, NWS alerts, SPC Day 1; resilient with caching and retries; "From the NWS:" link to full AFD |
| Live Radar Map | LiveRadarMap.css |
RainViewer precipitation radar (past + nowcast) with Play/Pause and speed control; fullscreen on desktop and smartphones (CSS fallback on iOS); resilient with caching and a 7‑minute watchdog when the tab is visible |
All three are self-contained HTML for Weebly Embed Code (or any platform that accepts embedded HTML).
Preview: Screenshot of the live dashboard at MebaneWeather.com:
| Feature | Description | Status |
|---|---|---|
| SPC Threat Integration | Real-time Storm Prediction Center risk levels | Active |
| Location-Specific | Mebane, NC (36.096°N, -79.267°W); configurable for other locations | Active |
| Mobile Responsive | Optimized for all device sizes | Active |
| Auto-Refresh | Severe dashboard: 15‑minute refresh plus 3‑minute alert polling. Forecast: 4‑minute weather refresh, 3‑minute alerts/SPC; skips redundant fetches to reduce API load. | Active |
| Interactive Panels | Clickable sections linking to NWS/SPC sources | Active |
| AFD Summarization | Severe: bullet highlights. Forecast: one-sentence NWS AFD in Current Conditions with "From the NWS:" link | Active |
| Winter Weather Detection | Severe dashboard: NWS alerts + AFD text | Active |
| Weebly Optimized | Self-contained HTML for Embed Code | Active |
| Resilience (Forecast) | Exponential backoff with jitter, cache fallback, and offline handling. Per‑attempt timeouts grow over retries for more robust behavior. | Active |
| Audit Trail (Forecast) | Footer shows data sources; status bar distinguishes Live vs Cached (with age); includes links to verify at the original source. | Active |
| Live Radar (RainViewer) | Past + nowcast frames, latest on load; zoom/pan reloads tiles; fullscreen on desktop and smartphones (CSS fallback on iOS); 7‑minute watchdog when tab visible. | Active |
Live Radar Map (user-facing changes):
- Fullscreen: Timestamp in the top-right shows the exact time of the radar frame you’re viewing (desktop and mobile). Play/Pause and Latest buttons appear in fullscreen; Latest jumps back to the most current frame and keeps the map and time in sync.
- Zoom: RainViewer radar shows when zoomed out (zoom 4–7). When you zoom in (8+), the map switches to NWS radar. Zoom out again to see RainViewer.
- Data: RainViewer past + nowcast frames; NWS used as fallback if RainViewer is slow or at high zoom. 7‑minute refresh while the tab is visible.
- Play order: Both RainViewer and NWS loops play in chronological order (earliest cached → most current); timestamp stays in sync with the frame.
(Technical details: fullscreen API + CSS fallback on iOS, tile-error failover, watchdog, caching, and resilience are unchanged and documented in the file and RESILIENCE_AND_ACCURACY_ASSESSMENT.md when present.)
February 2025 – Forecast widget (MebaneWeather Forecast.css):
- Open‑Meteo + NWS alerts + SPC Day 1 outlook; cards link to NWS/SPC for verification.
- Current Conditions: Meteo line (temp, condition, feels like, wind) plus optional one-sentence NWS AFD summary; "From the NWS:" links to the full Area Forecast Discussion. Summary is trimmed for readability (no trailing "and", "to", "or", or lone adjectives).
- Caching and retries: exponential backoff with jitter for weather, NWS, SPC, and AFD; sessionStorage cache with per-source TTLs; offline detection and auto-refresh on reconnect. UI renders immediately and enhances when AFD is ready.
- Status bar: “Live” only when live; “Cached data” + “X min ago” when showing cache; no stale “Updated” when cached
- Single footer audit trail.
December 2024 – Severe dashboard: winter weather advisory logic fixed (advisories only from NWS alerts API).
- MebaneWeather.com - Enhanced Severe Weather Dashboard
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 order: Warnings first, then winter weather advisories (MONITOR), then higher SPC risks (CAUTION), then lower SPC risks (MONITOR).
Winter weather: Detects NWS winter alerts and conditions. "Winter Precipitation Imminent and/or Occurring" shows for active warnings; "Monitor for Winter Conditions" only appears when there is an active winter weather advisory from the NWS alerts API.
SPC Risk Categories: TSTM, MRGL, SLGT, ENH, MDT, HIGH — maps official Storm Prediction Center outlook levels with forecast discussion summarization.
API Integrations: SPC GIS MapServer (point-in-polygon); NWS Alerts API (zone NCZ023 + statewide fallback); NWS Forecast Discussion (RAH, AFD summarization).
Update cycle: Full refresh 15 min (updateInterval 900000); alert polling 3 min (180000); visibility refresh on tab focus.
Data flow: Initialize → SPC Risk Check → Alert Processing → Threat Calculation → AFD Processing → UI Update.
Data sources: Open-Meteo API (current + 7-day); NWS alerts by point (LAT,LON); SPC Day 1 outlook (GeoJSON, point-in-polygon); NWS AFD (Raleigh/RAH) for Current Conditions sentence.
Current Conditions card: Meteo line (temp, condition, feels like, wind); line break; optional "From the NWS:" (link to AFD) + one-sentence AFD summary (smaller font). Summary is trimmed so it never ends in "and", "to", "or", or lone adjectives. AFD is best-effort (cache 30 min, retries with exponential backoff); UI paints immediately, then enhances when AFD is ready.
Update cycle: Main weather 4 min (REFRESH 240000); NWS/SPC 3 min (ALERTS_REFRESH_MS 180000). No new fetch if one started in the last 1.5 min (weather: when cache exists; alerts: always). Visibility and online trigger refresh.
Resilience: sessionStorage cache (weather 2 h, NWS 10 min, SPC 30 min, AFD 30 min); retries with exponential backoff + jitter for weather, NWS, SPC, and AFD; per-attempt timeout growth (10s → 25s cap); offline skip + refresh on online; in-flight guard.
Data source: RainViewer public API (api.rainviewer.com/public/weather-maps.json) — past and nowcast precipitation frames.
- Core behavior: Displays the latest observation on load. Play/Pause, Previous/Next, and speed slider animate through RainViewer (past + nowcast) or, when NWS is active (zoom 8+, fallback, or tile-error), through NWS frames (last 2 hours at 10‑minute steps). On zoom or pan, tiles reload for the new view, and a preload warms initial RainViewer frames without affecting the displayed frame.
- Fullscreen & zoom: In fullscreen, a Play/Pause button appears above "Exit full screen" (stacked, left-aligned) so animation works without leaving fullscreen; layout avoids overlap and keeps Leaflet attribution visible. At zoom 8+ the map uses NWS only to avoid "Zoom level not supported"; RainViewer tile errors trigger automatic failover to NWS.
Update cycle: Full refresh every 10 min (REFRESH). When the tab is visible, a 7‑min watchdog runs a background fetch and updates the map only if the API has a newer latest frame; when the tab is hidden, the watchdog is cleared. Min 90 s between fetches when cache exists.
Resilience: sessionStorage cache (10 min TTL); fetch with AbortController timeout (10 s, up to 25 s on retries); 3 retries with exponential backoff + jitter; in-flight guard; offline → use cache or show message; Live vs “Cached (X min ago)” in timestamp; Retry button; online listener. NWS: frame-time cache (10 min) for play; WMS TIME animation with setParams/redraw; try/catch in NWS tick. RainViewer tile-error watch (2 errors in 2 s) → NWS failover; zoom/pan clears tile_error for retry. Play/animation: guards (map, frames or NWS frames), single timer, try/catch in showFrame and tick; only frames with valid path; preload skips removing the currently displayed layer.
Severe Weather Dashboard: Copy all of Severe-Weather-Dashboard.html into an Embed Code element → Publish.
Forecast Widget: Copy all of MebaneWeather Forecast.css into an Embed Code element → Publish. (File is HTML + CSS + JS; no .css build step.)
Live Radar Map: Copy all of LiveRadarMap.css into an Embed Code element → Publish. (File is HTML + CSS + JS; no build step. Requires Leaflet from unpkg in the embed.)
Other platforms: Use an HTML/embed block (WordPress, Squarespace, Wix, static HTML, GitHub Pages).
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: Use coords, nwsZone, stateCode, nwsOffice, locationName as in the example in the file.
-
Open
MebaneWeather Forecast.cssand find the script constants (near the top of the<script>block). -
Set coordinates and NWS/SPC values for your location:
Variable Meaning Example (Mebane) LATLatitude 36.0957LONLongitude -79.2670NWS_FORECAST_URLNWS point forecast (temp, 7-day, alerts) https://forecast.weather.gov/MapClick.php?lat=36.0957&lon=-79.2670SPC_OUTLOOK_URLSPC Day 1 convective outlook https://www.spc.noaa.gov/products/outlook/day1otlk.htmlNWS_OFFICENWS office for AFD and "From the NWS:" link 'RAH'(Raleigh) -
Build your NWS URL: visit
https://forecast.weather.gov/MapClick.php, click your location, then copy the URL containinglat=andlon=. -
Replace the footer links: in the static HTML footer, search for
lat=36.0957andlon=-79.2670and replace with your coordinates in both NWS href URLs. -
Save and paste the full file into your Embed Code element.
Alerts and SPC are fetched by point (LAT,LON). Set NWS_OFFICE so the AFD summary and "From the NWS:" link use your area's forecast discussion.
Other Customizations:
- Severe dashboard:
updateInterval= 900000 (15 min), alert polling = 180000 (3 min). Visual styling: inline CSS in the file (e.g.#1a1a1a,#4fc3f7). Advanced:updateLocalAlertsAndGetStatus(),updateForecastDiscussion(). - Forecast widget: In the script,
REFRESH= 240000 (4 min main weather),ALERTS_REFRESH_MS= 180000 (3 min NWS/SPC).MIN_WEATHER_INTERVAL_MS/MIN_ALERTS_INTERVAL_MS= 90000 (1.5 min) prevent starting a new fetch too soon after the last one to stay within API tolerance and reduce duplicate lookups. Timeouts:TIMEOUT= 10000,TIMEOUT_MAX_MS= 25000. Cache TTLs:CACHE_TTL= 7200000 (2 h),NWS_CACHE_TTL= 600000 (10 min),SPC_CACHE_TTL= 1800000 (30 min),AFD_CACHE_TTL= 1800000 (30 min). AFD:NWS_OFFICE= 'RAH' (change for other locations);NWS_AFD_URLis derived; AFD retries use exponential backoff (AFD_BACKOFF_BASE_MS,AFD_BACKOFF_MAX_MS).
| Issue | Solution |
|---|---|
| "SPC: Data temporarily unavailable" (Severe) | Wait 15 min; dashboard defaults to SAFE. Check console. |
| "Loading threat assessment..." persists (Severe) | Check console (F12), embedding, browser. |
| "Alert system temporarily unavailable" (Severe) | Zone → statewide fallback; check network. |
| Forecast shows "Cached data" (Forecast) | Live fetch failed; data from sessionStorage. NWS/SPC still refresh every 3 min. Retry or check network. |
| Not responsive on mobile | Check responsive breakpoints; both components use mobile overrides. |
| Alerts not updating quickly | Severe: 3 min polling (180000). Forecast: 3 min (ALERTS_REFRESH_MS 180000); minimum 1.5 min between alert fetch starts. |
| "No significant weather" in AFD (Severe) | API then HTML fallback; scoring needs specific keywords. Check console. |
Severe Weather Dashboard: Timeouts 8–10 s; alerts zone → statewide fallback; AFD API → HTML fallback; SPC defaults to SAFE if unavailable; each source independent; response validation.
Forecast Widget: Timeouts 10 s first attempt, up to 25 s on retries (retryTimeout); weather/NWS/SPC each have 3 retries, AFD 2 retries, all with exponential backoff + jitter; cache fallback (weather 2 h, NWS 10 min, SPC 30 min, AFD 30 min); offline detection skips fetch and refreshes on online; in-flight guard; AFD never blocks paint (4 s UI timeout, then enhance when ready).
Debug: F12 → Console. Verify: fetch to api.open-meteo.com, api.weather.gov, spc.noaa.gov; threat level vs SPC outlook.
Quick Start:
./run-tests.sh # or: python3 run_tests.pyTest Coverage: Severe Weather Dashboard — SPC mapping, threat levels, alert processing, winter weather detection, error handling. Forecast widget — backoff and retry timeout logic (resilience).
Test Files: run_tests.py (Python), run-tests.sh (shell wrapper), test-dashboard.html (browser UI for Severe dashboard).
Approach: Logic and resilience tests; no live API calls. Run python3 run_tests.py for full suite; open test-dashboard.html for in-browser Severe dashboard checks.
Supported: Chrome, Firefox, Safari (iOS 12+), Edge — full desktop and 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 major update March 2025 • 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 are issued, monitor multiple sources, and have an emergency plan ready.
Built with ❤️ for the Mebane, NC community — and easily adapted to your location.