Skip To Content

Route and navigate

In this topic

Version 3.7

Add turn-by-turn directions to a page

The Directions component calculates directions between two or more locations. It adds a driving route to the map and provides turn-by-turn instructions. This tutorial describes how to add the Directions component to a map, customize the page layout to show the component in a side bar next to the map and (optionally) specify your own network analysis service instead of the default routing service.

Prerequisites

  • Adobe Flash Builder 4.5.1 (or later)
  • Download a copy of the ArcGIS API for Flex. The Directions component was made available at version 3.2 so make certain to download this version or later.
  • An ArcGIS.com subscription with World Network Analysis is required. Alternatively, you could use your own ArcGIS Server Network Analysis service.

Note:
The following steps assume you have completed the steps necessary to create a new project and add the Flex API library as discussed in the Getting started topic.

  1. In Flash Builder, create a new project and make certain to add the Flex API library and reference the esri namespace.
  2. In the Editor View, add the MXML below to create a map with a set spatial reference and extent and add a basemap layer
    <s:Application
    xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:s="library://ns.adobe.com/flex/spark"
    xmlns:esri="http://www.esri.com/2008/ags">
    
    <esri:Map id="map">
       <esri:extent>
          <esri:WebMercatorExtent xmin="-13055785" ymin="3848161" xmax="-13025898" 
           ymax="3866239" spatialReference="{new SpatialReference(102100)}"/>
       </esri:extent>
    <esri:ArcGISTiledMapServiceLayer/>
    </esri:Map>
    	
    </s:Application>

    Note:

    The ArcGISTiledMapServiceLayer.url defaults to http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer.

  3. In the Editor View, add the MXML below including reference to the layout tag.
    <?xml version="1.0" encoding="utf-8"?>
    <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
       xmlns:s="library://ns.adobe.com/flex/spark"
       xmlns:esri="http://www.esri.com/2008/ags"
    
    <s:layout>
       <s:HorizontalLayout paddingLeft="2"/>
    </s:layout>
    
    <esri:Map id="map">
       <esri:extent>
        ...

    The above markup sets the padding on the left-hand side as to allow the directions component to display next to the map.

  4. Next, add the Directions component.
    Note:

    The Network Analyst service URL is referencing a sample from ArcGIS Online. This is limited to San Diego's extent. If you wish to work outside of this area, you will need to either: 1) access an ArcGIS.com subscription with World Network Analysis, or 2) use your own ArcGIS Server Network Analysis service.

    ...
    <s:layout>
       <s:HorizontalLayout paddingLeft="2"/>
    </s:layout>
    
    <esri:Directions width="320" height="100%"
       map="{map}"
       url="http://sampleserver6.arcgisonline.com/arcgis/rest/services/NetworkAnalysis/SanDiego/NAServer/Route"/>
    
    <esri:Map id="map">
       <esri:extent>
        ...
  5. Last, save and run the application.
  6. Enter your locations to route. You can do this by either: 1) typing in the address, or 2) clicking on a point on the map using the input tool provided to the right of the input box.

Directions input tool

Calculate the driving directions after entering the destinations. You should see something similar to what is displayed in the screen capture below.

Calculated directions web application

Calculating directions does not require a lot of coding when working with the provided Directions component. This component bundles a lot of the functionality within it so all you need to do is reference it in your code. We calculated simple driving directions in just a few steps. Conceptually, this is how the code breaks down:

  • Set a map with a given extent and spatial reference
  • Add a basemap layer
  • Add the Directions component specifying the URL of the Network Analyst routing service
  • Modify the page layout so that the component displays on the left-hand side of the application