MapQuest.js

L.mapquest.narrativeControl(options)

A control that adds route narratives to the map from a directions response. It is also interactive where clicks on the narrative will bring up narrative popups along the route.

When creating a route, a boolean option enhancedNarrative can be set. The response will contain Intersection Counts, Previous Intersection, and Next Intersection/Gone Too Far advice, which will be added to the narrativeControl.

Syntax

L.mapquest.key = 'KEY';

var directions = L.mapquest.directions();
directions.route({
  start: 'Denver, CO',
  end: 'Boulder, CO',
  options: {
    enhancedNarrative: true
  }
}, createMap);

function createMap(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);

  var narrativeControl = L.mapquest.narrativeControl({
    directionsResponse: response,
    compactResults: false,
    interactive: true
  });

  narrativeControl.setDirectionsLayer(directionsLayer);
  narrativeControl.addTo(map);
}

Parameters

• options object

  An object containing any of the following key value options: directionsResponse, position, className, interactive, and compactResults.

  • directionsResponse Object required

    The response object from a directions route that populates the narrative.

  • position String optional, defaults to 'bottomright'

    The position of the control (one of the map corners).

    Possible values are 'topleft', 'topright', 'bottomleft' or 'bottomright'.

  • className String optional

    A custom CSS class name to assign to the control.

  • interactive Boolean optional, defaults to true.

    Determines if the control is interactive. When it is interactive, the narrative maneuvers are clickable and place via points and popups on the map.

  • compactResults Boolean optional, defaults to false.

    Determines if a compact layout of the route narrative should be used.

  Example

  {
    position: 'bottomright',
    className: '',
    compactResults: false,
    interactive: true,
    directionsResponse: {}
  }

Functions

narrativeControl.setDirectionsLayer(directionsLayer)

Assigns a directionsLayer object to the narrativeControl. When the directionsLayer fires a directions_changed event, the narrative control will automatically update the narrative. If no directionsLayer is set, the narrative control is static and won't change if the directionsLayer changes.

Example

var directionsLayer = L.mapquest.directionsLayer({
  directionsResponse: response
}).addTo(map);

var narrativeControl = L.mapquest.narrativeControl({
  directionsResponse: response,
  compactResults: false,
  interactive: true
});

narrativeControl.setDirectionsLayer(directionsLayer);
narrativeControl.addTo(map);

Return Value

An L.Control object that can be added to a map with the addControl() function.

Visual Example