--- a/client/src/store/map.js	Tue Nov 06 09:12:05 2018 +0100
+++ b/client/src/store/map.js	Tue Nov 06 10:00:13 2018 +0100
@@ -18,8 +18,16 @@
 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 { Stroke, Style, Fill, Text, Circle as CircleStyle } from "ol/style.js";
+import {
+  Icon,
+  Stroke,
+  Style,
+  Fill,
+  Text,
+  Circle as CircleStyle
+} 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 "../application/lib/http";
 
@@ -37,7 +45,8 @@
         data: new TileLayer({
           source: new OSM()
         }),
-        isVisible: true
+        isVisible: true,
+        showInLegend: true
       },
       {
         name: "Inland ECDIS chart Danube",
@@ -48,7 +57,8 @@
             params: { LAYERS: "d4d", VERSION: "1.1.1", TILED: true }
           })
         }),
-        isVisible: true
+        isVisible: true,
+        showInLegend: true
       },
       {
         name: "Fairway Dimensions",
@@ -76,7 +86,8 @@
             ];
           }
         }),
-        isVisible: true
+        isVisible: true,
+        showInLegend: true
       },
       {
         name: "Waterway Area, named",
@@ -91,7 +102,8 @@
             })
           })
         }),
-        isVisible: false
+        isVisible: false,
+        showInLegend: true
       },
       {
         name: "Waterway Area",
@@ -106,7 +118,8 @@
             })
           })
         }),
-        isVisible: true
+        isVisible: true,
+        showInLegend: true
       },
       {
         name: "Waterway Axis",
@@ -122,7 +135,8 @@
             })
           })
         }),
-        isVisible: true
+        isVisible: true,
+        showInLegend: true
       },
       {
         name: "Distance marks",
@@ -132,7 +146,8 @@
             strategy: bboxStrategy
           })
         }),
-        isVisible: false
+        isVisible: false,
+        showInLegend: true
       },
       {
         name: "Bottlenecks",
@@ -150,7 +165,8 @@
             })
           })
         }),
-        isVisible: true
+        isVisible: true,
+        showInLegend: true
       },
       {
         name: "Bottleneck isolines",
@@ -177,7 +193,8 @@
             } // TODO  tile.setState(TileState.ERROR);
           })
         }),
-        isVisible: false
+        isVisible: false,
+        showInLegend: true
       },
       {
         name: "Distance marks, Axis",
@@ -213,7 +230,56 @@
             }
           }
         }),
-        isVisible: true
+        isVisible: true,
+        showInLegend: true
+      },
+      {
+        name: "Draw 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
       }
     ]
   },
@@ -221,6 +287,9 @@
     layers: state => {
       return state.layers;
     },
+    layersForLegend: state => {
+      return state.layers.filter(layer => layer.showInLegend);
+    },
     getLayerByName: state => name => {
       return state.layers.find(layer => layer.name === name);
     }