I created a small map-card to take advantage of certain advanced Leaflet features:
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:
Very interesting & useful card with a rich functionality, started testing it.
Thanks a lot for efforts!
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!
Panel card is now possible in v0.6.0
