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.
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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// create a new RouteLayer with stops and barriersconst 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 apiKey to authenticate.
You can either replace it with your own apiKey, 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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
// wait for the view and the RouteLayer to loadawaitPromise.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 modeconst results = await routeLayer.solve({ apiKey });
// the `solve()` method returns a routing solution// it contains the computed route, stops, and barriersrouteLayer.update(results);
// when the route is solved, zoom to the route's extentawait 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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// code for the "Save as new RouteLayer" buttondocument.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 pageconst { id, portal: { url } } = portalRouteItem;
link2.href = `${url}/home/item.html?id=${id}`;
link2.style.display = "block";
link2.color = "white";
link2.background = "blue";
});