--- a/client/src/application/Main.vue	Tue Sep 25 16:35:38 2018 +0200
+++ b/client/src/application/Main.vue	Tue Sep 25 17:39:00 2018 +0200
@@ -34,10 +34,6 @@
         x: 0,
         y: 300
       },
-      yScaleLeft: {
-        lo: 191,
-        hi: 199
-      },
       yScaleRight: {
         lo: -6,
         hi: 1
@@ -52,7 +48,7 @@
   },
   computed: {
     ...mapGetters("application", ["isSplitscreen", "drawMode"]),
-    ...mapGetters("fairwayprofile", ["currentProfile"]),
+    ...mapGetters("fairwayprofile", ["currentProfile", "minAlt", "maxAlt"]),
     xAxis() {
       return [this.xScale.x, this.xScale.y];
     },
@@ -64,24 +60,29 @@
     },
     margins() {
       return this.margin;
+    },
+    yScaleLeft() {
+      return {
+        lo: this.minAlt,
+        hi: this.maxAlt
+      };
     }
   },
   created() {
     window.addEventListener("resize", debounce(this.scaleFairwayProfile), 100);
   },
   updated() {
-    if (!document.querySelector(".profile")) return;
-    const clientHeight = document.querySelector(".profile").clientHeight;
-    const clientWidth = document.querySelector(".profile").clientWidth;
-    if (!clientHeight || !clientWidth) return;
-    this.height = document.querySelector(".profile").clientHeight - 25;
-    this.width = document.querySelector(".profile").clientWidth - 100;
+    this.scaleFairwayProfile();
   },
   destroyed() {
     window.removeEventListener("resize", debounce(this.scaleFairwayProfile));
   },
   methods: {
     scaleFairwayProfile() {
+      if (!document.querySelector(".profile")) return;
+      const clientHeight = document.querySelector(".profile").clientHeight;
+      const clientWidth = document.querySelector(".profile").clientWidth;
+      if (!clientHeight || !clientWidth) return;
       this.height = document.querySelector(".profile").clientHeight - 25;
       this.width = document.querySelector(".profile").clientWidth - 100;
     }

--- a/client/src/application/lib/geo.js	Tue Sep 25 16:35:38 2018 +0200
+++ b/client/src/application/lib/geo.js	Tue Sep 25 17:39:00 2018 +0200
@@ -76,15 +76,15 @@
   let segmentPoints = [];
   let lengthPolyLine = 0;
   let referencePoint = Point(startPoint);
-  let minAlt = referencePoint.alt;
-  let maxAlt = referencePoint.alt;
+  let minAlt = Math.abs(lineSegments[0][0][2]);
+  let maxAlt = Math.abs(lineSegments[0][0][2]);
   let currentPoint = null;
   for (let segment of lineSegments) {
     let points = [];
     for (let coordinateTriplet of segment) {
       currentPoint = Point(coordinateTriplet);
       lengthPolyLine += distanceBetween(referencePoint, currentPoint);
-      let y = currentPoint.alt;
+      let y = Math.abs(currentPoint.alt);
       points.push({
         x: lengthPolyLine,
         y: y

--- a/client/src/fairway/store.js	Tue Sep 25 16:35:38 2018 +0200
+++ b/client/src/fairway/store.js	Tue Sep 25 17:39:00 2018 +0200
@@ -1,33 +1,74 @@
-// import { HTTP } from "../lib/http";
-
-const sampleData = [
-  { x: 0, y: 1.0 },
-  { x: 10, y: 1.0 },
-  { x: 25, y: -2.0 },
-  { x: 50, y: -4.5 },
-  { x: 75, y: -4.0 },
-  { x: 100, y: -3.0 },
-  { x: 125, y: -4.0 },
-  { x: 150, y: -5.0 },
-  { x: 175, y: -4.0 },
-  { x: 200, y: -3.0 },
-  { x: 225, y: -3.5 },
-  { x: 250, y: -3.0 },
-  { x: 290, y: 1 },
-  { x: 300, y: 1 }
-];
+import { HTTP } from "../application/lib/http";
+import { prepareProfile } from "../application/lib/geo";
 
 const FairwayProfile = {
   namespaced: true,
   state: {
-    currentProfile: sampleData
+    totalLength: 0,
+    minAlt: 0,
+    maxAlt: 0,
+    currentProfile: [],
+    startPoint: null,
+    endPoint: null
   },
   getters: {
     currentProfile: state => {
       return state.currentProfile;
+    },
+    startPoint: state => {
+      return state.startPoint;
+    },
+    endPoint: state => {
+      return state.endPoint;
+    },
+    length: state => {
+      return state.totalLength;
+    },
+    minAlt: state => {
+      return state.minAlt;
+    },
+    maxAlt: state => {
+      return state.maxAlt;
     }
   },
-  mutations: {}
+  mutations: {
+    profileLoaded: (state, response) => {
+      const { data } = response;
+      const coordinates = data.geometry.coordinates;
+      if (!coordinates) return;
+      const startPoint = state.startPoint;
+      const endPoint = state.endPoint;
+      const geoJSON = data;
+      const result = prepareProfile({ geoJSON, startPoint, endPoint });
+      state.currentProfile = result.points;
+      state.minAlt = result.minAlt;
+      state.maxAlt = result.maxAlt;
+      state.totalLength = result.totalLength;
+    },
+    setStartPoint: (state, start) => {
+      state.startPoint = start;
+    },
+    setEndPoint: (state, end) => {
+      state.endPoint = end;
+    }
+  },
+
+  actions: {
+    loadProfile({ commit }, geoJSON) {
+      return new Promise((resolve, reject) => {
+        HTTP.post("/cross", geoJSON, {
+          headers: { "X-Gemma-Auth": localStorage.getItem("token") }
+        })
+          .then(response => {
+            commit("profileLoaded", response);
+            resolve(response);
+          })
+          .catch(error => {
+            reject(error);
+          });
+      });
+    }
+  }
 };
 
 export default FairwayProfile;

--- a/client/src/map/Maplayer.vue	Tue Sep 25 16:35:38 2018 +0200
+++ b/client/src/map/Maplayer.vue	Tue Sep 25 17:39:00 2018 +0200
@@ -33,6 +33,7 @@
 } from "@turf/helpers";
 //import { lineIntersect as turfLineIntersect } from "@turf/line-intersect";
 import lineIntersect from "@turf/line-intersect";
+import { displayError } from "../application/lib/errors.js";
 
 export default {
   name: "maplayer",
@@ -100,13 +101,23 @@
       // prepare to send the first line seqment to the server as GeoJSON
       inputLineString.transform("EPSG:3857", "EPSG:4326");
       const [start, end] = inputLineString.getCoordinates();
+      this.$store.commit("fairwayprofile/setStartPoint", start);
+      this.$store.commit("fairwayprofile/setEndPoint", end);
       const profileLine = new LineString([start, end]);
       const feature = this.findFeature(profileLine);
       const geoJSON = new GeoJSON({ geometryName: "geometry" }).writeFeature(
         feature
       );
-      console.log("Feature: ", feature);
-      console.log("geoJSON", geoJSON);
+      this.$store
+        .dispatch("fairwayprofile/loadProfile", geoJSON)
+        .then()
+        .catch(error => {
+          const { status, data } = error.response;
+          displayError({
+            title: "Backend Error",
+            message: `${status}: ${data.message || data}`
+          });
+        });
 
       //   // FIXME: assuming that we have the fairway dimensions loaded
       //   var vectorSource = this.getLayerByName(