diff client/src/store/map.js @ 2140:55bedb39295a

feat: clicking on stretches activates according layer
author Thomas Junk <thomas.junk@intevation.de>
date Thu, 07 Feb 2019 10:30:44 +0100
parents 602c2096c078
children 8be0fbac2297 82867a69e10e
line wrap: on
line diff
--- a/client/src/store/map.js	Thu Feb 07 09:15:39 2019 +0100
+++ b/client/src/store/map.js	Thu Feb 07 10:30:44 2019 +0100
@@ -33,6 +33,23 @@
 import bbox from "@turf/bbox";
 import app from "../main";
 
+const LAYERS = {
+  OPENSTREETMAP: "Open Streetmap",
+  INLANDECDIS: "Inland ECDIS chart Danube",
+  WATERWAYAREA: "Waterway Area",
+  STRETCHES: "Stretches",
+  FAIRWAYDIMENSIONSLOS1: "Fairway Dimensions LOS 1",
+  FAIRWAYDIMENSIONSLOS2: "Fairway Dimensions LOS 2",
+  FAIRWAYDIMENSIONSLOS3: "Fairway Dimensions LOS 3",
+  WATERWAYAXIS: "Waterway Axis",
+  BOTTLENECKS: "Bottlenecks",
+  BOTTLENECKISOLINE: "Bottleneck isolines",
+  DISTANCEMARKS: "Distance marks",
+  DISTANCEMARKSAXIS: "Distance marks, Axis",
+  DRAWTOOL: "Draw Tool",
+  CUTTOOL: "Cut Tool"
+};
+
 // initial state
 const init = () => {
   return {
@@ -51,7 +68,7 @@
     isolinesLegendImgDataURL: "",
     layers: [
       {
-        name: "Open Streetmap",
+        name: LAYERS.OPENSTREETMAP,
         data: new TileLayer({
           source: new OSM()
         }),
@@ -59,7 +76,7 @@
         showInLegend: true
       },
       {
-        name: "Inland ECDIS chart Danube",
+        name: LAYERS.INLANDECDIS,
         data: new TileLayer({
           source: new TileWMS({
             preload: 1,
@@ -72,7 +89,7 @@
         showInLegend: true
       },
       {
-        name: "Waterway Area",
+        name: LAYERS.WATERWAYAREA,
         data: new VectorLayer({
           source: new VectorSource({
             strategy: bboxStrategy
@@ -88,7 +105,7 @@
         showInLegend: true
       },
       {
-        name: "Stretches",
+        name: LAYERS.STRETCHES,
         data: new VectorLayer({
           source: new VectorSource({
             strategy: bboxStrategy
@@ -107,7 +124,7 @@
         showInLegend: true
       },
       {
-        name: "Fairway Dimensions LOS 1",
+        name: LAYERS.FAIRWAYDIMENSIONSLOS1,
         data: new VectorLayer({
           source: new VectorSource(),
           style: function() {
@@ -136,7 +153,7 @@
         showInLegend: true
       },
       {
-        name: "Fairway Dimensions LOS 2",
+        name: LAYERS.FAIRWAYDIMENSIONSLOS2,
         data: new VectorLayer({
           source: new VectorSource(),
           style: function() {
@@ -165,7 +182,7 @@
         showInLegend: true
       },
       {
-        name: "Fairway Dimensions LOS 3",
+        name: LAYERS.FAIRWAYDIMENSIONSLOS3,
         data: new VectorLayer({
           source: new VectorSource(),
           style: function() {
@@ -194,7 +211,7 @@
         showInLegend: true
       },
       {
-        name: "Waterway Axis",
+        name: LAYERS.WATERWAYAXIS,
         data: new VectorLayer({
           source: new VectorSource({
             strategy: bboxStrategy
@@ -211,7 +228,7 @@
         showInLegend: true
       },
       {
-        name: "Bottlenecks",
+        name: LAYERS.BOTTLENECKS,
         data: new VectorLayer({
           source: new VectorSource({
             strategy: bboxStrategy
@@ -230,7 +247,7 @@
         showInLegend: true
       },
       {
-        name: "Bottleneck isolines",
+        name: LAYERS.BOTTLENECKISOLINE,
         data: new TileLayer({
           source: new TileWMS({
             preload: 0,
@@ -258,7 +275,7 @@
         showInLegend: true
       },
       {
-        name: "Distance marks",
+        name: LAYERS.DISTANCEMARKS,
         forLegendStyle: { point: true, resolution: 8 },
         data: new VectorLayer({
           source: new VectorSource({
@@ -269,7 +286,7 @@
         showInLegend: true
       },
       {
-        name: "Distance marks, Axis",
+        name: LAYERS.DISTANCEMARKSAXIS,
         forLegendStyle: { point: true, resolution: 8 },
         data: new VectorLayer({
           source: new VectorSource({
@@ -306,7 +323,7 @@
         showInLegend: true
       },
       {
-        name: "Draw Tool",
+        name: LAYERS.DRAWTOOL,
         data: new VectorLayer({
           source: new VectorSource({ wrapX: false }),
           style: function(feature) {
@@ -354,7 +371,7 @@
         showInLegend: false
       },
       {
-        name: "Cut Tool",
+        name: LAYERS.CUTTOOL,
         data: new VectorLayer({
           source: new VectorSource({ wrapX: false }),
           style: function(feature) {
@@ -425,6 +442,21 @@
     extent: (state, extent) => {
       state.extent = extent;
     },
+    setLayerVisible: (state, name) => {
+      const layer = state.layers.findIndex(l => l.name === name);
+      state.layers[layer].isVisible = true;
+      state.layers[layer].data.setVisible(true);
+    },
+    setLayerInvisible: (state, name) => {
+      const layer = state.layers.findIndex(l => l.name === name);
+      state.layers[layer].isVisible = false;
+      state.layers[layer].data.setVisible(false);
+    },
+    toggleVisibilityByName: (state, name) => {
+      const layer = state.layers.findIndex(l => l.name === name);
+      state.layers[layer].isVisible = !state.layers[layer].isVisible;
+      state.layers[layer].data.setVisible(state.layers[layer].isVisible);
+    },
     toggleVisibility: (state, layer) => {
       state.layers[layer].isVisible = !state.layers[layer].isVisible;
       state.layers[layer].data.setVisible(state.layers[layer].isVisible);
@@ -645,3 +677,5 @@
     }
   }
 };
+
+export { LAYERS };