--- 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;