--- a/client/src/components/layers/Layerselect.vue	Mon Apr 08 16:23:41 2019 +0200
+++ b/client/src/components/layers/Layerselect.vue	Mon Apr 08 16:25:17 2019 +0200
@@ -15,10 +15,10 @@
         {{ label }}
       </label>
     </div>
-    <div v-if="layer.getVisible() && isBottleneckIsolineLayer">
+    <div v-if="layer.getVisible() && layer === layers.BOTTLENECKISOLINE">
       <img class="rounded my-1 d-block" :src="isolinesLegendImgDataURL" />
     </div>
-    <div v-if="layer.getVisible() && isBottleneckDifferences">
+    <div v-if="layer.getVisible() && layer === layers.DIFFERENCES">
       <img class="rounded my-1 d-block" :src="differencesLegendImgDataURL" />
     </div>
   </div>
@@ -40,12 +40,13 @@
  * * Bernhard Reiter <bernhard.reiter@intevation.de>
  */
 import { HTTP } from "@/lib/http";
+import { displayError } from "@/lib/errors";
 import { mapState } from "vuex";
 
 export default {
   props: ["layer"],
   components: {
-    LegendElement: () => import("./LegendElement.vue")
+    LegendElement: () => import("./LegendElement")
   },
   computed: {
     ...mapState("map", [
@@ -53,12 +54,6 @@
       "isolinesLegendImgDataURL",
       "differencesLegendImgDataURL"
     ]),
-    isBottleneckIsolineLayer() {
-      return this.layer == this.layers.BOTTLENECKISOLINE;
-    },
-    isBottleneckDifferences() {
-      return this.layer == this.layers.DIFFERENCES;
-    },
     label() {
       return this.$gettext(this.layer.get("label"));
     }
@@ -66,46 +61,45 @@
   methods: {
     visibilityToggled() {
       this.layer.setVisible(!this.layer.getVisible());
+    },
+    loadLegendImage(layer, storeTarget) {
+      HTTP.get(
+        `/internal/wms?REQUEST=GetLegendGraphic&VERSION=1.0.0&FORMAT=image/png&WIDTH=20&HEIGHT=20&LAYER=${layer}&legend_options=columns:4;fontAntiAliasing:true`,
+        {
+          headers: {
+            Accept: "image/png",
+            "X-Gemma-Auth": localStorage.getItem("token")
+          },
+          responseType: "blob"
+        }
+      )
+        .then(response => {
+          const reader = new FileReader();
+          reader.onload = event => {
+            this.$store.commit("map/" + storeTarget, event.target.result);
+          };
+          reader.readAsDataURL(response.data);
+        })
+        .catch(error => {
+          displayError({
+            title: this.$gettext("Backend Error"),
+            message: `${error.response.status}: ${error.response.statusText}`
+          });
+        });
     }
   },
   created() {
-    // fetch legend image for bottleneck isolines
-    // directly read it as dataURL so it is reusable later
-    if (this.isBottleneckIsolineLayer) {
-      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 that = this;
-        const reader = new FileReader();
-        reader.onload = function() {
-          that.$store.commit("map/isolinesLegendImgDataURL", this.result);
-        };
-        reader.readAsDataURL(response.data);
-      });
+    if (this.layer === this.layers.BOTTLENECKISOLINE) {
+      this.loadLegendImage(
+        "sounding_results_contour_lines_geoserver",
+        "isolinesLegendImgDataURL"
+      );
     }
-    if (this.isBottleneckDifferences) {
-      const src =
-        "/internal/wms?REQUEST=GetLegendGraphic&VERSION=1.0.0&FORMAT=image/png&WIDTH=20&HEIGHT=20&LAYER=sounding_differences&legend_options=columns:4;fontAntiAliasing:true";
-      HTTP.get(src, {
-        headers: {
-          Accept: "image/png",
-          "X-Gemma-Auth": localStorage.getItem("token")
-        },
-        responseType: "blob"
-      }).then(response => {
-        var that = this;
-        const reader = new FileReader();
-        reader.onload = function() {
-          that.$store.commit("map/differencesLegendImgDataURL", this.result);
-        };
-        reader.readAsDataURL(response.data);
-      });
+    if (this.layer === this.layers.DIFFERENCES) {
+      this.loadLegendImage(
+        "sounding_differences",
+        "differencesLegendImgDataURL"
+      );
     }
   }
 };