MapQuest Leaflet Api - Get optimized path with time and distance

I'm using MapQuest Leaflet Api to draw a route with multiple stops (Custom Markers). Everything is almost done. I'm getting a route multiple markers and a poly line.

I have two question

How to draw a optimized route onClick of
button code for route optimization is something like this

dir = MQ.routing.directions();
           dir.optimizedRoute({
                locations: [
                   '33.703507, 73.053702',
                      '33.714328, 73.050625',
                      '33.730497, 73.077898',
                      '33.732863, 73.088078'
                ]
            });

How to get distance of total route and time for driving?

My code is given below

<script>
    window.onload = function () {
                var map,
                    dir;
                var custom_icon,
                    marker;
                map = L.map('map', {
                    layers: MQ.mapLayer(),
                    center: [40.045049, -105.961737],
                    zoom: 7
                });

                dir = MQ.routing.directions();
                dir.route({
                    locations: [
                      '33.703507, 73.053702',
                      '33.714328, 73.050625',
                      '33.730497, 73.077898',
                      '33.732863, 73.088078'
                    ],
                    options: { avoids: ['toll road'] }
                });
    CustomRouteLayer = MQ.Routing.RouteLayer.extend({
                        createStopMarker: function (location, stopNumber) {


                            custom_icon = L.divIcon({
                                iconSize: [26, 36],
                                popupAnchor: [0, -18],
                                html: '<span class="notification">' + stopNumber + '</span>'
                            });
                            marker = L.marker(location.latLng, { icon: custom_icon }).bindPopup(location.adminArea5 + ' ' + location.adminArea3).openPopup().addTo(map);

                            marker.on('click', onMarkerClick);

                            return marker;
                        }
                    });
     map.addLayer(new CustomRouteLayer({
                    directions: dir,
                    fitBounds: true,
                    draggable: false,
                    ribbonOptions: {
                        draggable: false,
                        ribbonDisplay: { color: '#CC0000', opacity: 0.3 },
                        widths: [15, 15, 15, 15, 14, 13, 12, 12, 12, 11, 11, 11, 11, 12, 13, 14, 15]
                    }
                }));
     }
    </script>
    <body style='border:0; margin: 0'>
        <div id='map' style='position: absolute; top: 0; bottom: 0; width: 100%;'></div>
    </body>

Please help. Thanks :)

Solution

That button will call a function with the MQ.routing.directions.optimizedRoute() code in it.

function optimize() {
  dir = MQ.routing.directions();

  dir.optimizedRoute({
    locations: [
      'syracuse ny',
      'springfield ma',
      'ithaca ny',
      'hartford ct'
    ]
  });

  map.addLayer(MQ.routing.routeLayer({
    directions: dir,
    fitBounds: true
  }));
}

To get the mileage, use the success event to get to the whole directions response.

dir = MQ.routing.directions()
  .on('success', function(data) {
     console.log(data.route.distance);
  });