--- a/client/src/components/fairway/Profiles.vue	Thu Mar 28 15:43:32 2019 +0100
+++ b/client/src/components/fairway/Profiles.vue	Thu Mar 28 16:38:15 2019 +0100
@@ -92,6 +92,15 @@
               </select>
             </div>
           </div>
+          <div class="mt-3">
+            <button
+              :disabled="!additionalSurvey"
+              class="btn btn-info btn-sm w-100"
+              @click="showSurveyDiffences"
+            >
+              <translate>Show differences</translate>
+            </button>
+          </div>
           <hr class="w-100 mb-0" />
           <small class="text-muted d-block mt-2">
             <translate>Saved cross profiles</translate>:
@@ -241,6 +250,7 @@
 import LineString from "ol/geom/LineString";
 import { displayError, displayInfo } from "@/lib/errors.js";
 import { LAYERS } from "@/store/map.js";
+import { HTTP } from "@/lib/http";
 
 export default {
   name: "profiles",
@@ -252,7 +262,7 @@
     };
   },
   computed: {
-    ...mapGetters("map", ["getVSourceByName"]),
+    ...mapGetters("map", ["getVSourceByName", "getLayerByName"]),
     ...mapState("application", ["showProfiles"]),
     ...mapState("map", ["lineTool", "polygonTool", "cutTool"]),
     ...mapState("bottlenecks", [
@@ -382,6 +392,44 @@
     }
   },
   methods: {
+    showSurveyDiffences() {
+      HTTP.post(
+        "/diff",
+        {
+          bottleneck: this.selectedSurvey.bottleneck_id,
+          minuend: this.selectedSurvey.date_info,
+          subtrahend: this.additionalSurvey.date_info
+        },
+        {
+          headers: {
+            "X-Gemma-Auth": localStorage.getItem("token")
+          }
+        }
+      )
+        .then(() => {
+          const layer = this.getLayerByName(LAYERS.DIFFERENCES);
+          const wmsSrc = layer.data.getSource();
+          wmsSrc.updateParams({
+            cql_filter:
+              "objnam='" +
+              this.selectedBottleneck +
+              "' AND " +
+              "minuend='" +
+              this.selectedSurvey.date_info +
+              "' AND subtrahend='" +
+              this.additionalSurvey.date_info +
+              "'"
+          });
+          this.$store.commit("map/setLayerVisible", LAYERS.DIFFERENCES);
+        })
+        .catch(error => {
+          const { status, data } = error.response;
+          displayError({
+            title: this.$gettext("Backend Error"),
+            message: `${status}: ${data.message || data}`
+          });
+        });
+    },
     close() {
       this.$store.commit("application/showProfiles", false);
     },

--- a/client/src/store/map.js	Thu Mar 28 15:43:32 2019 +0100
+++ b/client/src/store/map.js	Thu Mar 28 16:38:15 2019 +0100
@@ -50,7 +50,8 @@
   DISTANCEMARKSAXIS: "Distance marks, Axis",
   GAUGES: "Gauges",
   DRAWTOOL: "Draw Tool",
-  CUTTOOL: "Cut Tool"
+  CUTTOOL: "Cut Tool",
+  DIFFERENCES: "Differences"
 };
 
 const moveMap = ({ view, extent, zoom, preventZoomOut }) => {
@@ -550,6 +551,34 @@
         }),
         isVisible: true,
         showInLegend: false
+      },
+      {
+        name: LAYERS.DIFFERENCES,
+        data: new TileLayer({
+          source: new TileWMS({
+            preload: 0,
+            projection: "EPSG:4326",
+            url: window.location.origin + "/api/internal/wms",
+            params: {
+              LAYERS: "sounding_differences",
+              VERSION: "1.1.1",
+              TILED: true
+            },
+            tileLoadFunction: function(tile, src) {
+              // console.log("calling for", tile, src);
+              HTTP.get(src, {
+                headers: {
+                  "X-Gemma-Auth": localStorage.getItem("token")
+                },
+                responseType: "blob"
+              }).then(response => {
+                tile.getImage().src = URL.createObjectURL(response.data);
+              });
+            } // TODO  tile.setState(TileState.ERROR);
+          })
+        }),
+        isVisible: false,
+        showInLegend: true
       }
     ]
   };