Mercurial > gemma
changeset 4318:be7c23af783c
bottleneck fairway availability: layout corresponding to AFDLNWL diagram
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Wed, 04 Sep 2019 11:50:37 +0200 |
parents | fa067eaf4e5a |
children | 0d516bac1aae |
files | client/src/components/map/styles.js |
diffstat | 1 files changed, 17 insertions(+), 12 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/map/styles.js Wed Sep 04 11:13:04 2019 +0200 +++ b/client/src/components/map/styles.js Wed Sep 04 11:50:37 2019 +0200 @@ -221,22 +221,27 @@ } if (feature.get("fa_critical") && feature.get("fa_data")) { let data = feature.get("fa_data"); - let lnwlHeight = (80 / 100) * data.ldc; - let belowThresholdHeight = (80 / 100) * data.below; - let betweenThresholdHeight = (80 / 100) * data.between; - let aboveThresholdHeight = (80 / 100) * data.above; - - let frame = `<rect x='0' y='0' width='32' height='84' stroke-width='0' fill='white'/>`; - let lnwl = `<rect x='2' y='${80 - + const heightInPixel = 80; + const relativeHeightInPercent = heightInPixel / 100; + let lnwlHeight = relativeHeightInPercent * data.ldc; + let belowThresholdHeight = relativeHeightInPercent * data.below; + let betweenThresholdHeight = relativeHeightInPercent * data.between; + let aboveThresholdHeight = relativeHeightInPercent * data.above; + let lnwl = `<rect x='2' y='${heightInPixel - lnwlHeight + 2}' width='10' height='${lnwlHeight}' stroke-width='0' fill='aqua'/>`; - let range1 = `<rect x='12' y='2' width='18' height='${belowThresholdHeight}' stroke-width='0' fill='hotpink'/>`; - let range2 = `<rect x='12' y='${belowThresholdHeight + - 2}' width='18' height='${betweenThresholdHeight}' stroke-width='0' fill='darksalmon'/>`; - let range3 = `<rect x='12' y='${80 - + let above = `<rect x='12' y='${heightInPixel - aboveThresholdHeight + 2}' width='18' height='${aboveThresholdHeight}' stroke-width='0' fill='blue'/>`; - let svg = `data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='84'><g>${frame}${lnwl}${range1}${range2}${range3}</g></svg>`; + let between = `<rect x='12' y='${heightInPixel - + aboveThresholdHeight - + betweenThresholdHeight}' width='18' height='${betweenThresholdHeight}' stroke-width='0' fill='darksalmon'/>`; + let below = `<rect x='12' y='${heightInPixel - + aboveThresholdHeight - + betweenThresholdHeight - + belowThresholdHeight}' width='18' height='${belowThresholdHeight}' stroke-width='0' fill='hotpink'/>`; + let frame = `<rect x='0' y='0' width='32' height='84' stroke-width='0' fill='white'/>`; + let svg = `data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='84'><g>${frame}${lnwl}${above}${between}${below}</g></svg>`; let bnCenter = getCenter(feature.getGeometry().getExtent()); s.push( new Style({