mapquest.js new route showing as a waypoint

Question

I am attempting to use mapquest.js to show directions on a map for multiple predesignated locations.

The map loads fine and clicking a button to see a route works as expected. However, when i click a second destination, it simply shows that destination as a way point inside the original route rather than just drawing the second route by itself. I feel like there must be a way to clear the original route out before executing the second. I appreciate any help any one can offer. I have scoured the documentation and can't find anything.

Below is what i am using:

L.mapquest.map('map', {
  center: [75.869200, -38.983510],
  layers: L.mapquest.tileLayer('map'),
  zoom: 15
});

function GetRoute(destination) {
  L.mapquest.directions().route({
    start: '626 China St, Richmond, VA 23220',
    end: destination,
  });
}

$('.map-button').click(function() {
  var destination = this.id;
  GetRoute(destination);
}
});

Answer 1

You can set up the route highlight as a variable and remove it from the map when replacement routes are put on the map. Here is a quick and dirty way I did it.

L.mapquest.directions().route({
    start: orig,
    end: dest
},
function(err, data) {
    if (err.message) {
        console.log(err);
    } else {
        if (hilite) map.removeLayer(hilite);
        hilite = L.mapquest.directionsLayer({
            directionsResponse: data,
            fitBounds: false
        }).addTo(map);
    }
});