Change map styles to "Voyager" (#13227)

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

@@ -5,8 +5,7 @@ export type LeafletModuleType = typeof import("leaflet");
 export type LeafletDrawModuleType = typeof import("leaflet-draw");
 
 export const setupLeafletMap = async (
-  mapElement: HTMLElement,
-  darkMode?: boolean
+  mapElement: HTMLElement
 ): Promise<[Map, LeafletModuleType, TileLayer]> => {
   if (!mapElement.parentNode) {
     throw new Error("Cannot setup Leaflet map on disconnected element");
@@ -23,7 +22,7 @@ export const setupLeafletMap = async (
   mapElement.parentNode.appendChild(style);
   map.setView([52.3731339, 4.8903147], 13);
 
-  const tileLayer = createTileLayer(Leaflet, Boolean(darkMode)).addTo(map);
+  const tileLayer = createTileLayer(Leaflet).addTo(map);
 
   return [map, Leaflet, tileLayer];
 };
@@ -31,23 +30,19 @@ export const setupLeafletMap = async (
 export const replaceTileLayer = (
   leaflet: LeafletModuleType,
   map: Map,
-  tileLayer: TileLayer,
-  darkMode: boolean
+  tileLayer: TileLayer
 ): TileLayer => {
   map.removeLayer(tileLayer);
-  tileLayer = createTileLayer(leaflet, darkMode);
+  tileLayer = createTileLayer(leaflet);
   tileLayer.addTo(map);
   return tileLayer;
 };
 
-const createTileLayer = (
-  leaflet: LeafletModuleType,
-  darkMode: boolean
-): TileLayer =>
+const createTileLayer = (leaflet: LeafletModuleType): TileLayer =>
   leaflet.tileLayer(
-    `https://{s}.basemaps.cartocdn.com/${
-      darkMode ? "dark_all" : "light_all"
-    }/{z}/{x}/{y}${leaflet.Browser.retina ? "@2x.png" : ".png"}`,
+    `https://basemaps.cartocdn.com/rastertiles/voyager/{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/components/map/ha-map.ts

@@ -6,21 +6,19 @@ import {
   Map,
   Marker,
   Polyline,
-  TileLayer,
 } from "leaflet";
 import { css, CSSResultGroup, PropertyValues, ReactiveElement } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import {
   LeafletModuleType,
-  replaceTileLayer,
   setupLeafletMap,
 } from "../../common/dom/setup-leaflet-map";
 import { computeStateDomain } from "../../common/entity/compute_state_domain";
 import { computeStateName } from "../../common/entity/compute_state_name";
-import "./ha-entity-marker";
+import { installResizeObserver } from "../../panels/lovelace/common/install-resize-observer";
 import { HomeAssistant } from "../../types";
 import "../ha-icon-button";
-import { installResizeObserver } from "../../panels/lovelace/common/install-resize-observer";
+import "./ha-entity-marker";
 
 const getEntityId = (entity: string | HaMapEntity): string =>
   typeof entity === "string" ? entity : entity.entity_id;
@@ -60,8 +58,6 @@ export class HaMap extends ReactiveElement {
 
   private Leaflet?: LeafletModuleType;
 
-  private _tileLayer?: TileLayer;
-
   private _resizeObserver?: ResizeObserver;
 
   private _mapItems: Array<Marker | Circle> = [];
@@ -142,12 +138,6 @@ export class HaMap extends ReactiveElement {
       return;
     }
     const darkMode = this.darkMode ?? this.hass.themes.darkMode;
-    this._tileLayer = replaceTileLayer(
-      this.Leaflet!,
-      this.leafletMap!,
-      this._tileLayer!,
-      darkMode
-    );
     this.shadowRoot!.getElementById("map")!.classList.toggle("dark", darkMode);
   }
 
@@ -159,10 +149,7 @@ export class HaMap extends ReactiveElement {
       this.shadowRoot!.append(map);
     }
     const darkMode = this.darkMode ?? this.hass.themes.darkMode;
-    [this.leafletMap, this.Leaflet, this._tileLayer] = await setupLeafletMap(
-      map,
-      darkMode
-    );
+    [this.leafletMap, this.Leaflet] = await setupLeafletMap(map);
     this.shadowRoot!.getElementById("map")!.classList.toggle("dark", darkMode);
     this._loaded = true;
   }
@@ -473,6 +460,13 @@ export class HaMap extends ReactiveElement {
       .dark {
         color: #ffffff;
       }
+      .leaflet-tile-pane {
+        filter: var(--map-filter);
+      }
+      .dark .leaflet-bar a {
+        background: var(--card-background-color);
+        color: #ffffff;
+      }
       .leaflet-marker-draggable {
         cursor: move !important;
       }

src/resources/styles.ts

@@ -46,6 +46,7 @@ export const darkStyles = {
   "codemirror-qualifier": "#DECB6B",
   "codemirror-type": "#DECB6B",
   "energy-grid-return-color": "#a280db",
+  "map-filter": "invert(.9) hue-rotate(170deg) grayscale(.7)",
 };
 
 export const derivedStyles = {