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

v3.0.0-alpha2 — Native Shadow DOM rewrite

on GitHub

What's New in 3.0

Alpha 2 release — functional and tested but not yet through the full testing matrix. Please report issues.

Changes in alpha2 (since alpha1)

Added

• 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 via prefers-color-scheme; map reinitialises automatically when the system theme changes at runtime
• double_tap_action — configurable double-tap/double-click action: built-in shortcuts (recenter, toggle_play) or any standard HA action object (navigate, call-service, etc.)
• Scrubbable timeline — click or drag the progress bar to seek to any frame; dragging pauses playback, releasing resumes it
• Locale-aware frame timestamp — uses Intl.DateTimeFormat with the browser locale, so 12 h (AM/PM) or 24 h is chosen automatically per the user's regional settings

All changes since v2 (alpha1 + alpha2)

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