title: MapQuest Leaflet Api - Get optimized path with time and distance
body: <p>I'm using <strong>MapQuest Leaflet Api</strong> to draw a route with multiple stops (Custom Markers). Everything is almost done. I'm getting a route multiple markers and a poly line. </p>
  
  <p>I have two question </p>
  
  <ol>
  <li>How to draw a <strong>optimized route onClick of<br>
      button</strong>  code for route optimization is something like this</li>
  </ol>
  
  <blockquote>
  <pre><code>dir = MQ.routing.directions();
             dir.optimizedRoute({
                  locations: [
                     '33.703507, 73.053702',
                        '33.714328, 73.050625',
                        '33.730497, 73.077898',
                        '33.732863, 73.088078'
                  ]
              });
  </code></pre>
  </blockquote>
  
  <ol start="2">
  <li>How to get distance of total route and time for driving?</li>
  </ol>
  
  <p>My code is given below </p>
  
  <pre><code>&lt;script&gt;
      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: '&lt;span class="notification"&gt;' + stopNumber + '&lt;/span&gt;'
                              });
                              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]
                      }
                  }));
       }
      &lt;/script&gt;
      &lt;body style='border:0; margin: 0'&gt;
          &lt;div id='map' style='position: absolute; top: 0; bottom: 0; width: 100%;'&gt;&lt;/div&gt;
      &lt;/body&gt;
  </code></pre>
  
  <p>Please help. Thanks :)</p>