--- a/client/src/layers/Layerselect.vue	Fri Oct 19 12:14:53 2018 +0200
+++ b/client/src/layers/Layerselect.vue	Fri Oct 19 13:09:00 2018 +0200
@@ -6,8 +6,7 @@
         <label class="layername form-check-label">{{layername}}</label>
     </div>
     <div v-if="isVisible && (layername == 'Bottleneck isolines')" class="card">
-      <img src="../application/assets/legend_contour_lines.png"
-           class="rounded mx-auto d-block">
+      <img class="rounded mx-auto d-block" :src="isolinesLegendImgUrl">
     </div>
   </div>
 </template>
@@ -23,10 +22,16 @@
 
 
 <script>
+import { HTTP } from "../application/lib/http";
 import LegendElement from "./LegendElement.vue";
 export default {
   props: ["layername", "layerindex", "isVisible"],
   name: "layerselect",
+  data () {
+    return {
+      isolinesLegendImgUrl: ""
+    }
+  },
   components: {
     LegendElement
   },
@@ -34,6 +39,23 @@
     visibilityToggled() {
       this.$emit("visibilityToggled", this.layerindex);
     }
+  },
+  created() {
+    // fetch legend image for bottleneck isolines
+    // TODO: move to store
+    if (this.layername == 'Bottleneck isolines') {
+      const src = "/internal/wms?REQUEST=GetLegendGraphic&VERSION=1.0.0&FORMAT=image/png&WIDTH=20&HEIGHT=20&LAYER=sounding_results_contour_lines_geoserver&legend_options=columns:4;fontAntiAliasing:true"
+      HTTP.get(src, {
+        headers: {
+          "Accept": "image/png",
+          "X-Gemma-Auth": localStorage.getItem("token")
+        },
+        responseType: "blob"
+      }).then(response => {
+        var urlCreator = window.URL || window.webkitURL;
+        this.isolinesLegendImgUrl = urlCreator.createObjectURL(response.data)
+      }); 
+    }
   }
 };
 </script>