Routing

With version 6.1.0 of the MapQuest Open JavaScript SDK, you can create routes directly on the map without the need for a server-side proxy.

Like other modules in the API, you must first download and initialize the routing support modules prior to use with the MQA.withModule mechanism as it is not included in the base download.

NOTE: You are not required to use the Open JavaScript SDK to access the routing services. See the Open Directions Service documentation for more information.


Routing with a pair of Lat/Long objects

If you already have latitude and longitude for your route (start, stops and end points), then you can use the following code to create a route on your map. 

 
//This uses the MQA.withModule support to download and initialize the routing support modules.  When the
//modules are ready for use, the function provided as the last parameter will be executed.

MQA.withModule('directions','smallzoom', function() {
	
  map.addControl(
    new MQA.SmallZoom(), 
    new MQA.MapCornerPlacement(MQA.MapCorner.TOP_LEFT, new MQA.Size(5,5))
  );

	  
  /*Uses the MQA.TileMap.addRoute function (added to the TileMap with the directions module) 
    passing in an array of location objects as the only parameter.*/
  map.addRoute([
	{latLng: {lat: 39.637433, lng: -105.163867}},
	{latLng: {lat:39.7439430, lng:-105.0200890}}
  ]);

});

Below is an example of this code in action.

Show me the code

Play with the code


Multipoint Routing

You can easily create multipoint routes by just adding locations to the route request. 

 
//This uses the MQA.withModule support to download and initialize the routing support modules.  When the 
//modules are ready for use, the function provided as the last parameter will be executed.

MQA.withModule('directions','smallzoom', function() {
	
  map.addControl(
    new MQA.SmallZoom(), 
    new MQA.MapCornerPlacement(MQA.MapCorner.TOP_LEFT, new MQA.Size(5,5))
  );

	  
  /*Uses the MQA.TileMap.addRoute function (added to the TileMap with the directions module) 
    passing in an array of location objects as the only parameter.*/
  map.addRoute([
	{latLng: {lat: 39.637433, lng: -105.163867}},
	{latLng: {lat: 40.647650, lng:-122.391675}},
	{latLng: {lat: 40.477420, lng: -106.823370}},
	{latLng: {lat: 40.058874, lng: -106.3889199}}
  ]);

});

Below is an example of this code in action.

Show me the code

Play with the code


Route Options

The following are popular route options that you can use to tailor the route. A full list is available in the Open Directions Service documentation.

  • avoid: ['limited access','toll road','approximate seasonal closure', 'unpaved', 'ferry', 'country border crossing']
  • avoidGEFIds: {must: [18892408, 18892439, ...], try: [18892439, ...]}
  • routeType: 'shortest' | 'fastest' | 'pedestrian' | 'bicycle'
  • locale: 'en_US',
  • unit: 'm' | 'k'

Avoiding Toll Roads

 
//This uses the MQA.withModule support to download and initialize the routing support modules.  When the 
//modules are ready for use, the function provided as the last parameter will be executed.

MQA.withModule('directions','smallzoom', function() {
	
  map.addControl(
    new MQA.SmallZoom(), 
    new MQA.MapCornerPlacement(MQA.MapCorner.TOP_LEFT, new MQA.Size(5,5))
  );

	  
  /*Uses the MQA.TileMap.addRoute function (added to the TileMap with the directions module) 
    passing in an array of locations and options to be used in creating the route */
  map.addRoute([
	{latLng: {lat: 38.88866, lng: -77.241899}},
	{latLng: {lat: 40.647650, lng:-122.391675}}
    ],

    /*Options (see above): Adds the option to enable draggable routes and avoid toll roads.*/
    { routeOptions:{avoids:['toll road']}}	
  );

});

Below is an example of this code in action. Notice by passing the avoid toll road option the route avoids the green road thats is the more direct route but is also a toll road.

Show me the code

Play with the code


