# HG changeset patch
# User Markus Kottlaender <markus@intevation.de>
# Date 1558371467 -7200
# Node ID 8c435f9a85bbb13a049e1b7c4b9bf41eda98524b
# Parent  146bf3a1752cec244276eccb97e061b9572817a3
client: fairway availibility layer: better positioning/scalign of diagrams

diff -r 146bf3a1752c -r 8c435f9a85bb client/src/components/map/styles.js
--- a/client/src/components/map/styles.js	Mon May 20 18:27:58 2019 +0200
+++ b/client/src/components/map/styles.js	Mon May 20 18:57:47 2019 +0200
@@ -187,25 +187,25 @@
         })
       );
     }
-    if (feature.get("fa_critical") && feature.get("fa_data")) {
+    if (
+      feature.get("fa_critical") &&
+      feature.get("fa_data") &&
+      resolution > 15
+    ) {
       let frame = `<rect x='0' y='0' width='40' height='104' stroke-width='0' fill='white'/>`;
       let lnwl = `<rect x='2' y='22' width='18' height='80' stroke-width='0' fill='aqua'/>`;
       let range1 = `<rect x='20' y='2' width='18' height='10' stroke-width='0' fill='hotpink'/>`;
       let range2 = `<rect x='20' y='12' width='18' height='30' stroke-width='0' fill='darksalmon'/>`;
       let range3 = `<rect x='20' y='42' width='18' height='60' stroke-width='0' fill='blue'/>`;
       let svg = `data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='104'><g>${frame}${lnwl}${range1}${range2}${range3}</g></svg>`;
+      let bnCenter = getCenter(feature.getGeometry().getExtent());
       s.push(
         new Style({
-          geometry: new Point([
-            feature.getGeometry().getExtent()[0],
-            feature.getGeometry().getExtent()[1] +
-              (feature.getGeometry().getExtent()[3] -
-                feature.getGeometry().getExtent()[1])
-          ]),
+          geometry: new Point(bnCenter),
           image: new Icon({
             src: svg,
-            anchor: [1, 1],
-            scale: resolution > 50 ? 0.75 : 1
+            anchor: [1.2, 1.2],
+            scale: resolution > 100 ? 0.75 : 1
           })
         })
       );