ha-map: add a variable for marker size (#28536)

* use a new variable for width & height

* use a new variable for width & height

* fix styles & creation of marker

* iconSize -> markerIconSize (for zones)

* Apply suggestion from @MindFreeze

Co-authored-by: Petar Petrov <MindFreeze@users.noreply.github.com>

* format

---------

Co-authored-by: Petar Petrov <MindFreeze@users.noreply.github.com>

src/components/map/ha-entity-marker.ts

@@ -68,8 +68,8 @@ class HaEntityMarker extends LitElement {
       text-align: center;
       align-items: center;
       box-sizing: border-box;
-      width: 48px;
-      height: 48px;
+      width: var(--ha-marker-size, 48px);
+      height: var(--ha-marker-size, 48px);
       font-size: var(--ha-marker-font-size, var(--ha-font-size-xl));
       border-radius: var(--ha-marker-border-radius, 50%);
       border: 1px solid var(--ha-marker-color, var(--primary-color));

src/components/map/ha-map.ts

@@ -560,10 +560,11 @@ export class HaMap extends ReactiveElement {
           radius,
         });
 
+        const markerIconSize = this._getMarkerSize(computedStyles) / 2;
         const marker = new DecoratedMarker([latitude, longitude], circle, {
           icon: Leaflet.divIcon({
             html: iconHTML,
-            iconSize: [24, 24],
+            iconSize: [markerIconSize, markerIconSize],
             className,
           }),
           interactive: this.interactiveZones,
@@ -618,10 +619,11 @@ export class HaMap extends ReactiveElement {
       }
 
       // create marker with the icon
+      const markerSize = this._getMarkerSize(computedStyles);
       const marker = new DecoratedMarker([latitude, longitude], undefined, {
         icon: Leaflet.divIcon({
           html: entityMarker,
-          iconSize: [48, 48],
+          iconSize: [markerSize, markerSize],
           className: "",
         }),
         title: title,
@@ -657,6 +659,13 @@ export class HaMap extends ReactiveElement {
     this._mapZones.forEach((marker) => map.addLayer(marker));
   }
 
+  private _getMarkerSize(computedStyles: CSSStyleDeclaration): number {
+    const markerSizeVarValue =
+      computedStyles.getPropertyValue("--ha-marker-size");
+    const parsed = parseFloat(markerSizeVarValue);
+    return Number.isNaN(parsed) ? 48 : parsed;
+  }
+
   private async _attachObserver(): Promise<void> {
     if (!this._resizeObserver) {
       this._resizeObserver = new ResizeObserver(() => {
@@ -739,14 +748,19 @@ export class HaMap extends ReactiveElement {
       text-align: center;
     }
 
+    ha-icon {
+      --mdc-icon-size: calc(var(--ha-marker-size, 48px) / 2);
+    }
+
     .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: var(--ha-border-radius-2xl);
+      width: calc(var(--ha-marker-size, 48px) * 0.667);
+      height: calc(var(--ha-marker-size, 48px) * 0.667);
+      border-radius: 50%;
       text-align: center;
+      align-content: center;
       color: var(--text-primary-color);
       font-size: var(--ha-font-size-m);
     }