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 Routing 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 define an origin and destination by clicking on the map. These values are used to get a route and directions from the route service. The directions are also displayed on the map.

Prerequisites

You need a free ArcGIS developer account to access your dashboard and API keys. The API key must be scoped to access the services used in this tutorial.

Steps

Create a new pen

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

Set the API key

To access ArcGIS services, you need an API key.

Go to your dashboard to get an API key.

In CodePen, set the apiKey to your key, so it can be used to access basemap layer and location services.

Change line
esriConfig.apiKey = "YOUR-API-KEY";
const map = new Map({
  basemap: "arcgis-topographic" //Basemap layer service
});

Add modules

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

The ArcGIS API for JavaScript uses AMD modules. The require function is used to load modules so they can be used in the main function. It's important to keep the module references and function parameters in the same order.

Add line.Add line.Add line.Add line.Change line
<html>
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
 <title>ArcGIS API for JavaScript Tutorials: Find a route and directions</title>
 <style>
  html, body, #viewDiv {
    padding: 0;
    margin: 0;
    height: 100%;
    width: 100%;
  }
 </style>
  <link rel="stylesheet" href="https://js.arcgis.com/4.19/esri/themes/light/main.css">
  <script src="https://js.arcgis.com/4.19/"></script>

  <script>

    require([
      "esri/config",
      "esri/Map",
      "esri/views/MapView",

      "esri/Graphic",
      "esri/tasks/RouteTask",
      "esri/tasks/support/RouteParameters",
      "esri/tasks/support/FeatureSet"

    ], function(esriConfig, Map, MapView, Graphic, RouteTask, RouteParameters, FeatureSet) {

    esriConfig.apiKey = "YOUR-API-KEY";

    const map = new Map({
      basemap: "arcgis-navigation" //Basemap layer service
    });

    const view = new MapView({
      container: "viewDiv",
      map: map,
      center: [-118.24532,34.05398], //Longitude, latitude
      zoom: 12
    });

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

    view.on("click", function(event){

      if (view.graphics.length === 0) {
        addGraphic("origin", event.mapPoint);
      } else if (view.graphics.length === 1) {
        addGraphic("destination", event.mapPoint);

        getRoute(); // Call the route service

      } else {
        view.graphics.removeAll();
        addGraphic("origin",event.mapPoint);
      }

    });

    function addGraphic(type, point) {
      const graphic = new Graphic({
        symbol: {
          type: "simple-marker",
          color: (type === "origin") ? "white" : "black",
          size: "8px"
        },
      geometry: point
    });
      view.graphics.add(graphic);
    }

    function getRoute() {
      const routeParams = new RouteParameters({
        stops: new FeatureSet({
          features: view.graphics.toArray()
        }),

        returnDirections: true

      });

      routeTask.solve(routeParams)
        .then(function(data) {
          data.routeResults.forEach(function(result) {
            result.route.symbol = {
              type: "simple-line",
              color: [5, 150, 255],
              width: 3
            };
            view.graphics.add(result.route);
          });

          // Display directions
         if (data.routeResults.length > 0) {
           const directions = document.createElement("ol");
          directions.classList = "esri-widget esri-widget--panel esri-directions__scroller";
          directions.style.marginTop = "0";
          directions.style.padding = "15px 15px 15px 30px";
          const features = data.routeResults[0].directions.features;

          // Show each direction
          features.forEach(function(result,i){
            const direction = document.createElement("li");
            direction.innerHTML = result.attributes.text + " (" + result.attributes.length.toFixed(2) + " miles)";
            directions.appendChild(direction);
          });

          view.ui.empty("top-right");
          view.ui.add(directions, "top-right");
         }

        })

        .catch(function(error){
            console.log(error);
        })

    }

  });
  </script>

  </head>
  <body>
    <div id="viewDiv"></div>
  </body>
</html>

Update the map

A streets basemap layer is typically used in routing applications. Update the basemap property to use the arcgis-navigation basemap layer and change the position of the map to center on Los Angeles.

Update the basemap property to arcgis-navigation.

Change line
<html>
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
 <title>ArcGIS API for JavaScript Tutorials: Find a route and directions</title>
 <style>
  html, body, #viewDiv {
    padding: 0;
    margin: 0;
    height: 100%;
    width: 100%;
  }
 </style>
  <link rel="stylesheet" href="https://js.arcgis.com/4.19/esri/themes/light/main.css">
  <script src="https://js.arcgis.com/4.19/"></script>

  <script>

    require([
      "esri/config",
      "esri/Map",
      "esri/views/MapView",

      "esri/Graphic",
      "esri/tasks/RouteTask",
      "esri/tasks/support/RouteParameters",
      "esri/tasks/support/FeatureSet"

    ], function(esriConfig, Map, MapView, Graphic, RouteTask, RouteParameters, FeatureSet) {

    esriConfig.apiKey = "YOUR-API-KEY";

    const map = new Map({
      basemap: "arcgis-navigation" //Basemap layer service
    });

    const view = new MapView({
      container: "viewDiv",
      map: map,
      center: [-118.24532,34.05398], //Longitude, latitude
      zoom: 12
    });

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

    view.on("click", function(event){

      if (view.graphics.length === 0) {
        addGraphic("origin", event.mapPoint);
      } else if (view.graphics.length === 1) {
        addGraphic("destination", event.mapPoint);

        getRoute(); // Call the route service

      } else {
        view.graphics.removeAll();
        addGraphic("origin",event.mapPoint);
      }

    });

    function addGraphic(type, point) {
      const graphic = new Graphic({
        symbol: {
          type: "simple-marker",
          color: (type === "origin") ? "white" : "black",
          size: "8px"
        },
      geometry: point
    });
      view.graphics.add(graphic);
    }

    function getRoute() {
      const routeParams = new RouteParameters({
        stops: new FeatureSet({
          features: view.graphics.toArray()
        }),

        returnDirections: true

      });

      routeTask.solve(routeParams)
        .then(function(data) {
          data.routeResults.forEach(function(result) {
            result.route.symbol = {
              type: "simple-line",
              color: [5, 150, 255],
              width: 3
            };
            view.graphics.add(result.route);
          });

          // Display directions
         if (data.routeResults.length > 0) {
           const directions = document.createElement("ol");
          directions.classList = "esri-widget esri-widget--panel esri-directions__scroller";
          directions.style.marginTop = "0";
          directions.style.padding = "15px 15px 15px 30px";
          const features = data.routeResults[0].directions.features;

          // Show each direction
          features.forEach(function(result,i){
            const direction = document.createElement("li");
            direction.innerHTML = result.attributes.text + " (" + result.attributes.length.toFixed(2) + " miles)";
            directions.appendChild(direction);
          });

          view.ui.empty("top-right");
          view.ui.add(directions, "top-right");
         }

        })

        .catch(function(error){
            console.log(error);
        })

    }

  });
  </script>

  </head>
  <body>
    <div id="viewDiv"></div>
  </body>
