--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/map/Maplayer.vue	Fri Sep 07 11:13:56 2018 +0200
@@ -0,0 +1,107 @@
+<template>
+  <div class="mapdisplay">
+    <div id="map"></div>
+    <!-- <div class="profile d-flex flex-row">
+      <Fairwayprofile height="300" width="1024" :xScale="[0, 300]" :yScaleLeft="[191, 199]" :yScaleRight="[-6, 1]" :margin="{ top: 20, right: 40, bottom: 20, left: 40 }"></Fairwayprofile>
+    </div> -->
+  </div>
+</template>
+
+<style lang="scss">
+@import "../application/assets/application.scss";
+
+.profile {
+  background-color: white;
+  height: 50vh-$topbarheight;
+}
+
+.mapdisplay {
+  height: 100vh;
+}
+
+#map {
+  height: 100vh;
+}
+
+.ol-zoom {
+  display: flex;
+  left: 15vw;
+  margin-top: 2vh;
+  z-index: 5;
+  background-color: white;
+}
+</style>
+
+<script>
+import { HTTP } from "../application/lib/http";
+import "ol/ol.css";
+import { Map, View } from "ol";
+// needed for vector filter example
+// import { greaterThan as greaterThanFilter } from "ol/format/filter.js";
+import { WFS, GeoJSON } from "ol/format.js";
+import { mapGetters } from "vuex";
+import Fairwayprofile from "../fairway/Fairwayprofile";
+
+export default {
+  name: "maplayer",
+  props: ["lat", "long", "zoom"],
+  components: {
+    Fairwayprofile
+  },
+  data() {
+    return {
+      projection: "EPSG:3857",
+      openLayersMap: null
+    };
+  },
+  computed: {
+    ...mapGetters("mapstore", ["layers"]),
+    layerData() {
+      return this.layers.map(x => {
+        return x.data;
+      });
+    }
+  },
+  methods: {},
+  mounted() {
+    var that = this;
+    this.openLayersMap = new Map({
+      layers: this.layerData,
+      target: "map",
+      view: new View({
+        center: [this.long, this.lat],
+        zoom: this.zoom,
+        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>