changeset 3338:8c435f9a85bb

client: fairway availibility layer: better positioning/scalign of diagrams
author Markus Kottlaender <markus@intevation.de>
date Mon, 20 May 2019 18:57:47 +0200
parents 146bf3a1752c
children 13bb0ff62ac8
files client/src/components/map/styles.js
diffstat 1 files changed, 9 insertions(+), 9 deletions(-) [+]
line wrap: on
line diff
--- 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
           })
         })
       );