switch to GeoJSON response format instead of GPX:

- use BRouter track stats
- remove leaflet-gpx plugin

js/control/TrackStats.js

@@ -9,41 +9,37 @@ BR.TrackStats = BR.Control.extend({
         return container;
     },
 
-    update: function (polyline) {
-        var stats = this.calcStats(polyline),
+    update: function (polyline, segments) {
+        var stats = this.calcStats(polyline, segments),
             html = '';
 
         html += '<table id="stats">';
-        html += '<tr><td>Length: </td><td>' +  L.Util.formatNum(stats.distance/1000,1) + '</td><td>km</td></tr>';
-        html += '<tr><td>Ascent: </td><td>' + Math.round(stats.elevationGain) + '</td><td>m</td></tr>';
-        html += '<tr><td>Descent: </td><td>' + Math.round(stats.elevationLoss) + '</td><td>m</td></tr>';
+        html += '<tr><td>Length: </td><td>' + L.Util.formatNum(stats.trackLength/1000,1) + '</td><td>km</td></tr>';
+        html += '<tr><td>Ascent filtered:</td><td>' + stats.filteredAscend + '</td><td>m</td></tr>';
+        html += '<tr><td>Ascent plain:</td><td>' + stats.plainAscend + '</td><td>m</td></tr>';
+        html += '<tr><td>Cost: </td><td>' + stats.cost + '</td><td></td></tr>';
         html += '</table>'; 
 
         this._content.innerHTML = html;
     },
 
-    calcStats: function(polyline) {
+    calcStats: function(polyline, segments) {
         var stats = {
-            distance: 0,
-            elevationGain: 0,
-            elevationLoss: 0
+            trackLength: 0,
+            filteredAscend: 0,
+            plainAscend: 0,
+            cost: 0
         };
+        var i, props;
 
-        var latLngs = polyline ? polyline.getLatLngs() : [];
-        for (var i = 0, current, next, eleDiff; i < latLngs.length - 1; i++) {
-            current = latLngs[i];
-            next = latLngs[i + 1];
-            stats.distance += current.distanceTo(next);
-
-            // from Leaflet.gpx plugin (writes to LatLng.meta.ele, LatLng now supports ele)
-            eleDiff = (next.ele || next.meta.ele) - (current.ele || current.meta.ele);
-            if (eleDiff > 0) {
-                stats.elevationGain += eleDiff;
-            } else {
-                stats.elevationLoss += Math.abs(eleDiff);
-            }
+        for (i = 0; segments && i < segments.length; i++) {
+            props = segments[i].feature.properties;
+            stats.trackLength += +props['track-length'];
+            stats.filteredAscend += +props['filtered ascend'];
+            stats.plainAscend += +props['plain-ascend'];
+            stats.cost += +props['cost'];
         }
-        
+
         return stats;
     }
 });

js/index.js

@@ -168,13 +168,14 @@
             } else {
                 BR.message.hideError();
             }
-          
+
             var track = routing.toPolyline(),
+                segments = routing.getSegments(),
                 latLngs = routing.getWaypoints(),
                 urls = {};
 
             elevation.update(track);
-            stats.update(track);          
+            stats.update(track, segments);
 
             if (latLngs.length > 1) {
                 urls.gpx = router.getUrl(latLngs, 'gpx');

js/plugin/Elevation.js

@@ -14,7 +14,7 @@ BR.Elevation = L.Control.Elevation.extend({
     update: function(track) {
         this.clear();
         if (track && track.getLatLngs().length > 0) {
-            this.addData(track);
+            this.addData(track.toGeoJSON());
         }
     }
 });

js/plugin/Routing.js

@@ -95,4 +95,14 @@ BR.Routing = L.Routing.extend({
         cb(err, data);
     }, this));
   }
+
+  ,getSegments: function() {
+    var segments = [];
+
+    this._eachSegment(function(m1, m2, line) {
+        segments.push(line);
+    });
+
+    return segments;
+  }
 });

js/router/BRouter.js

@@ -10,7 +10,7 @@ L.BRouter = L.Class.extend({
     },
     
     options: {
-        format: 'gpx'
+        format: 'geojson'
     },
 
     initialize: function (options) {
@@ -83,8 +83,7 @@ L.BRouter = L.Class.extend({
 
     getRoute: function(latLngs, cb) {
         var url = this.getUrl(latLngs),
-            xhr = new XMLHttpRequest(),
-            gpx;
+            xhr = new XMLHttpRequest();
 
         if (!url) {
             return cb(new Error('Error getting route URL'));
@@ -99,23 +98,20 @@ L.BRouter = L.Class.extend({
     },
 
     _handleRouteResponse: function(xhr, cb) {
-        var gpx = xhr.responseXML;
+        var layer,
+            geojson;
+
+        if (xhr.status === 200
+                && xhr.responseText
+                // application error when not GeoJSON format (text/plain for errors)
+                && xhr.getResponseHeader('Content-Type').split(';')[0] === 'application/vnd.geo+json') {
 
-        if (xhr.status === 200 && gpx) {
-            // L.GPX has no XHR error handling, and expects either URL or text (not document),
-            // so bypass by passing null and call internal _parse_gpx_data directly
-            var gpxLayer = new L.GPX(null, {
-                polyline_options: {
-                    opacity: 0.6
-                },
-                marker_options: {
-                    startIconUrl: null,
-                    endIconUrl: null
-                }
-            });
-            var layer = gpxLayer._parse_gpx_data(gpx, gpxLayer.options);
             // leaflet.spin
             //gpxLayer.fire('data:loaded');
+
+            geojson = JSON.parse(xhr.responseText);
+            layer = L.geoJson(geojson).getLayers()[0];
+
             return cb(null, layer);
         } else {
             cb(this._getError(xhr));
@@ -147,8 +143,7 @@ L.BRouter = L.Class.extend({
     },
 
     _handleProfileResponse: function(xhr, cb) {
-        var response,
-            profile;
+        var response;
 
         if (xhr.status === 200 && xhr.responseText && xhr.responseText.length > 0) {
             response = JSON.parse(xhr.responseText);