MapQuest.js

Directions with Narrative Control Example

Edit the code below and click "Try It Now" to display the result.

addDirections();

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

function createMap(err, 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);
        }
      }
    </script>
  </head>