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.

Entities 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

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