Mercurial > gemma

changeset 3448:d0278e7399fb

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
client: data accuracy: use single color for bottlenecks in diagram.
author Raimund Renkert <raimund.renkert@intevation.de>
date Fri, 24 May 2019 12:36:54 +0200
parents 3bb2d14abf8a
children 654f5e2d94cf
files client/src/components/map/styles.js
diffstat 1 files changed, 22 insertions(+), 7 deletions(-) [+]
line wrap: on
line diff
--- a/client/src/components/map/styles.js	Fri May 24 12:15:39 2019 +0200
+++ b/client/src/components/map/styles.js	Fri May 24 12:36:54 2019 +0200
@@ -248,6 +248,7 @@
     } else {
       // TODO: Get information from feature and check the ranges according to #423, #424, #425
       let colorWaterlevel = "white";
+      let colorBottleneck = "lime";
       let colorComparison = "lime";
       let colorAccuracy = "white";
       let fa3d = feature.get("forecast_accuracy_3d");
@@ -261,11 +262,6 @@
           colorAccuracy = "lime";
         }
       }
-      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>`;
       let maps = store.state.map.openLayersMaps;
       let geom = feature.getGeometry();
       if (!(geom instanceof Point)) {
@@ -277,11 +273,30 @@
             feature.getId().indexOf("gauges") > -1) ||
           (m.getLayer("STRETCHES").getVisible() &&
             feature.getId().indexOf("stretches") > -1) ||
-          (m.getLayer("BOTTLENECKS").getVisible() &&
-            feature.getId().indexOf("bottlenecks") > -1) ||
           (m.getLayer("SECTIONS").getVisible() &&
             feature.getId().indexOf("sections") > -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() &&
+          feature.getId().indexOf("bottlenecks") > -1
+        ) {
+          let frame = `<polyline points='16,0 32,32 0,32 16,0' stroke='grey' stroke-width='1' fill='${colorBottleneck}'/>`;
+          let svg = `data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32'><g>${frame}</g></svg>`;
           s.push(
             new Style({
               geometry: geom,