Display Fuel Prices on Map Card

Zarox666 · September 12, 2023, 1:03pm

I am hoping for some input and ideas on how to solve my predicament…

I use the tankerkönig Integration to fetch Fuel Prices from Petrol Stations in my sourrounding.
This works like a charm and the Entities also contain Positional information.

Here is an Example of one such entity:

With this positional information I can display them on a map card:
(same Petrol station as in the example above)

As you certainly notice, its using a generated abbreviation out of the Entities Name to display it on the map. Jeah… pretty ugly…
People have found ways to make that look nicer (Tankerkönig ugly entity names) but what I have in mind is different.
I want to have the actual, current Fuel Price in this example “1.899€” displayed on the map.

I generaly see two approaches, but I failed on both ways:
a) Somehow get the Map Card to display the State instead of the abreviated Name. ← how??
b) Dynamicaly change the Friendly Name to the State Value ← is this even updating??

for a) I could not find any documented setting or parameter that could change the Map Cards behavior in that way.
for b) I created a Customization and put a friendly_name: there, but it is not accepting a template it seems.

So I am out of ideas…
Do you have any how this could be resolved?
Have you maybe solved a simillar Issue with displaying Data on a Map yourself?

Thanks in advance!

Ildar_Gabdullin · September 12, 2023, 9:20pm

Interesting task. Will try to find a solution and post it these days))))

Ildar_Gabdullin · September 15, 2023, 3:35pm

Currently Map card show a “name” composed from an entity’s name (up to 3 characters).
There is a related Discussion - " Map card: add an ability to show a state of an entity instead of showing a name".

Meanwhile, there are 2 working solutions:

Generating “friendly_name”.
Using card-mod.

1. Generating “friendly_name”:
Consider this code:

input_number:
  some_number:
    ...

sensor:
  - platform: template
    sensors:
      some_marker:
        friendly_name_template: >-
          {% set VALUE = states("input_number.some_number") -%}
          {%- if VALUE|length > 3 and VALUE[2] in ['.',','] -%}
            {%- set VALUE = VALUE|float(default=0)|round(0) -%}
          {%- endif -%}
          {{ VALUE|string|list|join(' ') }}
        value_template: ...
        attribute_templates:
          latitude: ...
          longitude: ...

The idea is to compose a “friendly_name” (legacy format is used for a template sensor) based on some numerical value.
The template takes 3 first characters from the value and compose a string.
If the 3rd character is a delimiter than a rounding is performed.
Note: the code may not be optimal; also it does not work for negatives…

2. Card-mod:
The idea is to hide a displayed name and replace it with some user-defined string:

type: map
entities:
  - entity: sensor.some_marker
card_mod:
  style:
    ha-map:
      $:
        .leaflet-marker-icon:
          ha-entity-marker $: |
            .marker {
              font-size: 0px !important;
             }
             .marker::after {
               content: "{{states('input_number.some_number')}}";
               font-size: 10px !important;
             }

Unfortunately, the card-mod code is not stable: it works in a “dashboard edit mode”, may be lost after a page refresh.

Here is test example for both methods:

entities

input_number:
  test_map_markers_with_values_1: &ref_number
    min: 0
    max: 100
    step: 0.1
    mode: box
  test_map_markers_with_values_2: *ref_number
  test_map_markers_with_values_3: *ref_number

##########################################################

sensor:
  - platform: template
    sensors:
      test_map_markers_with_values_1:
        friendly_name_template: &ref_friendly_name_template >-
          {% set HELPER_NAME = 'input_number.' + this.entity_id.split('.')[1] -%}
          {%- set VALUE = states(HELPER_NAME) -%}
          {%- if VALUE|length > 3 and VALUE[2] in ['.',','] -%}
            {%- set VALUE = VALUE|float(default=0)|round(0) -%}
          {%- endif -%}
          {{ VALUE|string|list|join(' ') }}
        value_template: ok
        attribute_templates: &ref_attr_1
          latitude: -25.100481554029
          longitude: -129.37401816254

      test_map_markers_with_values_2:
        friendly_name_template: *ref_friendly_name_template
        value_template: ok
        attribute_templates: &ref_attr_2
          latitude: 25.100481554029
          longitude: 129.37401816254

      test_map_markers_with_values_3:
        friendly_name_template: *ref_friendly_name_template
        value_template: ok
        attribute_templates: &ref_attr_3
          latitude: -5.100481554029
          longitude: -9.37401816254

      ##########################################################

      test_map_markers_with_values_4:
        value_template: ok
        attribute_templates: *ref_attr_1

      test_map_markers_with_values_5:
        value_template: ok
        attribute_templates: *ref_attr_2

      test_map_markers_with_values_6:
        value_template: ok
        attribute_templates: *ref_attr_3

card

