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.
The route is displayed with an animated CIMSymbol that shows the direction of travel along the route.
How it works
Routing
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.
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.
// Listen for clicks on the view and perform a hit test on a feature layer // if this is the second click event, call the showRoute() 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().
The showRoute callback function obtains the routeResult stored within the result object, and the apply the animated CIMSymbol for the route result symbology, then add the RouteResult to the map by adding it to graphic layer.
// Adds the solved route to the map as a graphic function showRoute(data) { const routeResult = data.routeResults[0].route; routeResult.symbol = routeSymbol; routeLayer.graphics.add(routeResult, 0); }Animation along the route
The route is symbolized with a CIMSymbol that has an animated symbol layer. The markers are initially placed with CIMMarkerPlacementAlongLineSameSize and then animated using CIMSymbolAnimationMoveAlongLine (beta). This example animates the markers at a continuous speed along the route, but you can also specify a duration or set distance for the marker(s) to travel. See the CIMSymbolAnimationMoveAlongLine reference for more information on the available properties.
animations: [ { // animations along a line are in beta type: "CIMSymbolAnimationMoveAlongLine", movementType: "Speed", speed: 24, // in points per second continuous: true, animatedSymbolProperties: { type: "CIMAnimatedSymbolProperties", playAnimation: true, repeatType: "Loop", easing: "Linear", }, }, ],