Mercurial > gemma

diff client/src/store/map.js @ 2909:5105f6ad0176

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
client: stretches: fixed highlighting of selected stretch The vectorloader for each layer can now take a callback to postprocess the returned features. For the stretches layer the selectedStretch (which is now stored in the vuex store) now gets a 'highlighted' flag. The layer respects that flag to alter the styles. A watcher on selectedStretch resets the styles when selectedStretch changes and sets the highlighted flag for the new selectedStretch, if present, otherwise the vectorloader does this job.
author Markus Kottlaender <markus@intevation.de>
date Tue, 02 Apr 2019 18:19:43 +0200
parents 35f6e4383161
children c8c7122047a2
line wrap: on
line diff
--- a/client/src/store/map.js	Tue Apr 02 17:08:07 2019 +0200
+++ b/client/src/store/map.js	Tue Apr 02 18:19:43 2019 +0200
@@ -121,15 +121,30 @@
           source: new VectorSource({
             strategy: bboxStrategy
           }),
-          style: new Style({
-            stroke: new Stroke({
-              color: "rgba(250, 200, 0, .8)",
-              width: 2
-            }),
-            fill: new Fill({
-              color: "rgba(250, 200, 10, .3)"
-            })
-          })
+          style: feature => {
+            let style = new Style({
+              stroke: new Stroke({
+                color: "rgba(250, 200, 0, .8)",
+                width: 2
+              }),
+              fill: new Fill({
+                color: "rgba(250, 200, 10, .3)"
+              })
+            });
+            if (feature.get("highlighted")) {
+              style = new Style({
+                stroke: new Stroke({
+                  color: "rgba(250, 240, 10, .9)",
+                  width: 5
+                }),
+                fill: new Fill({
+                  color: "rgba(250, 240, 0, .7)"
+                })
+              });
+            }
+
+            return style;
+          }
         }),
         isVisible: false
       },