add distance & elevation on tracks

masks/project.html

@@ -275,27 +275,45 @@ function initSpotMessages(aoMessages, aoTracks) {
 	
 	//Tracks, colors & popup
 	var oTracks = L.geoJson(aoTracks, {
-	    style: function(oTrack) {
+		style: function(oTrack) {
-	    	return self.tmp(['track-type-styles', oTrack.properties.type]);
+			return self.tmp(['track-type-styles', oTrack.properties.type]);
-	    },
+		},
-	    onEachFeature: function(feature, oLayer) {
+		onEachFeature: function(feature, oLayer) {
-	    	var asProperties = feature.properties;
+			var asProperties = feature.properties;
 			var $Tooltip = $('<div>', {'class':'track_tooltip'});
 			$('<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) {
+				.on('mouseover', function(e) {
 					var popup = e.target.getPopup();
 					popup.setLatLng(e.latlng).openOn(self.tmp('map'));
 				})
 				.on('mouseout', function(e) {
-	    			e.target.closePopup();	
+					e.target.closePopup();	
 				});
 			
 			if(asProperties.type != 'hitchhiking') (oElev.addData.bind(oElev))(feature, oLayer);
-	    }
+		}
 	}).addTo(oMap);
 
 	//Centering map

script/leaflet.min.js

@@ -578,13 +578,22 @@ 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;
-                data.push({
+                
+				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],
                     x: coords[i][0],
@@ -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;
         }
     },
 
@@ -766,14 +786,16 @@ L.Control.Elevation = L.Control.extend({
         this._updateAxis();
 
         this._fullExtent = this._calculateFullExtent(this._data);
-    },
+	},
-
+	
     /*
      * Reset data
      */
     _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;
+				}
 			}
 		}