--- a/client/src/map/Maplayer.vue	Thu Oct 25 21:10:23 2018 +0200
+++ b/client/src/map/Maplayer.vue	Thu Oct 25 23:16:53 2018 +0200
@@ -49,7 +49,7 @@
 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 } from "ol/sphere.js";
+import { getLength, getArea } from "ol/sphere.js";
 import { Icon, Stroke, Style, Fill } from "ol/style.js";
 
 import { displayError } from "../application/lib/errors.js";
@@ -105,30 +105,31 @@
         })
       ];
 
-      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
+      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;
     },
     createVectorLayer() {
@@ -141,12 +142,12 @@
       this.openLayersMap.removeInteraction(this.interaction);
       this.interaction = null;
     },
-    createInteraction() {
+    createInteraction(drawMode) {
       this.vectorSource.clear();
       var draw = new Draw({
         source: this.vectorSource,
-        type: this.drawMode,
-        maxPoints: 2
+        type: drawMode,
+        maxPoints: drawMode === "LineString" ? 2 : 50
       });
       draw.on("drawstart", event => {
         this.vectorSource.clear();
@@ -157,10 +158,19 @@
       return draw;
     },
     drawEnd(event) {
-      const length = getLength(event.feature.getGeometry());
-      this.$store.commit("identifystore/setCurrentMeasurement", length);
-      // also place the a rounded length in a property, so identify can show it
-      event.feature.set("length (m)", Math.round(length * 10) / 10);
+      if (this.drawMode === "Polygon") {
+        const areaSize = getArea(event.feature.getGeometry());
+        // also place the a rounded areaSize in a property,
+        // so identify will show it
+        event.feature.set("area (km²)", Math.round(areaSize) / 1000);
+      }
+      if (this.drawMode === "LineString") {
+        const length = getLength(event.feature.getGeometry());
+        this.$store.commit("identifystore/setCurrentMeasurement", length);
+        // also place the a rounded length in a property,
+        // so identify will show it
+        event.feature.set("length (m)", Math.round(length * 10) / 10);
+      }
 
       // if a survey has been selected, request a profile
       // TODO an improvement could be to check if the line intersects
@@ -229,7 +239,9 @@
     },
     activateIdentifyMode() {
       this.openLayersMap.on("singleclick", event => {
-        // console.log("single click on map:", event);
+        this.identify(event.coordinate, event.pixel);
+      });
+      this.openLayersMap.on("dblclick", event => {
         this.identify(event.coordinate, event.pixel);
       });
     },
@@ -362,10 +374,11 @@
     }
   },
   watch: {
-    drawMode() {
+    drawMode(newValue) {
       if (this.interaction) {
         this.removeCurrentInteraction();
-      } else {
+      }
+      if (newValue) {
         this.activateInteraction();
       }
     },