custom:map-card with a CARTO and Weather layer Displaying a weather map in Home Assistant got easier using ha-map-card and it’s support for multiple Tile Layers. My open-source project nathan-gs/ha-map-card provides a lovelace card, serving as an enhancement to the native Home Assistant map-card, bringing a host of advanced features like custom tile layers, entity display options. It is built on leaflet.

In version 0.4.0 some new options are introduced to enable multiple Tile Layers, we are going to use this to visualize a Cloud map using OpenWeatherMap.

TIP

An earlier version was introduced in Home Assistant: Map Card, a new leaflet based map with WMS and other advanced features.

Obtaining an API key

OpenWeatherMap requires an API key, head to the api keys portal to obtain one.

Installation of map-card

See nathan-gs/ha-map-card#installation.

Creating the map

In Home Assistant add the custom:map-card, and give it following config.

1
2
3
4
5
6
7
8
9
10
11
12
13

type: custom:map-card
zoom: 8
card_size: 10
entities:
  - entity: zone.home
    display: icon
    size: 40
tile_layers:
  - url: >-
      https://tile.openweathermap.org/map/clouds_new/{z}/{x}/{y}.png?appid={apikey}
    options:
      attribution: <a href="https://openweathermap.org/">OpenWeatherMap</a>
      apikey: YOUR_API_KEY

We are using the OpenWeatherMaps Weather Map 1.0, to display the clouds. We can also display precipitation, pressure, wind and temperature. The service requires an api key, see line 10 and 13.

This results in the following map:

custom:map-card with a Weather layer

Unfortunately it’s a bit hard to read and there is no way to adjust the opacity in OpenWeatherMaps Maps 1.0 (there is in 2.0).

Selecting a darker base map

By selecting a darker base map (eg. Satellite) it will be easier to see the clouds forming. We are going to use the CARTO Dark Matter maps.

TIP

Leaflet Providers has a huge overview of usable base tile layers.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

type: custom:map-card
zoom: 8
card_size: 10
entities:
  - entity: zone.home
    display: icon
    size: 30
tile_layer_url: https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png
tile_layer_attribution: >-
  <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>
  contributors &copy; <a href="https://carto.com/attributions">CARTO</a>
tile_layers:
  - url: >-
      https://tile.openweathermap.org/map/clouds_new/{z}/{x}/{y}.png?appid={apikey}
    options:
      attribution: <a href="https://openweathermap.org/">OpenWeatherMap</a>
      apikey: YOUR_API_KEY

custom:map-card with a CARTO and Weather layer

Conclusion

Whether you’re a weather enthusiast, a smart home hobbyist, or simply someone who appreciates intuitive design, ha-map-card opens up a world of possibilities for visualizing data in your home automation setup. So why not take your dashboard to the next level and start exploring the weather and beyond with the ha-map-card today.