Map-card: a slightly improved map-card

It seems I have the latest version of HACS and the october version of HASS core. But still get the repository structure for v1.6.1 not compliant.

I personally do not use HACS, there was an issue logged:

But it resolved itself after running the HACS validate check weekly + on commit, the output of the check can be found here:

I’m trying to add it to the HACS repo, but that request remains dormant for a very long time:

So it should resolve itself over time? Or I need to do something?

I’m running now the HACS Validate checks daily, hope it works now! Thanks

Works yeah, thanks!

1 Like

History feature is really cool. How do I increase the location logging rate, probably in the companion app?

Also how to avoid connecting the “dots” in an inproper way, for example if travelling with car and I guess the location logging rate is too low it connects the dots in an “unnatural” way.

Now gonna try to set up Copernicus satellite tiles, is it possible to set a custom refresh rate so that the api doesn’t get flooded too much?

Thank you!

In the companion app you can edit this, but it will drain your battery faster.

The tiles only get loaded when you first load the map, or move the map, so generally not a big issue.

Hi, love the card!

I’m using it to display public mountain webcam locations on the map. Clicking on one icon will show the related webcam on my dashboard.

I would like to highlight the selected entity by changing its icon color, but I’m struggling with the templating.

I’ve tried using card_mod, but I can’t find the right attribute. Also, I’m assuming it would change the icon color for all entities, not just the selected one.

Any clues ? Thanks !

You can directly give it a color as an entity option: GitHub - nathan-gs/ha-map-card: A Map Card for Home Assistant (named color)

1 Like

Many thanks for the work on this card. Very useful.

After some guidance please.

I have the map card and a single slider helper on the same view.

I am using the code -

history_start:
  entity: input_number.hours_to_show_slider
  suffix: hours ago

I use the slider to show from 0 - 24 hrs history. It works but sometimes the card needs to be refreshed before the history lines update. Is there a way to always update the card when slider changes?

Also Is it possible to use a slider but use it so it always starts from midnight?
So sliding it always starts from midnight and I can use it to track one day history only.

Thanks !

Thanks, I read this part, but correct me if I am wrong, I cannot do any templating ? My wish is to base the color icon on a helper’s state, e.g the icon turn red if the Boolean is true.

This & much more things may be done by card-mod.

type: vertical-stack
cards:
  - type: entities
    entities:
      - entity: input_number.test_color_red
      - entity: input_number.test_color_green
      - entity: input_number.test_color_blue
  - type: custom:map-card
    entities:
      - entity: device_tracker.virtual_tracker_1
        display: icon
        icon: mdi:car
    card_mod:
      style:
        map-card-entity-marker $: |
          ha-icon {
            --icon-primary-color: rgb(
              {{states('input_number.test_color_red')|int(0)}},
              {{states('input_number.test_color_green')|int(0)}},
              {{states('input_number.test_color_blue')|int(0)}}
            ) !important;
          }

image

1 Like

How to hide private data

When we post a screenshot in Community or Github, it is desired to hide a private information like a position of your home & people’s avatars.
This can be done by card-mod:

type: custom:map-card
entities:
  - person.ildar
card_mod:
  style:
    map-card-entity-marker $: |
      .marker .entity-picture  {
        background-color: var(--card-background-color);
        background-image: url('/local/images/test/cat_avatar.png') !important;
        border: 1px solid var(--disabled-color);
      }
    .: |
      .leaflet-tile-pane {
        display: none;
      }

image

Add a “replacement” image (of course it should be a cat) to your images in “www” folder.

Similar (not same) can be used for a standard Map card:

        type: map
        entities:
          - person.ildar
        card_mod:
          style:
            ha-map $: |
              .leaflet-tile-pane {
                display: none !important;
              }
            ha-map $ ha-entity-marker $: |
              .marker .entity-picture  {
                background-color: var(--card-background-color);
                background-image: url('/local/images/test/cat_avatar.png') !important;
                border: 1px solid var(--disabled-color);
              }

image

I use this to track my car; works excellent!
One issue though; when new location comes in, the history line is updated, but the icon stays at initial location until I refresh the whole map

type: custom:map-card
history_date_selection: true
focus_entity: device_tracker.kit_location_tracker
zoom: 16
entities:
  - entity: device_tracker.kit_location_tracker
    use_base_entity_only: true
    display: icon
    icon: mdi:car-back
    size: 24
    history_show_lines: true
    history_show_dots: false
    color: '#03A9F4'
    gradual_opacity: 0.99

that sounds like a bug! Normally the main entity should move, although this relies on a hass tick, not through the websocket subscription being used for the history.

What happens if you wait for ~2 minutes?

Leaflet supports path, polyline, and polygon layers, in addition to wms. Is it possible for this card to plot polygons?

This is the data I’m looking to integrate:

I created a Github issue for this: Display Polygon/GeoJSON Layers from External sources · Issue #117 · nathan-gs/ha-map-card · GitHub

Hello everyone,

Same trouble here

css

1 Like

No matter how long I wait.
It will not update the icon whole day unless I refresh the page or switch to another page and back

1 Like

@mdijkens @neojudgment: added a new issue for this: Reload entity state & lat/long from Hass websocket subscription · Issue #120 · nathan-gs/ha-map-card · GitHub