Directions API

Narrative Microformat

The microformat Narrative type adds <span> tags that have semantic value. This lets you easily style part of the narrative, and includes the adr format found at microformats.org.

Class Name	Description
nav-cmd	The top level parent element of the maneuver.
compass-dir	The directional component of the maneuver. (ex: East, West, Northwest)
relative-dir	The turn direction. (ex: left, right)
type	The type of maneuver to make. (ex. Turn, Keep Going, Merge)
street-name	Parent element of a collection of street names.
first, second, third	The streets that make up a street-name. (ex. US-222/US-30)
regular	A normal street along the maneuver.
intersecting	A street that intersects the maneuver.
toward-sign	Toward sign on the maneuver. Usually a highway interchange.
exit-sign	The exit sign name on a maneuver.
label	The text of an exit sign.
value	The numerical value of the exit sign.
branch-sign	A branch sign on the maneuver. Usually part of an exit.
note	Extra information about the maneuver.
toll	Messaging to indicate the user on a toll road.
adr	A location. See the hCard specification for the class names that make up a location microformat.

Demo

Example Request

GET https://www.mapquestapi.com/directions/v2/route?key=KEY&callback=render&narrativeType=microformat&from=Denver, CO&to=Boulder, CO

Sample Narrative Microformat

<span class="nav-cmd">Go
  <span class="compass-dir">west</span>
  on
  <span class="street-name">
    <span class="regular">
      <span class="first">E Colfax Ave</span>
      /
      <span class="second">I-70 Bus W</span>
      /
      <span class="third">US-40 W</span>
      /
      <span class="fourth">US-287 N</span></span>
  </span>
  .
</span>

Sample Javascript to Manipulate Narrative

function turnBold() {
    var elements = document.getElementsByClassName('street-name'), i = 0, element;

    for (; i < elements.length; i++) {
        element = elements[i];
        element.style.fontWeight = 'bold';
    }
}