--- a/client/src/store/map.js	Wed Nov 07 15:26:46 2018 +0100
+++ b/client/src/store/map.js	Mon Nov 12 14:45:07 2018 +0100
@@ -35,10 +35,12 @@
   namespaced: true,
   state: {
     openLayersMap: null,
-    identifiedFeatures: [],
-    currentMeasurement: null,
-    // there are three states of drawMode: null, "LineString", "Polygon"
-    drawMode: null,
+    identifiedFeatures: [], // map features identified by clicking on the map
+    currentMeasurement: null, // distance or area from drawTool
+    drawMode: null, // null, "LineString", "Polygon"
+    drawTool: null, // open layers interaction object (Draw)
+    cutMode: false, // true or false
+    cutTool: null, // open layers interaction object (Draw)
     layers: [
       {
         name: "Open Streetmap",
@@ -280,6 +282,54 @@
         }),
         isVisible: true,
         showInLegend: false
+      },
+      {
+        name: "Cut Tool",
+        data: new VectorLayer({
+          source: new VectorSource({ wrapX: false }),
+          style: function(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;
+          }
+        }),
+        isVisible: true,
+        showInLegend: false
       }
     ]
   },
@@ -305,15 +355,17 @@
     setCurrentMeasurement: (state, measurement) => {
       state.currentMeasurement = measurement;
     },
-    toggleDrawModeLine: state => {
-      if (state.drawMode) {
-        state.drawMode = null;
-      } else {
-        state.drawMode = "LineString";
-      }
+    drawMode: (state, mode) => {
+      state.drawMode = mode;
+    },
+    drawTool: (state, drawTool) => {
+      state.drawTool = drawTool;
     },
-    activateDrawModePolygon: state => {
-      state.drawMode = "Polygon";
-    }
+    cutMode: (state, mode) => {
+      state.cutMode = mode;
+    },
+    cutTool: (state, cutTool) => {
+      state.cutTool = cutTool;
+    },
   }
 };