--- a/client/src/layers/LegendElement.vue	Thu Sep 27 14:00:50 2018 +0200
+++ b/client/src/layers/LegendElement.vue	Thu Sep 27 15:00:52 2018 +0200
@@ -4,46 +4,78 @@
 </template>
 
 <script>
+import { mapGetters } from "vuex";
+
 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";
+import Point from "ol/geom/Point";
 
 export default {
   name: "legendelement",
   props: ["layername", "layerindex"],
   data: function() {
-    return { yo: 1 };
+    return {
+      mapLayer: null
+    };
   },
   computed: {
+    ...mapGetters("mapstore", ["getLayerByName"]),
     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
-      })
-    });
+    this.mapLayer = this.getLayerByName(this.layername);
+    if (this.mapLayer.data.getType() == "VECTOR") {
+      this.initMap();
+    } else {
+      // TODO other tiles
+    }
+  },
+  methods: {
+    initMap() {
+      let mapStyle = this.mapLayer.data.getStyle();
+
+      let feature = new Feature({
+        geometry: new LineString([[-1, 0.5], [0, 0], [0.7, 0], [1.3, -0.7]])
+      });
 
-    let map = new Map({
-      layers: [vector],
-      target: this.id,
-      controls: [],
-      view: new View({
-        center: [0, 0],
-        zoom: 3,
-        projection: "EPSG:4326"
-      })
-    });
+      // special case if we need to call the style function with a special
+      // parameter or to detect a point layer
+      if (this.mapLayer["forLegendStyle"]) {
+        if (this.mapLayer.forLegendStyle.point) {
+          feature.setGeometry(new Point([0, 0]));
+        }
+        mapStyle = this.mapLayer.data.getStyleFunction()(
+          feature,
+          this.mapLayer.forLegendStyle.resolution
+        );
+      }
 
-    console.log(map, this.id);
+      feature.set("level_of_service", "");
+      var vector = new VectorLayer({
+        source: new VectorSource({
+          features: [feature],
+          wrapX: false
+        }),
+        style: mapStyle
+      });
+
+      new Map({
+        layers: [vector],
+        target: this.id,
+        controls: [],
+        interactions: [],
+        view: new View({
+          center: [0, 0],
+          zoom: 3,
+          projection: "EPSG:4326"
+        })
+      });
+    }
   }
 };
 </script>

--- a/client/src/map/store.js	Thu Sep 27 14:00:50 2018 +0200
+++ b/client/src/map/store.js	Thu Sep 27 15:00:52 2018 +0200
@@ -106,6 +106,7 @@
       },
       {
         name: "Distance marks",
+        forLegendStyle: { point: true, resolution: 8 },
         data: new VectorLayer({
           source: new VectorSource({
             strategy: bboxStrategy
@@ -115,6 +116,7 @@
       },
       {
         name: "Distance marks, Axis",
+        forLegendStyle: { point: true, resolution: 8 },
         data: new VectorLayer({
           source: new VectorSource({
             strategy: bboxStrategy