Allow map card to render passive zones (#15901)

src/components/map/ha-map.ts

@@ -50,6 +50,10 @@ export class HaMap extends ReactiveElement {
 
   @property({ type: Boolean }) public autoFit = false;
 
+  @property({ type: Boolean }) public renderPassive = false;
+
+  @property({ type: Boolean }) public interactiveZones = false;
+
   @property({ type: Boolean }) public fitZones?: boolean;
 
   @property({ type: Boolean }) public darkMode?: boolean;
@@ -321,6 +325,10 @@ export class HaMap extends ReactiveElement {
 
     const computedStyles = getComputedStyle(this);
     const zoneColor = computedStyles.getPropertyValue("--accent-color");
+    const passiveZoneColor = computedStyles.getPropertyValue(
+      "--secondary-text-color"
+    );
+
     const darkPrimaryColor = computedStyles.getPropertyValue(
       "--dark-primary-color"
     );
@@ -350,7 +358,7 @@ export class HaMap extends ReactiveElement {
 
       if (computeStateDomain(stateObj) === "zone") {
         // DRAW ZONE
-        if (passive) {
+        if (passive && !this.renderPassive) {
           continue;
         }
 
@@ -374,7 +382,7 @@ export class HaMap extends ReactiveElement {
               iconSize: [24, 24],
               className,
             }),
-            interactive: false,
+            interactive: this.interactiveZones,
             title,
           })
         );
@@ -383,7 +391,7 @@ export class HaMap extends ReactiveElement {
         this._mapZones.push(
           Leaflet.circle([latitude, longitude], {
             interactive: false,
-            color: zoneColor,
+            color: passive ? passiveZoneColor : zoneColor,
             radius,
           })
         );

src/panels/lovelace/cards/hui-map-card.ts

@@ -16,7 +16,7 @@ import { getColorByIndex } from "../../../common/color/colors";
 import { isComponentLoaded } from "../../../common/config/is_component_loaded";
 import { formatDateTime } from "../../../common/datetime/format_date_time";
 import {
-  formatTime,
+  formatTimeWithSeconds,
   formatTimeWeekday,
 } from "../../../common/datetime/format_time";
 import { computeDomain } from "../../../common/entity/compute_domain";
@@ -152,6 +152,8 @@ class HuiMapCard extends LitElement implements LovelaceCard {
             .paths=${this._getHistoryPaths(this._config, this._stateHistory)}
             .autoFit=${this._config.auto_fit}
             .darkMode=${this._config.dark_mode}
+            interactiveZones
+            renderPassive
           ></ha-map>
           <ha-icon-button
             .label=${this.hass!.localize(
@@ -329,6 +331,9 @@ class HuiMapCard extends LitElement implements LovelaceCard {
       const paths: HaMapPaths[] = [];
 
       for (const entityId of Object.keys(history)) {
+        if (computeDomain(entityId) === "zone") {
+          continue;
+        }
         const entityStates = history[entityId];
         if (!entityStates?.length) {
           continue;
@@ -349,7 +354,7 @@ class HuiMapCard extends LitElement implements LovelaceCard {
             // date and time
             p.tooltip = formatDateTime(t, this.hass.locale);
           } else if (isToday(t)) {
-            p.tooltip = formatTime(t, this.hass.locale);
+            p.tooltip = formatTimeWithSeconds(t, this.hass.locale);
           } else {
             p.tooltip = formatTimeWeekday(t, this.hass.locale);
           }

src/panels/map/ha-panel-map.ts

@@ -38,7 +38,12 @@ class HaPanelMap extends LitElement {
               : ""}
           </app-toolbar>
         </app-header>
-        <ha-map .hass=${this.hass} .entities=${this._entities} autoFit></ha-map>
+        <ha-map
+          .hass=${this.hass}
+          .entities=${this._entities}
+          autoFit
+          interactiveZones
+        ></ha-map>
       </ha-app-layout>
     `;
   }