Hello,
on the map, I would like to put a picture of the people or of my car to show on the map.
Do you know 
I had a look at my devices, but found nowhere where to assign a “picture”. On the map for the moment it shows circles with the acronyms of the device.
Many thanks !
Map card (or Map view) shows entities with “latitude” & “longitude” attributes.
Usually images are set to “person” & “device_tracker” entities via customization.
For “person” entities it may be done in UI for “people”.
For “device_tracker” - only via yaml customization (somewhere here described).
Thanks a lot … this is to show the picture of my car on the map, instead of a circle with letters in it.
I have successfully put the picture in the www folder. it is accessible via /local/bmw-picture.png
I am wondering where I need to “map” this picture with the entity, now …
On the entity config itself, I can not assign it :
on the map itself, I can only see this :
… as you can see, it is only 4 lines … I think I need to put the link to the picture there somewhere ?
the link you mention is not helping lee that much
only this variant.
ok - I found out how to show my car’s picture on the Map card.
First, upload the picture (in png format from my side) in the HA, I did it using the “File editor” add-on I have installed. Using this, put the picture under “www”, so that is is accessible from “/local/”.
Then, edit the configuration.yaml adding this code :
homeassistant:
customize: !include customize.yaml
… This is to call a “customize.yaml” config file. As it was not existing yet, I have created it at the same level of “configuration.yaml” like this :
then edit this customization.yaml and I have put the following code to assign the picture to the tracker tracker of my car :
device_tracker.225e_xdrive:
entity_picture: /local/BMW-picture.png
… and magic, the icon is now showing on the map :
Hope it can help !
What are the purple lines? Do you keep track of the location history in this map card?
yes, indeed
I just wanted to let you know I finally got the time to follow your guide, and it works perfectly. Thanks for the support! next step is to enter the tracking lines on the map…
I step in for one final question, is there a trick to center the picture? I tried to put the car logo in and I could never manage to center it
What do you lean center a picture ?
the picture which is showed on the map will be the pone you have put in your config, centered in a circle …
that I mean
It´s not in the middle/centered and I don´t know how to adjust. I changed the resolution and tried a few things but no success
I guess you need to play a bit with the original picture, try to center it, see what part of the picture HA takes to put in the circle … see here is my original picture :
… and here is what I see on the map :
It looks like it take the left part of the original picture 
Maybe if you make the original picture the correct size directly, it will be better (I see in some topics they talk about a picture of 192x192 pixels) …
… but I am happy with it
Hi, I follow quite a few of your suggestions, always helpful…and apologies for the direct approach
In this case, I progressed quite a bit and am using a svg but… the picture continues to have the circle and white background. Would you have any idea how to circumvent this? When I am using icons for the gas-stations (they are of type ‘zone’) then it is fine.
Hints/tips/tricks/rejections/etc… all welcome
EDIT: the buses are based on geo_json-created entries and then a customize_glob, should not matter but not sure.
Suggest to wait for 2025.1 )))
See if you can make it a png file, with no background …
It’s already a svg without…
Not sure if this is related to 2025.1 but I found the solution via trial and error …this using some of your pointers as I have only a little clue of what I am doing
Would you possibly explain me why this always needs the 'var() part? i.e. border: 0px or backgrond-color: none donot do a thing
card_mod:
style:
ha-map:
$:
.leaflet-marker-icon:
ha-entity-marker $: |
.marker {
border: 0px solid var(--ha-marker-color,var(--primary-color)) !important;
background-color: var(--ha-marker-color,none) !important;
}
You will have to wait for few days, I will be able to check it in a week probably…
So what is the correct way to do it, now that 2025.1 has been out and about for a while? 
