Ability to show map icons for geolocation sources (#23247)

src/components/map/ha-entity-marker.ts

@@ -1,9 +1,13 @@
 import { LitElement, html, css } from "lit";
 import { property } from "lit/decorators";
 import { styleMap } from "lit/directives/style-map";
+import type { HomeAssistant } from "../../types";
 import { fireEvent } from "../../common/dom/fire_event";
+import "../ha-state-icon";
 
 class HaEntityMarker extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
   @property({ attribute: "entity-id" }) public entityId?: string;
 
   @property({ attribute: "entity-name" }) public entityName?: string;
@@ -12,6 +16,8 @@ class HaEntityMarker extends LitElement {
 
   @property({ attribute: "entity-color" }) public entityColor?: string;
 
+  @property({ attribute: "show-icon", type: Boolean }) public showIcon = false;
+
   protected render() {
     return html`
       <div
@@ -26,6 +32,11 @@ class HaEntityMarker extends LitElement {
                 "background-image": `url(${this.entityPicture})`,
               })}
             ></div>`
+          : this.showIcon && this.entityId
+            ? html`<ha-state-icon
+                .hass=${this.hass}
+                .stateObj=${this.hass?.states[this.entityId]}
+              ></ha-state-icon>`
             : this.entityName}
       </div>
     `;

src/components/map/ha-map.ts

@@ -52,7 +52,7 @@ export interface HaMapPaths {
 export interface HaMapEntity {
   entity_id: string;
   color: string;
-  label_mode?: "name" | "state";
+  label_mode?: "name" | "state" | "icon";
   name?: string;
   focus?: boolean;
 }
@@ -523,23 +523,24 @@ export class HaMap extends ReactiveElement {
               .join("")
               .substr(0, 3));
 
+      const entityMarker = document.createElement("ha-entity-marker");
+      entityMarker.hass = this.hass;
+      entityMarker.showIcon =
+        typeof entity !== "string" && entity.label_mode === "icon";
+      entityMarker.entityId = getEntityId(entity);
+      entityMarker.entityName = entityName;
+      entityMarker.entityPicture =
+        entityPicture && (typeof entity === "string" || !entity.label_mode)
+          ? this.hass.hassUrl(entityPicture)
+          : "";
+      if (typeof entity !== "string") {
+        entityMarker.entityColor = entity.color;
+      }
+
       // create marker with the icon
       const marker = Leaflet.marker([latitude, longitude], {
         icon: Leaflet.divIcon({
-          html: `
+          html: entityMarker,
-              <ha-entity-marker
-                entity-id="${getEntityId(entity)}"
-                entity-name="${entityName}"
-                entity-picture="${
-                  entityPicture ? this.hass.hassUrl(entityPicture) : ""
-                }"
-                ${
-                  typeof entity !== "string"
-                    ? `entity-color="${entity.color}"`
-                    : ""
-                }
-              ></ha-entity-marker>
-            `,
           iconSize: [48, 48],
           className: "",
         }),

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

@@ -44,6 +44,7 @@ interface MapEntityConfig extends EntityConfig {
 
 interface GeoEntity {
   entity_id: string;
+  label_mode?: "state" | "name" | "icon";
   focus: boolean;
 }
 
@@ -351,6 +352,7 @@ class HuiMapCard extends LitElement implements LovelaceCard {
       ) {
         geoEntities.push({
           entity_id: stateObj.entity_id,
+          label_mode: sourceObj?.label_mode ?? allSource?.label_mode,
           focus: sourceObj
             ? (sourceObj.focus ?? true)
             : (allSource?.focus ?? true),
@@ -370,8 +372,7 @@ class HuiMapCard extends LitElement implements LovelaceCard {
         name: entityConf.name,
       })),
       ...this._getSourceEntities(this.hass?.states).map((entity) => ({
-        entity_id: entity.entity_id,
+        ...entity,
-        focus: entity.focus,
         color: this._getColor(entity.entity_id),
       })),
     ];

src/panels/lovelace/cards/types.ts

@@ -309,6 +309,7 @@ export interface LogbookCardConfig extends LovelaceCardConfig {
 
 interface GeoLocationSourceConfig {
   source: string;
+  label_mode?: "name" | "state" | "icon";
   focus?: boolean;
 }
 

src/panels/lovelace/editor/config-elements/hui-map-card-editor.ts

@@ -48,6 +48,7 @@ export const mapEntitiesConfigStruct = union([
 const geoSourcesConfigStruct = union([
   object({
     source: string(),
+    label_mode: optional(string()),
     focus: optional(boolean()),
   }),
   string(),