changeset 3516:6cdfc05fd6b0

client: data accuracy layer: show only diagrams for layers that are active
author Markus Kottlaender <markus@intevation.de>
date Wed, 29 May 2019 10:37:01 +0200
parents 4d7b481e1d39
children d3ca26b1d104 4cd4375efd5d 9538a0aeacde
files client/src/components/map/styles.js
diffstat 1 files changed, 24 insertions(+), 13 deletions(-) [+]
line wrap: on
line diff
--- a/client/src/components/map/styles.js	Tue May 28 17:12:02 2019 +0200
+++ b/client/src/components/map/styles.js	Wed May 29 10:37:01 2019 +0200
@@ -247,20 +247,31 @@
         geom = new Point(getCenter(feature.getGeometry().getExtent()));
       }
       maps.forEach(m => {
-        let frame = `<polyline points='16,0 32,32 0,32 16,0' stroke='grey' stroke-width='1' fill='white'/>`;
-        let waterlevel = `<polyline points="16,0 24,16 16,32 8,16 16,0" stroke='grey' stroke-width='1' fill='${colorWaterlevel}'/>`;
-        let accuracy = `<polyline points="24,16 32,32 16,32 24,16" stroke='grey' stroke-width='1' fill='${colorAccuracy}'/>`;
-        let comparison = `<polyline points="8,16 16,32 0,32 8,16" stroke='grey' stroke-width='1' fill='${colorComparison}'/>`;
-        let svg = `data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32'><g>${frame}${waterlevel}${comparison}${accuracy}</g></svg>`;
-        s.push(
-          new Style({
-            geometry: geom,
-            image: new Icon({
-              src: svg,
-              anchor: [-0.5, 1]
+        if (
+          (m.getLayer("BOTTLENECKS").getVisible() &&
+            feature.getId().indexOf("bottlenecks") > -1) ||
+          (m.getLayer("SECTIONS").getVisible() &&
+            feature.getId().indexOf("sections") > -1) ||
+          (m.getLayer("STRETCHES").getVisible() &&
+            feature.getId().indexOf("stretches") > -1) ||
+          (m.getLayer("GAUGES").getVisible() &&
+            feature.getId().indexOf("gauges") > -1)
+        ) {
+          let frame = `<polyline points='16,0 32,32 0,32 16,0' stroke='grey' stroke-width='1' fill='white'/>`;
+          let waterlevel = `<polyline points="16,0 24,16 16,32 8,16 16,0" stroke='grey' stroke-width='1' fill='${colorWaterlevel}'/>`;
+          let accuracy = `<polyline points="24,16 32,32 16,32 24,16" stroke='grey' stroke-width='1' fill='${colorAccuracy}'/>`;
+          let comparison = `<polyline points="8,16 16,32 0,32 8,16" stroke='grey' stroke-width='1' fill='${colorComparison}'/>`;
+          let svg = `data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32'><g>${frame}${waterlevel}${comparison}${accuracy}</g></svg>`;
+          s.push(
+            new Style({
+              geometry: geom,
+              image: new Icon({
+                src: svg,
+                anchor: [-0.5, 1]
+              })
             })
-          })
-        );
+          );
+        }
 
         if (
           m.getLayer("BOTTLENECKS").getVisible() &&