--- a/client/src/components/Maplayer.vue	Thu Aug 30 14:39:24 2018 +0200
+++ b/client/src/components/Maplayer.vue	Thu Aug 30 17:07:35 2018 +0200
@@ -39,9 +39,15 @@
 </style>
 
 <script>
+import { HTTP } from "../lib/http";
 import "ol/ol.css";
 import { Map, View } from "ol";
-import TileLayer from "ol/layer/Tile";
+// needed for vector filter example
+// import { greaterThan as greaterThanFilter } from "ol/format/filter.js";
+import { WFS, GeoJSON } from "ol/format.js";
+import { Tile as TileLayer, Vector as VectorLayer } from "ol/layer.js";
+import VectorSource from "ol/source/Vector.js";
+import { Stroke, Style } from "ol/style.js";
 import OSM from "ol/source/OSM";
 import TileWMS from "ol/source/TileWMS.js";
 import Layerselect from "./Layerselect";
@@ -73,6 +79,19 @@
             })
           }),
           isVisible: true
+        },
+        {
+          name: "Fairways Dimensions",
+          data: new VectorLayer({
+            source: new VectorSource(),
+            style: new Style({
+              stroke: new Stroke({
+                color: "rgba(0, 0, 255, 1.0)",
+                width: 2
+              })
+            })
+          }),
+          isVisible: true
         }
       ]
     };
@@ -91,6 +110,7 @@
     }
   },
   mounted() {
+    var that = this;
     this.openLayersMap = new Map({
       layers: this.layerData,
       target: "map",
@@ -100,6 +120,34 @@
         projection: this.projection
       })
     });
+
+    var featureRequest = new WFS().writeGetFeature({
+      // srsName: "urn:ogc:def:crs:EPSG::4326",
+      srsName: "EPSG:3857",
+      featureNS: "gemma",
+      featurePrefix: "gemma",
+      featureTypes: ["fairway_dimensions"],
+      outputFormat: "application/json"
+      // example for a filter
+      //filter: greaterThanFilter("level_of_service", 0)
+    });
+
+    HTTP.post(
+      "/internal/wfs",
+      new XMLSerializer().serializeToString(featureRequest),
+      {
+        headers: {
+          "X-Gemma-Auth": localStorage.getItem("token"),
+          "Content-type": "text/xml; charset=UTF-8"
+        }
+      }
+    ).then(function(response) {
+      var features = new GeoJSON().readFeatures(JSON.stringify(response.data));
+      var vectorSrc = that.layers[2].data.getSource();
+      vectorSrc.addFeatures(features);
+      // would scale to the extend of all resulting features
+      // that.openLayersMap.getView().fit(vectorSrc.getExtent());
+    });
   }
 };
 </script>