From a8ed87298a6d1476420732fe72f8d9ce2b064c3d Mon Sep 17 00:00:00 2001
From: Krisjanis Lejejs <krisjanis.lejejs@gmail.com>
Date: Sun, 12 Jan 2020 18:56:55 +0200
Subject: [PATCH] Improved map panel and map card to ignore zones when fitting
 map. (#4447)

* Improved map panel and map card to ignore zones when fitting map. [#1598](https://github.com/home-assistant/home-assistant-polymer/issues/1598)

* Improved map panel and map card to ignore zones when fitting map. [#1598](https://github.com/home-assistant/home-assistant-polymer/issues/1598)

* Improved map panel and map card to ignore zones when fitting map. [#1598](https://github.com/home-assistant/home-assistant-polymer/issues/1598)

* Changed approach and created a different array for zones

* Removed zone key option for markers
---
 src/panels/lovelace/cards/hui-map-card.ts | 11 +++++++++--
 src/panels/map/ha-panel-map.js            | 11 +++++++++--
 2 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/src/panels/lovelace/cards/hui-map-card.ts b/src/panels/lovelace/cards/hui-map-card.ts
index 6883cf9661..f3b362d248 100644
--- a/src/panels/lovelace/cards/hui-map-card.ts
+++ b/src/panels/lovelace/cards/hui-map-card.ts
@@ -68,6 +68,7 @@ class HuiMapCard extends LitElement implements LovelaceCard {
     false
   );
   private _mapItems: Array<Marker | Circle> = [];
+  private _mapZones: Array<Marker | Circle> = [];
   private _connected = false;
 
   public setConfig(config: MapCardConfig): void {
@@ -284,6 +285,11 @@ class HuiMapCard extends LitElement implements LovelaceCard {
     }
     const mapItems: Layer[] = (this._mapItems = []);
 
+    if (this._mapZones) {
+      this._mapZones.forEach((marker) => marker.remove());
+    }
+    const mapZones: Layer[] = (this._mapZones = []);
+
     const allEntities = this._configEntities!.concat();
 
     // Calculate visible geo location sources
@@ -341,7 +347,7 @@ class HuiMapCard extends LitElement implements LovelaceCard {
         }
 
         // create marker with the icon
-        mapItems.push(
+        mapZones.push(
           Leaflet.marker([latitude, longitude], {
             icon: Leaflet.divIcon({
               html: iconHTML,
@@ -354,7 +360,7 @@ class HuiMapCard extends LitElement implements LovelaceCard {
         );
 
         // create circle around it
-        mapItems.push(
+        mapZones.push(
           Leaflet.circle([latitude, longitude], {
             interactive: false,
             color: "#FF9800",
@@ -406,6 +412,7 @@ class HuiMapCard extends LitElement implements LovelaceCard {
     }
 
     this._mapItems.forEach((marker) => map.addLayer(marker));
+    this._mapZones.forEach((marker) => map.addLayer(marker));
   }
 
   private _attachObserver(): void {
diff --git a/src/panels/map/ha-panel-map.js b/src/panels/map/ha-panel-map.js
index a3ed6c8ae8..e7ceb0af1b 100644
--- a/src/panels/map/ha-panel-map.js
+++ b/src/panels/map/ha-panel-map.js
@@ -98,6 +98,13 @@ class HaPanelMap extends LocalizeMixin(PolymerElement) {
     }
     var mapItems = (this._mapItems = []);
 
+    if (this._mapZones) {
+      this._mapZones.forEach(function(marker) {
+        marker.remove();
+      });
+    }
+    var mapZones = (this._mapZones = []);
+
     Object.keys(hass.states).forEach((entityId) => {
       var entity = hass.states[entityId];
       var title = computeStateName(entity);
@@ -136,7 +143,7 @@ class HaPanelMap extends LocalizeMixin(PolymerElement) {
         });
 
         // create marker with the icon
-        mapItems.push(
+        mapZones.push(
           this.Leaflet.marker(
             [entity.attributes.latitude, entity.attributes.longitude],
             {
@@ -148,7 +155,7 @@ class HaPanelMap extends LocalizeMixin(PolymerElement) {
         );
 
         // create circle around it
-        mapItems.push(
+        mapZones.push(
           this.Leaflet.circle(
             [entity.attributes.latitude, entity.attributes.longitude],
             {