Find a route and directions

Learn how to find a route and directions with the route service.

Routing is the process of finding the path from an origin to a destination in a street network. You can use the route service to find routes, get driving directions, calculate drive times, and solve complicated, multiple vehicle routing problems. To create a route, you typically define a set of stops (origin and one or more destinations) and use the service to find a route with directions. You can also use a number of additional parameters such as barriers and mode of travel to refine the results.

In this tutorial, you use ArcGIS REST JS to access the routing service to get route. You click on the map to get an origin and destination that are used to get a route and directions from the route service. The directions are also displayed on the map.

Prerequisites

You need an ArcGIS Developer or ArcGIS Online account to access the developer dashboard and create an API key.

Steps

Create a new pen

To get started, either complete the Display a map tutorial or .

Set the API key

To access location services, you need an API key or OAuth 2.0 access token. To learn how to create and scope your key, visit the Create an API key tutorial.

Go to your dashboard to get an API key. The API key must be scoped to access the services used in this tutorial.

In CodePen, update apiKey to use your key.

Use dark colors for code blocks
Change line
const apiKey = "YOUR_API_KEY";
const basemapId = "ArcGIS:Streets";
const basemapURL = "https://basemaps-api.arcgis.com/arcgis/rest/services/styles/" + basemapId + "?type=style&token=" + apiKey;
olms.apply(map, basemapURL);

Add references to ArcGIS REST JS

In the <head> element, add references to the ArcGIS REST JS library.

Expand
Use dark colors for code blocks
Add line.Add line.
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.15.1/css/ol.css" type="text/css" />
    <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.15.1/build/ol.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/ol-mapbox-style@10.5.0/dist/olms.js" type="text/javascript"></script>

    <script src="https://unpkg.com/@esri/arcgis-rest-request@4.0.0/dist/bundled/request.umd.js"></script>
    <script src="https://unpkg.com/@esri/arcgis-rest-routing@4.0.0/dist/bundled/routing.umd.js"></script>
Expand

Update the map

A navigation basemap layer is typically used in geocoding and routing applications. Update the basemap layer to use ArcGIS:Navigation.

Update the basemap and the map initialization to center on location [-79.3832,43.6532], Toronto.

Expand
Use dark colors for code blocks
Change lineChange line
    <script>

      const apiKey = "YOUR_API_KEY";

      const map = new ol.Map({
        target: "map"
      });

      const view = new ol.View({

        center: ol.proj.fromLonLat([-79.3832, 43.6532]), // Toronto

        zoom: 13
      });
      map.setView(view);

      const basemapId = "ArcGIS:Navigation";

      const basemapURL = "https://basemaps-api.arcgis.com/arcgis/rest/services/styles/" + basemapId + "?type=style&token=" + apiKey;

      olms.apply(map, basemapURL)


    </script>
Expand

Add end point layers

To display circles for the start and end of the route, you will create two circle vector layers.

Define variables to hold the start layer, end layer, and the route layer that you will create. Create a function called addCircleLayers.

Expand
Use dark colors for code blocks
Add line.Add line.Add line.Add line.
      const view = new ol.View({

        center: ol.proj.fromLonLat([-79.3832, 43.6532]), // Toronto

        zoom: 13
      });
      map.setView(view);

      let startLayer, endLayer, routeLayer;
      function addCircleLayers() {

      }
Expand

Inside the function, create a new Vector layer for the startLayer. Use a Circle style to make a white circle with black stroke. Add it to the map with map.addLayer. Do the same for endLayer, but with a black fill and white stroke.

Expand
Use dark colors for code blocks
Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.
      let startLayer, endLayer, routeLayer;
      function addCircleLayers() {

        startLayer = new ol.layer.Vector({
          style: new ol.style.Style({
            image: new ol.style.Circle({
              radius: 6,
              fill: new ol.style.Fill({ color: "white" }),
              stroke: new ol.style.Stroke({ color: "black", width: 2 })
            })
          })
        });
        map.addLayer(startLayer);
        endLayer = new ol.layer.Vector({
          style: new ol.style.Style({
            image: new ol.style.Circle({
              radius: 7,
              fill: new ol.style.Fill({ color: "black" }),
              stroke: new ol.style.Stroke({ color: "white", width: 2 })
            })
          })
        });

        map.addLayer(endLayer);

      }
Expand

Add a map load event handler by adding a then function to the olms function. Inside, call addCircleLayers.

Expand
Use dark colors for code blocks
Add line.Add line.Add line.Add line.
      const basemapId = "ArcGIS:Navigation";

      const basemapURL = "https://basemaps-api.arcgis.com/arcgis/rest/services/styles/" + basemapId + "?type=style&token=" + apiKey;

      olms.apply(map, basemapURL)


        .then(function (map) {
          addCircleLayers();

        });
Expand

Add a click handler

You need a start (origin) and end (destination) to create a route. The first click will set a source for the startLayer and the second click will set a source for the endLayer. You will use a GeoJSON feature format to set these sources. Use a click event handler to respond to these clicks.

Add a variable to store whether the next click will be for the start or end of the route. Set it initially to start. Add a variable to store the coordinates for each end. Create a GeoJSON feature format and store it to a geojson variable.