</html>

Update the center property to -118.24532,34.05398 and set the zoom property to 12 to center on Los Angeles.

Change lineChange line
<html>
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
 <title>ArcGIS API for JavaScript Tutorials: Find a route and directions</title>
 <style>
  html, body, #viewDiv {
    padding: 0;
    margin: 0;
    height: 100%;
    width: 100%;
  }
 </style>
  <link rel="stylesheet" href="https://js.arcgis.com/4.19/esri/themes/light/main.css">
  <script src="https://js.arcgis.com/4.19/"></script>

  <script>

    require([
      "esri/config",
      "esri/Map",
      "esri/views/MapView",

      "esri/Graphic",
      "esri/tasks/RouteTask",
      "esri/tasks/support/RouteParameters",
      "esri/tasks/support/FeatureSet"

    ], function(esriConfig, Map, MapView, Graphic, RouteTask, RouteParameters, FeatureSet) {

    esriConfig.apiKey = "YOUR-API-KEY";

    const map = new Map({
      basemap: "arcgis-navigation" //Basemap layer service
    });

    const view = new MapView({
      container: "viewDiv",
      map: map,
      center: [-118.24532,34.05398], //Longitude, latitude
      zoom: 12
    });

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

    view.on("click", function(event){

      if (view.graphics.length === 0) {
        addGraphic("origin", event.mapPoint);
      } else if (view.graphics.length === 1) {
        addGraphic("destination", event.mapPoint);

        getRoute(); // Call the route service

      } else {
        view.graphics.removeAll();
        addGraphic("origin",event.mapPoint);
      }

    });

    function addGraphic(type, point) {
      const graphic = new Graphic({
        symbol: {
          type: "simple-marker",
          color: (type === "origin") ? "white" : "black",
          size: "8px"
        },
      geometry: point
    });
      view.graphics.add(graphic);
    }

    function getRoute() {
      const routeParams = new RouteParameters({
        stops: new FeatureSet({
          features: view.graphics.toArray()
        }),

        returnDirections: true

      });

      routeTask.solve(routeParams)
        .then(function(data) {
          data.routeResults.forEach(function(result) {
            result.route.symbol = {
              type: "simple-line",
              color: [5, 150, 255],
              width: 3
            };
            view.graphics.add(result.route);
          });

          // Display directions
         if (data.routeResults.length > 0) {
           const directions = document.createElement("ol");
          directions.classList = "esri-widget esri-widget--panel esri-directions__scroller";
          directions.style.marginTop = "0";
          directions.style.padding = "15px 15px 15px 30px";
          const features = data.routeResults[0].directions.features;

          // Show each direction
          features.forEach(function(result,i){
            const direction = document.createElement("li");
            direction.innerHTML = result.attributes.text + " (" + result.attributes.length.toFixed(2) + " miles)";
            directions.appendChild(direction);
          });

          view.ui.empty("top-right");
          view.ui.add(directions, "top-right");
         }

        })

        .catch(function(error){
            console.log(error);
        })

    }

  });
  </script>

  </head>
  <body>
    <div id="viewDiv"></div>
  </body>
</html>

Create a route task

A task makes a request to a service and returns the results. Use the RouteTask class to access the Routing service.

Create a RouteTask and set the url property to reference the route service.

