Navigate in AR

View inAndroidiOSView on GitHub

Use a route displayed in the real world to navigate.

Route directions shown overlaid onto a real-world camera feed

Use case

It can be hard to navigate using 2D maps in unfamiliar environments. You can use real-scale AR to show a route overlaid on the real-world for easier navigation.

How to use the sample

The sample opens with a map centered on the current location. Tap the map to add an origin and a destination; the route will be shown as a line. When ready, click 'Confirm' to start the AR navigation. Calibrate the heading before starting to navigate. When you start, route instructions will be displayed and spoken. As you proceed through the route, new directions will be provided until you arrive.

How it works

  1. The map page is used to plan the route before starting the AR experience. See the Find a route and Offline routing samples for a more focused demonstration of that workflow.
  2. Pass the resulting RouteResult to the view used for the AR portion of the navigation experience.
  3. Start ARKit tracking with continuous location updates when the AR view is shown.
    • The sample uses a custom location data source that allows you to apply an altitude offset. The altitude reported by the system location data source is often off by tens of meters.
  4. Get the route geometry from the first route in the RouteResult. Display the route in an overlay configured to show graphics offset from the surface with Relative surface placement mode.
  5. Add the route geometry to a graphics overlay and add a renderer to the graphics overlay. This sample uses a MultilayerPolylineSymbol with a SolidStrokeSymbolLayer to visualize a tube along the route line.
  6. Create a calibration view. This sample uses a slider to manipulate the heading (direction you are facing). Because of limitations in on-device compasses, calibration is often necessary; small errors in heading cause big problems with the placement of scene content in the world.
    • Note that while this sample implemented a slider, there are many possible strategies for implementing heading calibration.
    • While calibrating, the basemap is shown at 50% opacity, to allow you to compare the basemap imagery with what is seen by the camera. While this works in some environments, it won't work indoors, in forested areas, or if the ground truth has changed since the basemap imagery was updated. Alternative scenarios can involve orienting relative to landmarks (for example, stage sets at a concert) or starting at a known orientation by lining up with a static image.
    • The slider in the sample implements a 'joystick' interaction; the heading is adjusted faster the further you move from the center of the slider. There are many possible slider interactions you could choose to implement.
  7. When the user starts navigating, create a RouteTracker, providing a RouteResult and the index of the route you want to use; this sample always picks the first returned result.
  8. Create a location data source and listen for location change events. When the location changes, call routeTracker.TrackLocation with the updated location.
  9. Keep the calibration view accessible throughout the navigation experience. As the user walks, small heading errors may become more noticeable and require recalibration.

Relevant API

  • ARSceneView
  • GeometryEngine
  • LocationDataSource
  • RouteResult
  • RouteTask
  • RouteTracker
  • Surface

About the data

This sample uses Esri's world elevation service to ensure that route lines are placed appropriately in the 3D space. It uses the world routing service to calculate routes. The world routing service requires authentication and does consume ArcGIS Online credits.

Additional information

This sample requires a device that is compatible with ARKit.

Unlike other scene samples, there's no need for a basemap while navigating, because context is provided by the camera feed showing the real environment. The base surface's opacity is set to zero to prevent it from interfering with the AR experience. During calibration, the basemap is shown at 50% opacity to help the user verify that they have calibrated properly.

A digital elevation model is used to ensure that the displayed route is positioned appropriately relative to the terrain of the route. If you don't want to display the route line floating, you could show the line draped on the surface instead.

Real-scale AR is one of three main patterns for working with geographic information in augmented reality. See Display scenes in augmented reality in the guide for more information.

Because most navigation scenarios involve traveling beyond the accurate range for ARKit positioning, this sample relies on continuous location updates from the location data source. Because the origin camera is constantly being reset by the location data source, the sample doesn't allow the user to pan to calibrate or adjust the altitude with a slider. The location data source doesn't provide a heading, so it isn't overwritten when the location refreshes.

Tags

augmented reality, directions, full-scale, guidance, mixed reality, navigate, navigation, real-scale, route, routing, world-scale

Sample Code

ArcGISLoginPrompt.csArcGISLoginPrompt.csAdjustableLocationDataSource.csRoutePlanner.csRouteViewerAR.cs
Use dark colors for code blocksCopy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
// Copyright 2021 Esri.
//
// Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License.
// You may obtain a copy of the License at: http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an
// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific
// language governing permissions and limitations under the License.

using Esri.ArcGISRuntime.Security;
using System;
using System.Collections.Generic;
using System.Threading.Tasks;
using UIKit;
using Xamarin.Essentials;

namespace ArcGISRuntime.Helpers
{
    internal static class ArcGISLoginPrompt
    {
        private const string ArcGISOnlineUrl = "https://www.arcgis.com/sharing/rest";

        // - The Client ID for an app registered with the server (the ID below is for a public app created by the ArcGIS Runtime team).
        public const string AppClientId = @"IBkBd7YYFHOzPIIO";

