You are viewing an older version of MapQuest.js. Check out the latest version.
A class that acts as an interface to the MapQuest Directions API. Performs either a Route, Optimized Route, or Alternate Route call depending on the routeOptions. If no callback is provided, the route will be automatically rendered on the map. The route markers and ribbons can be styled using the setLayerOptions function. If a callback is provided, the results of the API call will be passed in the error-first callback style.
L.mapquest.key = 'KEY';
var directions = L.mapquest.directions();
directions.route({
start: '350 5th Ave, New York, NY 10118',
end: 'One Liberty Plaza, New York, NY 10006',
options: {
timeOverage: 25,
maxRoutes: 3,
}
}, directionsCallback);
function directionsCallback(error, response) {
var map = L.mapquest.map('map', {
center: [0,0],
layers: L.mapquest.tileLayer('map'),
zoom: 7
});
var directionsLayer = L.mapquest.directionsLayer({
directionsResponse: response
}).addTo(map);
return map;
}L.mapquest.key = 'KEY';
var map = L.mapquest.map('map', {
center: [0, 0],
layers: L.mapquest.tileLayer('map'),
zoom: 12
});
var directions = L.mapquest.directions();
directions.route({
start: 'Washington, DC',
end: 'New York, NY'
});
An object containing any of the following key value options: start, end, locations, waypoints, optimizeWaypoints, options.
Start location. This can be specified as either a string to be geocoded, a LatLng object, a [lat,lng] array, or an advanced location object.
Required if locations array isn't defined.
End location. This can be specified as either a string to be geocoded, a LatLng object, a [lat,lng] array, or an advanced location object.
Required if locations array isn't defined.
An array of locations to route. These locations can be specified as either a string to be geocoded, a LatLng object, a [lat,lng] array, or an advanced location object.
Required if start and end options aren't defined.
Up to 50 locations per request.
An array of intermediate waypoints along the route. These waypoints can be specified as either a string to be geocoded, a LatLng object, a [lat,lng] array, or an advanced location object.
Directions are calculated from the start location to the end location by way of each waypoint in this array.
Up to 48 waypoint locations per request, plus the start location and end location if optimizeWaypoints is set to false.
If set to true, the Directions API will attempt to re-order the supplied intermediate waypoint location to minimize overall cost of the route.
There is a limit of 23 waypoint locations per request, plus the start location and end location when optimizeWaypoints is set to true.
An object containing options from the Directions API.
Optional callback function. If provided, the results of the API call will be passed into the function in the error-first callback style. If not provided, a route will be displayed on the map with default styling. If you want to customize the route markers and ribbons use the setLayerOptions function of the directions object. layerOptions listed below.
If a callback is provided, the Directions API response will be returned. Depending on routeOptions, the response will either be a Route API, Optimized Route API, or Alternate Route API response.
There is an easy way to customize the look and feel of routes with MapQuest.js. Use the setLayerOptions function inside the directions object. Pass in a layerOptions JSON object.
L.mapquest.key = 'KEY';
var map = L.mapquest.map('map', {
center: [0, 0],
layers: L.mapquest.tileLayer('dark'),
zoom: 12
});
var directions = L.mapquest.directions();
directions.setLayerOptions({
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
}
});
directions.route({
start: 'Washington, DC',
end: 'New York, NY'
});
An object containing any of the following key value options: startMarker, endMarker, waypointMarker, viaMarker, routeRibbon, and alternateRouteRibbon.
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.
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].