--- a/client/src/components/layers/Layerselect.vue	Tue Apr 16 09:00:42 2019 +0200
+++ b/client/src/components/layers/Layerselect.vue	Tue Apr 16 09:26:51 2019 +0200
@@ -1,25 +1,29 @@
 <template>
-  <div>
-    <div class="form-check d-flex flex-start">
+  <div
+    class="d-flex flex-column flex-start px-2 border-bottom"
+    style="border-bottom-style: dashed !important;"
+  >
+    <div class="d-flex">
       <input
-        class="form-check-input"
+        v-for="map in openLayersMaps"
+        :key="map.getTarget()"
+        class="mt-1 mr-1"
         type="checkbox"
-        @change="visibilityToggled"
-        :checked="layer.getVisible()"
+        @change="toggle(map)"
+        :checked="isVisible(map)"
       />
-      <LegendElement :layer="layer"></LegendElement>
-      <label
-        class="pointer layername form-check-label ml-2"
-        @click="visibilityToggled"
-      >
+      <LegendElement class="pointer" :layer="layer" @click.native="toggle()" />
+      <label class="pointer layername form-check-label ml-1" @click="toggle()">
         {{ label }}
       </label>
     </div>
-    <div v-if="layer.getVisible() && layer.get('id') === 'BOTTLENECKISOLINE'">
-      <img class="rounded my-1 d-block" :src="isolinesLegendImgDataURL" />
-    </div>
-    <div v-if="layer.getVisible() && layer.get('id') === 'DIFFERENCES'">
-      <img class="rounded my-1 d-block" :src="differencesLegendImgDataURL" />
+    <div>
+      <div v-if="isVisible() && layer.get('id') === 'BOTTLENECKISOLINE'">
+        <img class="rounded my-1 d-block" :src="isolinesLegendImgDataURL" />
+      </div>
+      <div v-if="isVisible() && layer.get('id') === 'DIFFERENCES'">
+        <img class="rounded my-1 d-block" :src="differencesLegendImgDataURL" />
+      </div>
     </div>
   </div>
 </template>
@@ -41,26 +45,53 @@
  */
 import { HTTP } from "@/lib/http";
 import { displayError } from "@/lib/errors";
-import { mapState } from "vuex";
+import { mapState, mapGetters } from "vuex";
 
 export default {
-  props: ["layer"],
   components: {
     LegendElement: () => import("./LegendElement")
   },
+  props: ["layerId"],
   computed: {
     ...mapState("map", [
-      "layers",
+      "openLayersMaps",
       "isolinesLegendImgDataURL",
       "differencesLegendImgDataURL"
     ]),
+    ...mapGetters("map", ["openLayersMap"]),
+    layer() {
+      return this.openLayersMap.getLayer(this.layerId);
+    },
     label() {
       return this.$gettext(this.layer.get("label"));
     }
   },
   methods: {
-    visibilityToggled() {
-      this.layer.setVisible(!this.layer.getVisible());
+    toggle(map) {
+      if (map) {
+        map
+          .getLayer(this.layerId)
+          .setVisible(!map.getLayer(this.layerId).getVisible());
+      } else {
+        this.openLayersMaps.forEach(m => {
+          m.getLayer(this.layerId).setVisible(
+            !m.getLayer(this.layerId).getVisible()
+          );
+        });
+      }
+    },
+    isVisible(map) {
+      if (map) {
+        return map.getLayer(this.layerId).getVisible();
+      } else {
+        let isVisible = false;
+        this.openLayersMaps.forEach(m => {
+          if (m.getLayer(this.layerId).getVisible()) {
+            isVisible = true;
+          }
+        });
+        return isVisible;
+      }
     },
     loadLegendImage(layer, storeTarget) {
       HTTP.get(