Skip To Content ArcGIS for Developers Sign In Dashboard

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

If you would like the Directions widget to access the ArcGIS World Routing Service directly and prevent the application from prompting the user for authentication, you can use a service proxy.

  1. Go to the Set up authenticated services tutorial and create an application and a proxy to access the ArcGIS Routing and Directions Service.

  2. In the dashboard , copy the Routing and Directions proxy URL and update the application code.

          var directions = new Directions({
             view: view,
             //*** ADD ***/
             routeServiceUrl: "https://utility.arcgis.com/usrsvcs/appservices/<your-id>/rest/services/World/Route/NAServer/Route_World"
           });
    

    NOTE: Ensure the URL doesn't contain /solve at the end. You just need to access the Route_World endpoint.

  3. Run the application again and it shouldn't prompt the user to sign in.

Change the symbols

Try changing the symbol style for the stops and the route. The code might look something like this:

      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";