# HG changeset patch
# User Markus Kottlaender <markus@intevation.de>
# Date 1549450022 -3600
# Node ID ea5a0e771b71753d43624621017daeab565e1433
# Parent  af136b1a854e8703df4d0ac20c85aa119fe521a2
Distinct fairway layers per LOS

There are now distinct layers for LOS1-3, which can be enabled/disabled in the legend.
LOS2 has no data yet but works.
Cross profiles show only LOS3 still.
issue 261

diff -r af136b1a854e -r ea5a0e771b71 client/src/components/Maplayer.vue
--- a/client/src/components/Maplayer.vue	Tue Feb 05 14:46:26 2019 +0100
+++ b/client/src/components/Maplayer.vue	Wed Feb 06 11:47:02 2019 +0100
@@ -36,6 +36,7 @@
 import "ol/ol.css";
 import { Map, View } from "ol";
 import { WFS, GeoJSON } from "ol/format.js";
+import { equalTo } from "ol/format/filter.js";
 import { Stroke, Style, Fill } from "ol/style.js";
 
 /* for the sake of debugging */
@@ -179,33 +180,37 @@
 
     // TODO make display of layers more dynamic, e.g. from a list
 
-    // loading the full WFS layer, by not setting the loader function
-    // and without bboxStrategy
-    var featureRequest = new WFS().writeGetFeature({
-      srsName: "EPSG:3857",
-      featureNS: "gemma",
-      featurePrefix: "gemma",
-      featureTypes: ["fairway_dimensions"],
-      outputFormat: "application/json"
-    });
+    // load different fairway dimension layers (level of service)
+    ["1", "2", "3"].forEach(los => {
+      // loading the full WFS layer, by not setting the loader function
+      // and without bboxStrategy
+      var featureRequest = new WFS().writeGetFeature({
+        srsName: "EPSG:3857",
+        featureNS: "gemma",
+        featurePrefix: "gemma",
+        featureTypes: ["fairway_dimensions"],
+        outputFormat: "application/json",
+        filter: equalTo("level_of_service", los)
+      });
 
-    // NOTE: loading the full fairway_dimensions makes sure
-    //       that all are available for the intersection with the profile
-    HTTP.post(
-      "/internal/wfs",
-      new XMLSerializer().serializeToString(featureRequest),
-      {
-        headers: {
-          "X-Gemma-Auth": localStorage.getItem("token"),
-          "Content-type": "text/xml; charset=UTF-8"
+      // NOTE: loading the full fairway_dimensions makes sure
+      //       that all are available for the intersection with the profile
+      HTTP.post(
+        "/internal/wfs",
+        new XMLSerializer().serializeToString(featureRequest),
+        {
+          headers: {
+            "X-Gemma-Auth": localStorage.getItem("token"),
+            "Content-type": "text/xml; charset=UTF-8"
+          }
         }
-      }
-    ).then(response => {
-      this.getVSourceByName("Fairway Dimensions").addFeatures(
-        new GeoJSON().readFeatures(JSON.stringify(response.data))
-      );
-      // would scale to the extend of all resulting features
-      // this.openLayersMap.getView().fit(vectorSrc.getExtent());
+      ).then(response => {
+        this.getVSourceByName("Fairway Dimensions LOS " + los).addFeatures(
+          new GeoJSON().readFeatures(JSON.stringify(response.data))
+        );
+        // would scale to the extend of all resulting features
+        // this.openLayersMap.getView().fit(vectorSrc.getExtent());
+      });
     });
 
     // load following layers with bboxStrategy (using our request builder)
diff -r af136b1a854e -r ea5a0e771b71 client/src/store/fairway.js
--- a/client/src/store/fairway.js	Tue Feb 05 14:46:26 2019 +0100
+++ b/client/src/store/fairway.js	Wed Feb 06 11:47:02 2019 +0100
@@ -201,7 +201,7 @@
             .then(() => {
               rootState.map.cutTool.setActive(false);
               rootGetters["map/getVSourceByName"](
-                "Fairway Dimensions"
+                "Fairway Dimensions LOS 3"
               ).forEachFeatureIntersectingExtent(
                 // need to use EPSG:3857 which is the proj of vectorSource
                 profileLine
diff -r af136b1a854e -r ea5a0e771b71 client/src/store/map.js
--- a/client/src/store/map.js	Tue Feb 05 14:46:26 2019 +0100
+++ b/client/src/store/map.js	Wed Feb 06 11:47:02 2019 +0100
@@ -105,18 +105,14 @@
         showInLegend: true
       },
       {
-        name: "Fairway Dimensions",
+        name: "Fairway Dimensions LOS 1",
         data: new VectorLayer({
           source: new VectorSource(),
-          style: function(feature) {
-            let strokeColor =
-              feature.get("level_of_service").toString() === "3"
-                ? "rgba(0, 0, 255, 1.0)"
-                : "rgba(0, 100, 150, 1.0)";
+          style: function() {
             return [
               new Style({
                 stroke: new Stroke({
-                  color: strokeColor,
+                  color: "rgba(76, 76, 255, 1.0)",
                   width: 2
                 })
               }),
@@ -127,7 +123,65 @@
                   fill: new Fill({
                     color: "black"
                   }),
-                  text: "LOS: " + feature.get("level_of_service").toString()
+                  text: "LOS: 1"
+                  //, zIndex: 10
+                })
+              })
+            ];
+          }
+        }),
+        isVisible: true,
+        showInLegend: true
+      },
+      {
+        name: "Fairway Dimensions LOS 2",
+        data: new VectorLayer({
+          source: new VectorSource(),
+          style: function() {
+            return [
+              new Style({
+                stroke: new Stroke({
+                  color: "rgba(38, 38, 127, 1.0)",
+                  width: 2
+                })
+              }),
+              new Style({
+                text: new Text({
+                  font: 'bold 12px "Open Sans", "sans-serif"',
+                  placement: "line",
+                  fill: new Fill({
+                    color: "black"
+                  }),
+                  text: "LOS: 2"
+                  //, zIndex: 10
+                })
+              })
+            ];
+          }
+        }),
+        isVisible: true,
+        showInLegend: true
+      },
+      {
+        name: "Fairway Dimensions LOS 3",
+        data: new VectorLayer({
+          source: new VectorSource(),
+          style: function() {
+            return [
+              new Style({
+                stroke: new Stroke({
+                  color: "rgba(0, 0, 255, 1.0)",
+                  width: 2
+                })
+              }),
+              new Style({
+                text: new Text({
+                  font: 'bold 12px "Open Sans", "sans-serif"',
+                  placement: "line",
+                  fill: new Fill({
+                    color: "black"
+                  }),
+                  text: "LOS: 3"
                   //, zIndex: 10
                 })
               })