--- a/client/src/application/Main.vue	Fri Sep 07 12:30:20 2018 +0200
+++ b/client/src/application/Main.vue	Fri Sep 07 13:45:49 2018 +0200
@@ -1,6 +1,9 @@
 <template>
   <div class="main d-flex flex-column">
-    <Maplayer :lat="6155376" :long="1819178" :zoom="11"></Maplayer>
+    <Maplayer :split="isSplitscreen" :lat="6155376" :long="1819178" :zoom="11"></Maplayer>
+    <div v-if="isSplitscreen" class="profile d-flex flex-row">
+      <FairwayProfile height="300" width="1024" :xScale="[0, 300]" :yScaleLeft="[191, 199]" :yScaleRight="[-6, 1]" :margin="{ top: 20, right: 40, bottom: 20, left: 40 }"></FairwayProfile>
+    </div>
   </div>
 </template>
 
@@ -10,15 +13,26 @@
 .menubutton {
   margin-left: $small-offset;
 }
+
+.profile {
+  background-color: white;
+  height: 50vh;
+}
 </style>
 
 <script>
 import Maplayer from "../map/Maplayer";
+import FairwayProfile from "../fairway/Fairwayprofile";
+import { mapGetters } from "vuex";
 
 export default {
   name: "mainview",
   components: {
-    Maplayer
+    Maplayer,
+    FairwayProfile
+  },
+  computed: {
+    ...mapGetters("application", ["isSplitscreen"])
   }
 };
 </script>

--- a/client/src/application/Topbar.vue	Fri Sep 07 12:30:20 2018 +0200
+++ b/client/src/application/Topbar.vue	Fri Sep 07 13:45:49 2018 +0200
@@ -11,6 +11,9 @@
       </div>
       <input id="search" type="text" class="form-control ui-element search searchbar">
     </div>
+    <div>
+      <i @click="splitScreen" class="ui-element splitscreen fa fa-window-restore"></i>
+    </div>
     <Layers v-if="routeName != 'usermanagement'"></Layers>
   </div>
 </template>
@@ -18,6 +21,13 @@
 <style lang="scss">
 @import "./assets/application.scss";
 
+.splitscreen {
+  background-color: white;
+  padding: 0.5rem;
+  margin-right: 0.5rem;
+  margin-left: 1rem;
+}
+
 .menubutton {
   background-color: white;
   padding: 0.5rem;
@@ -60,6 +70,9 @@
   methods: {
     toggleSidebar() {
       this.$store.commit("application/toggleSidebar");
+    },
+    splitScreen() {
+      this.$store.commit("application/toggleSplitScreen");
     }
   },
   computed: {

--- a/client/src/application/stores/application.js	Fri Sep 07 12:30:20 2018 +0200
+++ b/client/src/application/stores/application.js	Fri Sep 07 13:45:49 2018 +0200
@@ -8,6 +8,10 @@
     sidebar: {
       iscollapsed: defaultCollapseState
     },
+    splitsceen: {
+      active: false,
+      mode: "v"
+    },
     countries: ["AT", "SK", "HU", "HR", "RS", "BiH", "BG", "RO", "UA"]
   },
   getters: {
@@ -22,12 +26,21 @@
     },
     secondaryLogo: state => {
       return state.secondaryLogo;
+    },
+    isSplitscreen: state => {
+      return state.splitsceen.active;
+    },
+    splitMode: state => {
+      return state.splitsceen.mode;
     }
   },
   mutations: {
     toggleSidebar: state => {
       state.sidebar.iscollapsed = !state.sidebar.iscollapsed;
     },
+    toggleSplitScreen: state => {
+      state.splitsceen.active = !state.splitsceen.active;
+    },
     resetSidebar: state => {
       state.sidebar.iscollapsed = defaultCollapseState;
     },

--- a/client/src/fairway/Fairwayprofile.vue	Fri Sep 07 12:30:20 2018 +0200
+++ b/client/src/fairway/Fairwayprofile.vue	Fri Sep 07 13:45:49 2018 +0200
@@ -22,7 +22,8 @@
 const GROUND_COLOR = "#4A2F06";
 
 const sampleData = [
-  { x: 0, y: -3.0 },
+  { 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 },
@@ -33,7 +34,8 @@
   { x: 200, y: -3.0 },
   { x: 225, y: -3.5 },
   { x: 250, y: -3.0 },
-  { x: 300, y: -2.5 }
+  { x: 290, y: 1 },
+  { x: 300, y: 1 }
 ];
 
 export default {

--- a/client/src/map/Maplayer.vue	Fri Sep 07 12:30:20 2018 +0200
+++ b/client/src/map/Maplayer.vue	Fri Sep 07 13:45:49 2018 +0200
@@ -1,25 +1,15 @@
 <template>
-  <div class="mapdisplay">
-    <div id="map"></div>
-    <!-- <div class="profile d-flex flex-row">
-      <Fairwayprofile height="300" width="1024" :xScale="[0, 300]" :yScaleLeft="[191, 199]" :yScaleRight="[-6, 1]" :margin="{ top: 20, right: 40, bottom: 20, left: 40 }"></Fairwayprofile>
-    </div> -->
-  </div>
+  <div id="map" :class="mapStyle"></div>
 </template>
 
 <style lang="scss">
 @import "../application/assets/application.scss";
 
-.profile {
-  background-color: white;
-  height: 50vh-$topbarheight;
+.mapsplit {
+  height: 50vh;
 }
 
-.mapdisplay {
-  height: 100vh;
-}
-
-#map {
+.mapfull {
   height: 100vh;
 }
 
@@ -40,14 +30,10 @@
 // import { greaterThan as greaterThanFilter } from "ol/format/filter.js";
 import { WFS, GeoJSON } from "ol/format.js";
 import { mapGetters } from "vuex";
-import Fairwayprofile from "../fairway/Fairwayprofile";
 
 export default {
   name: "maplayer",
-  props: ["lat", "long", "zoom"],
-  components: {
-    Fairwayprofile
-  },
+  props: ["lat", "long", "zoom", "split"],
   data() {
     return {
       projection: "EPSG:3857",
@@ -56,6 +42,12 @@
   },
   computed: {
     ...mapGetters("mapstore", ["layers"]),
+    mapStyle() {
+      return {
+        mapfull: !this.split,
+        mapsplit: this.split
+      };
+    },
     layerData() {
       return this.layers.map(x => {
         return x.data;
@@ -63,6 +55,14 @@
     }
   },
   methods: {},
+  watch: {
+    split() {
+      const map = this.openLayersMap;
+      setTimeout(function() {
+        map.updateSize();
+      }, 1);
+    }
+  },
   mounted() {
     var that = this;
     this.openLayersMap = new Map({