--- a/client/src/components/Maplayer.vue	Fri Mar 01 13:51:09 2019 +0100
+++ b/client/src/components/Maplayer.vue	Fri Mar 01 14:55:58 2019 +0100
@@ -352,6 +352,20 @@
     );
     layer.data.setVisible(layer.isVisible);
 
+    layer = this.getLayerByName(LAYERS.BOTTLENECKSTATUS);
+    layer.data.getSource().setLoader(
+      this.buildVectorLoader(
+        {
+          featureNS: "gemma",
+          featurePrefix: "gemma",
+          featureTypes: ["bottlenecks_geoserver"],
+          geometryName: "area"
+        },
+        "/internal/wfs",
+        layer.data.getSource()
+      )
+    );
+
     layer = this.getLayerByName(LAYERS.BOTTLENECKS);
     layer.data.getSource().setLoader(
       this.buildVectorLoader(
@@ -370,22 +384,27 @@
       headers: { "X-Gemma-Auth": localStorage.getItem("token") }
     })
       .then(response => {
-        this.btlnStrokeC = response.data.code;
+        let btlnStrokeC = response.data.code;
         HTTP.get("/system/style/Bottlenecks/fill", {
           headers: { "X-Gemma-Auth": localStorage.getItem("token") }
         })
           .then(response => {
-            this.btlnFillC = response.data.code;
-            var newstyle = new Style({
+            let btlnFillC = response.data.code;
+            var newStyle = new Style({
               stroke: new Stroke({
-                color: this.btlnStrokeC,
+                color: btlnStrokeC,
                 width: 4
               }),
               fill: new Fill({
-                color: this.btlnFillC
+                color: btlnFillC
               })
             });
-            layer.data.setStyle(newstyle);
+            layer.data.setStyle(function(feature, resolution) {
+              if (resolution <= 50) {
+                return newStyle;
+              }
+              return null;
+            });
           })
           .catch(error => {
             console.log(error);