MapQuest.js

L.mapquest.directionsLayer(options)

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.

Syntax

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);
}

Parameters

  • layerOptions optional Object

    An object containing any of the following key value options: startMarker, endMarker, waypointMarker, viaMarker, routeRibbon, and alternateRouteRibbon.

    • directionsResponse Object required

      A response object from the L.mapquest.directions.route() call. This is data that is used by the layer to render the route.

    • startMarker Object optional

      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.

    • endMarker Object optional

      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.

    • waypointMarker Object optional

      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.

    • viaMarker Object optional

      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.

    • routeRibbon Object optional

      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].

    • alternateRouteRibbon Object optional

      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].

Visual Example

Directions Route