--- a/client/src/components/layers/LegendElement.vue	Fri Apr 12 12:29:00 2019 +0200
+++ b/client/src/components/layers/LegendElement.vue	Fri Apr 12 12:49:43 2019 +0200
@@ -24,6 +24,7 @@
 import { Vector as VectorSource } from "ol/source";
 import LineString from "ol/geom/LineString";
 import Point from "ol/geom/Point";
+import { HTTP } from "@/lib/http";
 
 export default {
   props: ["layer"],
@@ -64,7 +65,32 @@
     if (this.layer.getType() == "VECTOR") {
       this.initMap();
     } else {
-      // TODO other tiles
+      if (this.layer.get("id") === "OPENSTREETMAP" ||
+        this.layer.get("id") === "INLANDECDIS" ||
+        this.layer.get("id") === "BOTTLENECKISOLINE" ||
+        this.layer.get("id") === "DIFFERENCES"
+      ) {
+        // TODO: Do something useful?
+        return
+      }
+      let img = document.createElement("img")
+      img.setAttribute("style", "margin: 0 auto;display: flex;")
+      if (this.layer.get("id") === "DISTANCEMARKSAXIS") {
+        img.setAttribute("src", require("@/assets/distancemarks-axis.png"))
+      }
+      else {
+        // for simple WMS legends.
+        let url = `/internal/wms?REQUEST=GetLegendGraphic&VERSION=1.0.0&FORMAT=image/png&WIDTH=20&HEIGHT=20&LAYER=`+this.layer.getSource().getParams().LAYERS + `&legend_options=columns:4;fontAntiAliasing:true`
+        HTTP.get(url, {
+          headers: {
+            "X-Gemma-Auth": localStorage.getItem("token")
+          },
+          responseType: "blob"
+        }).then(response => {
+          img.setAttribute("src", URL.createObjectURL(response.data));
+        });
+      }
+      this.$el.appendChild(img);
     }
   },
   methods: {