--- a/client/src/components/layers/LegendElement.vue	Fri Sep 06 18:09:48 2019 +0200
+++ b/client/src/components/layers/LegendElement.vue	Mon Sep 09 11:51:34 2019 +0200
@@ -29,9 +29,11 @@
 import Feature from "ol/Feature";
 import { Vector as VectorLayer } from "ol/layer";
 import { Vector as VectorSource } from "ol/source";
+import Polygon from "ol/geom/Polygon";
 import LineString from "ol/geom/LineString";
 import Point from "ol/geom/Point";
 import { HTTP } from "@/lib/http";
+import { Stroke, Style, Fill } from "ol/style";
 
 export default {
   props: ["layer"],
@@ -136,6 +138,7 @@
       let vector = this.createVectorLayer();
 
       this.myMap.removeLayer(this.myMap.getLayers()[0]);
+
       this.myMap.addLayer(vector);
     },
     initMap() {
@@ -155,11 +158,29 @@
     },
     createVectorLayer() {
       let mapStyle = this.layer.getStyle();
-
-      let feature = new Feature({
-        geometry: new LineString([[-1, -1], [0, 0], [1, 1]])
-      });
-
+      let feature;
+      // show bottleneck legend as polygon
+      if (this.layer.get("id") === "BOTTLENECKS") {
+        feature = new Feature({
+          geometry: new Polygon([
+            [[-1.7, -1.2], [-1.7, 0.5], [1.7, 1.2], [1.7, -0.5]]
+          ])
+        });
+        mapStyle = new Style({
+          stroke: new Stroke({
+            color: mapStyle.getStroke().getColor(),
+            // reduce the stroke width for better layout in map legend.
+            width: 2
+          }),
+          fill: new Fill({
+            color: mapStyle.getFill().getColor()
+          })
+        });
+      } else {
+        feature = new Feature({
+          geometry: new LineString([[-1, -1], [0, 0], [1, 1]])
+        });
+      }
       // special case if we need to call the style function with a special
       // parameter or to detect a point layer
       let legendStyle = this.layer.get("forLegendStyle");