--- a/client/src/components/layers/Layers.vue	Fri Apr 05 15:59:52 2019 +0200
+++ b/client/src/components/layers/Layers.vue	Fri Apr 05 16:13:04 2019 +0200
@@ -14,10 +14,9 @@
       <div class="box-body small">
         <Layerselect
           v-for="(layer, name) in layersForLegend"
-          :layerindex="name"
-          :layername="name"
+          :layer="layer"
+          :name="name"
           :key="name"
-          :isVisible="layer.data.getVisible()"
         ></Layerselect>
       </div>
     </div>

--- a/client/src/components/layers/Layerselect.vue	Fri Apr 05 15:59:52 2019 +0200
+++ b/client/src/components/layers/Layerselect.vue	Fri Apr 05 16:13:04 2019 +0200
@@ -1,22 +1,20 @@
 <template>
   <div>
-    <div class="form-check d-flex flex-row flex-start selection">
+    <div class="form-check d-flex flex-start">
       <input
         class="form-check-input"
         @change="visibilityToggled"
-        :id="layername"
+        :id="name"
         type="checkbox"
-        :checked="isVisible"
+        :checked="layer.data.getVisible()"
       />
-      <LegendElement
-        :layername="layername"
-        :layerindex="layerindex"
-      ></LegendElement>
+      <LegendElement :name="name"></LegendElement>
       <label
-        class="pointer layername form-check-label"
+        class="pointer layername form-check-label ml-2"
         @click="visibilityToggled"
-        >{{ layername }}</label
       >
+        {{ name }}
+      </label>
     </div>
     <div v-if="isVisible && isBottleneckIsolineLayer">
       <img class="rounded my-1 d-block" :src="isolinesLegendImgDataURL" />
@@ -27,15 +25,6 @@
   </div>
 </template>
 
-<style lang="scss" scoped>
-.selection {
-  text-align: left;
-}
-.layername {
-  margin-left: $small-offset;
-}
-</style>
-
 <script>
 /* This is Free Software under GNU Affero General Public License v >= 3.0
  * without warranty, see README.md and license for details.
@@ -56,7 +45,7 @@
 import { LAYERS } from "@/store/map.js";
 
 export default {
-  props: ["layername", "layerindex", "isVisible"],
+  props: ["layer", "name"],
   name: "layerselect",
   components: {
     LegendElement: () => import("./LegendElement.vue")
@@ -67,15 +56,15 @@
       "differencesLegendImgDataURL"
     ]),
     isBottleneckIsolineLayer() {
-      return this.layername == LAYERS.BOTTLENECKISOLINE;
+      return this.name == LAYERS.BOTTLENECKISOLINE;
     },
     isBottleneckDifferences() {
-      return this.layername == LAYERS.DIFFERENCES;
+      return this.name == LAYERS.DIFFERENCES;
     }
   },
   methods: {
     visibilityToggled() {
-      this.$store.commit("map/toggleVisibilityByName", this.layername);
+      this.$store.commit("map/toggleVisibilityByName", this.name);
     }
   },
   created() {

--- a/client/src/components/layers/LegendElement.vue	Fri Apr 05 15:59:52 2019 +0200
+++ b/client/src/components/layers/LegendElement.vue	Fri Apr 05 16:13:04 2019 +0200
@@ -27,7 +27,7 @@
 
 export default {
   name: "legendelement",
-  props: ["layername", "layerindex"],
+  props: ["name"],
   data: function() {
     return {
       myMap: null,
@@ -37,7 +37,7 @@
   computed: {
     ...mapGetters("map", ["getLayerByName"]),
     id() {
-      return "legendelement" + this.layerindex;
+      return "legendelement-" + this.name;
     },
     mstyle() {
       if (this.mapLayer && this.mapLayer.data.getStyle) {
@@ -57,7 +57,7 @@
     }
   },
   mounted() {
-    this.mapLayer = this.getLayerByName(this.layername);
+    this.mapLayer = this.getLayerByName(this.name);
     if (this.mapLayer.data.getType() == "VECTOR") {
       this.initMap();
     } else {