Mercurial > gemma
changeset 3364:b62b9d5ce06d
client: gauges on map: display latest waterlevel and colored icons depending on waterlevel
| author | Markus Kottlaender <markus@intevation.de> |
|---|---|
| date | Tue, 21 May 2019 18:32:44 +0200 |
| parents | 4b8ca498c4cd |
| children | c9b60130cdfb |
| files | client/src/assets/marker-gauge-blue.png client/src/assets/marker-gauge-brown.png client/src/assets/marker-gauge-red.png client/src/assets/marker-gauge-white.png client/src/assets/marker-gauge.png client/src/components/map/styles.js |
| diffstat | 6 files changed, 19 insertions(+), 7 deletions(-) [+] |
line wrap: on
line diff
--- 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 }) }) ];