--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/components/map/layers/Layerselect.vue	Thu Nov 22 07:07:12 2018 +0100
@@ -0,0 +1,75 @@
+<template>
+    <div>
+        <div class="form-check d-flex flex-row flex-start selection">
+            <input class="form-check-input" @change="visibilityToggled" :id="layername" type="checkbox" :checked="isVisible">
+            <LegendElement :layername="layername" :layerindex="layerindex"></LegendElement>
+            <label class="layername form-check-label">{{layername}}</label>
+        </div>
+        <div v-if="isVisible && (layername == 'Bottleneck isolines')">
+            <img class="rounded my-1 d-block" :src="isolinesLegendImgUrl">
+        </div>
+    </div>
+</template>
+
+<style lang="sass" scoped>
+.selection
+  text-align: left
+
+.layername
+  margin-left: $small-offset
+</style>
+
+
+<script>
+/*
+ * This is Free Software under GNU Affero General Public License v >= 3.0
+ * without warranty, see README.md and license for details.
+ * 
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ * License-Filename: LICENSES/AGPL-3.0.txt
+ * 
+ * Copyright (C) 2018 by via donau 
+ *   – Österreichische Wasserstraßen-Gesellschaft mbH
+ * Software engineering by Intevation GmbH
+ * 
+ * Author(s):
+ * Thomas Junk <thomas.junk@intevation.de>
+ */
+import { HTTP } from "../../../lib/http";
+import LegendElement from "./LegendElement.vue";
+export default {
+  props: ["layername", "layerindex", "isVisible"],
+  name: "layerselect",
+  data() {
+    return {
+      isolinesLegendImgUrl: ""
+    };
+  },
+  components: {
+    LegendElement
+  },
+  methods: {
+    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>