--- a/client/src/store/map.js	Thu Nov 22 16:54:39 2018 +0100
+++ b/client/src/store/map.js	Thu Nov 22 17:00:26 2018 +0100
@@ -18,23 +18,18 @@
 import TileWMS from "ol/source/TileWMS.js";
 import { Tile as TileLayer, Vector as VectorLayer } from "ol/layer.js";
 import OSM from "ol/source/OSM";
-import {
-  Icon,
-  Stroke,
-  Style,
-  Fill,
-  Text,
-  Circle as CircleStyle
-} from "ol/style.js";
+import Draw from "ol/interaction/Draw.js";
+import { Icon, Stroke, Style, Fill, Text, Circle } from "ol/style.js";
 import VectorSource from "ol/source/Vector.js";
 import Point from "ol/geom/Point.js";
 import { bbox as bboxStrategy } from "ol/loadingstrategy";
 import { HTTP } from "../lib/http";
 import { fromLonLat } from "ol/proj";
+import { getLength, getArea } from "ol/sphere.js";
 
-export default {
-  namespaced: true,
-  state: {
+// initial state
+const init = () => {
+  return {
     openLayersMap: null,
     identifiedFeatures: [], // map features identified by clicking on the map
     currentMeasurement: null, // distance or area from line-/polygon-/cutTool
@@ -208,7 +203,7 @@
           style: function(feature, resolution) {
             if (resolution < 10) {
               var s = new Style({
-                image: new CircleStyle({
+                image: new Circle({
                   radius: 5,
                   fill: new Fill({ color: "rgba(255, 0, 0, 0.1)" }),
                   stroke: new Stroke({ color: "blue", width: 1 })
@@ -333,13 +328,22 @@
         showInLegend: false
       }
     ]
-  },
+  };
+};
+
+export default {
+  init,
+  namespaced: true,
+  state: init(),
   getters: {
     layersForLegend: state => {
       return state.layers.filter(layer => layer.showInLegend);
     },
     getLayerByName: state => name => {
       return state.layers.find(layer => layer.name === name);
+    },
+    getVSourceByName: (state, getters) => name => {
+      return getters.getLayerByName(name).data.getSource();
     }
   },
   mutations: {
@@ -347,7 +351,7 @@
       state.layers[layer].isVisible = !state.layers[layer].isVisible;
       state.layers[layer].data.setVisible(state.layers[layer].isVisible);
     },
-    setOpenLayersMap: (state, map) => {
+    openLayersMap: (state, map) => {
       state.openLayersMap = map;
     },
     setIdentifiedFeatures: (state, identifiedFeatures) => {
@@ -374,5 +378,90 @@
         duration: 700
       });
     }
+  },
+  actions: {
+    openLayersMap({ commit, dispatch, getters }, map) {
+      const drawVectorSrc = getters.getVSourceByName("Draw Tool");
+      const cutVectorSrc = getters.getVSourceByName("Cut Tool");
+
+      // init line tool
+      const lineTool = new Draw({
+        source: drawVectorSrc,
+        type: "LineString",
+        maxPoints: 2
+      });
+      lineTool.setActive(false);
+      lineTool.on("drawstart", () => {
+        drawVectorSrc.clear();
+        commit("setCurrentMeasurement", null);
+      });
+      lineTool.on("drawend", event => {
+        commit("setCurrentMeasurement", {
+          quantity: "Length",
+          unitSymbol: "m",
+          value: Math.round(getLength(event.feature.getGeometry()) * 10) / 10
+        });
+        commit("application/showIdentify", true, { root: true });
+      });
+
+      // init polygon tool
+      const polygonTool = new Draw({
+        source: drawVectorSrc,
+        type: "Polygon",
+        maxPoints: 50
+      });
+      polygonTool.setActive(false);
+      polygonTool.on("drawstart", () => {
+        drawVectorSrc.clear();
+        commit("setCurrentMeasurement", null);
+      });
+      polygonTool.on("drawend", event => {
+        const areaSize = getArea(event.feature.getGeometry());
+        commit("setCurrentMeasurement", {
+          quantity: "Area",
+          unitSymbol: areaSize > 100000 ? "km²" : "m²",
+          value:
+            areaSize > 100000
+              ? Math.round(areaSize / 1000) / 1000 // convert into 1 km² == 1000*1000 m² and round to 1000 m²
+              : Math.round(areaSize)
+        });
+        commit("application/showIdentify", true, { root: true });
+      });
+
+      // init cut tool
+      const cutTool = new Draw({
+        source: cutVectorSrc,
+        type: "LineString",
+        maxPoints: 2,
+        style: new Style({
+          stroke: new Stroke({
+            color: "#444",
+            width: 2,
+            lineDash: [7, 7]
+          }),
+          image: new Circle({
+            fill: new Fill({ color: "#333" }),
+            stroke: new Stroke({ color: "#fff", width: 1.5 }),
+            radius: 6
+          })
+        })
+      });
+      cutTool.setActive(false);
+      cutTool.on("drawstart", () => {
+        cutVectorSrc.clear();
+      });
+      cutTool.on("drawend", event => {
+        dispatch("fairwayprofile/cut", event.feature, { root: true });
+      });
+
+      map.addInteraction(lineTool);
+      map.addInteraction(cutTool);
+      map.addInteraction(polygonTool);
+
+      commit("lineTool", lineTool);
+      commit("polygonTool", polygonTool);
+      commit("cutTool", cutTool);
+      commit("openLayersMap", map);
+    }
   }
 };