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;