Add line.Add line.Add line.
<html>
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
 <title>ArcGIS API for JavaScript Tutorials: Find a route and directions</title>
 <style>
  html, body, #viewDiv {
    padding: 0;
    margin: 0;
    height: 100%;
    width: 100%;
  }
 </style>
  <link rel="stylesheet" href="https://js.arcgis.com/4.19/esri/themes/light/main.css">
  <script src="https://js.arcgis.com/4.19/"></script>

  <script>

    require([
      "esri/config",
      "esri/Map",
      "esri/views/MapView",

      "esri/Graphic",
      "esri/tasks/RouteTask",
      "esri/tasks/support/RouteParameters",
      "esri/tasks/support/FeatureSet"

    ], function(esriConfig, Map, MapView, Graphic, RouteTask, RouteParameters, FeatureSet) {

    esriConfig.apiKey = "YOUR-API-KEY";

    const map = new Map({
      basemap: "arcgis-navigation" //Basemap layer service
    });

    const view = new MapView({
      container: "viewDiv",
      map: map,
      center: [-118.24532,34.05398], //Longitude, latitude
      zoom: 12
    });

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

    view.on("click", function(event){

      if (view.graphics.length === 0) {
        addGraphic("origin", event.mapPoint);
      } else if (view.graphics.length === 1) {
        addGraphic("destination", event.mapPoint);

        getRoute(); // Call the route service

      } else {
        view.graphics.removeAll();
        addGraphic("origin",event.mapPoint);
      }

    });

    function addGraphic(type, point) {
      const graphic = new Graphic({
        symbol: {
          type: "simple-marker",
          color: (type === "origin") ? "white" : "black",
          size: "8px"
        },
      geometry: point
    });
      view.graphics.add(graphic);
    }

    function getRoute() {
      const routeParams = new RouteParameters({
        stops: new FeatureSet({
          features: view.graphics.toArray()
        }),

        returnDirections: true

      });

      routeTask.solve(routeParams)
        .then(function(data) {
          data.routeResults.forEach(function(result) {
            result.route.symbol = {
              type: "simple-line",
              color: [5, 150, 255],
              width: 3
            };
            view.graphics.add(result.route);
          });

          // Display directions
         if (data.routeResults.length > 0) {
           const directions = document.createElement("ol");
          directions.classList = "esri-widget esri-widget--panel esri-directions__scroller";
          directions.style.marginTop = "0";
          directions.style.padding = "15px 15px 15px 30px";
          const features = data.routeResults[0].directions.features;

          // Show each direction
          features.forEach(function(result,i){
            const direction = document.createElement("li");
            direction.innerHTML = result.attributes.text + " (" + result.attributes.length.toFixed(2) + " miles)";
            directions.appendChild(direction);
          });

          view.ui.empty("top-right");
          view.ui.add(directions, "top-right");
         }

        })

        .catch(function(error){
            console.log(error);
        })

    }

  });
  </script>

  </head>
  <body>
    <div id="viewDiv"></div>
  </body>
</html>

Get an origin and destination

A RouteTask uses a stops parameter to find a route. Stops are graphics that represent the origin and destination locations for a route. Use a click handler in the View to add graphics when the map is clicked. The graphics will define the stops for the route.

Add a click handler to add graphics to the view.

Add line.Add line.Add line.
<html>
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
 <title>ArcGIS API for JavaScript Tutorials: Find a route and directions</title>
 <style>
  html, body, #viewDiv {
    padding: 0;
    margin: 0;
    height: 100%;
    width: 100%;
  }
 </style>
  <link rel="stylesheet" href="https://js.arcgis.com/4.19/esri/themes/light/main.css">
  <script src="https://js.arcgis.com/4.19/"></script>

  <script>

    require([
      "esri/config",
      "esri/Map",
      "esri/views/MapView",

      "esri/Graphic",
      "esri/tasks/RouteTask",
      "esri/tasks/support/RouteParameters",
      "esri/tasks/support/FeatureSet"

    ], function(esriConfig, Map, MapView, Graphic, RouteTask, RouteParameters, FeatureSet) {

    esriConfig.apiKey = "YOUR-API-KEY";

    const map = new Map({
      basemap: "arcgis-navigation" //Basemap layer service
    });

    const view = new MapView({
      container: "viewDiv",
      map: map,
      center: [-118.24532,34.05398], //Longitude, latitude
      zoom: 12
    });

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

    view.on("click", function(event){

      if (view.graphics.length === 0) {
        addGraphic("origin", event.mapPoint);
      } else if (view.graphics.length === 1) {
        addGraphic("destination", event.mapPoint);

        getRoute(); // Call the route service

      } else {
        view.graphics.removeAll();
        addGraphic("origin",event.mapPoint);
      }

    });

    function addGraphic(type, point) {
      const graphic = new Graphic({
        symbol: {
          type: "simple-marker",
          color: (type === "origin") ? "white" : "black",
          size: "8px"
        },
      geometry: point
    });
      view.graphics.add(graphic);
    }

    function getRoute() {
      const routeParams = new RouteParameters({
        stops: new FeatureSet({
          features: view.graphics.toArray()
        }),

        returnDirections: true

      });

      routeTask.solve(routeParams)
        .then(function(data) {
          data.routeResults.forEach(function(result) {
            result.route.symbol = {
              type: "simple-line",
              color: [5, 150, 255],
              width: 3
            };
            view.graphics.add(result.route);
          });

          // Display directions
         if (data.routeResults.length > 0) {
           const directions = document.createElement("ol");
          directions.classList = "esri-widget esri-widget--panel esri-directions__scroller";
          directions.style.marginTop = "0";
          directions.style.padding = "15px 15px 15px 30px";
          const features = data.routeResults[0].directions.features;

          // Show each direction
          features.forEach(function(result,i){
            const direction = document.createElement("li");
            direction.innerHTML = result.attributes.text + " (" + result.attributes.length.toFixed(2) + " miles)";
            directions.appendChild(direction);
          });

          view.ui.empty("top-right");
          view.ui.add(directions, "top-right");
         }

        })

        .catch(function(error){
            console.log(error);
        })

    }

  });
  </script>

  </head>
  <body>
    <div id="viewDiv"></div>
  </body>
</html>

