Add "label_mode = attribute" for Map card (#24708)

* add "label_mode = attribute"

* add "label_mode = atribute"

* added "label_mode = attribute"

* add "attribute" property

* add "attribute" property to GeoLocationSourceConfig

* add "attribute" property

* add "attribute" in _getSourceEntities

* check for entity.attribute !== undefined

* prettier

src/components/map/ha-map.ts

@@ -54,7 +54,8 @@ export interface HaMapPaths {
 export interface HaMapEntity {
   entity_id: string;
   color: string;
-  label_mode?: "name" | "state" | "icon";
+  label_mode?: "name" | "state" | "attribute" | "icon";
+  attribute?: string;
   name?: string;
   focus?: boolean;
 }
@@ -531,12 +532,16 @@ export class HaMap extends ReactiveElement {
       const entityName =
         typeof entity !== "string" && entity.label_mode === "state"
           ? this.hass.formatEntityState(stateObj)
-          : (customTitle ??
-            title
-              .split(" ")
-              .map((part) => part[0])
-              .join("")
-              .substr(0, 3));
+          : typeof entity !== "string" &&
+              entity.label_mode === "attribute" &&
+              entity.attribute !== undefined
+            ? this.hass.formatEntityAttributeValue(stateObj, entity.attribute)
+            : (customTitle ??
+              title
+                .split(" ")
+                .map((part) => part[0])
+                .join("")
+                .substr(0, 3));
 
       const entityMarker = document.createElement("ha-entity-marker");
       entityMarker.hass = this.hass;

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

@@ -43,13 +43,15 @@ export const DEFAULT_HOURS_TO_SHOW = 0;
 export const DEFAULT_ZOOM = 14;
 
 interface MapEntityConfig extends EntityConfig {
-  label_mode?: "state" | "name";
+  label_mode?: "state" | "attribute" | "name";
+  attribute?: string;
   focus?: boolean;
 }
 
 interface GeoEntity {
   entity_id: string;
-  label_mode?: "state" | "name" | "icon";
+  label_mode?: "state" | "attribute" | "name" | "icon";
+  attribute?: string;
   focus: boolean;
 }
 
@@ -422,6 +424,7 @@ class HuiMapCard extends LitElement implements LovelaceCard {
         geoEntities.push({
           entity_id: stateObj.entity_id,
           label_mode: sourceObj?.label_mode ?? allSource?.label_mode,
+          attribute: sourceObj?.attribute ?? allSource?.attribute,
           focus: sourceObj
             ? (sourceObj.focus ?? true)
             : (allSource?.focus ?? true),
@@ -437,6 +440,7 @@ class HuiMapCard extends LitElement implements LovelaceCard {
         entity_id: entityConf.entity,
         color: this._getColor(entityConf.entity),
         label_mode: entityConf.label_mode,
+        attribute: entityConf.attribute,
         focus: entityConf.focus,
         name: entityConf.name,
       })),

src/panels/lovelace/cards/types.ts

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

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

@@ -39,6 +39,7 @@ export const mapEntitiesConfigStruct = union([
   object({
     entity: string(),
     label_mode: optional(string()),
+    attribute: optional(string()),
     focus: optional(boolean()),
     name: optional(string()),
   }),
@@ -49,6 +50,7 @@ const geoSourcesConfigStruct = union([
   object({
     source: string(),
     label_mode: optional(string()),
+    attribute: optional(string()),
     focus: optional(boolean()),
   }),
   string(),