Map card: style is unstable

[ildar170975]

My Home Assistant version: 2022.9.4

My lovelace configuration method (GUI or yaml): storage/yaml

What I am doing: Styling a Map card. I assigned an entity_picture (png with transparent background) to some tracker, now I want to remove a white circle around the picture & background color. (initially it was a task about displaying ISS).

Here is a detailed path to the styled elements:

type: map
entities:
  - device_tracker.samsung_p6800_composite
  - device_tracker.ipad_air_2_composite
card_mod:
  style:
    ha-map:
      $:
        div#map:
          .leaflet-pane.leaflet-map-pane:
            .leaflet-pane.leaflet-marker-pane:
              .leaflet-marker-icon:
                ha-entity-marker:
                  $: |
                    .marker {
                      border: none !important;
                      background-color: transparent !important;
                    }

What I expect to see - the marker is with a transparent background & w/o a border:

This works - until I refresh a page; then I see the not styled picture:

Seems that elements are updated periodically and loosing their style.

Error messages from the browser console: None

By putting an X in the boxes ([]) below, I indicate that I:

• [x] Understand that this is a channel for reporting bugs, not a support forum (https://community.home-assistant.io/).

• [x] Have made sure I am using the latest version of the plugin.

• [x] Have followed the troubleshooting steps of the "Common Problems" section of https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins.

• [x] Understand that leaving one or more boxes unticked or failure to follow the template above may increase the time required to handle my bug-report, or cause it to be closed without further action.

[kulmegil]

I'm surprised this has worked in the first place.

Map elements (markers and other shapes) are controlled by LeafletJS library lives outside of LitElement lifecycle - that is the component used mostly in Lovelace. The elements are rendered (and can possibly load too) dynamically as user interacts (moves, zooms, changes layers) of the map. Styling them using card-mod selectors is way above it's pay grade.

---

The best way would be to append styles to ALL <ha-entity-marker> elements. Here is my lame attempt at wrinding an override:

customElements.whenDefined('ha-entity-marker').then(() => {
  const EntityMarker = customElements.get('ha-entity-marker');
  const { html, css } = EntityMarker.prototype;

  // defined added style
  const newStyle = css`
  .marker {
    border: none !important;
    background-color: transparent !important;}`;

  const newStyles = [].concat(EntityMarker.styles, newStyle);
  // The LitElement class has already been finalized, but hopefully not yet instantiated
  // guess I'll just do it the hard way
  Object.defineProperty(EntityMarker, 'styles',        {value: newStyles, configurable: true, enumerable: false});
  Object.defineProperty(EntityMarker, 'elementStyles', {value: newStyles, configurable: true, enumerable: false});
});

Add it as lovelace resource This will affect all markers on all map cards.
It will also affect /map sidebar (depending if any dashboard was loaded after last page refresh)

[ildar170975]

@kulmegil As for the standard Map page - unfortunately, it is not stable.

1. Added the js code as a resource.

2. Open Map page - styles are applied:

3. Refresh (F5).

4. Styles are NOT applied:

As for custom views - the styles are stable even after F5 - seems to work perfect!!!

BTW, also added this style to the code - border-radius: 10%; Now all items are square (I hate circular avatars):

[kulmegil]

@ildar170975 it's expected. I thought you don't use sidebar map since it's not very customizable and card_mod can be used only inside lovelace dashboards. Anyway in that case load is as frontend module (like card_mod) and it should be stable everywhere

note: The general difference is that frontend modules are always loaded with HA interface, while resources when dashboard is selected. Also in the past I had experience problems with frontend modules not updating nicely in mobile_app. If You ever encounter this try changing module path or filename.

[ildar170975]

@kulmegil The whole solution is just genius. At least for me who does not know about internal structure of HA ))) And this method may be used for "static" styling of some other elements.

I had experience problems with frontend modules not updating nicely in mobile_app

The style works stable in Win+Chrome, iOS Companion App. Tested in dashboards & Map page.

I also prepared a similar method for styling logbooks (posted it in Community card-mod thread) - all credits to you!