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
const apiKey = "YOUR_API_KEY";
const basemapId = "arcgis/streets";
const basemapURL = `https://basemapstyles-api.arcgis.com/arcgis/rest/services/styles/v2/styles/${basemapId}?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
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@v8.2.0/ol.css" type="text/css" />
    <script src="https://cdn.jsdelivr.net/npm/ol@v8.2.0/dist/ol.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/ol-mapbox-style@10.6.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
    <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://basemapstyles-api.arcgis.com/arcgis/rest/services/styles/v2/styles/${basemapId}?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
      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
      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
      const basemapId = "arcgis/navigation";

      const basemapURL = `https://basemapstyles-api.arcgis.com/arcgis/rest/services/styles/v2/styles/${basemapId}?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
        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
      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
      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
          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
        }

      });

      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
        .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
          // 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
        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
          .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
            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
          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
  <body>

    <div id="map"></div>

    <div id="directions">Click on the map to create a start and end for the route.</div>
Expand

In the <style> section, style the #directions element with absolute position so it sits in front of the map, and a fixed width and height.

Expand
Use dark colors for code blocks
    <style>
      html,
      body,
      #map {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 14px;
        color: #323232;
      }

      #directions {
        position: absolute;
        width: 30%;
        max-height: 50%;
        right: 20px;
        top: 20px;
        overflow-y: auto; /* Show a scrollbar if needed */
        background: white;
        font-family: Arial, Helvetica, Verdana;
        line-height: 1.5;
        font-size: 14px;
        padding: 10px;
      }

    </style>
Expand

In the query response handler, set the contents of the <div> element using the directions attribute. Join the text attributes of each element of the features array to make the HTML contents of the <div> element. Use <br> tags between each line to create a line break.

The directions element is an array where each element corresponds to one route. Its features attribute is an array with information about each step on the route, including the length of the maneuver, the kind of maneuver, and the text that should be shown to the user.

Expand
Use dark colors for code blocks
          .then((response) => {

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

            const directionsHTML = response.directions[0].features.map((f) => f.attributes.text).join("<br/>");
            document.getElementById("directions").innerHTML = directionsHTML;
            document.getElementById("directions").style.display = "block";

          })
Expand

Update the click handler to also clear the directions when clearing the route.

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

            routeLayer.getSource().clear();

            document.getElementById("directions").innerHTML = "";
            document.getElementById("directions").style.display = "none";
Expand

Run the app

In CodePen, run your code to display the map.

When the map displays, you should be able to click on it once to create an origin point and again to create a destination point. The routing service should then display the resulting route and turn-by-turn directions.

What's next?

Learn how to use additional ArcGIS location services in these tutorials:

Reverse geocode

Find an address near a location with the Geocoding service.

Find nearby places and details

Find points of interest near a location and get detailed information about them

Find service areas

Calculate the area that can be reached in a given driving time from a location.

OpenLayers

Find a route and directions

Was this page helpful?