Intro to RouteLayer | Sample | ArcGIS Maps SDK for JavaScript

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.

Note: this sample takes a few moments to load.

Currently, RouteLayer is not supported in a 3D Scene component.

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.

// create new stops for start (Ontario) and end (Esri)
const stops = [
  new Stop({
    geometry: { x: -117.59275, y: 34.062 },
    name: "Ontario Airport",
  }),
  new Stop({
    geometry: { x: -117.1957, 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.1053 } }), // 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.2671, 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.

const viewElement = document.querySelector("arcgis-map");

// create a new RouteLayer with stops and barriers
const routeLayer = new RouteLayer({
  stops,
  pointBarriers,
  polylineBarriers,
  polygonBarriers,
});

viewElement.map.add(routeLayer);

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”.

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.

// wait for the view and the RouteLayer to load
await 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 viewElement.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. As a portal item, routes can be re-opened in apps like Map Viewer or ArcGIS Navigator.

// code for saving the RouteLayer as a portal item
saveRouteLayerButton.addEventListener("click", async () => {
  try {
    saveResultsDialog.open = true;
    const title = routeLayerTitleInput.value || "RouteLayer";
    const portalItem = new PortalItem({
      description: "Route created using the ArcGIS Maps SDK for JavaScript",
      title,
    });
    const saveAsResult = await routeLayer.saveAs(portalItem);
    saveSuccessLink.href = `${saveAsResult.portal.url}/home/item.html?id=${saveAsResult.id}`;
    saveSuccessLink.textContent = saveAsResult.title ?? "";
    saveSuccessNotice.open = true;
  } catch (error) {
    saveErrorMessage.textContent = error.message;
  }
};