Driving directions

Overview

You will learn: how to build an app to explore turn-by-turn driving directions with the Directions widget.

Applications can use the ArcGIS Routing and Network Analytics Services to find routes and directions, calculate drive times, and solve complicated multiple vehicle routing problems. By default, the Directions widget uses the ArcGIS World Routing Service and allows you to find driving directions interactively. You can provide two or more stop locations, and optionally barriers and the mode of transportation, and the service will return an optimized route with directions. The route service is a premium service and requires requests to be authenticated. If authentication isn't provided, the Directions widget will prompt you to sign in. To access the service without signing in, visit the Set up authenticated services tutorial. To learn how to access the routing service directly, visit the Get a route and directions tutorial.

In this tutorial, you will learn how to use the Directions widget to find a route between two or more locations and then display the turn-by-turn driving directions.

Click on the widget input boxes and then the map to see how it works.

Steps

Create a starter app

1. Open the JavaScript Starter App on CodePen.

2. In CodePen, click Fork and save the pen as ArcGIS JavaScript Tutorials: Driving directions.

Change the basemap and position

1. In the main function, update the existing code to use the streets-navigation-vector basemap. Set the zoom level to 12, and the center to [-118.24532,34.05398] (Los Angeles).

         var map = new Map({
           //*** UPDATE ***//
           basemap: "streets-navigation-vector"
         });
   
         var view = new MapView({
           container: "viewDiv",
           map: map,
           //*** UPDATE ***//
           center: [-118.24532,34.05398],
           zoom: 12
         });
   

Add the Directions widget

1. In the require statement, add the Directions widget module.

       require([
         "esri/Map",
         "esri/views/MapView",
         "esri/widgets/Directions"
       ], function(Map, MapView, Directions) {
   

2. At the end of the code in the main function, create a Directions widget and add it to the top right of the view.

         var directions = new Directions({
           view: view
         });
         view.ui.add(directions, "top-right");
   

3. Run the app to ensure the widget appears.

Offset the map

1. At the top of the page, add CSS to position the direction and attribution widget to the view.

     <style>
       html, body, #viewDiv {
         padding: 0;
         margin: 0;
         height: 100%;
         width: 100%;
       }
       /* ADD */
       .esri-view .esri-directions {
         position: fixed;
         right: 15px;
       }
       .esri-view .esri-component.esri-attribution {
         position: fixed;
       }
     </style>
   

2. In the main function, update the center and zoom to center on Los Angeles. Add padding to the view to offset the map so the route doesn't hide behind the Directions widget.

         var view = new MapView({
           container: "viewDiv",
           map: map,
           //*** ADD ***//
           center: [-118.24532,34.05398],
           zoom: 12,
           padding: {
             right: 320
           }
         });
   

3. Run the app and use the widget to find directions for different locations:

   1. Click each input field and then the map to add a start and stop location.
   2. Click the turn-by-turn directions to navigate to each segment.
   3. Click on the route summary (at the top) to go back to the entire route.
   4. Add another stop by clicking + Add Stop and type in Hollywood Park, Inglewood.
   5. Try changing the route mode to Walking Time and Trucking Time.
   6. Try changing the departure time to Depart by [Today's date] and 5:00 PM.

Congratulations, you're done!

Your app should look something like this.

Challenge

Prevent the authentication dialog from appearing

Change the symbols

      require([
        "esri/Map",
        "esri/views/MapView",
        "esri/widgets/Directions",
        //*** ADD ***//
        "esri/symbols/SimpleMarkerSymbol"
      ], function(Map, MapView, Directions, SimpleMarkerSymbol) {

        function createStopSymbol(color, size) {
          return new SimpleMarkerSymbol({
            style: "simple-marker",
            size: size,
            outline: {
              width: "2px",
              color: "white"
            },
            color: color
          });
        }

        // Stop symbols
        directions.stopSymbols.first = createStopSymbol("green","14px");
        directions.stopSymbols.middle = createStopSymbol("black","10px");
        directions.stopSymbols.last = createStopSymbol("red","14px");

        // Route symbol
        directions.routeSymbol.width = "2";
        directions.routeSymbol.color = [0, 0, 0, 0.75];
        directions.routeSymbol.style = "short-dot";