Weather Radar Card

June 30, 2026 · View on GitHub

A Home Assistant rain radar card using tiled radar imagery from RainViewer, NOAA/NWS, and DWD (Deutscher Wetterdienst).

hacs_badge GitHub Release License Maintenance

Description

This card displays animated weather radar loops within Home Assistant. It supports multiple radar data sources and map styles, and can be zoomed and panned seamlessly. Markers, hazard overlays (US wildfires + NWS watches & warnings), real-time lightning, a forecast nowcast (DWD), opt-in motion-compensated playback (rain drifts between frames instead of teleporting), adjustable playback speed with optional per-user persistence, full sections-grid resize support, and 11 languages.

Weather Radar card

Video demo

Full-screen capture with every feature enabled — radar with motion compensation, lightning, wind streamlines, hazard overlays, playback controls:

Watch the demo on YouTube

What's new in 3.7 (current stable)

Headline features:

  • Smooth motion — opt-in motion_compensation: true. During each frame transition, rain slides along its actual direction of travel instead of crossfading in place, so the loop reads as one continuously drifting rain field. Pyramidal Lucas-Kanade optical flow, runs in a Web Worker, source-agnostic across DWD / RainViewer / NOAA. Built on top of @genericJE's #156. Pairs naturally with smooth_animation. (3.7.0-alpha2)
  • Adjustable playback speed — toolbar button cycles ¼× / ½× / 1× / 2× / 4×; editor dropdown sets the YAML default. Optional per-user persistence via the viewer_layer_control admin opt-in: each viewer's chosen speed follows them across browsers and devices. Contributed by @genericJE. (3.7.0-alpha1)

Also in 3.7 — stability and performance:

  • Canvas rendering for lightning and hazard overlays — strikes, NWS alert polygons, and wildfire perimeters paint to canvas instead of one DOM node per item. Identical visuals and clickability (strike clicks select the most recent within 10 px); soak-validated during live storms at 10,000 simultaneous strikes with the page fully responsive. (3.7.0-beta1)
  • Stability wave — full-project code-review remediation: refresh/state races fixed (long-running dashboards no longer accumulate duplicate frames), DWD coverage clipping + single shared boundary mask, exponential backoff on alert/wildfire fetch failures, bounded caches, antimeridian fixes for Alaska. (3.7.0-alpha3)
  • NOAA radar rebuilt on NCEP's opengeo GeoServer (the backend radar.weather.gov itself runs on) — the newest frame is now ~2 minutes behind real time instead of 15–25, every frame is a distinct radar scan, and a new Frame interval dropdown picks 2 / 5 / 10-minute loop density. (3.7.0-beta2)
  • "Latest" replaces "Now" on the newest-frame label — radar frames lag real time by source (NOAA ~2 min, DWD ~5 min, RainViewer ~1–2 min), so the label no longer overstates freshness. (3.7.0-beta2)
  • Translations completed for all 3.7 editor strings across the card's 11 languages.

For the full release history see CHANGELOG.

