Learn how to find a route and directions with the route service.
Routing is the process of finding the path from an origin to a destination in a street network. You can use the Routing service to find routes, get driving directions, calculate drive times, and solve complicated, multiple vehicle routing problems. To create a route, you typically define a set of stops (origin and one or more destinations) and use the service to find a route with directions. You can also use a number of additional parameters such as barriers and mode of travel to refine the results.
In this tutorial, you define an origin and destination by clicking on the map. These values are used to get a route and directions from the route service. The directions are also displayed on the map.
Prerequisites
Before starting this tutorial:
-
You need an ArcGIS Location Platform or ArcGIS Online account.
-
Your system meets the system requirements.
Set up authentication
To access the secure ArcGIS location services used in this tutorial, you must implement API key authentication or user authentication using an ArcGIS Location Platform or an ArcGIS Online account.
You can implement API key authentication or user authentication in this tutorial. Compare the differences below:
API key authentication
- Users are not required to sign in.
- Requires creating an API key credential with the correct privileges.
- API keys are long-lived access tokens.
- Service usage is billed to the API key owner/developer.
- Simplest authentication method to implement.
- Recommended approach for new ArcGIS developers.
Learn more in API key authentication.
User authentication
- Users are required to sign in with an ArcGIS account.
- User accounts must have privilege to access the ArcGIS services used in application.
- Requires creating OAuth credentials.
- Application uses a redirect URL and client ID.
- Service usage is billed to the organization of the user signed into the application.
Learn more in User authentication.
Create a new API key access token with privileges to access the secure resources used in this tutorial.
-
Complete the Create an API key tutorial and create an API key with the following privilege(s):
- Privileges
- Location services > Basemaps
- Location services > Routing
- Privileges
-
Copy and paste the API Key access token into a safe location. It will be used in a later step.
Develop or Download
To complete this tutorial you have 2 options:
Option 1: Develop the code
To start the tutorial, complete the Display a map tutorial. This creates a map to display the Santa Monica Mountains in California using the topographic basemap from the ArcGIS basemap styles service. You can choose to implement either API key authentication or user authentication.
Continue with the following instructions to find a route and directions with the ArcGIS routing service. First, you need to set the develop credentials in your app so that your app users can access the ArcGIS routing service.
Set developer credentials
To allow your app users to access ArcGIS location services, pass the developer credentials that you created in the Set up authentication step to the application's ArcGISEnvironment
.
Pass your API Key access token to the ArcGISEnvironment
.
-
In the Project Navigator, click MainApp.swift.
-
Set the
ArcGIS
property with your API key access token.Environment.api Key MainApp.swiftUse dark colors for code blocks ArcGISEnvironment.apiKey = APIKey("<#YOUR-ACCESS-TOKEN#>")
Best Practice: The access token is stored directly in the code as a convenience for this tutorial. In a production environment we do not recommend that you store it directly in source code.
Update the map
A navigation basemap layer is typically used in routing applications. Update the basemap to use the .arc
basemap style, and change the position of the map to center on Los Angeles.
-
Update the
Basemap
style property from.arc
toGIS Topographic .arc
and update the latitude and longitude coordinates to center on Los Angeles.GIS Navigation ContentView.swiftUse dark colors for code blocks 69 70 71 72 75 76 77Change line Change line struct ContentView: View { @State var map = { let map = Map(basemapStyle: .arcGISNavigation) map.initialViewpoint = Viewpoint(latitude: 34.05293, longitude: -118.24368, scale: 2e5) return map }()
-
Create a private class named
Model
of typeObservable
and add aObject @
variable of theState Object Model
to theContent
. See the programming patterns page for more information on how to manage states.View ContentView.swiftUse dark colors for code blocks 16 17 18 19 23 24 25 27 28 29 30 31 32 33 34 35 36Add line. Add line. Add line. Add line. import SwiftUI import ArcGIS class Model: ObservableObject { } struct ContentView: View { @StateObject private var model = Model() @State var map = { let map = Map(basemapStyle: .arcGISNavigation) map.initialViewpoint = Viewpoint(latitude: 34.05293, longitude: -118.24368, scale: 2e5) return map }() }
Add graphics to the map view
A graphics overlay is a container for graphics. Graphics are added as a visual means to display the search result on the map.
-
In the
Model
class, create aGraphicsOverlay
namedgraphics
. In theOverlay Content
, add the graphics overlay to the map view.View A graphics overlay is a container for graphics. It is used with a map view to display graphics on a map. You can add more than one graphics overlay to a map view. Graphics overlays are displayed on top of all the other layers.
ContentView.swiftUse dark colors for code blocks 16 17 18 19 20 21 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 41 42 43 44Add line. Change line import SwiftUI import ArcGIS class Model: ObservableObject { let graphicsOverlay = GraphicsOverlay() } struct ContentView: View { @StateObject private var model = Model() @State var map = { let map = Map(basemapStyle: .arcGISNavigation) map.initialViewpoint = Viewpoint(latitude: 34.05293, longitude: -118.24368, scale: 2e5) return map }() var body: some View { MapView(map: map, graphicsOverlays: [model.graphicsOverlay]) } }
-
Create a private
Graphic
property namedstart
to theGraphic Model
. Symbolize the graphic with a white circle and black outline. This graphic will be used to display the route's start location.An
SimpleMarkerSymbol
is used to display a location on the map view.ContentView.swiftUse dark colors for code blocks 20 21 22 23 30 31Add line. Add line. Add line. Add line. Add line. Add line. class Model: ObservableObject { let graphicsOverlay = GraphicsOverlay() let startGraphic: Graphic = { let symbol = SimpleMarkerSymbol(style: .circle, color: .white, size: 8) symbol.outline = SimpleLineSymbol(style: .solid, color: .black, width: 1) let graphic = Graphic(symbol: symbol) return graphic }() }
-
Create a private
Graphic
property namedend
. Symbolize the graphic with a black circle. This graphic will be used to display the route's end location.Graphic ContentView.swiftUse dark colors for code blocks 20 21 22 23 24 25 26 27 28 29 30 36 37Add line. Add line. Add line. Add line. Add line. class Model: ObservableObject { let graphicsOverlay = GraphicsOverlay() let startGraphic: Graphic = { let symbol = SimpleMarkerSymbol(style: .circle, color: .white, size: 8) symbol.outline = SimpleLineSymbol(style: .solid, color: .black, width: 1) let graphic = Graphic(symbol: symbol) return graphic }() let endGraphic: Graphic = { let symbol = SimpleMarkerSymbol(style: .circle, color: .black, size: 9) let graphic = Graphic(symbol: symbol) return graphic }() }
-
Create a private
Graphic
property namedroute
. Symbolize the graphic with a blue line. This graphic will be used to display the route line.Graphic An
SimpleLineSymbol
is used to display a line on the map view.ContentView.swiftUse dark colors for code blocks 31 32 33 34 35 36Add line. Add line. Add line. Add line. Add line. let endGraphic: Graphic = { let symbol = SimpleMarkerSymbol(style: .circle, color: .black, size: 9) let graphic = Graphic(symbol: symbol) return graphic }() let routeGraphic: Graphic = { let symbol = SimpleLineSymbol(style: .solid, color: .blue, width: 3) let graphic = Graphic(symbol: symbol) return graphic }()
-
Create an
init()
method in theModel
that addsstart
,Graphic end
, andGraphic route
to the graphics overlay. This method will be called whenGraphic Model
is initialized.Because
start
,Graphic end
, andGraphic route
haven't yet specified aGraphic Geometry
, they will not be visible.ContentView.swiftUse dark colors for code blocks 37 38 39 40 41 42Add line. Add line. Add line. let routeGraphic: Graphic = { let symbol = SimpleLineSymbol(style: .solid, color: .blue, width: 3) let graphic = Graphic(symbol: symbol) return graphic }() init() { graphicsOverlay.addGraphics([routeGraphic, startGraphic, endGraphic]) }
Create a route task and route parameters
A task makes a request to a service and returns the results. Use the RouteTask
class to access a routing service.
A routing service with global coverage is part of ArcGIS location services. You can also publish custom routing services using ArcGIS Enterprise.
-
Continuing in the
Model
, create a privateRouteTask
property namedroute
with the routing service.Task ContentView.swiftUse dark colors for code blocks 43 44 45 46Add line. Add line. Add line. init() { graphicsOverlay.addGraphics([routeGraphic, startGraphic, endGraphic]) } private let routeTask = RouteTask( url: URL(string: "https://route-api.arcgis.com/arcgis/rest/services/World/Route/NAServer/Route_World")! )
-
Create a variable named
directions
defined as an array ofDirectionManeuver
objects. This will contain the step by step directions from the start to the end point.ContentView.swiftUse dark colors for code blocks 47 48 49 50 52Add line. private let routeTask = RouteTask( url: URL(string: "https://route-api.arcgis.com/arcgis/rest/services/World/Route/NAServer/Route_World")! ) var directions: [DirectionManeuver] = []
-
Define a private, asynchronous function named
solve
that takes a start and endRoute(start :end :) Point
. This method will be called when both the start and end points have been placed on the map.ContentView.swiftUse dark colors for code blocks 47 48 49 50 51 52Add line. Add line. Add line. private let routeTask = RouteTask( url: URL(string: "https://route-api.arcgis.com/arcgis/rest/services/World/Route/NAServer/Route_World")! ) var directions: [DirectionManeuver] = [] func solveRoute(from start: Point, to end: Point) async throws { }
-
Create default
RouteParameters
from theroute
namedTask route
. Configure the parameters by setting two stops (the start and end points) and specify that directions are returned.Parameters ContentView.swiftUse dark colors for code blocks 53 54 58 59Add line. Add line. Add line. func solveRoute(from start: Point, to end: Point) async throws { let routeParameters = try await routeTask.makeDefaultParameters() routeParameters.returnsDirections = true routeParameters.setStops([Stop(point: start), Stop(point: end)]) }
-
Call the
solve
function on theRoute(using :) route
and pass in theTask route
. To display the solved route, get the first route from theParameters RouteResult
and assign itsgeometry
toroute
. To display the directions, assign theGraphic direction
value from the first route to theManeuvers directions
variable.ContentView.swiftUse dark colors for code blocks 53 54 55 56 57 58 64 65