Person entities do not show photo

[tobycth3]

When using person.NAME as entity, the photo for the tracker does not now, instead just the first letter is displayed

entities:

• person.NAME

[nathan-gs]

@tobycth3 in v0.3.0 I added support for pictures!

[Elu43]

@nathan-gs Hello, thank you so much for this card, I've been waiting for years to be able to change this map.

I cannot display entity's picture as well. With "icon" option I have the first letter, but with "marker" I have nothing. I'm using v0.4.0. Is it still working on your side ?

Best regards

[nathan-gs]

@Elu43 are you sure the entity has a picture (what do you see if you click on the marker)?

Here it still works.

[Elu43]

@nathan-gs Yes, my entity have a picture, I can see it on the "classic" HA map.

But here nothing appears, no circle, no pic, blank like it doesn't exist. But the view is centered correctly on my location, and when I run my cursor over the supposed location, the cursor changes into a pointing finger and a tooltip with my entity's name appears :

Actually it worked once without any config change, but when I refreshed the page it was not working anymore, I have no idea why.

The problem is the same on PC and Android companion app. I'm using Docker.

I don't know if it's related but when I open the page with the map, the map tiles are very laggy to appear during the first 10 seconds, but then there is no loading problem everywhere on the map.

I have no idea where to look to troubleshoot this. Is there requirements for the picture ? (size, format). Or maybe permission problem to load these pictures ?

My config :

type: custom:map-card
card_size: 15
tile_layer_url: https://a.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png
entities:
  - entity: person.xxxx
    display: marker

Best regards

EDIT 1 : when I load the classic HA map in Inspect mode in my browser, I can see a GET request to my entity picture and it appears. With this card, I see no GET request to my picture.

EDIT 2 : I found a way to have the picture but it's very weird. If I refresh the page there's no picture. But then if I go to the classic map page in the side pannel where I can have my pictures, and then I go back to ha-map-card, now there is the picture here as well. But it's gone as soon as I refresh. Very weird.

[ildar170975]

@nathan-gs Hi! Thanks a lot for the card!

I do not see entity_picture as well:

type: custom:map-card
entities:
  - entity: person.ildar
    display: marker

type: custom:map-card
entities:
  - entity: person.ildar
    display: icon

And same "cure": add a stock map card - then the picture is shown:

Remove the map card -> refresh the page (F5) -> again no picture displayed.

[nathan-gs]

@ildar170975 can you share the version of your HA?

[ildar170975]

Sorry, it is 2024.3.1.

[smeen89]

First of, thanks for this great card. It's so much nicer than stock HA map card. However I have the same problem as @ildar170975

I can't see my entity picture on the map, I'm on HA 2024.3.1 and android companion app. I found out that I can see my picture when on Microsoft Edge on my laptop if that's to any help.

[alexreddy78]

As well pls advise if any updates on bug

[prigorus]

I am also on the latest version of HA and I have a problem that I only see the icon if I am in editing mode. As soon as I exit editing mode, the icon is not displayed on the map anymore. The map is otherwise awesome and would really love to use it, but unfortunately I can now only see map map from tiles.

[prigorus]

I just want to add to my previous comment that if I refresh the page, then I can see the entity on the map again. And it also works on the phone. But it is easily reproducible. If I enter editing mode for dashboards the the displayed entity is gone. I exit editing mode and hit F5 and it is visible again. This is the only card that I have came across with this problem.

So I would just kindly ask for two things now - a donate button and history trace. :)

[totalitarian]

Same issue here, I have history lines showing but no marker

[ildar170975]

Interestingly - I see a photo sometimes.

[alexreddy78]

I have no problem with photo. Picture was set in customize yaml for device tracker entity.

[nathan-gs]

Can you try to use the inspector tool in your browser to see if the html is there? Also take a look at the Console to see if any other error is displayed.

On my side it works, making it hard to debug...

[ildar170975]

2 cards - ha-map & stock map. Photos are usually shown (mentioned here):

Only ha-map - photo is usually not shown.

And no image element: .marker class element is missing.

When a photo is shown:

[totalitarian]

Html element is there but no photo

[thybag]

Just to add to this, it looks like the Leaflet icon: L.divIcon({ html: is rendering the <ha-entity-marker> element as raw html rather than a web component, meaning no shadow root/real html actually gets generated underneath.

[thybag]

Digging slightly further, it looks like the issue is that ha-entity-marker component isn't be loaded by the map card, if you place the built in map card along side it, the ha-entity-marker suddenly starts rendering.

[totalitarian]

Digging slightly further, it looks like the issue is that ha-entity-marker component isn't be loaded by the map card, if you place the built in map card along side it, the ha-entity-marker suddenly starts rendering.

That is my experience, add the built in map card and it starts working.

[nathan-gs]

For me it works, I'm currently still on:

 Core 2023.11.3
Frontend 20231030.2

So I assume something changed in 2024.1. Looking for suggestions on how to fix it :)

[totalitarian]

So, I found out that if you add the built in map in the side bar as a dashboard, the entity pictures load in ha-map. Maybe those not having this issue also have a map in the side bar?

[thybag]

Dug back through some old docs, and annoyingly I'm not sure its actually possible to rely on the ha-entity-marker being resolved.

From https://github.com/home-assistant/frontend/issues/7098 it seems like HA don't currently offer a mechanism to trigger HA elements being registered, there are some funky workaround's but none seem to work for the ha-entity-marker

Official line appears to be "make your own", which seems a shame as there's a ton of very reusable logic in the main entity marker 🤔

Similar discussion's: https://community.home-assistant.io/t/use-of-ha-web-components-in-custom-ui/379296 https://github.com/home-assistant/frontend/issues/4564

Tempted to suggest a new custom ha-mapcard-entity-marker Element, registered in your lib based off https://github.com/home-assistant/frontend/blob/085131d5462870721889d66108cf4aaca52f4941/src/components/map/ha-entity-marker.ts#L68 would be easiest solution. Its a pretty small class. Would open the door to allowing custom marker behaviours (on click etc) via config in future as a side benefit.

[nathan-gs]

Adding the workaround from should be quite a minor change:

(await window.loadCardHelpers()).createRowElement({type: "input-number-entity"})

But I agree on a longer term creating our own entity-marker is preferred.

[thybag]

Hi @nathan-gs have had a go at adding a Marker component in https://github.com/nathan-gs/ha-map-card/pull/37. I think this should fix this issue assuming you are happy with the solution.

[nathan-gs]

Thank you @thybag for the pull request!

Fixes in v0.10.0.

[Elu43]

It works perfectly now for me, thank you so much.

[ildar170975]

v0.10.0: On my test setup (2024.5.3) a photo is shown after a few seconds after F5:

After F5:

In ~5 sec:

I would say - this is good. At least it is shown.