# HG changeset patch
# User Markus Kottlaender <markus@intevation.de>
# Date 1558456364 -7200
# Node ID b62b9d5ce06d3f8f06cc7e3d48a851fec9d75ce2
# Parent  4b8ca498c4cdb91f85f681647cf7a197fbc23c79
client: gauges on map: display latest waterlevel and colored icons depending on waterlevel

diff -r 4b8ca498c4cd -r b62b9d5ce06d client/src/assets/marker-gauge-blue.png
Binary file client/src/assets/marker-gauge-blue.png has changed
diff -r 4b8ca498c4cd -r b62b9d5ce06d client/src/assets/marker-gauge-brown.png
Binary file client/src/assets/marker-gauge-brown.png has changed
diff -r 4b8ca498c4cd -r b62b9d5ce06d client/src/assets/marker-gauge-red.png
Binary file client/src/assets/marker-gauge-red.png has changed
diff -r 4b8ca498c4cd -r b62b9d5ce06d client/src/assets/marker-gauge-white.png
Binary file client/src/assets/marker-gauge-white.png has changed
diff -r 4b8ca498c4cd -r b62b9d5ce06d client/src/assets/marker-gauge.png
Binary file client/src/assets/marker-gauge.png has changed
diff -r 4b8ca498c4cd -r b62b9d5ce06d client/src/components/map/styles.js
--- a/client/src/components/map/styles.js	Tue May 21 18:10:46 2019 +0200
+++ b/client/src/components/map/styles.js	Tue May 21 18:32:44 2019 +0200
@@ -232,31 +232,43 @@
     return [];
   },
   gauge(feature, resolution, isLegend) {
+    let waterlevel = feature.get("gm_waterlevel");
+    let text = feature.get("objname");
+    let iconColor = "white";
+    if (waterlevel) {
+      text += "\n(" + waterlevel + " cm)";
+      let refWaterlevels = JSON.parse(feature.get("reference_water_levels"));
+      if (waterlevel < refWaterlevels.LDC) iconColor = "brown";
+      if (waterlevel > refWaterlevels.LDC && waterlevel < refWaterlevels.HDC)
+        iconColor = "blue";
+      if (waterlevel > refWaterlevels.HDC) iconColor = "red";
+    }
+
     return [
       new Style({
         image: new Icon({
-          src: require("@/assets/marker-gauge.png"),
+          src: require("@/assets/marker-gauge-" + iconColor + ".png"),
           anchor: [0.5, isLegend ? 0.5 : 1],
           scale: isLegend ? 0.5 : 1
         }),
         text: new Text({
           font: '10px "Open Sans", "sans-serif"',
-          offsetY: 8,
+          offsetY: 14,
           fill: new Fill({
-            color: "white"
+            color: isLegend ? "transparent" : "white"
           }),
-          text: feature.get("objname")
+          text
         })
       }),
       new Style({
         text: new Text({
           font: '10px "Open Sans", "sans-serif"',
-          offsetY: 7,
+          offsetY: 13,
           offsetX: -1,
           fill: new Fill({
-            color: "black"
+            color: isLegend ? "transparent" : "black"
           }),
-          text: feature.get("objname")
+          text
         })
       })
     ];