From ffc7f9706dca41e679d440c682fd94bb84047be5 Mon Sep 17 00:00:00 2001
From: Zack Arnett <arnett.zackary@gmail.com>
Date: Tue, 27 Nov 2018 11:48:41 -0500
Subject: [PATCH] Update Aspect Ratio on Map card (#2126)

* Update Aspect Ratio

* Update Card Size
---
 src/panels/lovelace/cards/hui-map-card.js | 20 +++++++++++++++++---
 1 file changed, 17 insertions(+), 3 deletions(-)

diff --git a/src/panels/lovelace/cards/hui-map-card.js b/src/panels/lovelace/cards/hui-map-card.js
index d49686e2c4..76034be484 100644
--- a/src/panels/lovelace/cards/hui-map-card.js
+++ b/src/panels/lovelace/cards/hui-map-card.js
@@ -10,6 +10,7 @@ import processConfigEntities from "../common/process-config-entities";
 import computeStateDomain from "../../../common/entity/compute_state_domain";
 import computeStateName from "../../../common/entity/compute_state_name";
 import debounce from "../../../common/util/debounce";
+import parseAspectRatio from "../../../common/util/parse-aspect-ratio";
 
 Leaflet.Icon.Default.imagePath = "/static/images/leaflet";
 
@@ -97,7 +98,15 @@ class HuiMapCard extends PolymerElement {
       return;
     }
 
-    this.$.root.style.paddingTop = this._config.aspect_ratio || "100%";
+    const ratio = parseAspectRatio(this._config.aspect_ratio);
+
+    if (ratio && ratio.w > 0 && ratio.h > 0) {
+      this.$.root.style.paddingBottom = `${((100 * ratio.h) / ratio.w).toFixed(
+        2
+      )}%`;
+    } else {
+      this.$.root.style.paddingBottom = "100%";
+    }
   }
 
   setConfig(config) {
@@ -110,8 +119,13 @@ class HuiMapCard extends PolymerElement {
   }
 
   getCardSize() {
-    let ar = this._config.aspect_ratio || "100%";
-    ar = ar.substr(0, ar.length - 1);
+    const ratio = parseAspectRatio(this._config.aspect_ratio);
+    let ar;
+    if (ratio && ratio.w > 0 && ratio.h > 0) {
+      ar = `${((100 * ratio.h) / ratio.w).toFixed(2)}`;
+    } else {
+      ar = "100";
+    }
     return 1 + Math.floor(ar / 25) || 3;
   }