--- a/client/src/components/layers/Layerselect.vue	Thu Apr 04 12:25:35 2019 +0200
+++ b/client/src/components/layers/Layerselect.vue	Thu Apr 04 12:47:56 2019 +0200
@@ -21,6 +21,9 @@
     <div v-if="isVisible && isBottleneckIsolineLayer">
       <img class="rounded my-1 d-block" :src="isolinesLegendImgDataURL" />
     </div>
+    <div v-if="isVisible && isBottleneckDifferences">
+      <img class="rounded my-1 d-block" :src="differencesLegendImgDataURL" />
+    </div>
   </div>
 </template>
 
@@ -59,9 +62,15 @@
     LegendElement: () => import("./LegendElement.vue")
   },
   computed: {
-    ...mapState("map", ["isolinesLegendImgDataURL"]),
+    ...mapState("map", [
+      "isolinesLegendImgDataURL",
+      "differencesLegendImgDataURL"
+    ]),
     isBottleneckIsolineLayer() {
       return this.layername == LAYERS.BOTTLENECKISOLINE;
+    },
+    isBottleneckDifferences() {
+      return this.layername == LAYERS.DIFFERENCES;
     }
   },
   methods: {
@@ -90,6 +99,24 @@
         reader.readAsDataURL(response.data);
       });
     }
+    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);
+      });
+    }
   }
 };
 </script>

--- a/client/src/store/map.js	Thu Apr 04 12:25:35 2019 +0200
+++ b/client/src/store/map.js	Thu Apr 04 12:47:56 2019 +0200
@@ -80,6 +80,7 @@
     polygonTool: null, // open layers interaction object (Draw)
     cutTool: null, // open layers interaction object (Draw)
     isolinesLegendImgDataURL: "",
+    differencesLegendImgDataURL: "",
     layers: {
       [LAYERS.OPENSTREETMAP]: {
         name: LAYERS.OPENSTREETMAP,
@@ -659,6 +660,9 @@
     },
     isolinesLegendImgDataURL: (state, isolinesLegendImgDataURL) => {
       state.isolinesLegendImgDataURL = isolinesLegendImgDataURL;
+    },
+    differencesLegendImgDataURL: (state, differencesLegendImgDataURL) => {
+      state.differencesLegendImgDataURL = differencesLegendImgDataURL;
     }
   },
   actions: {