--- a/client/src/map/Maplayer.vue	Tue Nov 06 09:12:05 2018 +0100
+++ b/client/src/map/Maplayer.vue	Tue Nov 06 10:00:13 2018 +0100
@@ -45,12 +45,11 @@
 import { Map, View } from "ol";
 import { WFS, GeoJSON } from "ol/format.js";
 import LineString from "ol/geom/LineString.js";
-import Point from "ol/geom/Point.js";
 import Draw from "ol/interaction/Draw.js";
 import { Vector as VectorLayer } from "ol/layer.js";
 import { Vector as VectorSource } from "ol/source.js";
 import { getLength, getArea } from "ol/sphere.js";
-import { Icon, Stroke, Style, Fill } from "ol/style.js";
+import { Stroke, Style, Fill } from "ol/style.js";
 
 import { displayError } from "../application/lib/errors.js";
 import { calculateFairwayCoordinates } from "../application/lib/geo.js";
@@ -65,9 +64,7 @@
   data() {
     return {
       projection: "EPSG:3857",
-      interaction: null,
-      vectorLayer: null,
-      vectorSource: null
+      interaction: null
     };
   },
   computed: {
@@ -82,61 +79,22 @@
     }
   },
   methods: {
-    drawStyleFunction(feature) {
-      // adapted from OpenLayer's LineString Arrow Example
-      var geometry = feature.getGeometry();
-      var styles = [
-        // linestring
-        new Style({
-          stroke: new Stroke({
-            color: "#369aca",
-            width: 2
-          })
-        })
-      ];
-
-      if (geometry.getType() === "LineString") {
-        geometry.forEachSegment(function(start, end) {
-          var dx = end[0] - start[0];
-          var dy = end[1] - start[1];
-          var rotation = Math.atan2(dy, dx);
-          // arrows
-          styles.push(
-            new Style({
-              geometry: new Point(end),
-              image: new Icon({
-                // we need to make sure the image is loaded by Vue Loader
-                src: require("../application/assets/linestring_arrow.png"),
-                // fiddling with the anchor's y value does not help to
-                // position the image more centered on the line ending, as the
-                // default line style seems to be slightly uncentered in the
-                // anti-aliasing, but the image is not placed with subpixel
-                // precision
-                anchor: [0.75, 0.5],
-                rotateWithView: true,
-                rotation: -rotation
-              })
-            })
-          );
-        });
-      }
-      return styles;
-    },
     removeCurrentInteraction() {
       this.$store.commit("map/setCurrentMeasurement", null);
-      this.vectorSource.clear();
+      this.getLayerByName("Draw Tool").data.getSource().clear();
       this.openLayersMap.removeInteraction(this.interaction);
       this.interaction = null;
     },
     createInteraction(drawMode) {
-      this.vectorSource.clear();
+      const drawVectorSrc = this.getLayerByName("Draw Tool").data.getSource();
+      drawVectorSrc.clear();
       var draw = new Draw({
-        source: this.vectorSource,
+        source: drawVectorSrc,
         type: drawMode,
         maxPoints: drawMode === "LineString" ? 2 : 50
       });
       draw.on("drawstart", () => {
-        this.vectorSource.clear();
+        drawVectorSrc.clear();
         this.$store.commit("map/setCurrentMeasurement", null);
         // we are not setting an id here, to avoid the regular identify to
         // pick it up
@@ -406,13 +364,8 @@
     }
   },
   mounted() {
-    this.vectorSource = new VectorSource({ wrapX: false });
-    this.vectorLayer = new VectorLayer({
-      source: this.vectorSource,
-      style: this.drawStyleFunction
-    });
     let map = new Map({
-      layers: [...this.layers.map(x => x.data), this.vectorLayer],
+      layers: [...this.layers.map(x => x.data)],
       target: "map",
       controls: [],
       view: new View({