nathan-gs/ha-map-card

A Map Card for Home Assistant

ha-map-card's Issues

Longer term history options

Open question on potential approaches to making use of longer term location history data within the map card.

By default Home Assistant keeps state history for 10 days, which is what is currently used to drive the card. Unlike energy data, location information doesn't currently get populated into the long term statistics database, meaning once the limit is hit, the data ceases to be.

While you can increase the time stored via setting the recorders purge_keep_days, this has the downside of slowing down HA as a whole.

I would be interested to know if anyone has looked at any other options, and whether it'd be viable to integrate with the card. Two key things i've looked at so far are;

• There are a few open HA feature requests around allowing the retention period to be configured per entity. This would be the simplest option in terms of making the use of the data in the card, but doesn't seem to have gained much wider interest, https://community.home-assistant.io/t/recorder-retention-period-by-entity/267849
• Shipping the data out to influxdb ( https://www.home-assistant.io/integrations/influxdb/ ). This is a great solution to storing the data, but I don't think there is currently anyway for a frontend card to read this data back in on behalf of an entity. Custom states can potentially be setup re: https://www.home-assistant.io/integrations/influxdb/#sensor, but i suspect that would be pretty manual.

Interested to hear what others are doing, if there are any other integrations that could potentially cover this.

Relicense to Apache 2.0

@Manuel-Materazzo would you be OK if we relicensed to Apache 2.0 (instead of MIT) to make it easier to incorporate code from the Home Assistant frontend project?

FR: Allow other entities to be drawn when some are unknown/unavailable

e.g. by moving a couple foreach outside relevant try
I'd suggest still however printing the error indication in such situation

Regression: 10.0 broke setting size of icon

Should we bundle HA provided dependencies?

Currently we include leaflet and lit in our generated map-card.js, I wonder if it would be better to leave them out given HomeAssistant provides these anyway.

WDYT @thybag?

Bug: History not visible

I had history working in version 0.12.0. This is the first time that history stared working for me. I weren't able to see it before with the same configuration. I updated my map card to v1.0.1 and now the history is also gone. I then reverted to the version I had before, uploaded the JS I has a backup form v0.12.0, uninstalled it completely, reinstalled it, reloaded HA a bunch of times and still nothing.

Could you please tell me how I can debug this to help find where is the problem is? I had also quite some time problems that the entity icon was not visible until I refreshed my browser. This now works fine with all version from 0.12.0 but the history track is somehow gone. I also tested on multiple browsers and devices.

And thank you for this card. It's exactly what I was missing from the stock map card. I really hope I can get it to show history.

debug: true triggers error

HaMapUtilities is not defined

See screenshot:

@thybag

[FR] Add support for hours_to_show

The regular map card has a nice feature in the hours_to_show parameter which adds a trail of previous locations.

[FR] Support an adaptive auto-size in a panel view layout

Currently a user can define a size of a card by card_size option.
In a Panel view layout by default a card may occupy only a small part of available area:

To fit a map to a view, a user has to define a value of card_size dependently on a particular viewport (which can be different o different clients).
Suggest to add a special value for card_size to force the card to occupy a whole available area.

Add "Discussions"

Not a bug/FR - just a kind request to add a "Discussions" section.
This is a too great card, it is surely need to be discussed)))

History: make dots vs lines configurable

Any chance to get an option to turn off the history point "dots" and keep only the line in between? When moving in a small area, the dots fill the area rather rapidly.

Originally posted by @Hiekkaharju in #8 (comment)

Cannot zoom in like on a stock map card

Compare these cards - ha-map (left) & stock map (right):

Same building; on the left card I cannot zoom in more.
Seems to be using same OpenStreetMap.
Are there any limitations for zooming?

Map is not shown if zero coords are set

Consider this code:

type: vertical-stack
cards:
  - type: custom:map-card
    x: 10
    y: 10
  - type: custom:map-card
    x: 0
    y: 0

The 2nd card with zero coords not shown:

Have to add some digits after a point:

  - type: custom:map-card
    x: 0.001
    y: 0.001