Bike Routes

 
//This uses the MQA.withModule support to download and initialize the routing support modules.  When the 
//module are ready for use, the function provided as the last parameter will be executed.
MQA.withModule('directions','smallzoom', function() {
	
  map.addControl(
    new MQA.SmallZoom(), 
    new MQA.MapCornerPlacement(MQA.MapCorner.TOP_LEFT, new MQA.Size(5,5))
  );

	  
  /*Uses the MQA.TileMap.addRoute function (added to the TileMap with the directions module) 
    passing in an array of locations and options to be used in creating the route */
  map.addRoute([ 
	{latLng: {lat: 38.888660, lng: -77.241899}},
	{latLng: {lat: 38.889968, lng: -77.205386}}
    ],

    /*Options (see available options above): Adds the option to enable draggable routes and avoid toll roads .*/
    { routeOptions:{routeType:"bicycle"}}	
  );

});

Below is an example of this code in action. Bike routes avoid limited access roads, avoids roads where bicycle access is false (in OpenStreetMap), favors bike specific paths and lower maximum speed roads, etc.

Show me the code

Play with the code


Enabling Route Dragging

Route dragging is turned off by default. You can turn on the option using MQA.TileMap.addRoute function by passing the optional 2nd parameter object for options. ( { draggable:true } ) 

 
//This uses the MQA.withModule support to download and initialize the routing support modules.  When the 
//modules are ready for use, the function provided as the last parameter will be executed.

MQA.withModule('directions','smallzoom', function() {
	
  map.addRoute([
	{latLng: {lat: 39.637433, lng: -105.163867}},
	{latLng: {lat:39.7439430, lng:-105.0200890}}
    ],
    
    /*Pass an object with a property called draggable set to true to enable the draggable feature of the ribbon
      and draggablepoi set to true to enable the draggable feature of the pois.  This parameter is optional and
      when not provided dragging will be disabled*/
	{ribbonOptions:{draggable:true,draggablepoi:true}}
  );

});

Below is an example of this code in action.

Show me the code

Play with the code


Ribbon Customization

You can customize the route ribbon by adding the following properties to the map object.

 
//This uses the MQA.withModule support to download and initialize the routing support modules.  When the 
//modules are ready for use, the function provided as the last parameter will be executed.

MQA.withModule('directions', function() {
	
  map.addControl(
    new MQA.SmallZoom(), 
    new MQA.MapCornerPlacement(MQA.MapCorner.TOP_LEFT, new MQA.Size(5,5))
  );

	
  map.addRoute([
    {latLng: {lat: 39.637433, lng: -105.163867}},
    {latLng: {lat: 40.477420, lng: -106.823370}}],
    {ribbonOptions:{ribbonDisplay:{color:"#000000",colorAlpha:.33}}}
  );

});

Below is an example of this code in action.

Show me the code

Play with the code


Bike Routes with Dragging Route Enabled

Route dragging can be combined with ribbon customization, bicycle routes, etc. Also of note is when dragging is turned on for bike routes, it will prevent you from routing on limited access roads and other areas where bicycle access is set to false.

 
//This uses the MQA.withModule support to download and initialize the routing support modules.  When the 
//modules are ready for use, the function provided as the last parameter will be executed.

MQA.withModule('directions','smallzoom','mousewheel', function() {
	
  map.addControl(
    new MQA.SmallZoom(), 
    new MQA.MapCornerPlacement(MQA.MapCorner.TOP_LEFT, new MQA.Size(5,5))
  );

	
  map.addRoute([ 
    {latLng: {lat: 40.769662, lng: -73.972339}},
    {latLng: {lat: 40.774145, lng: -73.971982}}
    ],
    { ribbonOptions:{
        draggable:true,
        draggablepoi:true,
        ribbonDisplay:{color:"#FF0000",colorAlpha:.33}
      }, 
      routeOptions:{routeType:"bicycle"}
    }
  );

    
  map.enableMouseWheelZoom();

});

Below is an example of this code in action.

Show me the code

Play with the code


Next Section: Overlays



  © MapQuest, Inc. All rights reserved.    Privacy Policy | Terms of Use