Mercurial > gemma
changeset 4241:27434b0d4d96
Map: setting styles correctly for fairwaydimensions
Originally the style of fairwaydimensions was
implemented as a function, returning an array of styles.
After implementing dynamics for accepting styles from the backend,
the style was set as a style object instead of the original
function. The fix was done in making both using a function instead
of an object. Whether using an object or a function would be better
is beyond my understanding of OL and is in the end a matter of taste.
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Thu, 22 Aug 2019 10:56:05 +0200 |
parents | a4f76e170290 |
children | df198705300e 5e8dec0073ae |
files | client/src/components/map/Map.vue client/src/components/map/layers.js client/src/components/map/styles.js |
diffstat | 3 files changed, 15 insertions(+), 6 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/map/Map.vue Thu Aug 22 09:20:38 2019 +0200 +++ b/client/src/components/map/Map.vue Thu Aug 22 10:56:05 2019 +0200 @@ -43,6 +43,7 @@ import { pane } from "@/lib/mixins"; import { layerFactory } from "@/components/map/layers"; import { ImageWMS as ImageSource } from "ol/source"; +import { styles } from "./styles"; import "ol/ol.css"; /* for the sake of debugging */ @@ -350,9 +351,15 @@ }) }); this.layers.get("WATERWAYPROFILES").setStyle(wwpStyle); - this.layers.get("FAIRWAYDIMENSIONSLOS1").setStyle(fwd1Style); - this.layers.get("FAIRWAYDIMENSIONSLOS2").setStyle(fwd2Style); - this.layers.get("FAIRWAYDIMENSIONSLOS3").setStyle(fwd3Style); + this.layers + .get("FAIRWAYDIMENSIONSLOS1") + .setStyle(() => [fwd1Style, styles.textFW1]); + this.layers + .get("FAIRWAYDIMENSIONSLOS2") + .setStyle(() => [fwd2Style, styles.textFW2]); + this.layers + .get("FAIRWAYDIMENSIONSLOS3") + .setStyle(() => [fwd3Style, styles.textFW3]); this.layers.get("SECTIONS").setStyle(secStyle); this.layers.get("STRETCHES").setStyle(strStyle); this.layers.get("BOTTLENECKS").setStyle(btlnStyle);
--- a/client/src/components/map/layers.js Thu Aug 22 09:20:38 2019 +0200 +++ b/client/src/components/map/layers.js Thu Aug 22 10:56:05 2019 +0200 @@ -13,7 +13,7 @@ import OSM from "ol/source/OSM"; import { equalTo } from "ol/format/filter"; import { HTTP } from "@/lib/http"; -import styleFactory from "./styles"; +import { styleFactory } from "./styles"; import store from "@/store/index"; const buildVectorLoader = (
--- a/client/src/components/map/styles.js Thu Aug 22 09:20:38 2019 +0200 +++ b/client/src/components/map/styles.js Thu Aug 22 10:56:05 2019 +0200 @@ -129,7 +129,7 @@ }) }; -export default function(mapId) { +const styleFactory = function(mapId) { return { stretches(feature) { let style = styles.yellow2; @@ -349,4 +349,6 @@ ]; } }; -} +}; + +export { styles, styleFactory };