Create an addGraphic function to display a white marker for the origin location and a black marker for the destination. Add the graphic to the view.

Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.
<html>
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
 <title>ArcGIS API for JavaScript Tutorials: Find a route and directions</title>
 <style>
  html, body, #viewDiv {
    padding: 0;
    margin: 0;
    height: 100%;
    width: 100%;
  }
 </style>
  <link rel="stylesheet" href="https://js.arcgis.com/4.19/esri/themes/light/main.css">
  <script src="https://js.arcgis.com/4.19/"></script>

  <script>

    require([
      "esri/config",
      "esri/Map",
      "esri/views/MapView",

      "esri/Graphic",
      "esri/tasks/RouteTask",
      "esri/tasks/support/RouteParameters",
      "esri/tasks/support/FeatureSet"

    ], function(esriConfig, Map, MapView, Graphic, RouteTask, RouteParameters, FeatureSet) {

    esriConfig.apiKey = "YOUR-API-KEY";

    const map = new Map({
      basemap: "arcgis-navigation" //Basemap layer service
    });

    const view = new MapView({
      container: "viewDiv",
      map: map,
      center: [-118.24532,34.05398], //Longitude, latitude
      zoom: 12
    });

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

    view.on("click", function(event){

      if (view.graphics.length === 0) {
        addGraphic("origin", event.mapPoint);
      } else if (view.graphics.length === 1) {
        addGraphic("destination", event.mapPoint);

        getRoute(); // Call the route service

      } else {
        view.graphics.removeAll();
        addGraphic("origin",event.mapPoint);
      }

    });

    function addGraphic(type, point) {
      const graphic = new Graphic({
        symbol: {
          type: "simple-marker",
          color: (type === "origin") ? "white" : "black",
          size: "8px"
        },
      geometry: point
    });
      view.graphics.add(graphic);
    }

    function getRoute() {
      const routeParams = new RouteParameters({
        stops: new FeatureSet({
          features: view.graphics.toArray()
        }),

        returnDirections: true

      });

      routeTask.solve(routeParams)
        .then(function(data) {
          data.routeResults.forEach(function(result) {
            result.route.symbol = {
              type: "simple-line",
              color: [5, 150, 255],
              width: 3
            };
            view.graphics.add(result.route);
          });

          // Display directions
         if (data.routeResults.length > 0) {
           const directions = document.createElement("ol");
          directions.classList = "esri-widget esri-widget--panel esri-directions__scroller";
          directions.style.marginTop = "0";
          directions.style.padding = "15px 15px 15px 30px";
          const features = data.routeResults[0].directions.features;

          // Show each direction
          features.forEach(function(result,i){
            const direction = document.createElement("li");
            direction.innerHTML = result.attributes.text + " (" + result.attributes.length.toFixed(2) + " miles)";
            directions.appendChild(direction);
          });

          view.ui.empty("top-right");
          view.ui.add(directions, "top-right");
         }

        })

        .catch(function(error){
            console.log(error);
        })

    }

  });
  </script>

  </head>
  <body>
    <div id="viewDiv"></div>
  </body>
</html>

Update the click handler to reference the addGraphic function. The first click will create the origin and the second will create the destination. Subsequent clicks will clear the graphics to define a new origin and destination.

Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.
<html>
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
 <title>ArcGIS API for JavaScript Tutorials: Find a route and directions</title>
 <style>
  html, body, #viewDiv {
    padding: 0;
    margin: 0;
    height: 100%;
    width: 100%;
  }
 </style>
  <link rel="stylesheet" href="https://js.arcgis.com/4.19/esri/themes/light/main.css">
  <script src="https://js.arcgis.com/4.19/"></script>

  <script>

    require([
      "esri/config",
      "esri/Map",
      "esri/views/MapView",

      "esri/Graphic",
      "esri/tasks/RouteTask",
      "esri/tasks/support/RouteParameters",
      "esri/tasks/support/FeatureSet"

    ], function(esriConfig, Map, MapView, Graphic, RouteTask, RouteParameters, FeatureSet) {

    esriConfig.apiKey = "YOUR-API-KEY";

    const map = new Map({
      basemap: "arcgis-navigation" //Basemap layer service
    });

    const view = new MapView({
      container: "viewDiv",
      map: map,
      center: [-118.24532,34.05398], //Longitude, latitude
      zoom: 12
    });

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

    view.on("click", function(event){

      if (view.graphics.length === 0) {
        addGraphic("origin", event.mapPoint);
      } else if (view.graphics.length === 1) {
        addGraphic("destination", event.mapPoint);

        getRoute(); // Call the route service

      } else {
        view.graphics.removeAll();
        addGraphic("origin",event.mapPoint);
      }

    });

    function addGraphic(type, point) {
      const graphic = new Graphic({
        symbol: {
          type: "simple-marker",
          color: (type === "origin") ? "white" : "black",
          size: "8px"
        },
      geometry: point
    });
      view.graphics.add(graphic);
    }

    function getRoute() {
      const routeParams = new RouteParameters({
        stops: new FeatureSet({
          features: view.graphics.toArray()
        }),

        returnDirections: true

      });

      routeTask.solve(routeParams)
        .then(function(data) {
          data.routeResults.forEach(function(result) {
            result.route.symbol = {
              type: "simple-line",
              color: [5, 150, 255],
              width: 3
            };
            view.graphics.add(result.route);
          });

          // Display directions
         if (data.routeResults.length > 0) {
           const directions = document.createElement("ol");
          directions.classList = "esri-widget esri-widget--panel esri-directions__scroller";
          directions.style.marginTop = "0";
          directions.style.padding = "15px 15px 15px 30px";
          const features = data.routeResults[0].directions.features;

          // Show each direction
          features.forEach(function(result,i){
            const direction = document.createElement("li");
            direction.innerHTML = result.attributes.text + " (" + result.attributes.length.toFixed(2) + " miles)";
            directions.appendChild(direction);
          });

          view.ui.empty("top-right");
          view.ui.add(directions, "top-right");
         }

        })

        .catch(function(error){
            console.log(error);
        })

    }

  });
  </script>

  </head>
  <body>
    <div id="viewDiv"></div>
  </body>
</html>

Click on the map twice to ensure the graphics are created.

Execute the route task

To execute the task, add the origin and destination graphics to the stops parameter as a FeatureSet and then execute the task. The resulting route will be added to the map as a Graphic.

Input parameters are necessary to execute the route task. While there are many parameters you can add, such as stops and barriers, at minimum you need to provide an origin and destination point.

Create a getRoute function to add RouteParameters and pass in the point graphics.

