Overview

You will learn: how to find a route and navigate turn-by-turn directions with the Directions widget.

The ArcGIS Transportation Routing and Network Analytics Services can find routes, get driving directions, calculate drive times, and solve complicated multiple vehicle routing problems (VRP). If you would like to create an application that can interactively find driving directions and create an optimized route, you can use the Directions widget. In either case, you pass in stop locations, and optionally barriers and the mode of transportation, and the service will return a route with directions. Once you have the results you can add the route to a map, display turn-by-turn directions, or integrate them further into your application. To learn more about the capabilities of the underlying route service, please visit the REST tutorials.

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. The Directions widget uses the ArcGIS Transportation Routing and Network Analytics Services under the hood.

Steps

Create a starter app

  1. Go to the JavaScript Starter App.

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

Change the basemap and zoom level

  1. In the main function, update the existing code to use the streets-navigation-vector basemap and the zoom level to 12.

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

Add the Directions widget

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

        require([
          "esri/Map",
          "esri/views/MapView",
          //*** ADD ***//
          "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 fix 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

Use a service proxy to access the route service

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

  1. Go to the Set up authenticated services lab 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";
Content