diff --git a/src/common/dom/setup-leaflet-map.ts b/src/common/dom/setup-leaflet-map.ts
index bbbb03a104..d0532721a6 100644
--- a/src/common/dom/setup-leaflet-map.ts
+++ b/src/common/dom/setup-leaflet-map.ts
@@ -20,10 +20,19 @@ export const setupLeafletMap = async (
style.setAttribute("rel", "stylesheet");
mapElement.parentNode.appendChild(style);
map.setView([52.3731339, 4.8903147], 13);
- Leaflet.tileLayer(
+ createTileLayer(Leaflet, darkMode).addTo(map);
+
+ return [map, Leaflet];
+};
+
+export const createTileLayer = (
+ leaflet: LeafletModuleType,
+ darkMode: boolean
+) => {
+ return leaflet.tileLayer(
`https://{s}.basemaps.cartocdn.com/${
darkMode ? "dark_all" : "light_all"
- }/{z}/{x}/{y}${Leaflet.Browser.retina ? "@2x.png" : ".png"}`,
+ }/{z}/{x}/{y}${leaflet.Browser.retina ? "@2x.png" : ".png"}`,
{
attribution:
'© OpenStreetMap, © CARTO',
@@ -31,7 +40,5 @@ export const setupLeafletMap = async (
minZoom: 0,
maxZoom: 20,
}
- ).addTo(map);
-
- return [map, Leaflet];
+ );
};
diff --git a/src/panels/lovelace/cards/hui-map-card.ts b/src/panels/lovelace/cards/hui-map-card.ts
index 21541f48c8..2d706d4528 100644
--- a/src/panels/lovelace/cards/hui-map-card.ts
+++ b/src/panels/lovelace/cards/hui-map-card.ts
@@ -15,6 +15,7 @@ import "../../map/ha-entity-marker";
import {
setupLeafletMap,
+ createTileLayer,
LeafletModuleType,
} from "../../../common/dom/setup-leaflet-map";
import computeStateDomain from "../../../common/entity/compute_state_domain";
@@ -194,6 +195,12 @@ class HuiMapCard extends LitElement implements LovelaceCard {
if (changedProps.has("hass")) {
this._drawEntities();
}
+ if (
+ changedProps.has("_config") &&
+ changedProps.get("_config") !== undefined
+ ) {
+ this.updateMap(changedProps.get("_config") as MapCardConfig);
+ }
}
private get _mapEl(): HTMLDivElement {
@@ -210,6 +217,26 @@ class HuiMapCard extends LitElement implements LovelaceCard {
this._fitMap();
}
+ private updateMap(oldConfig: MapCardConfig): void {
+ const map = this._leafletMap;
+ const config = this._config;
+ const Leaflet = this.Leaflet;
+ if (!map || !config || !Leaflet) {
+ return;
+ }
+ if (config.dark_mode !== oldConfig.dark_mode) {
+ createTileLayer(Leaflet, config.dark_mode === true).addTo(map);
+ }
+ if (
+ config.entities !== oldConfig.entities ||
+ config.geo_location_sources !== oldConfig.geo_location_sources
+ ) {
+ this._drawEntities();
+ }
+ map.invalidateSize();
+ this._fitMap();
+ }
+
private _fitMap(): void {
if (!this._leafletMap || !this.Leaflet || !this._config || !this.hass) {
return;