# HG changeset patch
# User Thomas Junk <thomas.junk@intevation.de>
# Date 1568276125 -7200
# Node ID d9ce63cad8da976d9857e1cb93d59fba52dd6172
# Parent  f0be2aec953a711fd17434e9956366b7541291c0
FA on map: paint a nice white border around the data

diff -r f0be2aec953a -r d9ce63cad8da client/src/components/map/styles.js
--- a/client/src/components/map/styles.js	Thu Sep 12 09:23:47 2019 +0200
+++ b/client/src/components/map/styles.js	Thu Sep 12 10:15:25 2019 +0200
@@ -221,20 +221,24 @@
       }
       if (feature.get("fa_critical") && feature.get("fa_data")) {
         let data = feature.get("fa_data");
-        const heightInPixel = 82;
+        const heightInPixel = 80;
         const relativeHeightInPercent = heightInPixel / 100;
         let lnwlHeight = relativeHeightInPercent * data.ldc;
         let belowThresholdHeight = relativeHeightInPercent * data.below;
         let betweenThresholdHeight = relativeHeightInPercent * data.between;
         let aboveThresholdHeight = relativeHeightInPercent * data.above;
-        let lnwl = `<rect x='2' y='${heightInPixel -
+        let lnwl = `<rect x='2' y='${2 +
+          heightInPixel -
           lnwlHeight}' width='10' height='${lnwlHeight}' stroke-width='0' fill='aqua'/>`;
-        let above = `<rect x='12' y='${heightInPixel -
+        let above = `<rect x='12' y='${2 +
+          heightInPixel -
           aboveThresholdHeight}' width='18' height='${aboveThresholdHeight}' stroke-width='0' fill='blue'/>`;
-        let between = `<rect x='12' y='${heightInPixel -
+        let between = `<rect x='12' y='${2 +
+          heightInPixel -
           aboveThresholdHeight -
           betweenThresholdHeight}' width='18' height='${betweenThresholdHeight}' stroke-width='0' fill='darksalmon'/>`;
-        let below = `<rect x='12' y='${heightInPixel -
+        let below = `<rect x='12' y='${2 +
+          heightInPixel -
           aboveThresholdHeight -
           betweenThresholdHeight -
           belowThresholdHeight}' width='18' height='${belowThresholdHeight}' stroke-width='0' fill='hotpink'/>`;