SOLVED - Add Picture icon to map (car icon)

Configuration Frontend
21

I donot know what you mean with ‘it’ as it has a few topics
I was able to arrange my entity_picture (defined in custom_glob) this way, likely it will work the same with a icon (via label:)

  card_mod:
    style:
      ha-map:
        $:
          .leaflet-marker-icon:
            ha-entity-marker $: |
              .marker {            
                position: relative  !important;
                top: 20% !important;
                left: 20% !important;
                width: 25px !important;
                height: 25px !important;
                border: 0px solid var(--ha-marker-color,var(--primary-color)) !important;
                background-color: var(--ha-marker-color,none) !important;
               }
22

I may have misunderstood, but it seemed like there would be a new way of doing it (meaning replacing the annoying circle/letters with a meaningful icon) in the 2025.1 version.

23

Yeah, but it does not seem to work. one can already add the icon but the circle / background remains, these are covered in the last two lines of my code above
Noting that I am still on 2025.1

24

Thanks! Then if @Ildar_Gabdullin does not have anything else new to say (better give him a day or two, some people have lives, I hear…), I’ll try to implement your version!

25

I am still away from normal human life, hopefully will try to check in a few days. Meanwhile you should of course test/fail/repeat/succeed…

26

@vingerha
Could you remind what the current issue is? Got home to PC.

27

tbh, I am not sure anymore, I had 1 question as per the below code which I got working : why does this only work with var(…), e.g. why can’t I just use background-color: none or border: 0px … as that works in other cards

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;
             }

EDIT… am now on 2025.1.4 and apparently I can do without the ‘var’ parts…so no further issue/question from my seide

28

Well, I see no issues here:

image
image994×494 31.1 KB

image
image1007×505 51.2 KB

image
image997×490 32.3 KB

Good that you sorted this out.

1 Like