add distance & elevation on tracks

masks/project.html

@@ -284,6 +284,24 @@ function initSpotMessages(aoMessages, aoTracks) {
 			$('<p>', {'class':'name'}).addIcon('fa-track-'+asProperties.type, true).append(asProperties.name).appendTo($Tooltip);
 			if(asProperties.Name != asProperties.description) $('<p>', {'class':'description'}).text(asProperties.description).appendTo($Tooltip);
 			
+			var aiCoords = feature.geometry.coordinates;
+			if(aiCoords) {
+				var iDistance = 0;
+				//var iElevDrop = 0;
+				var iElevGain = 0;
+				for (var i = 1; i < aiCoords.length; i++) {
+					var oCurrPoint = new L.LatLng(aiCoords[i][1], aiCoords[i][0]);
+					var oPrevPoint = new L.LatLng(aiCoords[i - 1][1], aiCoords[i - 1][0]);
+					var iElevDelta = aiCoords[i][2] - aiCoords[i - 1][2];
+					
+					iDistance += oCurrPoint.distanceTo(oPrevPoint);
+					//iElevDrop += Math.min(iElevDelta, 0);
+					iElevGain += Math.max(iElevDelta, 0);
+				}
+				$('<p>', {'class':'distance'}).addIcon('fa-distance fa-fw', true).append(Math.round(iDistance/1000)+'km').appendTo($Tooltip);
+				$('<p>', {'class':'elevation'}).addIcon('fa-elevation fa-fw', true).append(iElevGain+'m').appendTo($Tooltip);
+			}
+			
 			oLayer
 				.bindPopup($Tooltip[0])
 				.on('mouseover', function(e) {

script/leaflet.min.js

@@ -578,12 +578,21 @@ L.Control.Elevation = L.Control.extend({
             var data = this._data || [];
             var dist = this._dist || 0;
             var ele = this._maxElevation || 0;
+			var eleDrop = this._elevationDrop || 0;
+			var eleGain = this._elevationGain || 0;
             for (var i = 0; i < coords.length; i++) {
                 var s = new L.LatLng(coords[i][1], coords[i][0]);
                 var e = new L.LatLng(coords[i ? i - 1 : 0][1], coords[i ? i - 1 : 0][0]);
                 var newdist = opts.imperial ? s.distanceTo(e) * this.__mileFactor : s.distanceTo(e);
                 dist = dist + Math.round(newdist / 1000 * 100000) / 100000;
                 ele = ele < coords[i][2] ? coords[i][2] : ele;
+                
+				if(i > 0) {
+					var eleDelta = coords[i][2] - coords[i - 1][2];
+					eleDrop += Math.min(eleDelta, 0);
+					eleGain += Math.max(eleDelta, 0);
+				}
+				
 				data.push({
                     dist: dist,
                     altitude: opts.imperial ? coords[i][2] * this.__footFactor : coords[i][2],
@@ -596,6 +605,8 @@ L.Control.Elevation = L.Control.extend({
             this._data = data;
             ele = opts.imperial ? ele * this.__footFactor : ele;
             this._maxElevation = ele;
+			this._elevationDrop = eleDrop;
+			this._elevationGain = eleGain;
         }
     },
 
@@ -608,12 +619,19 @@ L.Control.Elevation = L.Control.extend({
             var data = this._data || [];
             var dist = this._dist || 0;
             var ele = this._maxElevation || 0;
+			var eleDrop = this._elevationDrop || 0;
+			var eleGain = this._elevationGain || 0;
             for (var i = 0; i < coords.length; i++) {
                 var s = coords[i];
                 var e = coords[i ? i - 1 : 0];
                 var newdist = opts.imperial ? s.distanceTo(e) * this.__mileFactor : s.distanceTo(e);
                 dist = dist + Math.round(newdist / 1000 * 100000) / 100000;
                 ele = ele < s.meta.ele ? s.meta.ele : ele;
+				
+				var eleDelta = s.meta.ele - e.meta.ele;
+				eleDrop += Math.min(eleDelta, 0);
+				eleGain += Math.max(eleDelta, 0);
+			
                 data.push({
                     dist: dist,
                     altitude: opts.imperial ? s.meta.ele * this.__footFactor : s.meta.ele,
@@ -626,6 +644,8 @@ L.Control.Elevation = L.Control.extend({
             this._data = data;
             ele = opts.imperial ? ele * this.__footFactor : ele;
             this._maxElevation = ele;
+			this._elevationDrop = eleDrop;
+			this._elevationGain = eleGain;
         }
     },
 
@@ -774,6 +794,8 @@ L.Control.Elevation = L.Control.extend({
     _clearData: function() {
         this._data = null;
         this._dist = null;
+		this._elevationDrop = null;
+		this._elevationGain = null;
         this._maxElevation = null;
     },
 
@@ -802,8 +824,10 @@ L.Control.Elevation = L.Control.extend({
     },
     show: function() {
         this._container.style.display = "block";
+    },
+	getMetaData: function() {
+		return {'distance': this._dist, 'elevation_drop': this._elevationDrop, 'elevation_gain': this._elevationGain, 'elevation_max': this._maxElevation};
 	}
-
 });
 
 L.control.elevation = function(options) {

style/_fa.scss

@@ -38,6 +38,8 @@ $fa-css-prefix: fa;
 .#{$fa-css-prefix}-layers:before { content: fa-content($fa-var-layer-group); }
 .#{$fa-css-prefix}-elevation:before { content: fa-content($fa-var-chart-area); }
 .#{$fa-css-prefix}-message-in:before { content: fa-content($fa-var-shoe-prints); }
+.#{$fa-css-prefix}-distance:before { content: fa-content($fa-var-arrow-circle-right); }
+.#{$fa-css-prefix}-elevation:before { content: fa-content($fa-var-arrow-circle-up); }
 
 /* Feed */
 .#{$fa-css-prefix}-post:before { content: fa-content($fa-var-comment); }

style/_mask_project.scss

@@ -82,6 +82,14 @@ $legend-color: #222;
 				&.description {
 					font-style: italic;
 				}
+				&.distance, &.elevation {
+					margin-top: 1em;
+					width: 50%;
+					display: inline-block;
+				}
+				&.elevation {
+					text-align: right;
+				}
 			}
 		}