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, 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, 9, 8, 7, 6, 6, 6, 6, 6, 6, 6, 6, 7, 8, 9, 10, 10, 12].