You are viewing an older version of MapQuest.js. Check out the latest version.
A layer that shows a route on a map. A route can have locations, a primary route ribbon, and alternate route ribbons. The markers and primary route ribbon are draggable by default.
L.mapquest.key = 'KEY';
var directions = L.mapquest.directions();
directions.route({
start: 'San Francisco, CA',
end: 'San Jose, CA'
}, createMap);
function createMap(err, response) {
var map = L.mapquest.map('custom-directionsLayer-map', {
center: [0, 0],
layers: L.mapquest.tileLayer('dark'),
zoom: 12
});
var customLayer = L.mapquest.directionsLayer({
startMarker: {
icon: 'circle',
iconOptions: {
size: 'sm',
primaryColor: '#1fc715',
secondaryColor: '#1fc715',
symbol: 'A'
}
},
endMarker: {
icon: 'circle',
iconOptions: {
size: 'sm',
primaryColor: '#e9304f',
secondaryColor: '#e9304f',
symbol: 'B'
}
},
routeRibbon: {
color: "#2aa6ce",
opacity: 1.0,
showTraffic: false
},
directionsResponse: response
});
customLayer.addTo(map);
}An object containing any of the following key value options: startMarker, endMarker, waypointMarker, viaMarker, routeRibbon, and alternateRouteRibbon.
A response object from the L.mapquest.directions.route() call. This is data that is used by the layer to render the route.
An object containing any of the following key value options: draggable, icon, and iconOptions.
draggable: A boolean that controls if the marker is draggable. Default is true.
icon: A string that specifies the type of icon to be rendered. Default is 'marker-start'.
iconOptions: An object containing any of the following key value options: primaryColor, secondaryColor, shadow, size, and symbol.
primaryColor: The string hex code primary color of the marker.
secondaryColor: The string hex code secondary color of the marker.
shadow: A boolean that determines if a shadow is rendered with the icon. Default is true.
size: The size of the marker as a string: 'sm', 'md', or 'lg'. Default is 'sm'.
symbol: The string symbol to be rendered inside the marker. Can be a single letter or up to three numbers between 0 and 999.
An object containing any of the following key value options: draggable, icon, and iconOptions.
draggable: A boolean that controls if the marker is draggable. Default is true.
icon: A string that specifies the type of icon to be rendered. Default is 'marker-end'.
iconOptions: An object containing any of the following key value options: primaryColor, secondaryColor, shadow, size, and symbol.
primaryColor: The string hex code primary color of the marker.
secondaryColor: The string hex code secondary color of the marker.
shadow: A boolean that determines if a shadow is rendered with the icon. Default is true.
size: The size of the marker as a string: 'sm', 'md', or 'lg'. Default is 'sm'.
symbol: The string symbol to be rendered inside the marker. Can be a single letter or up to three numbers between 0 and 999.
A waypoint marker is a defined location stop along the route.
An object containing any of the following key value options: draggable, icon, and iconOptions. The default marker is a 'marker' icon with a number of the location in the location sequence.
draggable: A boolean that controls if the marker is draggable. Default is true.
icon: A string that specifies the type of icon to be rendered. Default is 'marker'.
iconOptions: An object containing any of the following key value options: primaryColor, secondaryColor, shadow, size, and symbol.
primaryColor: The string hex code primary color of the marker.
secondaryColor: The string hex code secondary color of the marker.
shadow: A boolean that determines if a shadow is rendered with the icon. Default is true.
size: The size of the marker as a string: 'sm', 'md', or 'lg'. Default is 'sm'.
symbol: The string symbol to be rendered inside the marker. Can be a single letter or up to three numbers between 0 and 999.
A via marker is a defined location along the route that the route must pass through. This marker usually occurs when a route is dragged.
An object containing any of the following key value options: draggable, icon, and iconOptions.
draggable: A boolean that controls if the marker is draggable. Default is true.
icon: A string that specifies the type of icon to be rendered. Default is 'via'.
iconOptions: An object containing any of the following key value options: primaryColor, secondaryColor, shadow, size, and symbol.
primaryColor: The string hex code primary color of the marker.
secondaryColor: The string hex code secondary color of the marker.
shadow: A boolean that determines if a shadow is rendered with the icon. Default is true.
size: The size of the marker as a string: 'sm', 'md', or 'lg'. Default is 'sm'.
symbol: The string symbol to be rendered inside the marker. Can be a single letter or up to three numbers between 0 and 999.
An object containing any of the following key value options: color, opacity, draggable, showTraffic, trafficRibbonColors, and widths.
color: A string hex code of the color of the route. The showTraffic boolean must be set to false for this color to appear. Default is '#022853'.
draggable: A boolean that controls if the route is draggable. Default is true.
opacity: A number that controls the opacity of the route ribbon. Default is 0.6.
showTraffic: A boolean that controls if traffic is rendered along the route. Overrides the color option if set to true. Default is true.
trafficRibbonColors: An object containing any of the following key value options: low, medium, high, and closed.
low: The string hex code for the low congestion color of the traffic ribbon. Default is '#1ca747'.
medium: The string hex code for the medium congestion color of the traffic ribbon. Default is '#feeb41'.
high: The string hex code for the high congestion color of the traffic ribbon. Default is '#df0021'.
closed: The string hex code for the closed color of the traffic ribbon. Default is '#0c0000'.
widths: An array that controls the route width at various zoom levels. Default is [10, 10, 10, 10, 9, 8, 7, 6, 6, 6, 6, 6, 6, 6, 6, 7, 8, 9, 10, 10, 12].
An object containing any of the following key value options: color, opacity, and widths.
color: A string hex code of the color of the alternate route ribbon, if rendered. Default is '#022853'.
opacity: A number that controls the opacity of the alternate route ribbons. Default is 0.4.
widths: An array that controls the alternate route width at various zoom levels. Default is [10, 10, 10, 10, 9, 8, 7, 6, 6, 6, 6, 6, 6, 6, 6, 7, 8, 9, 10, 10, 12].
Returns the route response object that is assigned to the layer.
Sets the route response object of the layer. This will cause the layer to redraw with the new route from the route response object.
If the route response object has alternate routes, the selectRoute function takes an integer index and sets that route as the primaryRoute. If the index is invalid, a console error will be thrown. The index starts at 0, which denotes the primary route.
directionsLayer.selectRoute(2);A directions_changed event is fired when a route is updated on the layer either through drag routing, the selectRoute function, or the setDirectionsResponse function.
The route response object is returned.
directionsLayer.on('directions_changed', function(eventResponse) {
console.log(eventResponse);
});