MapQuest.js
L.mapquest.directions().route(options, callback)
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.
Syntax
Callback
js
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;
}On Map
js
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'
});Parameters
routeOptions Object
An object containing any of the following key value options: start, end, locations, waypoints, optimizeWaypoints, options.
| Request Parameter | Description | Required |
|---|---|---|
| start String, LatLng, [], or Location Object | 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 String, LatLng, or Location Object | 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. |
| locations Array | 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. | No |
| waypoints Array | 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. | No |
| optimizeWaypoints Boolean | 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. | No |
| options Object | An object containing options from the Directions API. | No |
callback Function
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.
Return Value
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.
Visual Example
Directions Route
Customizing Route Ribbons and Markers
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.
Syntax
js
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
},
alternateRouteRibbon: {
opacity: 1.0
},
});
directions.route({
start: 'Washington, DC',
end: 'New York, NY'
});Parameters
layerOptions Object
An object containing any of the following key value options: startMarker, endMarker, waypointMarker, viaMarker, routeRibbon, and alternateRouteRibbon.
| Request Parameter | Description | Required |
|---|---|---|
| startMarker Object | 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.
| No |
| endMarker Object | 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.
| No |
| waypointMarker Object | 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.
| No |
| viaMarker Object | 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.
| No |
| routeRibbon Object | 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.8. 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.
| No |
| alternateRouteRibbon Object | 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'. showTraffic: A boolean that controls if traffic is rendered along the alternate 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.
| No |