This sample demonstrates the simplest use of route for finding a route between two points. Click the map to add stops to the route. When you’ve added two stops a route will be calculated. Adding subsequent stops extends the route.

When working with route, you set up RouteParameters, such as the stops, then call the route.solve() method when you’re ready to find the route.

How it works

The apiKey is defined in the RouteParameters to access the routing service.

      // Setup the route parameters
      const routeParams = new RouteParameters({
        // An authorization string used to access the routing service
        apiKey: "YOUR_ACCESS_TOKEN",
        stops: new FeatureSet(),
        outSpatialReference: {
          // autocasts as new SpatialReference()
          wkid: 3857,
        },
      });

When the map is clicked, an event listener calls a function to add a SimpleMarkerSymbol at the location of the click as a stop. The function also adds the point as stop in Route Parameter, then checks if 2 or more exists. If so, the route is solved by calling route.solve function and then passes the RouteParameter to the solve function.

viewElement.addEventListener("arcgisViewClick", (event) => {
  // Add a point at the location of the map click
  const stop = new Graphic({
    geometry: event.detail.mapPoint,
    symbol: stopSymbol,
  });
  routeLayer.add(stop);
  // Execute the route if 2 or more stops are input
  routeParams.stops.features.push(stop);
  if (routeParams.stops.features.length >= 2) {
    route.solve(routeUrl, routeParams).then(showRoute);
  }
});

The solve method returns a promise that can be used with the .then() method to define a callback, in this case showRoute().

route.solve(routeUrl, routeParams).then(showRoute);

The showRoute callback function obtains the routeResult stored within the result object, and the apply the SimpleLineSymbol for the route result symbology, then add the RouteResult to the map by adding it to graphic layer.

function showRoute(data) {
  const routeResult = data.routeResults[0].route;
  routeResult.symbol = routeSymbol;
  routeLayer.add(routeResult);
}