--- a/client/src/components/Maplayer.vue	Thu Sep 06 16:27:17 2018 +0200
+++ b/client/src/components/Maplayer.vue	Thu Sep 06 17:42:28 2018 +0200
@@ -1,20 +1,9 @@
 <template>
   <div class="mapdisplay">
     <div id="map"></div>
-    <div v-if="this.openLayersMap" class="card layerselection shadow">
-      <div class="card-body">
-        <div class="headline">
-          <h4 class="card-title">Layers</h4>
-        </div>
-        <hr>
-        <div class="d-flex flex-column">
-          <Layerselect :layerindex="index" :layername="layer.name" v-for="(layer, index) in layers" :key="layer.name" :isVisible="layer.isVisible" @visibilityToggled="visibilityToggled"></Layerselect>
-        </div>
-      </div>
-    </div>
-    <div class="profile d-flex flex-row">
+    <!-- <div class="profile d-flex flex-row">
       <Fairwayprofile height="300" width="1024" :xScale="[0, 300]" :yScaleLeft="[191, 199]" :yScaleRight="[-6, 1]" :margin="{ top: 20, right: 40, bottom: 20, left: 40 }"></Fairwayprofile>
-    </div>
+    </div> -->
   </div>
 </template>
 
@@ -27,23 +16,19 @@
 }
 
 .mapdisplay {
-  height: 100%;
+  height: 100vh;
 }
 
 #map {
-  margin-top: $topbarheight;
-  height: 50vh;
+  height: 100vh;
 }
 
-.layerselection {
-  position: absolute;
-  top: 40px + $small-offset;
-  margin-top: $small-offset;
-  right: $small-offset;
-  min-height: 20%;
-  min-width: 10%;
+.ol-zoom {
+  display: flex;
+  left: 15vw;
+  margin-top: 2vh;
+  z-index: 5;
   background-color: white;
-  z-index: 10;
 }
 </style>
 
@@ -54,72 +39,30 @@
 // needed for vector filter example
 // import { greaterThan as greaterThanFilter } from "ol/format/filter.js";
 import { WFS, GeoJSON } from "ol/format.js";
-import { Tile as TileLayer, Vector as VectorLayer } from "ol/layer.js";
-import VectorSource from "ol/source/Vector.js";
-import { Stroke, Style } from "ol/style.js";
-import OSM from "ol/source/OSM";
-import TileWMS from "ol/source/TileWMS.js";
-import Layerselect from "./Layerselect";
+import { mapGetters } from "vuex";
 import Fairwayprofile from "./Fairwayprofile";
 
 export default {
   name: "maplayer",
   props: ["lat", "long", "zoom"],
   components: {
-    Layerselect,
     Fairwayprofile
   },
   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
-        },
-        {
-          name: "Fairways Dimensions",
-          data: new VectorLayer({
-            source: new VectorSource(),
-            style: new Style({
-              stroke: new Stroke({
-                color: "rgba(0, 0, 255, 1.0)",
-                width: 2
-              })
-            })
-          }),
-          isVisible: true
-        }
-      ]
+      openLayersMap: null
     };
   },
   computed: {
+    ...mapGetters("mapstore", ["layers"]),
     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);
-    }
-  },
+  methods: {},
   mounted() {
     var that = this;
     this.openLayersMap = new Map({