Update the map when making config changes (#3568)

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:
         '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>, &copy; <a href="https://carto.com/attributions">CARTO</a>',
@@ -31,7 +40,5 @@ export const setupLeafletMap = async (
       minZoom: 0,
       maxZoom: 20,
     }
-  ).addTo(map);
+  );
-
-  return [map, Leaflet];
 };

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;