Map-card: a slightly improved map-card

An example of adding additional info like a speed on a map (from here):

412077293-87994f3e-0087-4498-881e-42fbcda6b86b

code
  - type: custom:map-card
    entities:
      - entity: device_tracker.virtual_tracker_1
      - entity: device_tracker.virtual_tracker_2
      - entity: device_tracker.virtual_tracker_3
    card_mod:
      style: |
        {% for ENTITY in config.entities -%}
        map-card-entity-marker[entity-id='{{ENTITY.entity}}']:after {
          content: "{{state_attr(ENTITY.entity, 'speed') | int(default=0)}} m/s";
          color: cyan;
          font-size: 12px;
          text-align: center;
          display: block;
          width: 64px;
          justify-self: center;
        }
        {%- endfor %}
2 Likes

This feature is now available since: v1.11.0 (but best to use the latest).

Good day.
Try use “custom:map-card”, “custom:auto-entities” with toggle and “energy-date-selection”.

If use:

type: custom:auto-entities
    card:
      type: map
    entities:
      - device_tracker.tracker1
    filter:
      template: |
        {% if states('input_boolean.toggle_other') == 'on' %}
          device_tracker.tracker2
        {% endif %}

switch toggle work fine - if ON the 2 tracker on map, if OFF only one tracker.

If use:

type: custom:map-card

switch toggle not working - only one tracker on map.

Please give advice to resolve my task.

Maybe an odd question but not being the specialist. In some cases, usually on the phone, my overlay map loads very slowly. Is it possible to store such a map locally and (say) update this at ones own pace?

Does the built-in map load faster? If so, use the CARTA url.

You could run a webserver on your phone, which hosts the tiles, but that’s likely a bigger challenge :slight_smile:

Yes it does, these are some maps from the French geoportail and sometimes this is fine, sometimes not (see for example post 80)
So I was thinking if I could get the map local in HA?

The built-in map is also just served from the web, you can just use the same url in the tile_layer_url. To serve it truly local you will need to host a copy of a map somewhere (or have a proxy).

to locally copy sounds a bit overly complex now … cost/effort vs. gain ratio is not good enough then :slight_smile:

Map card: show small pics for source device_trackers

code
type: custom:map-card
entities:
  - ...
card_mod:
  style: |
    {% for entity in config.entities -%}
      {%- set PERSON = entity -%}
      {%- set TRACKER = state_attr(PERSON,'source') -%}
      {%- set PICTURE = state_attr(TRACKER,'entity_picture') -%}
      {%- if PICTURE is not none -%}
        map-card-entity-marker[entity-id="{{entity}}"]:after {
          content: "";
          background: url({{PICTURE}});
          background-size: 100% 100%;
          left: 32px;
          bottom: 32px;
          position: absolute;
          width: 24px;
          height: 24px;
          border-radius: 50%;
          /* add if needed
          border: 1px solid var(--divider-color);
          */
        }
      {%- endif %}
    {%- endfor %}

Similar for a stock Map card.

1 Like

Is the tile url(s) loaded for every data point in the history?

I have added a button to my dashboard to toggle the history lines off and on by trying to use a template for the “history_show_lines” but it doesn’t work even after manually refreshing the browser window after each toggle of my button. The state of the input_boolean is definitely toggling between true and false after each click of my button. Any suggestions to toggle history_show_lines off and on?

type: custom:map-card
entities:
  - entity: device_tracker.pet_tracker
    circle:
      source: gps_accuracy
      color: green
    history_start: 1 hour ago
    history_show_lines: "{{ states('input_boolean.show_map_history') == 'on' }}"
    history_line_color: green
    color: green
tile_layer_url: >-
  https://mt1.google.com/vt/lyrs=s&x={x}&y={y}&z={z}&key=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
tile_layer_options:
  attribution: Google Satellite
  maxZoom: 20
  minZoom: 0

Templates are not supported unless it is EXPLICITLY said in docs.
Supporting templates in Frontend - a feature present for SOME cards only (btw, none of stock cards supports templates, except Markdown).

Ok, thanks. I wasn’t aware of that. I just assumed I wasn’t doing the template correctly.

Maybe as a workaround, I can use a conditional card to toggle between a map-card with history enabled and a different map-card with history disabled.

Or try this, there is also another one but both seem to do the same stuff

iantrich/config-template-card: :memo: Templatable Lovelace Configurations

1 Like

I tried that one. When I place the map-card inside of the config-template-card, it will not show the history lines even when I don’t try to template it. In other words, if I set history_show_lines explicitly to true, it doesn’t show the lines until I remove the config-template-card.

What is the other templatable card that you were referring to? I would like to see if it is compatible with custom:map-card.

The card-templater card located here works! It didn’t even require a browser page refresh like I thought it would. I am posting what worked for me in case anyone is interested:

type: custom:card-templater
card:
  type: custom:map-card
  entities:
    - entity: device_tracker.pet_tracker
      circle:
        source: gps_accuracy
        color: green
      history_start: 1 hour ago
      history_show_lines_template: "{{ is_state('input_boolean.show_map_history', 'on') }}"
      history_show_dots_template: "{{ is_state('input_boolean.show_map_history', 'on') }}"
      history_line_color: green
      color: green
  tile_layer_url: >-
    https://mt1.google.com/vt/lyrs=s&x={x}&y={y}&z={z}&key=xxxxxxxxxxxxxxxxxxxxx
  tile_layer_options:
    attribution: Google Satellite
    maxZoom: 20
    minZoom: 0
entities:
  - input_boolean.show_map_history
1 Like

Just one final note about templating. The templater card also allows you to template the entity. So, for example, you can choose from a drop down to switch from one tracker to the other. See below. I love this map-card. Thanks nathan.gs!

Or…have one overlay or another…or another… I have a list of 6

1 Like

Can you explain how that works? I do not know what you mean by overlay.

You create a helper ‘list’ and populate this with the parameter that is used to either add an overlay or change the whole chart…same as what you did above but then with the chart itself.

tile_layer_url: >-
  https://data.geopf.fr/wmts?REQUEST=GetTile&SERVICE=WMTS&VERSION=1.0.0&STYLE=normal&TILEMATRIXSET=PM&FORMAT=image/png&LAYER={{states('input_select.geoplatform_maps')}}&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}'

In this case I use multiple LAYER that are made available from data.geopf.fr and put them in the input_select…most effort is in finding out which are interesting and also which actually work :slight_smile:

1 Like