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;}
Update 25.06.24: see no issues with card-mod in rev. 1.4.
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
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)
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.
Not possible yet, however should not be too hard to add.
You can add your insights and comments to this Github Issue: Custom tap actions · Issue #19 · nathan-gs/ha-map-card · GitHub
Since v1.4.0 it’s now possible to define custom tap actions.
Just discovered this and really appreciate it!
Does anyone else have an issue with the history always showing an extra line connecting a person entity’s latest coordinates to home? Maybe it’s just me misconfiguring something.
Post an image, the issue is unclear.
It’s my bad 
It resolved itself after the history time cleared. Must be just an issue when I first start the history.
Why does it take 30 seconds or longer to initially display the map? After the initial load, it’s very zippy. Is there some thing I can do to speed it up?
