Intro to RouteLayer

Explore in the sandboxView live

This sample shows how to create and persist a RouteLayer containing Stops, PointBarriers, PolygonBarrier, and a PolylineBarrier. The RouteLayer can be persisted as a portal item using the RouteLayer.saveAs() method, or it can be saved as part of a WebMap using the WebMap.saveAs() method.

Note: this sample takes a few moments to load.

Currently, RouteLayer is not supported in 3D SceneViews.

Create the Stops and Barriers

Create stops and barriers for the RouteLayer. At least two stops are required to perform a routing request. Point, polygon, and polyline barriers are optional.

Use dark colors for code blocksCopy
// create new stops for start (Ontario) and end (Esri)
const stops = [
  new Stop({
    geometry: { x: -117.59275, y: 34.06200 },
    name: "Ontario Airport"
  }),
  new Stop({
    geometry: { x: -117.19570, y: 34.05609 },
    name: "Esri Campus"
  }),
];

// create new point barriers
const pointBarriers = [
  new PointBarrier({ geometry: { x: -117.43576, y: 34.10264 } }),  // DUI checkpoint, Fontana
  new PointBarrier({ geometry: { x: -117.29412, y: 34.10530 } }),  // Construction, San Bernardino
  new PointBarrier({ geometry: { x: -117.30507, y: 34.03644 } }),  // Car fire, Grand Terrace
  new PointBarrier({ geometry: { x: -117.57527, y: 34.10282 } }),  // REI sale, Rancho Cucamonda
  new PointBarrier({ geometry: { x: -117.48886, y: 34.09552 } }),  // Protest, Kaiser
  new PointBarrier({ geometry: { x: -117.47636, y: 34.04798 } })   // Quarry incident, Declezville
];

// create new polyline barrier
const polylineBarriers = [
  new PolylineBarrier({
    geometry: {
      paths: [[
        [-117.30584, 34.07115],
        [-117.26710, 34.04838]
      ]]
    },
    name: "Major highway closure"
  })
];

// create new polygon barrier
const polygonBarriers = [
  new PolygonBarrier({
    geometry: {
      rings: [[
        [-117.49497 - 0.01, 34.13484 - 0.01],
        [-117.49497 - 0.01, 34.13484 + 0.01],
        [-117.49497 + 0.01, 34.13484 + 0.01],
        [-117.49497 + 0.01, 34.13484 - 0.01],
        [-117.49497 - 0.01, 34.13484 - 0.01]
      ]]
    },
    name: "Street festival, Etiwanda"
  })
];

Create the RouteLayer and add it to the map

The minimum prerequisite to perform a routing request is two stops. Here we will add all 3 barrier types to restrict travel.

Use dark colors for code blocksCopy
// create a new RouteLayer with stops and barriers
const routeLayer = new RouteLayer({
  stops,
  pointBarriers,
  polylineBarriers,
  polygonBarriers
});

const map = new WebMap({
  basemap: "topo-vector",
  layers: [ routeLayer ]
});

const view = new MapView({
  container: "viewDiv",
  map
});

Wait for resources to load

Many of the methods used below are asynchronous, meaning execution will not pause after the method is called. Traditionally, we use .then() to perform work when the method has completed. This can get complicated depending on how many statements result in nested .then()s. An modern alternative is to use await, which pauses execution in the current function until the method has completed.

However, we can only use await in a function explicitly tagged as "asynchronous". Notice that the start of the sample is: (async () => { /* code here */. This means that the entire application will run asynchronously, which makes it easier to work with the results of a solved RouteLayer by using await methods for resolved promises.

The routing service requires a token for authentication. This sample uses an API Key to authenticate. You can either replace it with your own API Key, or remove it and log in once prompted. Alternatively, you can use another authentication method to access the routing service.

Use dark colors for code blocksCopy
// wait for the view and the RouteLayer to load
await Promise.all([view.when(), routeLayer.load()]);

// once the RouteLayer is loaded, solve the route
// use the optional RouteParameters parameter to provide the apiKey
// and other settings like directions language and travel mode
const results = await routeLayer.solve({ apiKey });

// the `solve()` method returns a routing solution
// it contains the computed route, stops, and barriers
routeLayer.update(results);

// when the route is solved, zoom to the route's extent
await view.goTo(routeLayer.routeInfo.geometry);

Persist RouteLayer as a new portal item

The RouteLayer can be persisted as a portal item or as part of a WebMap. If added to a WebMap, the RouteLayer will be automatically embedded when WebMap.saveAs() is used. As a portal item, routes can be re-opened in apps like MapViewer or ArcGIS Navigator.

Use dark colors for code blocksCopy
// code for the "Save as new RouteLayer" button
document.getElementById("routeSaveAs").addEventListener("click", async () => {
  const link2 = document.getElementById("linkDiv2");
  link2.style.display = "none";

  const portalRouteItem = await routeLayer.saveAs({
    title: "Route from Ontario Airport to Esri Campus",
    snippet: "Route created using the ArcGIS Maps SDK for JavaScript"
  });

  // prepare a link to navigate to the new route item's portal page
  const { id, portal: { url } } = portalRouteItem;
  link2.href = `${url}/home/item.html?id=${id}`;
  link2.style.display = "block";
  link2.color = "white";
  link2.background = "blue";
});