fixed retina scaling; added landmarks to heightmap

src/javascript/controllers/HeightMapViewController.js

@@ -26,18 +26,18 @@ class HeightMapViewController extends UIViewController {
 	}
 
 	capture() {
-/*		navigator.geolocation.getCurrentPosition(position => {
+		navigator.geolocation.getCurrentPosition(position => {
 			this.addPoint(new GeoPoint(
 				position.coords.latitude,
 				position.coords.longitude,
 				position.coords.altitude
 			));
-		});*/
-		this.addPoint(new GeoPoint(
+		});
+/*		this.addPoint(new GeoPoint(
 			Std.Random(60, 150),
 			Std.Random(60, 150),
 			Std.Random(60, 150)
-		));
+		));*/
 	}
 
 	viewDidLoad() {
@@ -70,9 +70,8 @@ class HeightMapViewController extends UIViewController {
 				return;
 			let ctx          = this.canvas.getContext("2d");
 			let delta        = event.changedTouches[0].clientX - this.lastX;
-			if (this.translated + delta > 0 || (this.translated + delta) < (this.model.points.length * -20 + this.canvas.width))
+			if (this.translated + delta > 0 || (this.translated + delta) < (this.model.points.length * -40 + this.canvas.width))
 				return;
-			console.log(this.translated + delta, this.model.points.length * -20 -20 - this.canvas.width);
 			this.clear();
 			this.translated += delta;
 			this.lastX       = event.changedTouches[0].clientX;
@@ -103,21 +102,30 @@ class HeightMapViewController extends UIViewController {
 		for (let point of this.model.points) {
 			let ordinateVal = Std.Map(point.altitude, this.model.min, this.model.max, 0, height * 0.95);
 			ctx.lineTo(x, height - ordinateVal);
-			x+=20;
+			x+=40;
 		}
-		ctx.lineTo(x - 20, height);
+		ctx.lineTo(x - 40, height);
 		ctx.lineTo(0, height);
 		ctx.closePath();
 		ctx.globalAlpha = 1;
 		ctx.strokeStyle = "#029BE8";
+		ctx.lineWidth = 3;
 		ctx.stroke();
 		ctx.globalAlpha = 0.3;
 		ctx.fillStyle = "#029BE8";
 		ctx.fill();
-		ctx.fillStyle = "#222";
-		ctx.font = "15px Arial";
+		ctx.save();
+		ctx.setTransform(1,0,0,1,0,0);
+		ctx.globalAlpha = 1;
+		ctx.fillStyle = "#555";
+		ctx.font = "bold 23px Arial";
 		ctx.textAlign = "right";
-		ctx.fillText(`Points: ${this.model.points.length}`, this.canvas.width - 20 , 30);
+		ctx.fillText(`Datapoints: ${this.model.points.length}`, this.canvas.width - 20 , 32);
+		ctx.textAlign = "left";
+		ctx.font = "18px Arial";
+		ctx.fillText(`– ${this.model.min}m`, 10, height - 22);
+		ctx.fillText(`– ${this.model.max}m`, 10, 32);
+		ctx.restore();
 	}
 
 	clear() {

src/javascript/models/HeightMap.js

@@ -6,7 +6,7 @@ class HeightMap {
 	constructor(trackID) {
 		this.trackID      = trackID;
 		this.points        = [];
-		this.min           = 0;
+		this.min           = null;
 		this.max           = 0;
 
 		console.log(trackID);
@@ -19,8 +19,12 @@ class HeightMap {
 		let min = this.min;
 		let max = this.max;
 
+		this.min = this.min === null ? geoPoint.altitude : this.min;
+
 		this.min = geoPoint.altitude < this.min ? geoPoint.altitude : this.min;
 		this.max = geoPoint.altitude > this.max ? geoPoint.altitude : this.max;
+
+
 		this.points.push(geoPoint);
 	}
 }