(map is zoomed to demonstrate a correct location)

0.4.0
HA 2024.3.1
Chrome 123.0.6312.59 (Win10x64)

"y" option is automatically placed in quotes after reopening HA editor

Open HA Editor & paste this code:

type: custom:map-card
x: 10
y: 10

Then save.
Works fine:

Reopen the HA Editor.
Now the y option is shown in quotes:

Guess a similar behaviour is demonstrated in Readme:

0.4.0
HA 2024.3.1
Chrome 123.0.6312.59 (Win10x64)

Error found in first run, check Console

I see the message "Error found in first run, check Console" where the attributions listed, but I have looked in the logs and dont see anything related to this, even with debug: true in the card

Can't zoom enough

Even native HA map allows more zoom. Ideally I'd like to have even more, as I'm tracking lawn mower and what to know precisely where it is on my lawn.

Version info in console may be shown several times

In a storage mode:
Add one map card on a view - then the version info is shown once:

Open HA Editor - one more message is logged:

In case of two cards - two messages are logged:

---

In yaml mode:

If a view contains 1 card - 2 messages are logged:

If 3 cards - 6 messages:

---

Probably the map-card adds this message to the console on every creation (sorry for a probably wrong term).
Other custom cards (not tested ALL them, honestly) add messages after "loading" (again could use a wrong word).
Check this empty view - the console shows some (not sure about ALL) custom cards:

[FR] Log a version info in a browser's console

Sorry if I named it in a wrong way - I mean these messages:

Custom cards usually post their version info.
It helps users to see which version was loaded (also to avoid loading an old cached version).

History: do auto discovery of associated device_trackers and show history for these.

HACS: Error: <Plugin nathan-gs/ha-map-card> Repository structure for v1.0.0 is not compliant

Since moving repo structure (and no longer using dist), the error:
Error: <Plugin nathan-gs/ha-map-card> Repository structure for v1.0.0 is not compliant by hacs validation check is thrown.

FR: allow exploring # past hours of history

I actually tried doing this with https://github.com/iantrich/config-template-card and an input_number, but the way the template card draws the card "inside" it prevents this card from drawing anything else than the map (it always draws the card from scratch, only a single render() during lifetime of one card instance).
I considered an FR about the way this card is drawn but abandoned it.
Now inspired by the date explore capability by @thybag I suggest similar functionality for exploring # past hours.
E.g. if pastHoursHistoryEntity is set and points to an entity that returns a number, consider it as if

history_start: # hours ago
history_end: now 

were defined and # is the number returned by the entity.
This could be both on card and entity levels.

Card is empty after a browser's page reload (F5) in a "yaml-mode" dashboard

I started observing a very strange glitch:

1. Add a card to a yaml-mode view:

title: test-2
path: test-2
cards:

  - type: custom:map-card
    x: 10
    y: 10

2. Refresh a view page:

3. Card is shown, very good.
4. Reload a browser's page (F5 in Chrome).
5. Card is shown as empty:

There is a message in a console:
map-card.js?hacstag=734825457050:169 Uncaught TypeError: Cannot read properties of undefined (reading 'getContainer')
at ResizeObserver.

In a "storage-mode" dashboard - I see no glitches, the card is shown after F5:

HA 2024.3.1
card 0.5.0
Chrome 123.0.6312.59 + Win10
same in FF

[FR] Support new "--ha-marker-border-radius" variable

With a recent PR home-assistant/frontend#20914 a new --ha-marker-border-radius variable was added:
https://github.com/home-assistant/frontend/blob/42b5fa696a8be5bac70e11bb959b0880d1dfd691/src/components/map/ha-entity-marker.ts#L51

Please add a support of this variable here:

ha-map-card/src/components/MapCardEntityMarker.js

Line 66 in 0ca1ddc

border-radius: 50%;

This will allow this presentation:

“size” and “color” entity attributes do not affect icon display

When using “display: icon” for entities, the “size” and “color” attributes do not apply to the icon, only to the circle around the icon. I would expect this would change the size and color of the icon itself, or at least I would like a way to do that even if it’s a different attribute like “icon_size”.

