Directions widget

The Directions widget provides a quick and efficient method of calculating turn-based directions between two or more locations. This widget uses both a network route service and a geocoder service.


If you include this widget in your app, confirm that your end users have the required privileges described in the Use this widget section.


The ArcGIS Online network analysis services and real-time traffic map services require an ArcGIS Online organizational subscription. If you choose to work with these, specify a valid username and password for ArcGIS Online. Each successful request to the service incurs credits taken from your subscription. In addition, if you have an ArcGIS Server network analysis service, you can also specify the URL.


If you want to share your secure service item with the public, for example, as part of a public web app, store the credentials with the item so the public is not required to log in to access your app. See ArcGIS Server web services for more information.

Configure the Directions widget

This widget can be set to open automatically when an app starts. Hover over the widget and click the Do not open this widget when the app starts button Do not open this widget when the app starts to change the setting to Open this widget automatically when the app starts. (For widgets that you need to add to the app first, you can turn on this option after configuring the widget.)

  1. To open the configuration properties dialog box, choose between Search source setting or Route setting.

    By default, the following URLs are from your organization or the utility services of Portal for ArcGIS:

    • Search source setting—Geocoder
    • Route setting—Route, Travel modes, Traffic layer

    The travel modes and traffic layer URLs are optional. If the former is not specified, you will still see the default travel modes with the route URL when using the widget. If the latter is not specified, you will not see the traffic options when using the widget.


    The example URLs that are unavailable in the Travel Modes URL and Traffic Layer URL text boxes can be used to enable default travel modes and traffic layers.

  2. Update Search source setting. Default values from the services populate the options.
    1. Add—You can add additional geocoder URLs or feature layers.
    2. Geocoder name—Provides the name of the geocoder service.

      You have the option to customize this field.

    3. The Placeholder text displays in the address lookup text box when no text has been entered.

      You have the option to customize this field.

    4. Search fields—Select an expected field to search with.
    5. Display field—Select an expected field to search with.
    6. Country or region code(s)—Allows you to define what region to search for.

      Leaving this value blank will search all countries and regions.

    7. Maximum suggestions controls the number of suggested locations returned from the geocoder service.
    8. Enable local search—Allows you to define a minimum map scale to search for. You can also define this search by adding a radius.
    9. Optionally, check the Only search in current map extent to define your search within the map extent.
    10. Check Auto complete to have the search text box fill in possible addresses automatically by querying the geocoder service.
    11. Use Search delay to control how long the UI pauses before updating the list of candidate locations after the last key is pressed.
    12. Minimum characters determines the minimum number of characters required to query for suggested locations.


    Search sources such as geocoders or feature layers can be rearranged or deleted in the left panel, however, there must be at least one geocoder existing to get routes for the Directions widget.

  3. Update Route setting. Default values from the services populate the options.
    1. Directions language is the culture code (for example, en_US for American English, de_DE for German). Output is customized for the specified locale if available.
    2. Directions length units are the units of measure used when computing direction distances.
    3. Impedance attribute is the network attribute used for impedance. For example, set it to Time for the quickest route or Length for the shortest drive if the service has these attributes available. With an empty array, it defaults to the default of the service.
    4. Preset stops—Preset the start and endpoints by typing the addresses or places in the text box.
    5. Barrier Layers—Set point, line, or polygon layers.

      There are limitations for routing services regarding maximum number of barriers. Adding custom barrier layers might exceed the maximum counts.

  4. Click OK to close the dialog box.

Use the Directions widget


Using the ArcGIS Online network analysis services consumes credits. Verify that you are signed in to your organization with privileges to perform network analysis.

Now you can open the Directions widget by clicking the Open route button in the pop-up, where a route is generated by the Plan Routes tool from the Analysis widget. Make sure the Include route layers box is checked when running the Plan Routes tool.

  1. Click the directions icon to open the Directions widget.
  2. Enter the start and end destinations if they are not preset.
    • Type the addresses in the fields, which may autocomplete addresses, locations, or feature layer field names, depending on the configuration.
    • Add destinations by clicking the icon Add destinations by clicking the map to enable it, and clicking the map.
  3. Optionally click the Reverse directions button to reorder the origin and destination.
  4. Optionally, to add more destinations, click Add. Each destination can also be dragged onto the map. Note that the Reverse directions button does not appear when there are more than two destinations.
  5. Optionally click the barriers icon and start to draw lines or polygons on the map to create barriers.
  6. Select a travel mode from the drop-down list if applicable. The default mode is Driving Time.

    Travel mode

  7. If the specified travel mode is time-based and supports live traffic data—for example, Driving Time—choose a departure option of Leave Now or Depart At. If you choose Depart At, select a departure time and date. The departure time is set in the time zone of the place of departure.
  8. Click Options to display more options. Check Return to start to create a round-trip route. If available, check Show traffic to factor real-time traffic conditions into the total time of your route. Switch between MI (miles) and KM (kilometers) to control the units used to report distances in the generated set of directions.
  9. Click Get Directions.

    The map updates to display the route, and the directions display in the Directions widget.

  10. Each turn in the directions list is interactive. Click a turn to pan to that location on the map. The route leading to that turn also highlights on the map.

    Directions with highlighted turn

  11. Click the print button Print to open the directions in a new window for printing.
  12. To clear the current set of directions from the map, click Clear next to Get Directions.