Map-card: a slightly improved map-card

nathan.gs · January 13, 2025, 7:58pm

@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

nathan.gs · January 20, 2025, 4:39pm

@mdijkens @neojudgment it should be fixed in v1.12.0.

neojudgment · January 21, 2025, 1:56pm

Hi Nathan,

I did the update and everything seems to work!

If I see a problem I will send you a feedback

Thank you very much Nathan.

Pascal

Bikey · January 21, 2025, 9:21pm

I’m not sure if this is related or I’m doing something wrong, but the icon does update but moves out of the window.
This is my configuration:

ype: custom:map-card
history_start: 12 hours ago
card_size: 10
zoom: 16
maxZoom: 20
focus_entity: device_tracker.tesla_location
follow_focus: refocus
entities:
  - entity: device_tracker.tesla_location
    size: 40
    color: purple
    history_show_dots: false
    gradual_opacity: 1.4
    display: icon
    history_line_color: green

Also (first time user of the card): can I change the width of the card?
If I increase the size anything above card_size=5 it only increases the hight.

nathan.gs · January 22, 2025, 8:01pm

That config looks good, can you share a screenshot of when it moves outside of the map? The follow_focus: refocus should prevent that.

Bikey · January 22, 2025, 9:23pm

Don’t have a screenshot right now, but what you basically would see is the map centered on the position where the car was when the page was refreshed (manually) for the last time, with the track going outside of the window to the actual position of the car.

I’m on the latest version of HomeAssistant 2025.1.3 using Map Card v1.12.0.
Cleared cache and tried on Safari, Firefox and Edge.

To be fully accurate this my full config currently:


type: custom:map-card
history_start: 12 hours ago
card_size: 6
zoom: 16
maxZoom: 20
focus_entity: device_tracker.tesla_location
follow_focus: refocus
entities:
  - entity: device_tracker.tesla_location
    size: 40
    color: purple
    history_show_dots: false
    gradual_opacity: 1.4
    display: icon
    history_line_color: purple
  - entity: zone.work
    display: icon
    color: green
    size: 30
    focus_on_fit: false
  - entity: zone.home
    display: icon
    size: 30
    focus_on_fit: false

nathan.gs · January 24, 2025, 5:52pm

Your device_tracker.tesla_location also needs the focus_on_fit: true.

Bikey · January 26, 2025, 11:15am

That doesn’t make a difference unfortunately. I read in the documentation that it is " true" by default anyway?

So I now have this configuration that is only updating the viewport when manually refreshing the browser (I removed the other entities to be sure they don’t interfere).

type: custom:map-card
history_start: 12 hours ago
card_size: 6
zoom: 18
maxZoom: 20
focus_entity: device_tracker.tesla_location
follow_focus: refocus
entities:
  - entity: device_tracker.tesla_location
    focus_on_fit: true
    size: 40
    color: purple
    history_show_dots: false
    gradual_opacity: 1.4
    display: icon
    history_line_color: purple

Bikey · January 26, 2025, 11:32am

As said, this does not work unfortunately.
But what is the difference between the working of:
follow_focus: refocus and
follow_focus: contains
(none of these seem to have effect).

nathan.gs · January 26, 2025, 12:39pm

Very stupid error in the docs:
It needs to be:
focus_follow: refocus not follow_focus

Will make an update to the docs…!

nathan.gs · January 26, 2025, 1:26pm

Adjust your config @Bikey, fixed the README in v1.13.1

santiniuk · January 26, 2025, 6:38pm

Just to comment on this question. I also find this.
I manually add the lines below to my card and it gives me a full view. (Using the sections layout method).

grid_options:
  columns: 45
  rows: 12

nathan.gs · January 27, 2025, 7:33pm

@santiniuk that might be a nice thing for the README, do you want to create a github PR for that?

Ildar_Gabdullin · January 27, 2025, 7:54pm

If a “full view” is same as “show for a whole screen”:
then just define “columns: full” like here:

type: custom:map-card
entities: ...
grid_options:
  columns: full
  rows: 8

but a value for “rows” depends on a particular viewport.

Another question is - WTH using sections instead of a Panel view?

schford · February 7, 2025, 11:40am

So I am trying to get my mower to show on a GPS Map. Plugin installed ok and working well with default openmap.

Browse layers and find one I like - Leaflet Provider Demo

var Stadia_AlidadeSatellite = L.tileLayer('https://tiles.stadiamaps.com/tiles/alidade_satellite/{z}/{x}/{y}{r}.{ext}', {
	minZoom: 0,
	maxZoom: 20,
	attribution: '&copy; CNES, Distribution Airbus DS, © Airbus DS, © PlanetObserver (Contains Copernicus Data) | &copy; <a href="https://www.stadiamaps.com/" target="_blank">Stadia Maps</a> &copy; <a href="https://openmaptiles.org/" target="_blank">OpenMapTiles</a> &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
	ext: 'jpg'
});

I think I have set this up right

type: custom:map-card
history_start: 24 hours ago
entities:
  - device_tracker.luba_vs7a22mp_luba_vs7a22mp
tile_layer_options:
  maxZoom: 20
grid_options:
  columns: 48
  rows: 16
tile_layer_url: https://tiles-eu.stadiamaps.com/tiles/alidade_satellite/{z}/{x}/{y}{r}.jpg
tile_layer_attribution: >-
  &copy; CNES, Distribution Airbus DS, &copy; Airbus DS, &copy; PlanetObserver
  (Contains Copernicus Data) | &copy; <a href="https://stadiamaps.com/"
  target="_blank">Stadia Maps</a> &copy; <a href="https://openmaptiles.org/"
  target="_blank">OpenMapTiles</a> &copy; <a
  href="https://www.openstreetmap.org/copyright"
  target="_blank">OpenStreetMap</a>

however I get an invalid authenticaion error

Any one got any ideas?

cheers!

nathan.gs · February 7, 2025, 12:08pm

A 401 and the message Invalid Authentication probably points to an issue with authentication. Probably you need to add a key (api_key as option) Authentication - Stadia Maps Documentation

schford · February 7, 2025, 12:47pm

Thanks have generated one - now to try and work out how to add it!

cheers

Stuart

PS If anyone has any ideas for a better satnav option I am all ears.

nathan.gs · February 7, 2025, 12:52pm

Something like this:

tile_layer_options:
   api_key: KEY
tile_layer_url: https://tiles-eu.stadiamaps.com/tiles/alidade_satellite/{z}/{x}/{y}{r}.jpg?api_key={apikey}

schford · February 7, 2025, 12:59pm

Works great thanks! Although the satellite picture is slightly off, more things to learn on how to correct it.

iamdabe · February 12, 2025, 10:39am

I just want to take a moment to say thanks to @nathan.gs for developing this. The card is exactly what I was looking for.

The date selection is amazing. Obviously my recorder only goes back so far (which I’m thinking about increasing just for my device tracking entities) or if anyone knows how to have them logged into long term stats let me know!.

Living in France the default map isn’t too my liking, luckily the government has a great map portal that checks all my boxes (yaml below)

type: custom:map-card
zoom: 13
history_start: 24 hours ago
focus_entity: device_tracker.niro_ev_19_location
tile_layer_url: >-
  https://data.geopf.fr/wmts?REQUEST=GetTile&SERVICE=WMTS&VERSION=1.0.0&STYLE=normal&TILEMATRIXSET=PM&FORMAT=image/png&LAYER=GEOGRAPHICALGRIDSYSTEMS.PLANIGNV2&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}'
entities:
  - entity: device_tracker.niro_ev_19_location
    color: "#16335c"