--- a/client/src/layers/Layerselect.vue	Thu Sep 27 12:07:29 2018 +0200
+++ b/client/src/layers/Layerselect.vue	Thu Sep 27 12:42:58 2018 +0200
@@ -1,7 +1,8 @@
 <template>
     <div class="form-check d-flex flex-row flex-start selection">
         <input class="form-check-input" @change="visibilityToggled" :id="layername" type="checkbox" :checked="isVisible">
-        <label class="layername form-check-label" :for="layername">{{this.layername}}</label>
+        <LegendElement :layername="layername" :layerindex="layerindex"></LegendElement>
+        <label class="layername form-check-label">{{layername}}</label>
     </div>
 </template>
 
@@ -16,9 +17,13 @@
 
 
 <script>
+import LegendElement from "./LegendElement.vue";
 export default {
   props: ["layername", "layerindex", "isVisible"],
   name: "layerselect",
+  components: {
+    LegendElement
+  },
   methods: {
     visibilityToggled() {
       this.$emit("visibilityToggled", this.layerindex);

--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/layers/LegendElement.vue	Thu Sep 27 12:42:58 2018 +0200
@@ -0,0 +1,56 @@
+<template>
+  <div :id="id" class="bg-light shadow-sm rounded legendelement"></div>
+
+</template>
+
+<script>
+import { Map, View } from "ol";
+import Feature from "ol/Feature";
+import { Vector as VectorLayer } from "ol/layer.js";
+import { Vector as VectorSource } from "ol/source.js";
+import LineString from "ol/geom/LineString.js";
+
+export default {
+  name: "legendelement",
+  props: ["layername", "layerindex"],
+  data: function() {
+    return { yo: 1 };
+  },
+  computed: {
+    id() {
+      return "legendelement" + this.layerindex;
+    }
+  },
+  mounted() {
+    let feature =  new Feature({
+          'geometry': new LineString([[-1,-1], [1, 1]])
+        });
+    var vector = new VectorLayer({
+        source: new VectorSource({
+          features: [feature],
+          wrapX: false
+        })
+    });
+
+    let map = new Map({
+      layers: [vector],
+      target: this.id,
+      controls: [],
+      view: new View({
+        center: [0, 0],
+        zoom: 3,
+        projection: "EPSG:4326"
+      })
+    });
+
+    console.log(map, this.id);
+  }
+};
+</script>
+
+<style scoped>
+.legendelement {
+  max-height: 1.5rem;
+  width: 2rem;
+}
+</style>