Add line.Add line.Add line.Add line.Add line.Add line.Add line.
<html>
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
 <title>ArcGIS API for JavaScript Tutorials: Find a route and directions</title>
 <style>
  html, body, #viewDiv {
    padding: 0;
    margin: 0;
    height: 100%;
    width: 100%;
  }
 </style>
  <link rel="stylesheet" href="https://js.arcgis.com/4.19/esri/themes/light/main.css">
  <script src="https://js.arcgis.com/4.19/"></script>

  <script>

    require([
      "esri/config",
      "esri/Map",
      "esri/views/MapView",

      "esri/Graphic",
      "esri/tasks/RouteTask",
      "esri/tasks/support/RouteParameters",
      "esri/tasks/support/FeatureSet"

    ], function(esriConfig, Map, MapView, Graphic, RouteTask, RouteParameters, FeatureSet) {

    esriConfig.apiKey = "YOUR-API-KEY";

    const map = new Map({
      basemap: "arcgis-navigation" //Basemap layer service
    });

    const view = new MapView({
      container: "viewDiv",
      map: map,
      center: [-118.24532,34.05398], //Longitude, latitude
      zoom: 12
    });

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

    view.on("click", function(event){

      if (view.graphics.length === 0) {
        addGraphic("origin", event.mapPoint);
      } else if (view.graphics.length === 1) {
        addGraphic("destination", event.mapPoint);

        getRoute(); // Call the route service

      } else {
        view.graphics.removeAll();
        addGraphic("origin",event.mapPoint);
      }

    });

    function addGraphic(type, point) {
      const graphic = new Graphic({
        symbol: {
          type: "simple-marker",
          color: (type === "origin") ? "white" : "black",
          size: "8px"
        },
      geometry: point
    });
      view.graphics.add(graphic);
    }

    function getRoute() {
      const routeParams = new RouteParameters({
        stops: new FeatureSet({
          features: view.graphics.toArray()
        }),

        returnDirections: true

      });

      routeTask.solve(routeParams)
        .then(function(data) {
          data.routeResults.forEach(function(result) {
            result.route.symbol = {
              type: "simple-line",
              color: [5, 150, 255],
              width: 3
            };
            view.graphics.add(result.route);
          });

          // Display directions
         if (data.routeResults.length > 0) {
           const directions = document.createElement("ol");
          directions.classList = "esri-widget esri-widget--panel esri-directions__scroller";
          directions.style.marginTop = "0";
          directions.style.padding = "15px 15px 15px 30px";
          const features = data.routeResults[0].directions.features;

          // Show each direction
          features.forEach(function(result,i){
            const direction = document.createElement("li");
            direction.innerHTML = result.attributes.text + " (" + result.attributes.length.toFixed(2) + " miles)";
            directions.appendChild(direction);
          });

          view.ui.empty("top-right");
          view.ui.add(directions, "top-right");
         }

        })

        .catch(function(error){
            console.log(error);
        })

    }

  });
  </script>

  </head>
  <body>
    <div id="viewDiv"></div>
  </body>
</html>

Call the solve method to get the route. When the task returns, get the route from routeResults and add it to the view as a Graphic with a blue line.

Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.
<html>
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
 <title>ArcGIS API for JavaScript Tutorials: Find a route and directions</title>
 <style>
  html, body, #viewDiv {
    padding: 0;
    margin: 0;
    height: 100%;
    width: 100%;
  }
 </style>
  <link rel="stylesheet" href="https://js.arcgis.com/4.19/esri/themes/light/main.css">
  <script src="https://js.arcgis.com/4.19/"></script>

  <script>

    require([
      "esri/config",
      "esri/Map",
      "esri/views/MapView",

      "esri/Graphic",
      "esri/tasks/RouteTask",
      "esri/tasks/support/RouteParameters",
      "esri/tasks/support/FeatureSet"

    ], function(esriConfig, Map, MapView, Graphic, RouteTask, RouteParameters, FeatureSet) {

    esriConfig.apiKey = "YOUR-API-KEY";

    const map = new Map({
      basemap: "arcgis-navigation" //Basemap layer service
    });

    const view = new MapView({
      container: "viewDiv",
      map: map,
      center: [-118.24532,34.05398], //Longitude, latitude
      zoom: 12
    });

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

    view.on("click", function(event){

      if (view.graphics.length === 0) {
        addGraphic("origin", event.mapPoint);
      } else if (view.graphics.length === 1) {
        addGraphic("destination", event.mapPoint);

        getRoute(); // Call the route service

      } else {
        view.graphics.removeAll();
        addGraphic("origin",event.mapPoint);
      }

    });

    function addGraphic(type, point) {
      const graphic = new Graphic({
        symbol: {
          type: "simple-marker",
          color: (type === "origin") ? "white" : "black",
          size: "8px"
        },
      geometry: point
    });
      view.graphics.add(graphic);
    }

    function getRoute() {
      const routeParams = new RouteParameters({
        stops: new FeatureSet({
          features: view.graphics.toArray()
        }),

        returnDirections: true

      });

      routeTask.solve(routeParams)
        .then(function(data) {
          data.routeResults.forEach(function(result) {
            result.route.symbol = {
              type: "simple-line",
              color: [5, 150, 255],
              width: 3
            };
            view.graphics.add(result.route);
          });

          // Display directions
         if (data.routeResults.length > 0) {
           const directions = document.createElement("ol");
          directions.classList = "esri-widget esri-widget--panel esri-directions__scroller";
          directions.style.marginTop = "0";
          directions.style.padding = "15px 15px 15px 30px";
          const features = data.routeResults[0].directions.features;

          // Show each direction
          features.forEach(function(result,i){
            const direction = document.createElement("li");
            direction.innerHTML = result.attributes.text + " (" + result.attributes.length.toFixed(2) + " miles)";
            directions.appendChild(direction);
          });

          view.ui.empty("top-right");
          view.ui.add(directions, "top-right");
         }

        })

        .catch(function(error){
            console.log(error);
        })

    }

  });
  </script>

  </head>
  <body>
    <div id="viewDiv"></div>
  </body>
