Ability to show map icons for geolocation sources

[karwosts]

Proposed change

Add a mode to show geolocation entities on the map as icons instead of their current name. The current behavior seems to just produce an unintelligible letter-salad, so I think seeing the icons would be quite a bit cleaner. Perhaps it should even be made the default mode, but for now it's just backward-compatible optional mode. Most geolocation sources I've seen tend to include a nice icon as part of the entity (typically for natural disasters).

Current:

Proposed:

Type of change

• Dependency upgrade
• Bugfix (non-breaking change which fixes an issue)
• New feature (thank you!)
• Breaking change (fix/feature causing existing functionality to break)
• Code quality improvements to existing code or addition of tests

Example configuration

Additional information

• This PR fixes or closes issue: fixes #
• This PR is related to issue or discussion:
• Link to documentation pull request:

Checklist

• The code change is tested and works locally.
• There is no commented out code in this PR.
• Tests have been added to verify that the new code works.

If user exposed functionality or configuration variables are added/changed:

• Documentation added/updated for www.home-assistant.io

[MindFreeze]

This should be part of label_mode and label_mode should just override the entity picture

[karwosts]

Unified the option with label_mode to make it constant, I think everything works but icon mode is only really good for geo_locations as the icon is pulled from the entity attributes instead of the registry.

I didn't add entity-registry based icon support for non-geolocation entities at this time as I'm not sure if it's really a useful usecase, I think it's more practical for autogenerated entities than the standard ones.

[MindFreeze]

I didn't add entity-registry based icon support for non-geolocation entities at this time as I'm not sure if it's really a useful usecase, I think it's more practical for autogenerated entities than the standard ones.

I think this should support the entity registry. Users expect consistency and can assign icons to entities like cars or people that are displayed on maps. Documentation would also be more complicated if this isn't supported

[bramkragten]

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

[karwosts]

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...

[bramkragten]

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.

[karwosts]

Thanks, this suggestion seems to work well.

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