diff --git a/src/components/map/ha-entity-marker.ts b/src/components/map/ha-entity-marker.ts
index 81df58fb8149..22de16941853 100644
--- a/src/components/map/ha-entity-marker.ts
+++ b/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`
`
- : this.entityName}
+ : this.showIcon && this.entityId
+ ? html``
+ : this.entityName}
`;
}
diff --git a/src/components/map/ha-map.ts b/src/components/map/ha-map.ts
index 6f28738845ea..c4da1d7afbab 100644
--- a/src/components/map/ha-map.ts
+++ b/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,
iconSize: [48, 48],
className: "",
}),
diff --git a/src/panels/lovelace/cards/hui-map-card.ts b/src/panels/lovelace/cards/hui-map-card.ts
index 970c1af462c5..9d051456b2f7 100644
--- a/src/panels/lovelace/cards/hui-map-card.ts
+++ b/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,
- focus: entity.focus,
+ ...entity,
color: this._getColor(entity.entity_id),
})),
];
diff --git a/src/panels/lovelace/cards/types.ts b/src/panels/lovelace/cards/types.ts
index 9f741915fa80..e5d6b3f192c2 100644
--- a/src/panels/lovelace/cards/types.ts
+++ b/src/panels/lovelace/cards/types.ts
@@ -304,6 +304,7 @@ export interface LogbookCardConfig extends LovelaceCardConfig {
interface GeoLocationSourceConfig {
source: string;
+ label_mode?: "name" | "state" | "icon";
focus?: boolean;
}
diff --git a/src/panels/lovelace/editor/config-elements/hui-map-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-map-card-editor.ts
index e013a4fbbf19..3f3498020843 100644
--- a/src/panels/lovelace/editor/config-elements/hui-map-card-editor.ts
+++ b/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(),