</html>

Update the click handler with the getRoute function after the second graphic is passed in (destination).

Add line.
<html>
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
 <title>ArcGIS API for JavaScript Tutorials: Find a route and directions</title>
 <style>
  html, body, #viewDiv {
    padding: 0;
    margin: 0;
    height: 100%;
    width: 100%;
  }
 </style>
  <link rel="stylesheet" href="https://js.arcgis.com/4.19/esri/themes/light/main.css">
  <script src="https://js.arcgis.com/4.19/"></script>

  <script>

    require([
      "esri/config",
      "esri/Map",
      "esri/views/MapView",

      "esri/Graphic",
      "esri/tasks/RouteTask",
      "esri/tasks/support/RouteParameters",
      "esri/tasks/support/FeatureSet"

    ], function(esriConfig, Map, MapView, Graphic, RouteTask, RouteParameters, FeatureSet) {

    esriConfig.apiKey = "YOUR-API-KEY";

    const map = new Map({
      basemap: "arcgis-navigation" //Basemap layer service
    });

    const view = new MapView({
      container: "viewDiv",
      map: map,
      center: [-118.24532,34.05398], //Longitude, latitude
      zoom: 12
    });

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

    view.on("click", function(event){

      if (view.graphics.length === 0) {
        addGraphic("origin", event.mapPoint);
      } else if (view.graphics.length === 1) {
        addGraphic("destination", event.mapPoint);

        getRoute(); // Call the route service

      } else {
        view.graphics.removeAll();
        addGraphic("origin",event.mapPoint);
      }

    });

    function addGraphic(type, point) {
      const graphic = new Graphic({
        symbol: {
          type: "simple-marker",
          color: (type === "origin") ? "white" : "black",
          size: "8px"
        },
      geometry: point
    });
      view.graphics.add(graphic);
    }

    function getRoute() {
      const routeParams = new RouteParameters({
        stops: new FeatureSet({
          features: view.graphics.toArray()
        }),

        returnDirections: true

      });

      routeTask.solve(routeParams)
        .then(function(data) {
          data.routeResults.forEach(function(result) {
            result.route.symbol = {
              type: "simple-line",
              color: [5, 150, 255],
              width: 3
            };
            view.graphics.add(result.route);
          });

          // Display directions
         if (data.routeResults.length > 0) {
           const directions = document.createElement("ol");
          directions.classList = "esri-widget esri-widget--panel esri-directions__scroller";
          directions.style.marginTop = "0";
          directions.style.padding = "15px 15px 15px 30px";
          const features = data.routeResults[0].directions.features;

          // Show each direction
          features.forEach(function(result,i){
            const direction = document.createElement("li");
            direction.innerHTML = result.attributes.text + " (" + result.attributes.length.toFixed(2) + " miles)";
            directions.appendChild(direction);
          });

          view.ui.empty("top-right");
          view.ui.add(directions, "top-right");
         }

        })

        .catch(function(error){
            console.log(error);
        })

    }

  });
  </script>

  </head>
  <body>
    <div id="viewDiv"></div>
  </body>
</html>

Click two locations on the map to display a route.

Get directions

You can get driving directions from the route service with the returnDirections property on RouteParameters. Use this property to return directions and add them to the map as HTML elements.

Go back to the getRoute function and set the returnDirections property to true.

Add line.
<html>
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
 <title>ArcGIS API for JavaScript Tutorials: Find a route and directions</title>
 <style>
  html, body, #viewDiv {
    padding: 0;
    margin: 0;
    height: 100%;
    width: 100%;
  }
 </style>
  <link rel="stylesheet" href="https://js.arcgis.com/4.19/esri/themes/light/main.css">
  <script src="https://js.arcgis.com/4.19/"></script>

  <script>

    require([
      "esri/config",
      "esri/Map",
      "esri/views/MapView",

      "esri/Graphic",
      "esri/tasks/RouteTask",
      "esri/tasks/support/RouteParameters",
      "esri/tasks/support/FeatureSet"

    ], function(esriConfig, Map, MapView, Graphic, RouteTask, RouteParameters, FeatureSet) {

    esriConfig.apiKey = "YOUR-API-KEY";

    const map = new Map({
      basemap: "arcgis-navigation" //Basemap layer service
    });

    const view = new MapView({
      container: "viewDiv",
      map: map,
      center: [-118.24532,34.05398], //Longitude, latitude
      zoom: 12
    });

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

    view.on("click", function(event){

      if (view.graphics.length === 0) {
        addGraphic("origin", event.mapPoint);
      } else if (view.graphics.length === 1) {
        addGraphic("destination", event.mapPoint);

        getRoute(); // Call the route service

      } else {
        view.graphics.removeAll();
        addGraphic("origin",event.mapPoint);
      }

    });

    function addGraphic(type, point) {
      const graphic = new Graphic({
        symbol: {
          type: "simple-marker",
          color: (type === "origin") ? "white" : "black",
          size: "8px"
        },
      geometry: point
    });
      view.graphics.add(graphic);
    }

    function getRoute() {
      const routeParams = new RouteParameters({
        stops: new FeatureSet({
          features: view.graphics.toArray()
        }),

        returnDirections: true

      });

      routeTask.solve(routeParams)
        .then(function(data) {
          data.routeResults.forEach(function(result) {
            result.route.symbol = {
              type: "simple-line",
              color: [5, 150, 255],
              width: 3
            };
            view.graphics.add(result.route);
          });

          // Display directions
         if (data.routeResults.length > 0) {
           const directions = document.createElement("ol");
          directions.classList = "esri-widget esri-widget--panel esri-directions__scroller";
          directions.style.marginTop = "0";
          directions.style.padding = "15px 15px 15px 30px";
          const features = data.routeResults[0].directions.features;

          // Show each direction
          features.forEach(function(result,i){
            const direction = document.createElement("li");
            direction.innerHTML = result.attributes.text + " (" + result.attributes.length.toFixed(2) + " miles)";
            directions.appendChild(direction);
          });

          view.ui.empty("top-right");
          view.ui.add(directions, "top-right");
         }

        })

        .catch(function(error){
            console.log(error);
        })

    }

  });
  </script>

  </head>
  <body>
    <div id="viewDiv"></div>
  </body>
