--- a/client/src/map/Maplayer.vue	Thu Sep 13 14:11:33 2018 +0200
+++ b/client/src/map/Maplayer.vue	Thu Sep 13 16:55:53 2018 +0200
@@ -10,24 +10,6 @@
 .mapfull {
   height: 100vh;
 }
-
-.ol-zoom {
-  display: flex;
-  left: 16vw;
-  z-index: 5;
-  top: 1rem;
-  padding: 0.3rem;
-  background-color: white;
-  box-shadow: $basic-shadow;
-}
-
-.ol-attribution {
-  padding: 0.3rem;
-  background-color: white;
-  box-shadow: $basic-shadow;
-  margin-bottom: 1rem;
-  margin-right: 0.3rem;
-}
 </style>
 
 <script>
@@ -38,14 +20,20 @@
 // import { greaterThan as greaterThanFilter } from "ol/format/filter.js";
 import { WFS, GeoJSON } from "ol/format.js";
 import { mapGetters } from "vuex";
+import Draw from "ol/interaction/Draw.js";
+import { Vector as VectorSource } from "ol/source.js";
+import { Vector as VectorLayer } from "ol/layer.js";
 
 export default {
   name: "maplayer",
-  props: ["lat", "long", "zoom", "split"],
+  props: ["drawMode", "lat", "long", "zoom", "split"],
   data() {
     return {
       projection: "EPSG:3857",
-      openLayersMap: null
+      openLayersMap: null,
+      interaction: null,
+      vectorLayer: null,
+      vectorSource: null
     };
   },
   computed: {
@@ -57,13 +45,45 @@
       };
     },
     layerData() {
-      return this.layers.map(x => {
+      const l = this.layers.map(x => {
         return x.data;
       });
+      return [...l, this.vectorLayer];
     }
   },
-  methods: {},
+  methods: {
+    createVectorSource() {
+      this.vectorSource = new VectorSource({ wrapX: false });
+    },
+    createVectorLayer() {
+      this.vectorLayer = new VectorLayer({
+        source: this.vectorSource
+      });
+    },
+    removeCurrentInteraction() {
+      this.openLayersMap.removeInteraction(this.interaction);
+      this.interaction = null;
+    },
+    createInteraction() {
+      return new Draw({
+        source: this.vectorSource,
+        type: this.drawMode
+      });
+    },
+    activateInteraction() {
+      const interaction = this.createInteraction(this.drawMode);
+      this.interaction = interaction;
+      this.openLayersMap.addInteraction(interaction);
+    }
+  },
   watch: {
+    drawMode() {
+      if (this.interaction) {
+        this.removeCurrentInteraction();
+      } else {
+        this.activateInteraction();
+      }
+    },
     split() {
       const map = this.openLayersMap;
       this.$nextTick(() => {
@@ -72,10 +92,12 @@
     }
   },
   mounted() {
-    var that = this;
+    this.createVectorSource();
+    this.createVectorLayer();
     this.openLayersMap = new Map({
       layers: this.layerData,
       target: "map",
+      controls: [],
       view: new View({
         center: [this.long, this.lat],
         zoom: this.zoom,
@@ -103,12 +125,12 @@
           "Content-type": "text/xml; charset=UTF-8"
         }
       }
-    ).then(function(response) {
+    ).then(response => {
       var features = new GeoJSON().readFeatures(JSON.stringify(response.data));
-      var vectorSrc = that.layers[2].data.getSource();
+      var vectorSrc = this.layers[2].data.getSource();
       vectorSrc.addFeatures(features);
       // would scale to the extend of all resulting features
-      // that.openLayersMap.getView().fit(vectorSrc.getExtent());
+      // this.openLayersMap.getView().fit(vectorSrc.getExtent());
     });
 
     // FIXME hardwired for now
@@ -127,9 +149,9 @@
           "Content-type": "text/xml; charset=UTF-8"
         }
       }
-    ).then(function(response) {
+    ).then(response => {
       var features = new GeoJSON().readFeatures(JSON.stringify(response.data));
-      var vectorSrc = that.layers[3].data.getSource();
+      var vectorSrc = this.layers[3].data.getSource();
       vectorSrc.addFeatures(features);
     });
 
@@ -149,9 +171,9 @@
           "Content-type": "text/xml; charset=UTF-8"
         }
       }
-    ).then(function(response) {
+    ).then(response => {
       var features = new GeoJSON().readFeatures(JSON.stringify(response.data));
-      var vectorSrc = that.layers[4].data.getSource();
+      var vectorSrc = this.layers[4].data.getSource();
       vectorSrc.addFeatures(features);
     });
 
@@ -171,10 +193,10 @@
           "Content-type": "text/xml; charset=UTF-8"
         }
       }
-    ).then(function(response) {
+    ).then(response => {
       var features = new GeoJSON().readFeatures(JSON.stringify(response.data));
-      var vectorSrc = that.layers[5].data.getSource();
-      that.layers[5].data.setVisible(that.layers[5].isVisible);
+      var vectorSrc = this.layers[5].data.getSource();
+      this.layers[5].data.setVisible(this.layers[5].isVisible);
       vectorSrc.addFeatures(features);
     });
   }