Map-card: a slightly improved map-card

I created a small map-card to take advantage of certain advanced Leaflet features:

  • WMS layers,
  • custom tile layers
  • displaying entities as icon or as marker

Of course if you don’t need any of these features, it’s better to stick with the official map-card.

with a more advanced example in my blog:

I also initially introduced it in:

4 Likes

Very interesting & useful card with a rich functionality, started testing it.
Thanks a lot for efforts!

1 Like

Tried to style the card by card-mod.

Sometimes styles are applied:

type: custom:map-card
x: 10
y: 10
card_size: 10
title: xxxx
card_mod:
  style:
    $: |
      .card-header {color: red !important;}

type: custom:map-card
x: 10
y: 10
card_size: 10
title: xxxx
card_mod:
  style: |
    ha-card {border-color: red !important;}

But sometimes - not applied.
Do not know who is a culprit here - card-mod or map-card.
Anyway, some simple styling may be done by defining CSS variables on a HIGHER level if you wrap the map-card into mod-card:

type: custom:mod-card
card:
  type: custom:map-card
  x: 10
  y: 10
  card_size: 10
  title: xxxx
card_mod:
  style: |
    ha-card {--primary-text-color: red !important;}

Theoretically, mod-card is not needed if the inner card (here - map-card) has it’s own “ha-card” element. But in this particular case mod-card it least provides a stable result.
Another example - going deeper to style a header (which was not working stable w/o mod-card, see the very 1st example above):

type: custom:mod-card
card:
  type: custom:map-card
  x: 10
  y: 10
  card_size: 10
  title: xxxx
card_mod:
  style:
    map-card $:
      .type-undefined $: |
        .card-header {color: red !important;}

Supporting themes - seems to be working OK.
Consider this simple custom theme (light mode only):

test_border:

  ha-card-border-width: 0px
  ha-card-border-radius: 4px
  ha-card-box-shadow:  0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12)

These changed CSS variables seem to be properly used:

Hey! Nice card!

I’d like to know if it’s possible to display the movement history of the people like in the original map card.

Thanks!

1 Like

not yet, @Ildar_Gabdullin created a ticket already (feel free to add your insights or PR):

1 Like

Panel card is now possible in v0.6.0

Nice card. Can I ask if it is possible to specify a tap action for the entities appearing on the map?

@nathan.gs I also love this card and would be interested in contributing some features in the future. I have a GIS background and love to dabble in web viz. It looks like you didn’t directly start from the HA map card code, but probably referenced it - do you have any opposition to me borrowing more code from the HA official map card to use in a future PR? (Thinking about the code for location history in particular)

Always happy with new collaboators @PhilipMathieu!

The history feature is a most-asked one!

Thx!

All, @PhilipMathieu, @roydestroy, @Quercus in v0.7.0 I added the history/path feature.

The latest release is now v0.10.0 which fixes missing pictures, tap actions not working for icons etc.

Is it now possible to have a custom tap action? For example tapping on an icon does not open the entity but a url instead? Thanks again!

Guess you need to register a FR with a detailed description on Github.