What's new in 3.6

  • Real-time lightning strikes when the Blitzortung integration is installed — bolt + pulse for first 30 s, then a coloured + sign on a two-pane outline-vs-fill split (dense storm clusters read clean instead of black-blob). Card-side max-age cap defaults to 30 min. (3.6.0)
  • Wind overlay — barbs, arrows, animated streamlines from DWD's ICON-D2 model. Bulk WCS fetch with 60 s coalescing cache, zoom-aware streamlines. See Hazard & Layer Overlays. (3.6.0)
  • Wind source registry — choose dwd_icon, dwd_aicon (DWD's AI-augmented variant), or ndfd_wind (NWS NDFD 2.5 km CONUS / AK / HI / PR). Fresh US installs default to ndfd_wind automatically. (3.6.1)
  • AbortController on tile + data fetches — superseded fetches no longer complete on the wire after a pan / zoom / teardown. (3.6.2)
  • Tablet-friendly progress-bar touch target via progress_bar_touch_height YAML option, contributed by @cgjolberg. (3.6.4)
  • Per-user state framework (dormant) — ViewerState wraps HA's frontend-storage WebSocket API. First user-visible consumer (adjustable playback speed) ships in 3.7. (3.6.5)

Roadmap

Active threads, no specific version commitment — with 3.7 shipped, these target 3.8 or later. See docs/todo.md for the full backlog with status per item.

  • Real-time per-user layer visibility control panel — UI for toggling individual overlays in real time. Persistence framework already shipped (3.6.5); first consumer shipped (playback speed in 3.7.0-alpha1); the on-map panel itself is the remaining piece. Full design in docs/layer-control-design.md.
  • Additional wind sources — Open-Meteo for global coverage, ICON pressure levels for upper-air wind, regional finer-than-ICON-D2 sources (AROME, MEPS, HRRR). Tiers and trade-offs documented in docs/todo.md.

Documentation

TopicWhat's there
ConfigurationFull options table, Map Style choices, Animation knobs, Double-tap action, sections-grid behaviour
Data SourcesRainViewer / NOAA / DWD specifics, per-source caps, NOAA & DWD notes, DWD forecast leading-edge note
Hazard & Layer OverlaysUS wildfire perimeters, NWS watches & warnings, lightning (Blitzortung), and global wind — usage, knobs, safety disclaimers
MarkersThe markers[] schema, track-resolution rules, default home marker, migration from the legacy single-marker fields
ExamplesSample YAMLs for common setups (basic, dense DWD loop, NOAA, OSM, mobile-only, person tracking, hazard overlays)
Animation architectureInternal: layer z-stack, two-slot crossfade, opacity ownership, dynamic tile size, pause behaviour, invariants
Wildfire feature designInternal: NIFC WFIGS feed, render decisions, InciWeb gating, refresh cadence
NWS alerts feature designInternal: api.weather.gov polling, zone resolution + caching, severity sort, popup chrome
Wind feature designInternal: bulk WCS fetch + adaptive scaling, coalescing cache, zoom-aware streamlines, layering
Motion compensation feature designInternal: pyramidal Lucas-Kanade optical flow, distance-from-white channel, inline-Blob worker pattern, crossfade-time translate
Backlog / TODOOpen and shipped features
ContributingLocal dev setup including the Docker HA testbed (npm run ha:up)

Install

HACS

The card is part of the default HACS store. To install the latest stable, search for "Weather Radar Card" in HACS → Frontend → Explore & Add Repositories. Toggle Show beta versions in HACS to opt into prereleases.

Manual

Download the files from the latest release and place them in www/community/weather-radar-card in your HA config directory:

└── configuration.yaml
└── www
    └── community
        └── weather-radar-card
            └── weather-radar-card.js
            └── home-circle-dark.svg
            └── home-circle-light.svg
            └── pause.png
            └── play.png
            └── preview.jpg
            └── radar-colour-bar-dwd.png
            └── radar-colour-bar-nws.png
            └── radar-colour-bar-universalblue.png
            └── recenter.png
            └── skip-back.png
            └── skip-next.png

Upgrading from v2? Delete leaflet.js, leaflet.css, leaflet.toolbar.min.js, and leaflet.toolbar.min.css from www/community/weather-radar-card/ — they are bundled into weather-radar-card.js in v3 and the old files are no longer used.

Then add the following to your Lovelace resources:

resources:
  - url: /local/community/weather-radar-card/weather-radar-card.js
    type: module

Minimal config

type: 'custom:weather-radar-card'

That's it. The card defaults to RainViewer, your HA instance's location, and a zone.home marker. From there, the GUI editor exposes every knob — see Configuration for the full reference and Examples for common starting points.

For touchscreen dashboards, YAML can enlarge the timeline scrub target upward over the lower map while preserving its slim visual track and original bottom-bar height:

show_progress_bar: true
progress_bar_touch_height: 44

Sizing

How tall the card renders depends on where it lives:

  • Masonry / panel views, or a sections cell with rows: auto — the card uses the height: config option (default 400px). This is the normal case.
  • A sections-grid cell with a fixed row count (you've dragged the resize handle, or rows: is a number) — the grid cell owns the height. The card fills the cell and the height: option is ignored; resize it with the cell's drag handle instead. The editor disables the height box in this case so it's clear which control is in charge.

In other words: rows: auto → height: applies; rows: <number> → the cell's height applies. See sections-grid behaviour for details.

Changelog

See CHANGELOG.md for the complete history of changes.