This sample demonstrates how to add Directions component with a RouteLayer containing Stops from a portal to your application. See Directions component demo to see the behavior without a designated RouteLayer, by using the useDefaultRouteLayer property.
The geocoding and routing services both require 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 geocoding and routing services.
The Directions component makes it easy to calculate directions between two or more input locations using a RouteLayer.
The resulting directions are displayed with detailed turn-by-turn instructions. Results can be saved as a route portal item using Save or Save as.
The Clear route button calls the reset() method, which clears all the input stops and results in the component and in the map.
You must first enter input locations. A minimum of two, start and stop, are required. If you have geolocation enabled in the browser, a prompt will also display in the dialog to Use current location. You can either use the current location, type in an address, or click on the map. If you choose the latter, a reverse geocoding occurs and the resulting address displays as a stop location.
After at least two stops are entered, the resulting directions route displays with turn-by-turn directions. You can also opt to get directions at a specified date and time by changing it from Leave now to Depart by. Alternatively, you can use the Time Unspecified departure option, which uses the average travel time to calculate estimated travel durations.
To save a route, you must sign-in to a portal. The save() method will be available if the user has access to the route portal item. The save method will be available for all portal users.