Expand
Use dark colors for code blocks
Add line.Add line.Add line.Add line.Add line.Add line.Add line.
        map.addLayer(endLayer);

      }

      let currentStep = "start";
      let startCoords, endCoords;

      const geojson = new ol.format.GeoJSON({
        defaultDataProjection: "EPSG:4326",
        featureProjection: "EPSG:3857"
      });
Expand

Add a click event handler to the map. Inside, transform the coordinate property of the event object to latitude and longitude and store it in a variable. Use this to create a GeoJSON Point.

Expand
Use dark colors for code blocks
Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.
      const geojson = new ol.format.GeoJSON({
        defaultDataProjection: "EPSG:4326",
        featureProjection: "EPSG:3857"
      });

      map.on("click", (e) => {

        const coordinates = ol.proj.transform(e.coordinate, "EPSG:3857", "EPSG:4326");
        const point = {
          type: "Point",
          coordinates
        };

      });
Expand

Use setSource on the current layer to set a new Vector source. Use the readFeatures method of the geojson feature format you defined earlier to set the data. Save the coordinates for later use.

Expand
Use dark colors for code blocks
Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.
      map.on("click", (e) => {

        const coordinates = ol.proj.transform(e.coordinate, "EPSG:3857", "EPSG:4326");
        const point = {
          type: "Point",
          coordinates
        };

        if (currentStep === "start") {

          startLayer.setSource(
            new ol.source.Vector({
              features: geojson.readFeatures(point)
            })
          );
          startCoords = coordinates;

          currentStep = "end";
        } else {

          endLayer.setSource(
            new ol.source.Vector({
              features: geojson.readFeatures(point)
            })
          );
          endCoords = coordinates;
          currentStep = "start";

        }

      });
Expand

After setting the start point source, check if there are already end coordinates stored, indicating the user is resetting the route. If so, clear the endCoords variable and the clear method to remove the end point layer features.

Expand
Use dark colors for code blocks
Add line.Add line.Add line.Add line.Add line.Add line.
          startLayer.setSource(
            new ol.source.Vector({
              features: geojson.readFeatures(point)
            })
          );
          startCoords = coordinates;

          // clear endCoords and route if they were already set
          if (endCoords) {
            endCoords = null;
            endLayer.getSource().clear();

          }
Expand

At the top right, click Run. You should be able to click in two places to set a white circle for the start, and a black circle for the end.

Add route layer

To display the route line that you will receive from the routing service, you will create another Vector layer.

Create an addRouteLayer function. Inside, define a routeLayer with a blue stroke, 4 pixel width and medium opacity. Use map.addLayer to add it to the map.

Expand
Use dark colors for code blocks
Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.
        }

      });

      function addRouteLayer() {
        routeLayer = new ol.layer.Vector({
          style: new ol.style.Style({
            stroke: new ol.style.Stroke({ color: "hsl(205, 100%, 50%)", width: 4, opacity: 0.6 })
          })
        });

        map.addLayer(routeLayer);
      }
Expand

Inside the map load event handler, call addRouteLayer.

Expand
Use dark colors for code blocks
Add line.
        .then(function (map) {
          addCircleLayers();

          addRouteLayer();

        });
Expand

Update the click event handler to also clear the route when clearing the end point layer.

Expand
Use dark colors for code blocks
Add line.
          // clear endCoords and route if they were already set
          if (endCoords) {
            endCoords = null;
            endLayer.getSource().clear();

            routeLayer.getSource().clear();
Expand

Get the route

To find the route, you use ArcGIS REST JS to call the solveRoute function to access the route service. Make sure to warn the user if there is a problem accessing the service.

To update the routeLayer with the route, you create a new Vector source from the response's routes.geoJson property.

Create a function called updateRoute. Inside, create a new ApiKeyManager to access the route service. Call solveRoute with the two sets of coordinates as a stops array.

Expand
Use dark colors for code blocks
Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.
        map.addLayer(routeLayer);
      }

      function updateRoute() {

        const authentication = arcgisRest.ApiKeyManager.fromKey(apiKey);

        arcgisRest

          .solveRoute({
            stops: [startCoords, endCoords],
            authentication
          })

      }
Expand

Create a response handler. Inside, create a new Vector, using the geojson feature format to read features from the response's routes.geoJson property.

Expand
Use dark colors for code blocks
Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.
          .solveRoute({
            stops: [startCoords, endCoords],
            authentication
          })

          .then((response) => {

            routeLayer.setSource(
              new ol.source.Vector({
                features: geojson.readFeatures(response.routes.geoJson)
              })
            );

          })
Expand

Add an error handler. Inside, show an alert and log a message.

Expand
Use dark colors for code blocks
Add line.Add line.Add line.Add line.
            routeLayer.setSource(
              new ol.source.Vector({
                features: geojson.readFeatures(response.routes.geoJson)
              })
            );

          })

          .catch((error) => {
            alert("There was a problem using the geocoder. See the console for details.");
            console.error(error);
          });
Expand

Update the click event handler to call updateRoute after updating the endpoint layer.

Expand
Use dark colors for code blocks
Add line.
          endLayer.setSource(
            new ol.source.Vector({
              features: geojson.readFeatures(point)
            })
          );
          endCoords = coordinates;
          currentStep = "start";

          updateRoute(startCoords, endCoords);
Expand

Show directions

The data returned from the route service contains directions information. To display it, you can create a styled <div> element. You will populate this with data drawn from the directions attribute of the response.

In the <body> section, add a <div> element with an id of directions.
Expand
Use dark colors for code blocks