--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/components/Layerselect.vue	Tue Aug 28 12:53:56 2018 +0200
@@ -0,0 +1,26 @@
+<template>
+    <div class="d-flex">
+        <label :for="layername">{{this.layername}}</label>
+        <input @change="visibilityToggled"
+               :id="layername"
+               type="checkbox"
+               :checked="isVisible">  
+    </div>
+</template>
+
+<style lang="sass">
+
+</style>
+
+
+<script>
+export default {
+  props: ["layername", "layerindex", "isVisible"],
+  name: "layerselect",
+  methods: {
+    visibilityToggled() {
+      this.$emit("visibilityToggled", this.layerindex);
+    }
+  }
+};
+</script>

--- a/client/src/components/Map.vue	Tue Aug 28 12:39:23 2018 +0200
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,81 +0,0 @@
-<template>
-  <div id="map">
-    <div v-if="this.olmap"
-         style="position: absolute; z-index: 1005; top: 90px ">
-      <input type="checkbox" v-model="vis1">
-        {{ listOfLayers[0].getVisible() }}<br>
-      <input type="checkbox" v-model="vis2">
-        {{ listOfLayers[1].getVisible() }}
-    </div>
-  </div>
-</template>
-
-<style lang="sass">
-
-</style>
-
-<script>
-import "ol/ol.css";
-import { Map, View } from "ol";
-import TileLayer from "ol/layer/Tile";
-import OSM from "ol/source/OSM";
-import TileWMS from "ol/source/TileWMS.js";
-
-export default {
-  name: "map",
-  props: ["lat", "long", "zoom"],
-  data() {
-    return {
-      projection: "EPSG:3857",
-      olmap: null // OpenLayers' map object
-    };
-  },
-  computed: {
-    // FIXME this is a proof of concept, ugly.
-    listOfLayers: function() {
-      return this.olmap.getLayers().getArray();
-    },
-    vis1: {
-      get: function() {
-        if (this.listOfLayers[0]) {
-          return this.listOfLayers[0].getVisible();
-        }
-      },
-      set: function(newValue) {
-        this.listOfLayers[0].setVisible(newValue);
-      }
-    },
-    vis2: {
-      get: function() {
-        if (this.listOfLayers[1]) {
-          return this.listOfLayers[1].getVisible();
-        }
-      },
-      set: function(newValue) {
-        this.listOfLayers[1].setVisible(newValue);
-      }
-    }
-  },
-  mounted() {
-    this.olmap = new Map({
-      layers: [
-        new TileLayer({
-          source: new OSM()
-        }),
-        new TileLayer({
-          source: new TileWMS({
-            url: "https://demo.d4d-portal.info/wms",
-            params: { LAYERS: "d4d", VERSION: "1.1.1", TILED: true }
-          })
-        })
-      ],
-      target: "map",
-      view: new View({
-        center: [this.long, this.lat],
-        zoom: this.zoom,
-        projection: this.projection
-      })
-    });
-  }
-};
-</script>

--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/components/Maplayer.vue	Tue Aug 28 12:53:56 2018 +0200
@@ -0,0 +1,101 @@
+<template>
+  <div class="mapdisplay">
+    <div id="map"></div>
+    <div v-if="this.openLayersMap" class="layerselection">
+      <h4>Layers</h4>
+      <hr>
+      <Layerselect :layerindex="index"
+                   :layername="layer.name"
+                   v-for="(layer, index) in layers"
+                   :key="layer.name"
+                   :isVisible="layer.isVisible"
+                   @visibilityToggled="visibilityToggled"
+      ></Layerselect>
+    </div>
+  </div>
+</template>
+
+<style lang="scss">
+.mapdisplay {
+  height: 100%;
+  width: 100%;
+}
+#map {
+  height: 100%;
+  width: 100%;
+}
+.layerselection {
+  position: absolute;
+  top: 0;
+  right: 0;
+  min-height: 20%;
+  min-width: 10%;
+  background-color: white;
+}
+</style>
+
+<script>
+import "ol/ol.css";
+import { Map, View } from "ol";
+import TileLayer from "ol/layer/Tile";
+import OSM from "ol/source/OSM";
+import TileWMS from "ol/source/TileWMS.js";
+import Layerselect from "./Layerselect";
+
+export default {
+  name: "maplayer",
+  props: ["lat", "long", "zoom"],
+  components: {
+    Layerselect
+  },
+  data() {
+    return {
+      projection: "EPSG:3857",
+      openLayersMap: null,
+      layers: [
+        {
+          name: "Open Streetmap",
+          data: new TileLayer({
+            source: new OSM()
+          }),
+          isVisible: true
+        },
+        {
+          name: "D4D",
+          data: new TileLayer({
+            source: new TileWMS({
+              url: "https://demo.d4d-portal.info/wms",
+              params: { LAYERS: "d4d", VERSION: "1.1.1", TILED: true }
+            })
+          }),
+          isVisible: true
+        }
+      ]
+    };
+  },
+  computed: {
+    layerData() {
+      return this.layers.map(x => {
+        return x.data;
+      });
+    }
+  },
+  methods: {
+    visibilityToggled(layer) {
+      this.layers[layer].isVisible = !this.layers[layer].isVisible;
+      this.layers[layer].data.setVisible(this.layers[layer].isVisible);
+    }
+  },
+  mounted() {
+    this.openLayersMap = new Map({
+      layers: this.layerData,
+      target: "map",
+      view: new View({
+        center: [this.long, this.lat],
+        zoom: this.zoom,
+        projection: this.projection
+      })
+    });
+  }
+};
+</script>

--- a/client/src/views/Main.vue	Tue Aug 28 12:39:23 2018 +0200
+++ b/client/src/views/Main.vue	Tue Aug 28 12:53:56 2018 +0200
@@ -1,10 +1,10 @@
 <template>
   <div class="main d-flex">
     <Sidebar v-bind:isOverlay="true"></Sidebar>
-    <Map :lat="6155376"
+    <Maplayer :lat="6155376"
       :long="1819178"
       :zoom="11"
-    ></Map>
+    ></Maplayer>
   </div>
 </template>
 
@@ -20,12 +20,12 @@
 </style>
 
 <script>
-import Map from "../components/Map";
+import Maplayer from "../components/Maplayer";
 import Sidebar from "../components/Sidebar";
 export default {
   name: "mainview",
   components: {
-    Map,
+    Maplayer,
     Sidebar
   }
 };