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.
// 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.
// 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 () =
. 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.
// 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.
// 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";
});