Use custom styling for cluster marker (#24371)

* Use custom styling for cluster marker

* Process code review

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/")

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);

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;
+    }
   `;
 }