Mercurial > gemma

comparison client/src/components/map/styles.js @ 3843:cc585e068ca0

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
client: made triangles in data accuracy layer equilateral
author Markus Kottlaender <markus@intevation.de>
date Mon, 08 Jul 2019 15:45:42 +0200
parents 1525ead37a2e
children c5cc6540940e
comparison
equal deleted inserted replaced
3842:22f7677337a5 3843:cc585e068ca0
255 (map.getLayer("STRETCHES").getVisible() && 255 (map.getLayer("STRETCHES").getVisible() &&
256 feature.getId().indexOf("stretches") > -1) || 256 feature.getId().indexOf("stretches") > -1) ||
257 (map.getLayer("GAUGES").getVisible() && 257 (map.getLayer("GAUGES").getVisible() &&
258 feature.getId().indexOf("gauges") > -1) 258 feature.getId().indexOf("gauges") > -1)
259 ) { 259 ) {
260 let frame = `<polyline points='16,0 32,32 0,32 16,0' stroke='grey' stroke-width='1' fill='white'/>`; 260 let frame = `<polyline points='16,0 32,28 0,28 16,0' stroke='grey' stroke-width='1' fill='white'/>`;
261 let waterlevel = `<polyline points="16,0 24,16 16,32 8,16 16,0" stroke='grey' stroke-width='1' fill='${colorWaterlevel}'/>`; 261 let waterlevel = `<polyline points="16,0 24,14 16,28 8,14 16,0" stroke='grey' stroke-width='1' fill='${colorWaterlevel}'/>`;
262 let accuracy = `<polyline points="24,16 32,32 16,32 24,16" stroke='grey' stroke-width='1' fill='${colorAccuracy}'/>`; 262 let accuracy = `<polyline points="24,14 32,28 16,28 24,14" stroke='grey' stroke-width='1' fill='${colorAccuracy}'/>`;
263 let comparison = `<polyline points="8,16 16,32 0,32 8,16" stroke='grey' stroke-width='1' fill='${colorComparison}'/>`; 263 let comparison = `<polyline points="8,14 16,28 0,28 8,14" stroke='grey' stroke-width='1' fill='${colorComparison}'/>`;
264 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>`; 264 let svg = `data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='28'><g>${frame}${waterlevel}${comparison}${accuracy}</g></svg>`;
265 s.push( 265 s.push(
266 new Style({ 266 new Style({
267 geometry: geom, 267 geometry: geom,
268 image: new Icon({ 268 image: new Icon({
269 src: svg, 269 src: svg,
276 if ( 276 if (
277 map.getLayer("BOTTLENECKS").getVisible() && 277 map.getLayer("BOTTLENECKS").getVisible() &&
278 feature.getId().indexOf("bottlenecks") > -1 278 feature.getId().indexOf("bottlenecks") > -1
279 ) { 279 ) {
280 let colorUniformTriangle = classifications.surveyCurrency(feature); 280 let colorUniformTriangle = classifications.surveyCurrency(feature);
281 let frame = `<polyline points='16,0 32,32 0,32 16,0' stroke='grey' stroke-width='1' fill='${colorUniformTriangle}'/>`; 281 let frame = `<polyline points='16,0 32,28 0,28 16,0' stroke='grey' stroke-width='1' fill='${colorUniformTriangle}'/>`;
282 let svg = `data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32'><g>${frame}</g></svg>`; 282 let svg = `data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='28'><g>${frame}</g></svg>`;
283 s.push( 283 s.push(
284 new Style({ 284 new Style({
285 geometry: geom, 285 geometry: geom,
286 image: new Icon({ 286 image: new Icon({
287 src: svg, 287 src: svg,