diff --git a/src/common/dom/setup-leaflet-map.ts b/src/common/dom/setup-leaflet-map.ts
index 8d0d658f5c..1ce5c20f4e 100644
--- a/src/common/dom/setup-leaflet-map.ts
+++ b/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:
'© OpenStreetMap, © CARTO',
diff --git a/src/components/map/ha-map.ts b/src/components/map/ha-map.ts
index f422f053d6..a123414675 100644
--- a/src/components/map/ha-map.ts
+++ b/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 = [];
@@ -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;
}
diff --git a/src/resources/styles.ts b/src/resources/styles.ts
index 1a71387b56..b5635a7d34 100644
--- a/src/resources/styles.ts
+++ b/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 = {