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(),