        // - An optional client secret for the app (only needed for the OAuthClientCredentials authorization type).
        private const string ClientSecret = "";

        // - A URL for redirecting after a successful authorization (this must be a URL configured with the app).
        // NOTE: to use a custom URL scheme like the one below, you need to add it to CFBundleURLSchemes in info.plist.
        // For example -
        //  <key>CFBundleURLSchemes</key>
        //  <array>
        //  	<string>my-ags-app</string>
        //  </array>
        private const string OAuthRedirectUrl = @"xamarin-ios-app://auth";

        public static async Task<bool> EnsureAGOLCredentialAsync()
        {
            bool loggedIn = false;

            try
            {
                // Create a challenge request for portal credentials (OAuth credential request for arcgis.com)
                CredentialRequestInfo challengeRequest = new CredentialRequestInfo
                {
                    // Use the OAuth authorization code workflow.
                    GenerateTokenOptions = new GenerateTokenOptions
                    {
                        TokenAuthenticationType = TokenAuthenticationType.OAuthAuthorizationCode
                    },

                    // Indicate the url (portal) to authenticate with (ArcGIS Online)
                    ServiceUri = new Uri(ArcGISOnlineUrl)
                };

                // Call GetCredentialAsync on the AuthenticationManager to invoke the challenge handler
                Credential cred = await AuthenticationManager.Current.GetCredentialAsync(challengeRequest, false);
                loggedIn = cred != null;
            }
            catch (OperationCanceledException)
            {
                // OAuth login was canceled, no need to display error to user.
            }
            catch (Exception ex)
            {
                new UIAlertView("Login failed", ex.Message, (IUIAlertViewDelegate)null, "OK", null).Show();
            }

            return loggedIn;
        }

        public static void SetChallengeHandler(UIViewController controller)
        {
            // Define the server information for ArcGIS Online
            ServerInfo portalServerInfo = new ServerInfo(new Uri(ArcGISOnlineUrl))
            {
                TokenAuthenticationType = TokenAuthenticationType.OAuthAuthorizationCode,
                OAuthClientInfo = new OAuthClientInfo(AppClientId, new Uri(OAuthRedirectUrl))
            };

            // If a client secret has been configured, set the authentication type to OAuth client credentials.
            if (!string.IsNullOrEmpty(ClientSecret))
            {
                // If a client secret is specified then use the TokenAuthenticationType.OAuthClientCredentials type.
                portalServerInfo.TokenAuthenticationType = TokenAuthenticationType.OAuthClientCredentials;
                portalServerInfo.OAuthClientInfo.ClientSecret = ClientSecret;
            }

            // Register this server with AuthenticationManager.
            AuthenticationManager.Current.RegisterServer(portalServerInfo);

            // Use a function in this class to challenge for credentials.
            AuthenticationManager.Current.ChallengeHandler = new ChallengeHandler(PromptCredentialAsync);

            // Set the OAuthAuthorizeHandler component (this class).
            AuthenticationManager.Current.OAuthAuthorizeHandler = new OAuthAuthorize(controller);
        }

        // ChallengeHandler function that will be called whenever access to a secured resource is attempted.
        public static async Task<Credential> PromptCredentialAsync(CredentialRequestInfo info)
        {
            Credential credential = null;

            try
            {
                // IOAuthAuthorizeHandler will challenge the user for OAuth credentials.
                credential = await AuthenticationManager.Current.GenerateCredentialAsync(info.ServiceUri);
            }
            // OAuth login was canceled, no need to display error to user.
            catch (TaskCanceledException) { }
            catch (OperationCanceledException) { }

            return credential;
        }
    }

    public class OAuthAuthorize : IOAuthAuthorizeHandler
    {
        // Use a TaskCompletionSource to track the completion of the authorization.
        private TaskCompletionSource<IDictionary<string, string>> _taskCompletionSource;

        private UIViewController _viewController;

        public OAuthAuthorize(UIViewController activity)
        {
            _viewController = activity;
        }

        // IOAuthAuthorizeHandler.AuthorizeAsync implementation.
        public async Task<IDictionary<string, string>> AuthorizeAsync(Uri serviceUri, Uri authorizeUri, Uri callbackUri)
        {
            try
            {
                // Create a task completion source.
                _taskCompletionSource = new TaskCompletionSource<IDictionary<string, string>>();

                // Start the authentication on the UI thread.
                _viewController.BeginInvokeOnMainThread(async () =>
                {
                    try
                    {
                        var result = await WebAuthenticator.AuthenticateAsync(authorizeUri, callbackUri);
                        _taskCompletionSource.SetResult(result.Properties);
                    }
                    catch (Exception ex)
                    {
                        _taskCompletionSource.TrySetException(ex);
                    }
                });
                return await _taskCompletionSource.Task;
            }
            catch (Exception) { }

            // Return null if anything goes wrong with authentication.
            return null;
        }
    }
}

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.