Dark Mode for Map Card (#3250)

* Ability to change tile set from light_all to dark_all through card config.

* Use correct boolean.

* Fix possible undefined.

* Use correct value.

src/common/dom/setup-leaflet-map.ts

@@ -4,7 +4,8 @@ import { Map } from "leaflet";
 export type LeafletModuleType = typeof import("leaflet");
 
 export const setupLeafletMap = async (
-  mapElement: HTMLElement
+  mapElement: HTMLElement,
+  darkMode = false
 ): Promise<[Map, LeafletModuleType]> => {
   if (!mapElement.parentNode) {
     throw new Error("Cannot setup Leaflet map on disconnected element");
@@ -20,9 +21,9 @@ export const setupLeafletMap = async (
   mapElement.parentNode.appendChild(style);
   map.setView([52.3731339, 4.8903147], 13);
   Leaflet.tileLayer(
-    `https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}${
-      Leaflet.Browser.retina ? "@2x.png" : ".png"
-    }`,
+    `https://{s}.basemaps.cartocdn.com/${
+      darkMode ? "dark_all" : "light_all"
+    }/{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>',

src/panels/lovelace/cards/hui-map-card.ts

@@ -180,7 +180,10 @@ class HuiMapCard extends LitElement implements LovelaceCard {
   }
 
   private async loadMap(): Promise<void> {
-    [this._leafletMap, this.Leaflet] = await setupLeafletMap(this._mapEl);
+    [this._leafletMap, this.Leaflet] = await setupLeafletMap(
+      this._mapEl,
+      this._config !== undefined ? this._config.dark_mode !== false : false
+    );
     this._drawEntities();
     this._leafletMap.invalidateSize();
     this._fitMap();

src/panels/lovelace/cards/types.ts

@@ -109,6 +109,7 @@ export interface MapCardConfig extends LovelaceCardConfig {
   default_zoom?: number;
   entities?: Array<EntityConfig | string>;
   geo_location_sources?: string[];
+  dark_mode?: boolean;
 }
 
 export interface MarkdownCardConfig extends LovelaceCardConfig {

src/panels/lovelace/editor/config-elements/hui-map-card-editor.ts

@@ -37,6 +37,7 @@ const cardConfigStruct = struct({
   title: "string?",
   aspect_ratio: "string?",
   default_zoom: "number?",
+  dark_mode: "boolean?",
   entities: [entitiesConfigStruct],
   geo_location_sources: "array?",
 });
@@ -71,6 +72,10 @@ export class HuiMapCardEditor extends LitElement implements LovelaceCardEditor {
     return this._config!.geo_location_sources || [];
   }
 
+  get _dark_mode(): boolean {
+    return this._config!.dark_mode || false;
+  }
+
   protected render(): TemplateResult | void {
     if (!this.hass) {
       return html``;
@@ -100,6 +105,12 @@ export class HuiMapCardEditor extends LitElement implements LovelaceCardEditor {
             @value-changed="${this._valueChanged}"
           ></paper-input>
         </div>
+        <paper-toggle-button
+          ?checked="${this._dark_mode !== false}"
+          .configValue="${"dark_mode"}"
+          @change="${this._valueChanged}"
+          >Dark Mode?</paper-toggle-button
+        >
         <hui-entity-editor
           .hass="${this.hass}"
           .entities="${this._configEntities}"
@@ -155,7 +166,8 @@ export class HuiMapCardEditor extends LitElement implements LovelaceCardEditor {
         }
         this._config = {
           ...this._config,
-          [target.configValue!]: value,
+          [target.configValue]:
+            target.checked !== undefined ? target.checked : value,
         };
       }
     }