Add total track length / elevation

script/leaflet.min.js

@@ -159,6 +159,9 @@ L.Control.Elevation = L.Control.extend({
             this._applyData();
         }
 
+        var detailsG = this._detailsG = g.append("g").attr('class', 'details');
+        this._details = detailsG.append("svg:text").attr('x', this._width()/2).attr('y', this._height() - 5 - 10 - 5).style('text-anchor', 'middle');
+
         return container;
     },
 
@@ -680,6 +683,9 @@ L.Control.Elevation = L.Control.extend({
         if (d && d._latlngs) {
             this._addGPXdata(d._latlngs);
         }
+        
+        var asMetaData = this.getMetaData();
+        this._details.text(Math.round(asMetaData.distance)+(this.options.imperial?'mi':'km')+' / +'+asMetaData.elevation_gain+(this.options.imperial?'ft':'m'));
     },
 
     /*
@@ -748,19 +754,16 @@ L.Control.Elevation = L.Control.extend({
             numY = opts.hoverNumber.formatter(alt, opts.hoverNumber.decimalsY),
             numX = opts.hoverNumber.formatter(dist, opts.hoverNumber.decimalsX);
 
-        if (opts.imperial) {
-            this._focuslabelX.attr("x", xCoordinate)
-                .text(numY + " ft");
-            this._focuslabelY.attr("y", this._height() - 5)
-                .attr("x", xCoordinate + 3)
-                .text(numX + " mi");
-        } else {
-            this._focuslabelX.attr("x", xCoordinate)
-                .text(numY + " m");
-            this._focuslabelY.attr("y", this._height() - 5)
-                .attr("x", xCoordinate + 3)
-                .text(numX + " km");
-        }
+        this._focuslabelX
+        	.attr("x", xCoordinate)
+        	.text(numY + " " + (opts.imperial?"ft":"m"));
+        
+        var bLeftSide = (xCoordinate < this._width() / 2);
+        this._focuslabelY
+        	.attr("y", this._height() - 5)
+        	.style('text-anchor', bLeftSide?'start':'end')
+        	.attr("x", xCoordinate + 3 * (bLeftSide?1:-1))
+        	.text(numX + " " + (opts.imperial?"mi":"km"));
     },
 
     _applyData: function() {

style/_leaflet.scss

@@ -36,4 +36,8 @@ $stroke-width-axis : 2;
 			@extend .fa-elev-chart;
 		}
 	}
+
+	.details text {
+		text-anchor: middle;
+	}
 }