Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Ability to show map icons for geolocation sources #23247

Merged
merged 5 commits into from
Dec 21, 2024
Merged

Ability to show map icons for geolocation sources #23247

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
d4df03a
Ability to show map icons for geolocation sources
karwosts Dec 10, 2024
eb63f4c
import
karwosts Dec 10, 2024
9230c89
rename to label_mode
karwosts Dec 17, 2024
aac73a1
use ha-state-icon
karwosts Dec 21, 2024
d182802
lint
karwosts Dec 21, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 6 additions & 1 deletion src/components/map/ha-entity-marker.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import { LitElement, html, css } from "lit";
import { property } from "lit/decorators";
import { styleMap } from "lit/directives/style-map";
import { fireEvent } from "../../common/dom/fire_event";
import "../ha-icon";

class HaEntityMarker extends LitElement {
@property({ attribute: "entity-id" }) public entityId?: string;
Expand All @@ -12,6 +13,8 @@ class HaEntityMarker extends LitElement {

@property({ attribute: "entity-color" }) public entityColor?: string;

@property({ attribute: "entity-icon" }) public entityIcon?: string;

protected render() {
return html`
<div
Expand All @@ -26,7 +29,9 @@ class HaEntityMarker extends LitElement {
"background-image": `url(${this.entityPicture})`,
})}
></div>`
: this.entityName}
: this.entityIcon
? html`<ha-icon .icon=${this.entityIcon}></ha-icon>`
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cant we just use ha-state-icon? That will handle it all.

Copy link
Contributor Author

@karwosts karwosts Dec 20, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I kinda tried this once but didn't get it to work.

ha-state-icon needs hass, and I think the way the marker is constructed in ha-map and the html template is passed to map.addLayer() makes that not work for some reason (currently everything to ha-entity-marker is passed as an attribute instead of a property?), when I tried to add a hass property to the marker it always ended up being undefined when that item rendered.

Probably need some advanced JS I don't understand to make that work correctly?

If you think that should work without anything special I can try again and see if I missed something obvious...

Copy link
Member

@bramkragten bramkragten Dec 20, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This should kinda work, it will not update hass when it changes though (except if the icon is recreated when hass changes ofc), but that could also be added if needed:

      const entityMarker = document.createElement("ha-entity-marker");
      entityMarker.hass = this.hass;
      entityMarker.entityId = getEntityId(entity);
      entityMarker.entityName = entityName;
      entityMarker.entityPicture = entityPicture
        ? 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: entityMarker,
          iconSize: [48, 48],
          className: "",
        }),
        title: title,
      });

Another option would be to extend Leaflet.divIcon with lit-html support, so we can write lit-html templates in the html option.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks, this suggestion seems to work well.

Now have working icons for all entities 👍 (even updates correctly when the state changes)

: this.entityName}
</div>
`;
}
Expand Down
7 changes: 7 additions & 0 deletions src/components/map/ha-map.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,7 @@ export interface HaMapEntity {
entity_id: string;
color: string;
label_mode?: "name" | "state";
display_mode?: "icon";
name?: string;
focus?: boolean;
}
Expand Down Expand Up @@ -523,13 +524,19 @@ export class HaMap extends ReactiveElement {
.join("")
.substr(0, 3));

const entityIcon =
(typeof entity !== "string" &&
entity.display_mode === "icon" &&
stateObj.attributes.icon) ||
"";
// create marker with the icon
const marker = Leaflet.marker([latitude, longitude], {
icon: Leaflet.divIcon({
html: `
<ha-entity-marker
entity-id="${getEntityId(entity)}"
entity-name="${entityName}"
entity-icon="${entityIcon}"
entity-picture="${
entityPicture ? this.hass.hassUrl(entityPicture) : ""
}"
Expand Down
5 changes: 3 additions & 2 deletions src/panels/lovelace/cards/hui-map-card.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,7 @@ interface MapEntityConfig extends EntityConfig {

interface GeoEntity {
entity_id: string;
display_mode: "icon" | undefined;
focus: boolean;
}

Expand Down Expand Up @@ -351,6 +352,7 @@ class HuiMapCard extends LitElement implements LovelaceCard {
) {
geoEntities.push({
entity_id: stateObj.entity_id,
display_mode: sourceObj?.display_mode ?? allSource?.display_mode,
focus: sourceObj
? (sourceObj.focus ?? true)
: (allSource?.focus ?? true),
Expand All @@ -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),
})),
];
Expand Down
1 change: 1 addition & 0 deletions src/panels/lovelace/cards/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -304,6 +304,7 @@ export interface LogbookCardConfig extends LovelaceCardConfig {

interface GeoLocationSourceConfig {
source: string;
display_mode?: "icon";
focus?: boolean;
}

Expand Down
1 change: 1 addition & 0 deletions src/panels/lovelace/editor/config-elements/hui-map-card-editor.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,7 @@ export const mapEntitiesConfigStruct = union([
const geoSourcesConfigStruct = union([
object({
source: string(),
display_mode: optional(string()),
focus: optional(boolean()),
}),
string(),
Expand Down
Loading