Example YAML:

type: custom:map-card
entities:
  - entity: geo_location.lightning_strike_6ab35004ddee42cea27ed40b8568a710
    display: icon
    size: 6
    color: Yellow
  - entity: geo_location.lightning_strike_81cb982332524bc092e7c25b3dbd9b27
    display: icon
    size: 100
    color: Red

Example result:

The color only affects the circle around the displayed entity, and the size affects the size of the circle.

Also, for “display: icon” I would prefer no circle at all, or at least a way to remove it (which I can do now by using a very small “size”)

Thanks!

does not draw lines or dots when new coordinates arrive

I'm not sure if this is a regression, some issue with my setup or was it like this from the beginning history feature.
When the card is drawn, history is also usually drawn according to history_draw nad history_show options. But then when new cordinates arrive, the marker moves but no line or dots appear.
tested version 0.7.1

Automatically show the map with the full history in view

          As in include the visible location history within the bounds? 

That sounds like nice idea, although have to work out best way to get all the history data into a L.FeatureGroup as currently they are on separate layers (unsure if u can just put featureGroups in other featureGroups which would be ideal. ). I do like the idea of map rezooming as history data updates too, which would hopefully be pretty easy to add on top of the above.

Originally posted by @thybag in #66 (comment)

[FR] Make height set automatically to get a square card

Consider the code:

type: custom:map-card
entities:
  - entity: zone.home
card_size: 8.65

A value for card_size was defined to make the card looking square - like a stock map card:

On that picture:

• ha-map card with a default card_size;
• ha-map card with card_size: 8.65;
• stock map card.

After resizing the window:

A height of ha-map card is ~452px and it seems to be constant:

ha-map-card/src/configs/MapConfig.js

Line 122 in e72bfb1

