--- a/client/src/application/Linetool.vue	Mon Sep 24 16:39:53 2018 +0200
+++ b/client/src/application/Linetool.vue	Mon Sep 24 16:40:54 2018 +0200
@@ -19,6 +19,10 @@
   margin-right: $offset;
   z-index: 2;
 }
+
+.fa-pencil-inverted {
+  color: #0077ff;
+}
 </style>
 
 <script>
@@ -36,8 +40,8 @@
     icon() {
       return {
         fa: true,
-        "fa-pencil": !this.drawMode,
-        "fa-pencil-square": this.drawMode
+        "fa-pencil": true,
+        "fa-pencil-inverted": this.drawMode
       };
     }
   }

--- a/client/src/map/Maplayer.vue	Mon Sep 24 16:39:53 2018 +0200
+++ b/client/src/map/Maplayer.vue	Mon Sep 24 16:40:54 2018 +0200
@@ -76,21 +76,19 @@
       this.interaction = null;
     },
     createInteraction() {
-      var that = this;
-      this.vectorSource.clear(); // start empty
+      this.vectorSource.clear();
       var draw = new Draw({
         source: this.vectorSource,
-        type: this.drawMode
+        type: this.drawMode,
+        maxPoints: 2
       });
-      draw.on("drawstart", function(/* event */) {
-        // console.log(event);
-        that.vectorSource.clear(); // remove old features when draw starts
+      draw.on("drawstart", () => {
+        this.vectorSource.clear();
       });
       draw.on("drawend", this.drawEnd);
       return draw;
     },
     drawEnd(event) {
-      // console.log(event);
       var inputLineString = event.feature.getGeometry().clone();
       if (inputLineString.getType() == GeometryType.LINE_STRING) {
         // prepare to send the first line seqment to the server as GeoJSON