From 540f1d9bce1b870849ea9572c6ebb2e2b36060aa Mon Sep 17 00:00:00 2001
From: springstan <46536646+springstan@users.noreply.github.com>
Date: Mon, 21 Oct 2019 17:45:40 +0200
Subject: [PATCH] Fix for Zone icon visibility on Map panel and Lovelace Map
 card (#4085)

* Set icon color to black in ha-panel-map.js

* Changed icon color depending on dark mode in lovelace map card

* Fixed build error by swapping var for let and const

* Replaced hardcoded style with the light and dark classes
---
 src/panels/lovelace/cards/hui-map-card.ts | 24 +++++++++++++++++++++--
 src/panels/map/ha-panel-map.js            | 12 +++++++++---
 2 files changed, 31 insertions(+), 5 deletions(-)

diff --git a/src/panels/lovelace/cards/hui-map-card.ts b/src/panels/lovelace/cards/hui-map-card.ts
index 0bc34ec734..cef40d09d7 100644
--- a/src/panels/lovelace/cards/hui-map-card.ts
+++ b/src/panels/lovelace/cards/hui-map-card.ts
@@ -325,13 +325,25 @@ class HuiMapCard extends LitElement implements LovelaceCard {
           continue;
         }
 
+        // create icon
+        let iconHTML = "";
+        if (icon) {
+          const el = document.createElement("ha-icon");
+          el.setAttribute("icon", icon);
+          iconHTML = el.outerHTML;
+        } else {
+          const el = document.createElement("span");
+          el.innerHTML = title;
+          iconHTML = el.outerHTML;
+        }
+
         // create marker with the icon
         mapItems.push(
           Leaflet.marker([latitude, longitude], {
             icon: Leaflet.divIcon({
-              html: icon ? `<ha-icon icon="${icon}"></ha-icon>` : title,
+              html: iconHTML,
               iconSize: [24, 24],
-              className: "",
+              className: this._config!.dark_mode === true ? "dark" : "light",
             }),
             interactive: false,
             title,
@@ -455,6 +467,14 @@ class HuiMapCard extends LitElement implements LovelaceCard {
       :host([ispanel]) #root {
         height: 100%;
       }
+
+      .dark {
+        color: #ffffff;
+      }
+
+      .light {
+        color: #000000;
+      }
     `;
   }
 }
diff --git a/src/panels/map/ha-panel-map.js b/src/panels/map/ha-panel-map.js
index 24053cee0e..a3ed6c8ae8 100644
--- a/src/panels/map/ha-panel-map.js
+++ b/src/panels/map/ha-panel-map.js
@@ -24,6 +24,10 @@ class HaPanelMap extends LocalizeMixin(PolymerElement) {
           width: 100%;
           z-index: 0;
         }
+
+        .light {
+          color: #000000;
+        }
       </style>
 
       <app-toolbar>
@@ -120,16 +124,18 @@ class HaPanelMap extends LocalizeMixin(PolymerElement) {
           el.setAttribute("icon", entity.attributes.icon);
           iconHTML = el.outerHTML;
         } else {
-          iconHTML = title;
+          const el = document.createElement("span");
+          el.innerHTML = title;
+          iconHTML = el.outerHTML;
         }
 
         icon = this.Leaflet.divIcon({
           html: iconHTML,
           iconSize: [24, 24],
-          className: "",
+          className: "light",
         });
 
-        // create market with the icon
+        // create marker with the icon
         mapItems.push(
           this.Leaflet.marker(
             [entity.attributes.latitude, entity.attributes.longitude],