diff --git a/build-scripts/gulp/gather-static.js b/build-scripts/gulp/gather-static.js index ab3984552e..4cdbdc18c9 100644 --- a/build-scripts/gulp/gather-static.js +++ b/build-scripts/gulp/gather-static.js @@ -94,10 +94,6 @@ function copyMapPanel(staticDir) { npmPath("leaflet.markercluster/dist/MarkerCluster.css"), staticPath("images/leaflet/") ); - copyFileDir( - npmPath("leaflet.markercluster/dist/MarkerCluster.Default.css"), - staticPath("images/leaflet/") - ); fs.copySync( npmPath("leaflet/dist/images"), staticPath("images/leaflet/images/") diff --git a/src/common/dom/setup-leaflet-map.ts b/src/common/dom/setup-leaflet-map.ts index d94ebfa846..d7881c7a97 100644 --- a/src/common/dom/setup-leaflet-map.ts +++ b/src/common/dom/setup-leaflet-map.ts @@ -32,14 +32,6 @@ export const setupLeafletMap = async ( markerClusterStyle.setAttribute("rel", "stylesheet"); mapElement.parentNode.appendChild(markerClusterStyle); - const defaultMarkerClusterStyle = document.createElement("link"); - defaultMarkerClusterStyle.setAttribute( - "href", - "/static/images/leaflet/MarkerCluster.Default.css" - ); - defaultMarkerClusterStyle.setAttribute("rel", "stylesheet"); - mapElement.parentNode.appendChild(defaultMarkerClusterStyle); - map.setView([52.3731339, 4.8903147], 13); const tileLayer = createTileLayer(Leaflet).addTo(map); diff --git a/src/components/map/ha-map.ts b/src/components/map/ha-map.ts index b752cc26ea..569d32ceaa 100644 --- a/src/components/map/ha-map.ts +++ b/src/components/map/ha-map.ts @@ -673,6 +673,22 @@ export class HaMap extends ReactiveElement { box-shadow: none !important; text-align: center; } + + .marker-cluster div { + background-clip: padding-box; + background-color: var(--primary-color); + border: 3px solid rgba(var(--rgb-primary-color), 0.2); + width: 32px; + height: 32px; + border-radius: 20px; + text-align: center; + color: var(--text-primary-color); + font-size: 14px; + } + + .marker-cluster span { + line-height: 30px; + } `; }