type: vertical-stack
cards:
  - type: entities
    entities:
      - entity: input_number.test_map_markers_with_values_1
        name: value 1
      - entity: input_number.test_map_markers_with_values_2
        name: value 2
      - entity: input_number.test_map_markers_with_values_3
        name: value 3
  - type: map
    title: friendly_name
    entities:
      - entity: sensor.test_map_markers_with_values_1
      - entity: sensor.test_map_markers_with_values_2
      - entity: sensor.test_map_markers_with_values_3
  - type: map
    title: card-mod
    entities:
      - entity: sensor.test_map_markers_with_values_4
      - entity: sensor.test_map_markers_with_values_5
      - entity: sensor.test_map_markers_with_values_6
    card_mod:
      style:
        ha-map:
          $:
            .leaflet-marker-icon:
              ha-entity-marker[entity-id='sensor.test_map_markers_with_values_4'] $: |
                .marker {
                  font-size: 0px !important;
                 }
                 .marker::after {
                   content: "{{states('input_number.test_map_markers_with_values_1')}}";
                   font-size: 15px !important;
                 }
              ha-entity-marker[entity-id='sensor.test_map_markers_with_values_5'] $: |
                .marker {
                  font-size: 0px !important;
                 }
                 .marker::after {
                   content: "{{states('input_number.test_map_markers_with_values_2')}}";
                   font-size: 15px !important;
                 }
              ha-entity-marker[entity-id='sensor.test_map_markers_with_values_6'] $: |
                .marker {
                  font-size: 0px !important;
                 }
                 .marker::after {
                   content: "{{states('input_number.test_map_markers_with_values_3')}}";
                   font-size: 15px !important;
                 }

Update 15.10.23: this mod is not needed since 2023.10 - a possibility of displaying states was added (discussion, PR)

Ildar_Gabdullin · September 16, 2023, 4:46pm

Hope this PR will be merged!

github.com/home-assistant/frontend

Add new config options for map entity markers

home-assistant:dev ← karwosts:map-marker-options

opened 04:07PM - 16 Sep 23 UTC

karwosts

+52 -28

## Proposed change Propose some new config options per-entity in map card: * `label_mode` - when set to `state`, renders the entity's state as the label for the map marker instead of the entity's name. Allows to build interesting data visualization on top of a map. Possibly for things like: a map of gas prices at nearby gas stations, displaying the next time a bus arrives at select bus stops, or air quality readings at various neighborhood weather stations, etc. * `name` - allows to override the name of the marker. In case something is preferred other than the 3-letter initials of entity name. Possibly multiple markers have a name that alias to the same initial and want to differentiate them, or user want to display something else entirely. ![image](https://github.com/home-assistant/frontend/assets/32912880/4ff6a3c9-301c-4988-91fa-a9f68f15a378) ## Type of change  - [ ] Dependency upgrade - [ ] Bugfix (non-breaking change which fixes an issue) - [x] 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  ```yaml ``` ## Additional information  - This PR fixes or closes issue: fixes # - This PR is related to issue or discussion: - Link to documentation pull request: ## Checklist  - [x] The code change is tested and works locally. - [x] 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][docs-repository]  [docs-repository]: https://github.com/home-assistant/home-assistant.io

ncd · September 16, 2023, 6:12pm

wow so nice!! hope it gets merged!

dproffer · September 16, 2023, 11:35pm

I’m not sure if this will help you or not. A while back, I wanted to map a series of ‘events’ on the Home Assistant Map element from a GeoJSON feed. I am using a subset of the code in the link below. I did not implement the complete code in this repository as it was pretty complex within HA’s custom components function and the HA Map element still seemed to only show a rather strange subset of the data in the GeoJSON feed. I came up with a pretty hillbilly tech hack to set the first three characters of the ‘friendly_name’ to be something somewhat useful. As you have seen, the map displays the first letter of the first three words in the ‘friendly_name’, strange implementation IMHO. If you float over an entity on the Map element you can full ‘friendly_name’ that is generated by the geoJSON entity however. I too hope the referenced PR to improve the Map element moves forward. Or if you are adventurous, the code below might give you some options. Good hunting!

Zarox666 · September 18, 2023, 6:58pm

Wow! I am very much impressed!
But it think the stable, reliable, technical sound solution would be to implement this feature into the map card. So I dearly hope this gets implemented.

In the meantime I found Deutschland-Tankkarte in Echtzeit and could make them offer an iframe snippet on top of the JavaScript Snippet that was the only option before.
Aparently making them change their Website is easier than getting a new feature into HA lol

vingerha · October 7, 2023, 12:55pm

You have probably seen that with 2023.10 this is now feasible in the card itself

Zarox666 · October 11, 2023, 1:31pm

Yes I did, but as I wrote I found another solution before 2023.10 got released