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.
How it works
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_API_KEY",
stops: new FeatureSet(),
outSpatialReference: {
// autocasts as new SpatialReference()
wkid: 3857
}
});
When the map is clicked, an event listener calls the function add, which adds a SimpleMarkerSymbol at the location of the click as a stop. The function also add the point as stop in Route Parameter and check if 2 or more exists, route is solved by calling route.solve function and then pass the RouteParameter to the solve function.
function addStop(event) {
const stop = new Graphic(event.mapPoint, stopSymbol);
graphicsLayer.add(stop);
routeParams.stops.features.push(stop);
if (routeParams.stops.features.length >= 2) {
route.solve(routeUrl, routeParams).then(showRoute);
lastStop = routeParams.stops.features.splice(0, 1)[0];
}
}The solve method returns a promise which can be used with the .then() method to define a callback, in this case showRoute.
route.solve(routeUrl, routeParams).then(showRoute);The showRoute callback function obtains the routeResult stored within the result object, and the apply the SimpleLineSymbol for the route result symbology, then add the RouteResult to the map by adding it to graphic layer.
function showRoute(data) {
const routeResult = data.routeResults[0].route;
routeResult.symbol = routeSymbol;
graphicsLayer.add(routeResult);
}