</html>

In the solve method, create a directions ordered list element that will display if there are results returned to generate a route.

Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.
<html>
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
 <title>ArcGIS API for JavaScript Tutorials: Find a route and directions</title>
 <style>
  html, body, #viewDiv {
    padding: 0;
    margin: 0;
    height: 100%;
    width: 100%;
  }
 </style>
  <link rel="stylesheet" href="https://js.arcgis.com/4.19/esri/themes/light/main.css">
  <script src="https://js.arcgis.com/4.19/"></script>

  <script>

    require([
      "esri/config",
      "esri/Map",
      "esri/views/MapView",

      "esri/Graphic",
      "esri/tasks/RouteTask",
      "esri/tasks/support/RouteParameters",
      "esri/tasks/support/FeatureSet"

    ], function(esriConfig, Map, MapView, Graphic, RouteTask, RouteParameters, FeatureSet) {

    esriConfig.apiKey = "YOUR-API-KEY";

    const map = new Map({
      basemap: "arcgis-navigation" //Basemap layer service
    });

    const view = new MapView({
      container: "viewDiv",
      map: map,
      center: [-118.24532,34.05398], //Longitude, latitude
      zoom: 12
    });

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

    view.on("click", function(event){

      if (view.graphics.length === 0) {
        addGraphic("origin", event.mapPoint);
      } else if (view.graphics.length === 1) {
        addGraphic("destination", event.mapPoint);

        getRoute(); // Call the route service

      } else {
        view.graphics.removeAll();
        addGraphic("origin",event.mapPoint);
      }

    });

    function addGraphic(type, point) {
      const graphic = new Graphic({
        symbol: {
          type: "simple-marker",
          color: (type === "origin") ? "white" : "black",
          size: "8px"
        },
      geometry: point
    });
      view.graphics.add(graphic);
    }

    function getRoute() {
      const routeParams = new RouteParameters({
        stops: new FeatureSet({
          features: view.graphics.toArray()
        }),

        returnDirections: true

      });

      routeTask.solve(routeParams)
        .then(function(data) {
          data.routeResults.forEach(function(result) {
            result.route.symbol = {
              type: "simple-line",
              color: [5, 150, 255],
              width: 3
            };
            view.graphics.add(result.route);
          });

          // Display directions
         if (data.routeResults.length > 0) {
           const directions = document.createElement("ol");
          directions.classList = "esri-widget esri-widget--panel esri-directions__scroller";
          directions.style.marginTop = "0";
          directions.style.padding = "15px 15px 15px 30px";
          const features = data.routeResults[0].directions.features;

          // Show each direction
          features.forEach(function(result,i){
            const direction = document.createElement("li");
            direction.innerHTML = result.attributes.text + " (" + result.attributes.length.toFixed(2) + " miles)";
            directions.appendChild(direction);
          });

          view.ui.empty("top-right");
          view.ui.add(directions, "top-right");
         }

        })

        .catch(function(error){
            console.log(error);
        })

    }

  });
  </script>

  </head>
  <body>
    <div id="viewDiv"></div>
  </body>
</html>

Create a li element for each route feature to generate an ordered list of directions with their distances in miles. Append each direction to the directions element.

Add line.Add line.Add line.Add line.Add line.Add line.
<html>
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
 <title>ArcGIS API for JavaScript Tutorials: Find a route and directions</title>
 <style>
  html, body, #viewDiv {
    padding: 0;
    margin: 0;
    height: 100%;
    width: 100%;
  }
 </style>
  <link rel="stylesheet" href="https://js.arcgis.com/4.19/esri/themes/light/main.css">
  <script src="https://js.arcgis.com/4.19/"></script>

  <script>

    require([
      "esri/config",
      "esri/Map",
      "esri/views/MapView",

      "esri/Graphic",
      "esri/tasks/RouteTask",
      "esri/tasks/support/RouteParameters",
      "esri/tasks/support/FeatureSet"

    ], function(esriConfig, Map, MapView, Graphic, RouteTask, RouteParameters, FeatureSet) {

    esriConfig.apiKey = "YOUR-API-KEY";

    const map = new Map({
      basemap: "arcgis-navigation" //Basemap layer service
    });

    const view = new MapView({
      container: "viewDiv",
      map: map,
      center: [-118.24532,34.05398], //Longitude, latitude
      zoom: 12
    });

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

    view.on("click", function(event){

      if (view.graphics.length === 0) {
        addGraphic("origin", event.mapPoint);
      } else if (view.graphics.length === 1) {
        addGraphic("destination", event.mapPoint);

        getRoute(); // Call the route service

      } else {
        view.graphics.removeAll();
        addGraphic("origin",event.mapPoint);
      }

    });

    function addGraphic(type, point) {
      const graphic = new Graphic({
        symbol: {
          type: "simple-marker",
          color: (type === "origin") ? "white" : "black",
          size: "8px"
        },
      geometry: point
    });
      view.graphics.add(graphic);
    }

    function getRoute() {
      const routeParams = new RouteParameters({
        stops: new FeatureSet({
          features: view.graphics.toArray()
        }),

        returnDirections: true

      });

      routeTask.solve(routeParams)
        .then(function(data) {
          data.routeResults.forEach(function(result) {
            result.route.symbol = {
              type: "simple-line",
              color: [5, 150, 255],
              width: 3
            };
            view.graphics.add(result.route);
          });

          // Display directions
         if (data.routeResults.length > 0) {
           const directions = document.createElement("ol");
          directions.classList = "esri-widget esri-widget--panel esri-directions__scroller";
          directions.style.marginTop = "0";
          directions.style.padding = "15px 15px 15px 30px";
          const features = data.routeResults[0].directions.features;

          // Show each direction
          features.forEach(function(result,i){
            const direction = document.createElement("li");
            direction.innerHTML = result.attributes.text + " (" + result.attributes.length.toFixed(2) + " miles)";
            directions.appendChild(direction);
          });

          view.ui.empty("top-right");
          view.ui.add(directions, "top-right");
         }

        })

        .catch(function(error){
            console.log(error);
        })

    }

  });
  </script>

  </head>
  <body>
    <div id="viewDiv"></div>
  </body>
