added second view toggle button t heightmap

src/javascript/controllers/HeightMapViewController.js

@@ -60,7 +60,7 @@ class HeightMapViewController extends UIViewController {
 		this.canvas        = $("#heightmap").get();
 
 		this.canvas.width  = (this.canvas.parentNode.offsetWidth - 16);
-		this.canvas.height = (this.canvas.parentNode.offsetHeight - 18);
+		this.canvas.height = (this.canvas.parentNode.offsetHeight - 18) - (40 + 26);
 
 		/*   setting up the canvas for retina displays   */
 		let ratio = 2;
@@ -192,7 +192,13 @@ class HeightMapViewController extends UIViewController {
 				</section>
 			`;
 		else
-			content = `<canvas id="heightmap"></canvas>`;
+			content = `
+				<ul class=buttonGroup>
+					<li class="active">Heightmap</li>
+					<li>Map</li>
+				</ul>
+				<canvas id="heightmap"></canvas>
+			`;
 
 		return `
 			${content}

src/javascript/controllers/ViewController.js

@@ -18,9 +18,8 @@ const States = {
 class ViewController extends UIViewController {
 	constructor() {
 		super("body");
-		this.state  = parseInt(Settings.get("appState"));
-		this.state  = this.state === States.HEIGHTMAP ? States.TRACKLIST : this.state;
-		this.track  = null;
+		this.state  = parseInt(Settings.get("appState", States.TRACKLIST));
+		this.track  = parseInt(Settings.get("currentTrack", null));
 		this.tracks = new Tracks();
 
 		this.renderCall();
@@ -30,6 +29,7 @@ class ViewController extends UIViewController {
 		$(document).on("TrackListController:select", (item, event) => {
 			console.log(event);
 			this.track = parseInt(event.detail.replace("track_", ""));
+			Settings.set("currentTrack", this.track);
 			this.changeState(States.HEIGHTMAP);
 		});
 		$("main").css("height", window.innerHeight - 93);

src/scss/_buttonGroup.scss

+ul.buttonGroup {
+	list-style: none;
+	margin: 20px auto;
+	padding: 0;
+	border: solid 1px $header-background;
+	color: $header-background;
+	clear: both;
+	border-radius: 4px;
+	font-size: small;
+	display: table;
+
+	li {
+		display: inline-block;
+		padding: 6px 12px;
+		border-right: solid 1px $header-background;
+
+		&:last-child {
+			border: none;
+		}
+		
+		&:active, &.active {
+			background: $header-background;
+			color: $header-color;
+		}
+	}
+}

src/scss/app.scss

@@ -5,6 +5,7 @@
 @import "UITableViewReveal";
 @import "view";
 @import "modal";
+@import "buttonGroup";
 
 $fa-font-path: "./fonts";