From 4ef944ea08b5b1838d20342df31a32e660e6247b Mon Sep 17 00:00:00 2001
From: karwosts <32912880+karwosts@users.noreply.github.com>
Date: Sun, 3 Nov 2024 21:58:13 -0800
Subject: [PATCH] Fix map zone focus issues (#22623)

---
 src/components/map/ha-map.ts                  | 38 +++++++++++--------
 .../config-elements/hui-map-card-editor.ts    |  1 +
 2 files changed, 24 insertions(+), 15 deletions(-)

diff --git a/src/components/map/ha-map.ts b/src/components/map/ha-map.ts
index e4777b970e97..0cce2ded0b2a 100644
--- a/src/components/map/ha-map.ts
+++ b/src/components/map/ha-map.ts
@@ -86,6 +86,8 @@ export class HaMap extends ReactiveElement {
 
   private _mapZones: Array<Marker | Circle> = [];
 
+  private _mapFocusZones: Array<Marker | Circle> = [];
+
   private _mapPaths: Array<Polyline | CircleMarker> = [];
 
   public connectedCallback(): void {
@@ -201,7 +203,11 @@ export class HaMap extends ReactiveElement {
       return;
     }
 
-    if (!this._mapFocusItems.length && !this.layers?.length) {
+    if (
+      !this._mapFocusItems.length &&
+      !this._mapFocusZones.length &&
+      !this.layers?.length
+    ) {
       this.leafletMap.setView(
         new this.Leaflet.LatLng(
           this.hass.config.latitude,
@@ -218,13 +224,9 @@ export class HaMap extends ReactiveElement {
         : []
     );
 
-    if (this.fitZones) {
-      this._mapZones?.forEach((zone) => {
-        bounds.extend(
-          "getBounds" in zone ? zone.getBounds() : zone.getLatLng()
-        );
-      });
-    }
+    this._mapFocusZones?.forEach((zone) => {
+      bounds.extend("getBounds" in zone ? zone.getBounds() : zone.getLatLng());
+    });
 
     this.layers?.forEach((layer: any) => {
       bounds.extend(
@@ -395,6 +397,7 @@ export class HaMap extends ReactiveElement {
     if (this._mapZones.length) {
       this._mapZones.forEach((marker) => marker.remove());
       this._mapZones = [];
+      this._mapFocusZones = [];
     }
 
     if (!this.entities) {
@@ -466,13 +469,18 @@ export class HaMap extends ReactiveElement {
         );
 
         // create circle around it
-        this._mapZones.push(
-          Leaflet.circle([latitude, longitude], {
-            interactive: false,
-            color: passive ? passiveZoneColor : zoneColor,
-            radius,
-          })
-        );
+        const circle = Leaflet.circle([latitude, longitude], {
+          interactive: false,
+          color: passive ? passiveZoneColor : zoneColor,
+          radius,
+        });
+        this._mapZones.push(circle);
+        if (
+          this.fitZones &&
+          (typeof entity === "string" || entity.focus !== false)
+        ) {
+          this._mapFocusZones.push(circle);
+        }
 
         continue;
       }
diff --git a/src/panels/lovelace/editor/config-elements/hui-map-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-map-card-editor.ts
index c3aa69cc8c6f..e013a4fbbf19 100644
--- a/src/panels/lovelace/editor/config-elements/hui-map-card-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-map-card-editor.ts
@@ -64,6 +64,7 @@ const cardConfigStruct = assign(
     hours_to_show: optional(number()),
     geo_location_sources: optional(array(geoSourcesConfigStruct)),
     auto_fit: optional(boolean()),
+    fit_zones: optional(boolean()),
     theme_mode: optional(string()),
   })
 );