Get a route and directions

Overview

You will learn: how to build an app to find the optimal route and directions for multiple stops with the ArcGIS Route service.

Applications can use the ArcGIS Routing and Network Analytics Services to find routes, get driving directions, calculate drive times, and solve complicated multiple vehicle routing problems. To create an application that can access the service directly to find driving directions and create an optimized route, you can use ArcGIS World Routing Service and the RouteTask class. To create a route, you provide 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. The ArcGIS World Routing Service is a premium service and requires requests to be authenticated. To access the service without signing in, visit the Set up authenticated services tutorial. To learn more about the capabilities of the underlying service, visit the REST documentation.

In this tutorial, you will learn how to use the RouteTask and the ArcGIS World Routing Service to calculate an optimal route between two places. The start and finish points will be created by clicking on the map.

Click on the map twice to create a route.

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: Get a route and 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
         });
   

Create the route task

1. In the require statement, add the RouteTask, RouteParameters, FeatureSet and Graphic modules.

       require([
         "esri/Map",
         "esri/views/MapView",
         "esri/tasks/RouteTask",
         "esri/tasks/support/RouteParameters",
         "esri/tasks/support/FeatureSet",
         "esri/Graphic"
       ], function(Map, MapView, RouteTask, RouteParameters, FeatureSet, Graphic) {
   

2. At the end of the code in the main function, create a RouteTask and reference the ArcGIS World Routing Service.

         var routeTask = new RouteTask({
            url: "https://route.arcgis.com/arcgis/rest/services/World/Route/NAServer/Route_World"
         });
   

Get a start and finish point

Before you can execute the route task you need to assemble the input parameters. There are a number of parameters you can provide such as stops, barriers and the preferred order, but at a minimum you need to provide the start and finish location.

1. In the main function, create a click handler and a addGraphic function to add graphics when the view is clicked. Create a simple white marker for the start and a black marker for the finish location. After two graphics have been created, call the getRoute function to execute the route task. This will be completed in the next step.

         view.on("click", function(event){
           if (view.graphics.length === 0) {
             addGraphic("start", event.mapPoint);
           } else if (view.graphics.length === 1) {
             addGraphic("finish", event.mapPoint);
           } else {
             view.graphics.removeAll();
             addGraphic("start",event.mapPoint);
           }
         });
   
         function addGraphic(type, point) {
           var graphic = new Graphic({
             symbol: {
               type: "simple-marker",
               color: (type === "start") ? "white" : "black",
               size: "8px"
             },
             geometry: point
           });
           view.graphics.add(graphic);
         }
   

2. Run the app and click on two locations to ensure the graphics are created.

Execute the route task

The last step is to call the service and add the route to the map.

1. Write a new getRoute function to create the RouteParameters and pass in the stops graphics collected eariler. Also set returnDirections to true to ensure the text directions are returned as well (see challenge). Call the solve method and when the task returns, extract the route from the RouteResult and add the route to the map with a blue symbol.

         function getRoute() {
           // Setup the route parameters
           var routeParams = new RouteParameters({
             stops: new FeatureSet({
               features: view.graphics.toArray() // Pass the array of graphics
             }),
             returnDirections: true
           });
           // Get the route
           routeTask.solve(routeParams).then(function(data) {
             // Display the route
             data.routeResults.forEach(function(result) {
               result.route.symbol = {
                 type: "simple-line",
                 color: [5, 150, 255],
                 width: 3
               };
               view.graphics.add(result.route);
             });
           });
         }
   

2. Update the click handler code to call the getRoute function when the second graphic (finish) is passed in.

         view.on("click", function(event){
           if (view.graphics.length === 0) {
             addGraphic("start", event.mapPoint);
           } else if (view.graphics.length === 1) {
             addGraphic("finish", event.mapPoint);
             //*** ADD ***//
             getRoute();
           } else {
             view.graphics.removeAll();
             addGraphic("start",event.mapPoint);
           }
         });
   
         function addGraphic(type, point) {
           var graphic = new Graphic({
             symbol: {
               type: "simple-marker",
               color: (type === "start") ? "white" : "black",
               size: "8px"
             },
             geometry: point
           });
           view.graphics.add(graphic);
         }
   

3. Run the app and click on two locations to generate a route.

Congratulations, you're done!

Your app should look something like this.

Challenge

Prevent the authentication dialog from appearing

Show the directions

      function getRoute() {
        // Setup the route parameters
        var routeParams = new RouteParameters({
          stops: new FeatureSet({
            features: view.graphics.toArray() // Pass the array of graphics
          }),
          returnDirections: true
        });
        // Get the route
        routeTask.solve(routeParams).then(function(data) {
          // Display the route
          data.routeResults.forEach(function(result) {
            result.route.symbol = {
              type: "simple-line",
              color: [5, 150, 255],
              width: 3
            };
            view.graphics.add(result.route);
          });

          //*** ADD ***//

          // Display the directions
          var directions = document.createElement("ol");
          directions.classList = "esri-widget esri-widget--panel esri-directions__scroller";
          directions.style.marginTop = 0;
          directions.style.paddingTop = "15px";

          // Show the directions
          var features = data.routeResults[0].directions.features;
          features.forEach(function(result,i){
            var direction = document.createElement("li");
            direction.innerHTML = result.attributes.text + " (" + result.attributes.length.toFixed(2) + " miles)";
            directions.appendChild(direction);
          });

          // Add directions to the view
          view.ui.empty("top-right");
          view.ui.add(directions, "top-right");
        });
      }