From 1c139d0bc7631900f7aac8736cf23e5ca11edb65 Mon Sep 17 00:00:00 2001
From: karwosts <32912880+karwosts@users.noreply.github.com>
Date: Tue, 27 Dec 2022 13:00:19 -0800
Subject: [PATCH] Fix map card not loading in sidebar view (#14872)

fixes undefined
---
 src/panels/lovelace/cards/hui-map-card.ts | 28 ++++++++++++-----------
 1 file changed, 15 insertions(+), 13 deletions(-)

diff --git a/src/panels/lovelace/cards/hui-map-card.ts b/src/panels/lovelace/cards/hui-map-card.ts
index e5b7951160..ca91c301e8 100644
--- a/src/panels/lovelace/cards/hui-map-card.ts
+++ b/src/panels/lovelace/cards/hui-map-card.ts
@@ -102,6 +102,7 @@ class HuiMapCard extends LitElement implements LovelaceCard {
       ratio && ratio.w > 0 && ratio.h > 0
         ? `${((100 * ratio.h) / ratio.w).toFixed(2)}`
         : "100";
+
     return 1 + Math.floor(Number(ar) / 25) || 3;
   }
 
@@ -185,10 +186,21 @@ class HuiMapCard extends LitElement implements LovelaceCard {
     return false;
   }
 
-  protected firstUpdated(changedProps: PropertyValues): void {
-    super.firstUpdated(changedProps);
-    const root = this.shadowRoot!.getElementById("root");
+  protected updated(changedProps: PropertyValues): void {
+    if (this._config?.hours_to_show && this._configEntities?.length) {
+      if (changedProps.has("_config")) {
+        this._getHistory();
+      } else if (Date.now() - this._date!.getTime() >= MINUTE) {
+        this._getHistory();
+      }
+    }
+    if (changedProps.has("_config")) {
+      this._computePadding();
+    }
+  }
 
+  private _computePadding(): void {
+    const root = this.shadowRoot!.getElementById("root");
     if (!this._config || this.isPanel || !root) {
       return;
     }
@@ -206,16 +218,6 @@ class HuiMapCard extends LitElement implements LovelaceCard {
         : (root.style.paddingBottom = "100%");
   }
 
-  protected updated(changedProps: PropertyValues): void {
-    if (this._config?.hours_to_show && this._configEntities?.length) {
-      if (changedProps.has("_config")) {
-        this._getHistory();
-      } else if (Date.now() - this._date!.getTime() >= MINUTE) {
-        this._getHistory();
-      }
-    }
-  }
-
   private _fitMap() {
     this._map?.fitMap();
   }