--- a/client/src/components/map/styles.js	Thu May 23 18:36:26 2019 +0200
+++ b/client/src/components/map/styles.js	Fri May 24 09:40:43 2019 +0200
@@ -192,11 +192,32 @@
       feature.get("fa_data") &&
       resolution > 15
     ) {
+      let data = feature.get("fa_data");
+      let lnwlHeight =
+        (80 / 100) * data.ldc.find(d => d.hasOwnProperty("from")).percent;
+      let belowThresholdHeight =
+        (80 / 100) *
+        data.afd.find(d => d.hasOwnProperty("to") && !d.hasOwnProperty("from"))
+          .percent;
+      let betweenThresholdHeight =
+        (80 / 100) *
+        data.afd.find(d => d.hasOwnProperty("to") && d.hasOwnProperty("from"))
+          .percent;
+      let aboveThresholdHeight =
+        (80 / 100) *
+        data.afd.find(d => !d.hasOwnProperty("to") && d.hasOwnProperty("from"))
+          .percent;
+
       let frame = `<rect x='0' y='0' width='32' height='84' stroke-width='0' fill='white'/>`;
-      let lnwl = `<rect x='2' y='22' width='10' height='60' stroke-width='0' fill='aqua'/>`;
-      let range1 = `<rect x='12' y='2' width='18' height='25' stroke-width='0' fill='hotpink'/>`;
-      let range2 = `<rect x='12' y='27' width='18' height='5' stroke-width='0' fill='darksalmon'/>`;
-      let range3 = `<rect x='12' y='32' width='18' height='50' stroke-width='0' fill='blue'/>`;
+      let lnwl = `<rect x='2' y='${80 -
+        lnwlHeight +
+        2}' width='10' height='${lnwlHeight}' stroke-width='0' fill='aqua'/>`;
+      let range1 = `<rect x='12' y='2' width='18' height='${belowThresholdHeight}' stroke-width='0' fill='hotpink'/>`;
+      let range2 = `<rect x='12' y='${belowThresholdHeight +
+        2}' width='18' height='${betweenThresholdHeight}' stroke-width='0' fill='darksalmon'/>`;
+      let range3 = `<rect x='12' y='${80 -
+        aboveThresholdHeight +
+        2}' width='18' height='${aboveThresholdHeight}' stroke-width='0' fill='blue'/>`;
       let svg = `data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='84'><g>${frame}${lnwl}${range1}${range2}${range3}</g></svg>`;
       let bnCenter = getCenter(feature.getGeometry().getExtent());
       s.push(