Makin-Things/weather-radar-card v3.0.0

V3.0.0

on GitHub

What's New in 3.0

3.0 is a complete rewrite of the map engine to remove the iframe. It has a new rendering model that builds frames back from the latest so that rate limit failures don't leave gaps. Rate limiting and other failures are handled gracefully. The majority of the feature request from issues are included, see below.

I've classified it as a breaking release becasue of the scope of the internal changes, your existing config should still work. However if you were using cardmod or other CSS manipulation that will probably be broken.

All changes since v2

Added

• NOAA/NWS radar source — US-only experimental mode using MRMS base reflectivity via mapservices.weather.noaa.gov
• Show Snow option — includes or excludes snow in RainViewer precipitation tiles
• Rate-limit banner — visible indicator when the API tile quota is temporarily exhausted
• Save map center in edit mode — pan/zoom the card while editing and click the overlay button to write center_latitude, center_longitude, and zoom_level back to config without manually entering coordinates
• Marker icon options — default, entity_picture, and MDI icon types configurable per device (desktop / mobile)
• show_color_bar option — hide the RainViewer radar colour scale bar (default shown)
• show_progress_bar option — hide the frame timeline bar (default shown)
• map_style: Auto — follows OS dark/light mode; map reinitialises automatically when the system theme changes
• double_tap_action — shortcut strings (recenter, toggle_play, none) or any HA action object in YAML
• Scrubbable timeline — click or drag the progress bar to seek to any frame
• Locale-aware frame timestamp — 12 h/24 h chosen automatically from browser locale

Changed

• Breaking: Leaflet is now bundled. leaflet.js, leaflet.css, leaflet.toolbar.min.js, and leaflet.toolbar.min.css are no longer distributed as separate files — they are compiled into weather-radar-card.js. Delete the old files from www/community/weather-radar-card/ when upgrading.
• Breaking: iframe removed. The card is now a native LitElement / Shadow DOM component. No srcdoc, no opaque origin workarounds, proper HA theming integration.
• Leaflet.Toolbar2 replaced by a native L.Control implementation — removes the external toolbar dependency entirely.
• Animation engine replaced: frame switching is now driven by JavaScript opacity writes with CSS transition for crossfades, replacing the previous CSS @keyframes engine.
• Map auto-selects Light (CARTO) for English-language HA instances in light mode and OSM for all other languages; map_style: Auto extends this with dark-mode awareness.
• Marker defaults to HA home location (hass.config.latitude/longitude) rather than the card's center_latitude.
• Navigation settle delay reduced from 500 ms to 100 ms.

Fixed

• Animation flash-on-load caused by duplicate _initRadar runs
• _updateRadar crash when the RainViewer API returns an empty frame list
• _updateRadar mutations continuing after card teardown
• resolveCoordinate treating coordinate 0 as falsy (equator / Prime Meridian)
• Mobile marker icon defaulting to entity_picture when not configured
• visibilitychange listener accumulating across card reinitializations
• Worker Blob URL never revoked on teardown

Installation (manual)

Copy these files to www/community/weather-radar-card/ in your HA config directory:

• weather-radar-card.js
• home-circle-dark.svg, home-circle-light.svg
• pause.png, play.png, recenter.png, skip-back.png, skip-next.png
• radar-colour-bar-universalblue.png

Upgrading from v2: delete leaflet.js, leaflet.css, leaflet.toolbar.min.js, and leaflet.toolbar.min.css — bundled into weather-radar-card.js in v3.

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