--- a/client/src/components/Maplayer.vue	Tue Apr 09 16:42:58 2019 +0200
+++ b/client/src/components/Maplayer.vue	Tue Apr 09 18:23:07 2019 +0200
@@ -1,19 +1,23 @@
 <template>
   <div
-    id="map"
-    :class="{
-      splitscreen: this.splitscreen,
-      nocursor: this.hasActiveInteractions
-    }"
+    :id="'map-' + uuid"
+    :class="[
+      'map',
+      {
+        splitscreen: this.splitscreen,
+        nocursor: this.hasActiveInteractions
+      }
+    ]"
   ></div>
 </template>
 
 <style lang="sass" scoped>
-#map
-  height: 100vh
+.map
+  width: 100%
+  height: 100%
 
   &.splitscreen
-    height: 50vh
+    height: 50%
 
   &.nocursor
     cursor: none
@@ -36,17 +40,17 @@
  */
 import { HTTP } from "@/lib/http";
 import { mapState } from "vuex";
-import "ol/ol.css";
+import uuid from "uuid";
 import { Map, View } from "ol";
 import { WFS, GeoJSON } from "ol/format.js";
 import { equalTo } from "ol/format/filter.js";
 import { Stroke, Style, Fill } from "ol/style.js";
 import { displayError } from "@/lib/errors.js";
+import "ol/ol.css";
 
 /* for the sake of debugging */
 /* eslint-disable no-console */
 export default {
-  name: "maplayer",
   data() {
     return {
       splitscreen: false
@@ -65,6 +69,9 @@
     ...mapState("bottlenecks", ["selectedSurvey"]),
     ...mapState("application", ["showSplitscreen"]),
     ...mapState("imports", ["selectedStretchId"]),
+    uuid() {
+      return uuid.v4();
+    },
     hasActiveInteractions() {
       return (
         (this.lineTool && this.lineTool.getActive()) ||
@@ -170,7 +177,7 @@
   mounted() {
     let map = new Map({
       layers: [...Object.values(this.layers)],
-      target: "map",
+      target: "map-" + this.uuid,
       controls: [],
       view: new View({
         center: [this.extent.lon, this.extent.lat],