get mapHeight() {

Is it possible to provide smth like

card_size: auto

possible value (and may be even make it a default value) to set "height = width" to get a square card?
Ofc a "title is defined" case should be considered as well.

[FR] Advanced formatting for a marker

Here is a default look for a person entity:

Note that a marker has a circle shape (caused by box-radius: 50%).
But what if I need to show a phone?
Does not look nice:

So, 1st idea - allow to customize box-radius.
Assume we got rid of that circle shape by CSS:

And now we do not like a background of the marker - so we are using a PNG image with a transparent background.
But it anyway does not look cool - because of an own marker's background.
This can be fixed by CSS as well:

Finally, we can remove a border:

Suggestion:
Add a NEW option - style_marker.
This option can be defined as a dictionary:

style_marker:
  xxx: xxx
  xxx: xxx
  xxx: xxx

where "xxx: xxx" - CSS styles which should be set directly to a marker.
Imho we should allow a user to define ANY set of styles here - they are just passed to a marker "as is".

By default this option style_marker is optional.
It should be defined both per-card & per-entity:

type: custom:map-card
entities:
  - entity: ...
    style_marker:
      ...
  - entity: ...
  - entity: ...
    style_marker:
      ...
style_marker:
  ...

If defined per-card - then the style_marker option is for all markers, unless it is overridden by a style_marker option for a particular marker.

does not always draw trackers and history

there is some issue with initial drawing, In some cases, at least right after dashboard edit, no indication of any trackers or history is drawn. On a browser e.g. f5 refresh fixes this.
Apparently -on android companion app- also just dashboard tab change from the view with the card to another and then back leaves the data undrawn. I'm not aware of any refresh that would fix, exept restarting whole HA companion app.

Sometimes state not rerendering when switching between pages

          I might have figured this out.

Adding
this.firstRenderWithMap = true;
to e.g. place where
this.map.remove();
is done, seems to fix the issue.

Originally posted by @Hiekkaharju in #29 (comment)

Custom CSS for markers

          For a stock map card I managed to fix alignment by

.marker:not(:has(.entity-picture)) {
      text-align: center;}

in an external js-file.

Originally posted by @ildar170975 in #17 (comment)

Dark Mode auto switch

Originally posted by @alexreddy78 in #8 (comment)

Auto switch to dark mode

Allow map to default to showing all Markers if no focus_entity or x/y is set.

I believe this should be doable by adding the markers to a L.FeatureGroup, then calling map.fitBounds(markerGroup.getBounds());

This way the default config will just cause the map to show everything tracked rather than focusing on the first entity.

Fixed position Entities from configuration

Instead of using the latitude & longitude attributes, retrieve the lat/long from the config (ideal to display state entities with a fixed location).

Not working for french geoservices?

Hi, I played around with the examples and really enjoyed that.
After a bit of digging into local options, I found this site
https://geoservices.ign.fr/services-geoplateforme-diffusion
There are 2 wms services, raster and vector and along the xml they both cover layer EPSG:27572
But neither of them show in the card...any idea why?

type: custom:map-card
zoom: 8
card_size: 6
wms:
  - url: >-
      https://data.geopf.fr/wms-v/ows?SERVICE=WMS&VERSION=1.3.0&REQUEST=GetCapabilities
    options:
      layers:
        - EPSG:27572
      format: image/png
tile_layer_url: https://basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}.png
entities:
  - entity: zone.home
    display: icon
    size: 50

"dev" branch

May be it does sense to create a dev branch? Then people may issue PRs and target the dev branch then.

Missing “recenter” button on map

On the stock map card, there is a “recenter” button that allows you to recenter to the original zoom and focus, in case the user has moved the map. Would it be possible to add a recenter button to the map, either as an optional configuration, or just always there?

Help for wms server from vlaanderen.be

Very good job Nathan. Easy to use and fast to load. Thank you.

This one is working:

type: custom:map-card
title: Ferraris 1777
zoom: 16
card_size: 10
wms:
  - url: >-
      https://geoservices.wallonie.be/arcgis/services/CARTES_ANCIENNES/FERRARIS/MapServer/WmsServer
    options:
      layers: 0
      transparent: true
      format: image/png
      opacity: 0.7
      tiled: true
      attribution: <a href="http://geoportail.wallonie.be/">wallonie.be</a>
tile_layer_url: https://basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}.png
tile_layer_attribution: >-
  &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>,
  &copy; <a href="https://carto.com/attributions">CARTO</a>
entities:
  - entity: zone.car

in my QGis it is working like this

Name	WAL 1777 Ferraris
URL	https://geoservices.wallonie.be/arcgis/services/CARTES_ANCIENNES/FERRARIS/MapServer/WmsServer
Source	crs=EPSG:3857&dpiMode=7&format=image/png&layers=0&styles&url=https://geoservices.wallonie.be/arcgis/services/CARTES_ANCIENNES/FERRARIS/MapServer/WmsServer
Provider	wms

But I can't get the same histocal map from vlaanderen.be to work.
It is working in my QGis like this

Name	VLG 1777 Ferraris
URL	https://geo.api.vlaanderen.be/HISTCART/wmts
Source	crs=EPSG:4326&dpiMode=7&format=image/png&layers=ferraris&styles=&tileMatrixSet=WGS84VL&url=https://geo.api.vlaanderen.be/HISTCART/wmts
Provider	wms

Any idea ? maybe wmts ?

geo_location_sources

Hi,
I use classic map-card to show lighting impacts from Blitzordnung with this code :

type: map
entities:

• entity: zone.home
  **geo_location_sources:
• blitzortung**

Is it possible to add something like "geo_location_sources" in ha-map-card ?

Custom element doesn't exist: map-card.

A very good idea, Nathan, but for now, I can't get the map.

Pi4
Core 2024.2.3
Supervisor 2024.02.0
Operating System 11.5
Frontend 20240207.1

Does not exist in HACS

Downloaded button-card.js in www folder

In my lovelace:

resources:
  - url: /local/community/button-card/button-card.js
    type: module
  - url: /local/community/lovelace-mushroom/mushroom.js
    type: module
  - url: /hacsfiles/lovelace-auto-entities/auto-entities.js
    type: module
  - url: /local/map-card.js
    type: module

type: custom:map-card
zoom: 8
card_size: 6
wms:
...

Custom element doesn't exist: map-card.

Custom tap actions

roydestroy:

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

https://community.home-assistant.io/t/map-card-a-slightly-improved-map-card/693088/7

HACS

Plan to bring it into HACS?

History Markers Not SHowing

Here is my working config for the regular map

type: map
entities:
  - entity: device_tracker.archies_iphone
default_zoom: 15
hours_to_show: 24
theme_mode: light

For some reason when I try to create via this addon it doesn't show the markers. Any idea why?

type: custom:map-card
entities:
  - entity: device_tracker.archies_iphone
zoom: 15
card_size: 10
history_start: 24 hours ago

Variable opacity based on time from history_end

Native HA map card plots points & connecting lines in history with increasing opacity over time [inversely] such that more recent points/path are darker (see below)

I can't find a way to (dynamically) adjust the opacity in ha-map-card [can use a fixed opacity for the entire path with history_line_color: rgba(255,0,255,0.6), for example]

Appears native HA map card creates "gradualOpacity" variable based on "pointIndex" & "opacityStep"

Is it possible to have this functionality in ha-map-card?

[NATIVE]

vs.
[HA-MAP-CARD]

Person entities do not show photo

When using person.NAME as entity, the photo for the tracker does not now, instead just the first letter is displayed

entities:

• person.NAME

"history_end" bug with default value (was "history_start" relies on heuristics not available in Firefox)

Firefox can't parse "4 hours ago". It can parse absolute times I guess but I assume most people would need relative only.
Can you maybe implement boring hours_to_show as a fallback for Chrome-only history_start?

https://stackoverflow.com/questions/36015877/toisostring-not-working-in-firefox

type: custom:map-card
entities:
  - entity: device_tracker.openmower_position
    history_start: 24 hours ago
    history_show_dots: false
x: 56.5
'y': 23.3

TypeError: end.toISOString is not a function
    subscribe map-card.js:486
    setupHistory map-card.js:334
    render map-card.js:555
    render map-card.js:554
    update lit-element.js:219
    performUpdate updating-element.js:554
    _enqueueUpdate updating-element.js:507
    requestUpdateInternal updating-element.js:473
    set updating-element.js:203
    value hui-section.ts:107
    value hui-section.ts:105
    performUpdate reactive-element.ts:1329
    scheduleUpdate reactive-element.ts:1261
    _$Ej reactive-element.ts:1233
    requestUpdate reactive-element.ts:1208
    set reactive-element.ts:726
    value hui-view.ts:203
    value hui-view.ts:201
    performUpdate reactive-element.ts:1329
    scheduleUpdate reactive-element.ts:1261
    _$Ej reactive-element.ts:1233
    requestUpdate reactive-element.ts:1208
    set reactive-element.ts:726
    value hui-root.ts:513
    _$AE reactive-element.ts:1378
    performUpdate reactive-element.ts:1343
    scheduleUpdate reactive-element.ts:1261
    _$Ej reactive-element.ts:1233
    requestUpdate reactive-element.ts:1208
    set reactive-element.ts:726
    j lit-html.ts:1883
    _$AI lit-html.ts:1825
    v lit-html.ts:1192
    g lit-html.ts:1540
    _$AI lit-html.ts:1384
    z lit-html.ts:2183
    update lit-element.ts:165
    performUpdate reactive-element.ts:1329
    scheduleUpdate reactive-element.ts:1261
    _$Ej reactive-element.ts:1233
    requestUpdate reactive-element.ts:1208
    set reactive-element.ts:726
    value partial-panel-resolver.ts:101
    value hass-router-page.ts:91
    performUpdate reactive-element.ts:1329
    scheduleUpdate reactive-element.ts:1261
    _$Ej reactive-element.ts:1233
    requestUpdate reactive-element.ts:1208
    set reactive-element.ts:726
    j lit-html.ts:1883
    _$AI lit-html.ts:1825
    v lit-html.ts:1192
    g lit-html.ts:1540
    _$AI lit-html.ts:1384
    z lit-html.ts:2183
    update lit-element.ts:165
map-card.js:561:19
    render map-card.js:561
    update lit-element.js:219
    performUpdate updating-element.js:554
    _enqueueUpdate updating-element.js:507
    requestUpdateInternal updating-element.js:473
    set updating-element.js:203
    value hui-section.ts:107
    value hui-section.ts:105
    performUpdate reactive-element.ts:1329
    scheduleUpdate reactive-element.ts:1261
    _$Ej reactive-element.ts:1233
    requestUpdate reactive-element.ts:1208
    set reactive-element.ts:726
    value hui-view.ts:203
    value hui-view.ts:201
    performUpdate reactive-element.ts:1329
    scheduleUpdate reactive-element.ts:1261
    _$Ej reactive-element.ts:1233
    requestUpdate reactive-element.ts:1208
    set reactive-element.ts:726
    value hui-root.ts:513
    _$AE reactive-element.ts:1378
    performUpdate reactive-element.ts:1343
    scheduleUpdate reactive-element.ts:1261
    _$Ej reactive-element.ts:1233
    requestUpdate reactive-element.ts:1208
    set reactive-element.ts:726
    j lit-html.ts:1883
    _$AI lit-html.ts:1825
    v lit-html.ts:1192
    g lit-html.ts:1540
    _$AI lit-html.ts:1384
    z lit-html.ts:2183
    update lit-element.ts:165
    performUpdate reactive-element.ts:1329
    scheduleUpdate reactive-element.ts:1261
    _$Ej reactive-element.ts:1233
    requestUpdate reactive-element.ts:1208
    set reactive-element.ts:726
    value partial-panel-resolver.ts:101
    value hass-router-page.ts:91
    performUpdate reactive-element.ts:1329
    scheduleUpdate reactive-element.ts:1261
    _$Ej reactive-element.ts:1233
    requestUpdate reactive-element.ts:1208
    set reactive-element.ts:726
    j lit-html.ts:1883
    _$AI lit-html.ts:1825
    v lit-html.ts:1192
    g lit-html.ts:1540
    _$AI lit-html.ts:1384
    z lit-html.ts:2183
    update lit-element.ts:165

[FR] History/displaying a path

A stock map card allows to show a path if hours_to_show option is defined:

Also, it possible to see a time of a particular point in a tooltip:

Would be great to have these features in this custom card.
Otherwise this card may only be used to see a current position only.

History: for WMS & TileLayers

Building on PR #41 add this capability to WMS & TileLayers.

I think connecting the WMS/Tilelayers up to the date change events would be reasonably straight forwards. As you said, suspect it may be better placed in its own PR, but if you have any recommendations on public WMS/TileLayers with history support i could have a play with, I'd be up for having a go. I assume potentially it'd just be passing a time option via WMSTileOptions or similar.

Originally posted by @thybag in #41 (comment)

Let's do this in a seperate PR!

For WMS layers, it's often just a parameter (almost always called time or timestamp) formatted as a YYYY-MM-DDTHH:MM:SSZ:

Take a look at the GetCapabilities of the IRCELINE WMS maps:
https://geo.irceline.be/rio/wms?service=wms&version=1.3.0&request=GetCapabilities
you see there's a Dimensiion named time.

Originally posted by @nathan-gs in #41 (comment)

FR: Set tile_layers options with template or from entity state

I am trying to use the Rain viewer API to render a rain radar overlay. The URL has a {time} field. Would it be possible to get the value for an option from a template or an entity (eg, input_number) and re-render the map smoothly when the value changes (eg, cycling over the last 5 snapshots)?

Currently testing this sort of thing with a custom:button-card to add the templating ability. It works, but the map is re-drawn every time the value changes, causing my location markers to pop out and then in as well.

[FR] Add a possibility to show states

The stock map card allows to see a state instead of some icon/avatar:

This allows to see values like:

Would be great to have a similar option in this card as well.