Binary file client/src/assets/fa-diagram.png has changed

--- a/client/src/components/layers/Layers.vue	Mon May 20 17:14:47 2019 +0200
+++ b/client/src/components/layers/Layers.vue	Mon May 20 17:34:43 2019 +0200
@@ -32,6 +32,7 @@
         <Layerselect layerId="BOTTLENECKISOLINE" />
         <Layerselect layerId="DIFFERENCES" />
         <Layerselect layerId="BOTTLENECKSTATUS" />
+        <Layerselect layerId="BOTTLENECKFAIRWAYAVAILABILITY" />
         <Layerselect layerId="DISTANCEMARKS" />
         <Layerselect layerId="DISTANCEMARKSAXIS" />
         <Layerselect layerId="GAUGES" />

--- a/client/src/components/map/layers.js	Mon May 20 17:14:47 2019 +0200
+++ b/client/src/components/map/layers.js	Mon May 20 17:34:43 2019 +0200
@@ -460,6 +460,34 @@
           source
         });
       })(),
+      (function() {
+        const source = new VectorSource({ strategy: bboxStrategy });
+        source.setLoader(
+          buildVectorLoader(
+            {
+              featureTypes: ["bottlenecks_geoserver"],
+              geometryName: "area"
+            },
+            source,
+            false,
+            async f => {
+              if (f.get("fa_critical")) {
+                f.set("fa_data", []);
+              }
+              return f;
+            }
+          )
+        );
+        return new VectorLayer({
+          id: "BOTTLENECKFAIRWAYAVAILABILITY",
+          label: "Bottlenecks Fairway Availability",
+          forLegendStyle: { point: true, resolution: 16 },
+          visible: false,
+          zIndex: 1,
+          style: styles.bottleneckFairwayAvailability,
+          source
+        });
+      })(),
       new ImageLayer({
         id: "DISTANCEMARKS",
         label: "Distance Marks",

--- a/client/src/components/map/styles.js	Mon May 20 17:14:47 2019 +0200
+++ b/client/src/components/map/styles.js	Mon May 20 17:34:43 2019 +0200
@@ -174,6 +174,44 @@
     }
     return s;
   },
+  bottleneckFairwayAvailability(feature, resolution, isLegend) {
+    let s = [];
+    if (isLegend) {
+      s.push(
+        new Style({
+          image: new Icon({
+            src: require("@/assets/fa-diagram.png"),
+            anchor: [0.5, 0.5],
+            scale: 1
+          })
+        })
+      );
+    }
+    if (feature.get("fa_critical") && feature.get("fa_data")) {
+      let frame = `<rect x='0' y='0' width='40' height='104' stroke-width='0' fill='white'/>`;
+      let lnwl = `<rect x='2' y='22' width='18' height='80' stroke-width='0' fill='aqua'/>`;
+      let range1 = `<rect x='20' y='2' width='18' height='10' stroke-width='0' fill='hotpink'/>`;
+      let range2 = `<rect x='20' y='12' width='18' height='30' stroke-width='0' fill='darksalmon'/>`;
+      let range3 = `<rect x='20' y='42' width='18' height='60' stroke-width='0' fill='blue'/>`;
+      let svg = `data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='104'><g>${frame}${lnwl}${range1}${range2}${range3}</g></svg>`;
+      s.push(
+        new Style({
+          geometry: new Point([
+            feature.getGeometry().getExtent()[0],
+            feature.getGeometry().getExtent()[1] +
+              (feature.getGeometry().getExtent()[3] -
+                feature.getGeometry().getExtent()[1])
+          ]),
+          image: new Icon({
+            src: svg,
+            anchor: [1, 1],
+            scale: resolution > 50 ? 0.75 : 1
+          })
+        })
+      );
+    }
+    return s;
+  },
   dma(feature, resolution) {
     if (resolution < 10) {
       var s = styles.circleBlue;