</html>

For each new route created, remove all existing HTML elements from the view with the empty method. Add the direction element, with the directions as list items, to the top-right of the view.

Add line.Add line.
<html>
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
 <title>ArcGIS API for JavaScript Tutorials: Find a route and directions</title>
 <style>
  html, body, #viewDiv {
    padding: 0;
    margin: 0;
    height: 100%;
    width: 100%;
  }
 </style>
  <link rel="stylesheet" href="https://js.arcgis.com/4.19/esri/themes/light/main.css">
  <script src="https://js.arcgis.com/4.19/"></script>

  <script>

    require([
      "esri/config",
      "esri/Map",
      "esri/views/MapView",

      "esri/Graphic",
      "esri/tasks/RouteTask",
      "esri/tasks/support/RouteParameters",
      "esri/tasks/support/FeatureSet"

    ], function(esriConfig, Map, MapView, Graphic, RouteTask, RouteParameters, FeatureSet) {

    esriConfig.apiKey = "YOUR-API-KEY";

    const map = new Map({
      basemap: "arcgis-navigation" //Basemap layer service
    });

    const view = new MapView({
      container: "viewDiv",
      map: map,
      center: [-118.24532,34.05398], //Longitude, latitude
      zoom: 12
    });

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

    view.on("click", function(event){

      if (view.graphics.length === 0) {
        addGraphic("origin", event.mapPoint);
      } else if (view.graphics.length === 1) {
        addGraphic("destination", event.mapPoint);

        getRoute(); // Call the route service

      } else {
        view.graphics.removeAll();
        addGraphic("origin",event.mapPoint);
      }

    });

    function addGraphic(type, point) {
      const graphic = new Graphic({
        symbol: {
          type: "simple-marker",
          color: (type === "origin") ? "white" : "black",
          size: "8px"
        },
      geometry: point
    });
      view.graphics.add(graphic);
    }

    function getRoute() {
      const routeParams = new RouteParameters({
        stops: new FeatureSet({
          features: view.graphics.toArray()
        }),

        returnDirections: true

      });

      routeTask.solve(routeParams)
        .then(function(data) {
          data.routeResults.forEach(function(result) {
            result.route.symbol = {
              type: "simple-line",
              color: [5, 150, 255],
              width: 3
            };
            view.graphics.add(result.route);
          });

          // Display directions
         if (data.routeResults.length > 0) {
           const directions = document.createElement("ol");
          directions.classList = "esri-widget esri-widget--panel esri-directions__scroller";
          directions.style.marginTop = "0";
          directions.style.padding = "15px 15px 15px 30px";
          const features = data.routeResults[0].directions.features;

          // Show each direction
          features.forEach(function(result,i){
            const direction = document.createElement("li");
            direction.innerHTML = result.attributes.text + " (" + result.attributes.length.toFixed(2) + " miles)";
            directions.appendChild(direction);
          });

          view.ui.empty("top-right");
          view.ui.add(directions, "top-right");
         }

        })

        .catch(function(error){
            console.log(error);
        })

    }

  });
  </script>

  </head>
  <body>
    <div id="viewDiv"></div>
  </body>
</html>

Add a catch statement to display any errors in the console.

Add line.Add line.Add line.
<html>
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
 <title>ArcGIS API for JavaScript Tutorials: Find a route and directions</title>
 <style>
  html, body, #viewDiv {
    padding: 0;
    margin: 0;
    height: 100%;
    width: 100%;
  }
 </style>
  <link rel="stylesheet" href="https://js.arcgis.com/4.19/esri/themes/light/main.css">
  <script src="https://js.arcgis.com/4.19/"></script>

  <script>

    require([
      "esri/config",
      "esri/Map",
      "esri/views/MapView",

      "esri/Graphic",
      "esri/tasks/RouteTask",
      "esri/tasks/support/RouteParameters",
      "esri/tasks/support/FeatureSet"

    ], function(esriConfig, Map, MapView, Graphic, RouteTask, RouteParameters, FeatureSet) {

    esriConfig.apiKey = "YOUR-API-KEY";

    const map = new Map({
      basemap: "arcgis-navigation" //Basemap layer service
    });

    const view = new MapView({
      container: "viewDiv",
      map: map,
      center: [-118.24532,34.05398], //Longitude, latitude
      zoom: 12
    });

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

    view.on("click", function(event){

      if (view.graphics.length === 0) {
        addGraphic("origin", event.mapPoint);
      } else if (view.graphics.length === 1) {
        addGraphic("destination", event.mapPoint);

        getRoute(); // Call the route service

      } else {
        view.graphics.removeAll();
        addGraphic("origin",event.mapPoint);
      }

    });

    function addGraphic(type, point) {
      const graphic = new Graphic({
        symbol: {
          type: 