nathan-gs/ha-map-card

A Map Card for Home Assistant

Home Assistant Map Card

Take a look at the blog post introducing the custom:map-card for Home Assistant.

WARNING

This is still very early alpha quality.

Installation

Manual

1. Copy map-card.js to your /var/lib/hass/www folder.
2. Click on Edit Dashboard, Manage resources add /local/map-card.js as JavaScript Module.

HACS

TIP

The PR to add this to the default HACS repo is still open: hacs/default#2377

Follow the instructions to add a HACS Custom Repository.

Usage

TIP

Home Assistant contains a native map feature, if you don't need advanced features like WMS layers it might be a better choice.

Minimal

type: custom:map-card
x: 51.23
y: 3.652

More advanced

TIP

Take a look at: https://nathan.gs/2024/01/06/ha-map-card-a-new-and-alternative-leaflet-based-map/#a-more-advanced-example-measuring-pm25-air-quality-for-my-home

Options

name	Default	note
x		Longitude
y		Latitude
focus_entity		Entity to focus on (instead of X & Y)
title		If empty, don't show a title
zoom	12	The zoom level
card_size	5	The Home Assistant card size
entities	[]	Array of entities, will be listed as markers
wms	[]	WMS Layers, an array of WMS see below
tile_layers	[]	Tile Layers, an array of Tile Layers see below
tile_layer_url	https://tile.openstreetmap.org/{z}/{x}/{y}.png	Override the default map source
tile_layer_attribution	&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>	Set the correct map attribution
tile_layer_options	{}	The options for the default TileLayer

If x & y or focus_entity is not set it will take the lat/long from the first entity.

Entity options

Either the name of the entity or:

name	Default	note
entity		The entity id
display	marker	icon, state or marker. marker will display the picture if available
size	24	Size of the icon (not supported for marker)
history_start		Examples: 2022-03-01T12:00:00Z, 5 hours ago
history_end	now	Examples: 2022-03-01T18:00:00Z, 2 hours ago, now
history_line_color	Random Color	Can defined as red, rgb(255,0,0), rgba(255,0,0,0.1), #ff0000, var(--red-color)
history_show_lines	true	Show the path
history_show_dots	true	Show little dots on the path
css	text-align: center; font-size: 60%;	CSS for the marker (only for state and marker)
fixed_x		Display a fixed marker, this will ignore the latitude/longitude attributes
fixed_y		Display a fixed marker, this will ignore the latitude/longitude attributes
fallback_x		If the latitude/longitude is missing, use these fixed attributes
fallback_y		If the latitude/longitude is missing, use these fixed attributes

If history_start & history_end are set the card will display a line with all the previous locations (a track) for a particular entity.

WMS and tile_layers options

name	note
url	The url of the layer
options	The leaflet layer WMS options or Tile Layer options

Extra Tile Layers

The leaflet-extras has a nice list of available tile layer providers.

Mentions & Discussions

• home-assistant community: map-card: a slightly improved map-card, this topic should be used for general discussions.
• nathan.gs: Map Card, a new leaflet based map with WMS and other advanced features
• nathan.gs: Map Card, displaying Weather and Other Tile Layers

ha-map-card's Issues

[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.

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

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)

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)

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)

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

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.

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

[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: 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)

HACS

Plan to bring it into HACS?

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] 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.

Dark Mode auto switch

Originally posted by @alexreddy78 in #8 (comment)

Auto switch to dark mode

"dev" branch

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

[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.

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

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.

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:

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: do auto discovery of associated device_trackers and show history for these.

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)))

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

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 ?

"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)

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).

[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.