Display an offline map (on-demand) | ArcGIS Maps SDK for Swift

Learn how to download and display an offline map for a user-defined geographical area of a web map.

Offline maps allow users to continue working when network connectivity is poor or lost. If a web map is enabled for offline use, a user can request that ArcGIS generates an offline map for a specified geographic area of interest.

In this tutorial, you will download an offline map for an area of interest from the web map of the stormwater network within Naperville, IL, USA . You can then use this offline map without a network connection.

Prerequisites

Before starting this tutorial:

You need an ArcGIS Location Platform or ArcGIS Online account.
Your system meets the system requirements.

Develop or Download

You have two options for completing this tutorial:

Option 1: Develop the code or
Option 2: Download the completed solution

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.

Open an Xcode project

Open the .xcodeproj project you created by completing the Display a map tutorial.
Continue with the following instructions to download and display an offline map for a user-defined geographical area of a web map.

Get the web map item ID

You can use ArcGIS tools to create and view web maps. Use the Map Viewer to identify the web map item ID. This item ID will be used later in the tutorial.

Go to the Naperville water network in the Map Viewer in ArcGIS Online. This web map displays a stormwater network within Naperville, Illinois, USA.
Make a note of the item ID at the end of the browser's URL.

The item ID should be 5a030a31e42841a89914bd7c5ecf4d8f.

Display the web map

You can display a web map using the web map's item ID. Create an Map from the web map's PortalItem, and display it in your app's MapView.

In Xcode, in the Project Navigator, click ContentView.swift.

In the editor, modify the map variable. Provide the web map's item ID.

The code creates an PortalItem using the Portal that references ArcGIS Online, and the web map's itemID. The portalItem is used to create an Map that is displayed in the app's MapView.

ContentView.swift
Use dark colors for code blocks
102
102
102
102
102
102
102
102
102
102
102
102
102
102
102
102
102
102
102
102
102
102
102
102
102
102
102
102
102
102
102
102
102
102
102
102
102
102
102
102
102
102
102
102
102
102
102
102
102
102
102
102
102
102
102
102
102
102
102
102
102
102
102
102
102
102
102
102
102
102
102
102
102
102
102
102
102
102
102
102
102
102
102
102
102
102
102
102
102
102
102
102
102
102
102
102
102
102
102
102
102
102
103
104
105
106
107
108
109
110
110
110
110
110
110
110
110
110
110
110
110
110
110
110
110
110
110
110
110
110
110
110
110
110
110
110
110
110
110
110
110
110
110
110
110
110
110
110
110
110
110
110
110
110
110
110
110
110
110
110
110
110
110
110
110
110
110
110
110
110
110
110
110
110
110
110
110
110
110
110
110
110
110
110
110
110
110
Change line    @State private var map = Map(
        item: PortalItem(
            portal: .arcGISOnline(connection: .anonymous),

            id: PortalItem.ID("5a030a31e42841a89914bd7c5ecf4d8f")!

        )
    )

Create a private class named Model of type ObservableObject and add a @StateObject variable of the Model to the ContentView. Make the Model the @MainActor. See the programming patterns page for more information on how to manage states.

ContentView.swift
Use dark colors for code blocks
15
15
15
15
15
15
15
15
15
15
15
15
15
15
15
16
17
18
19
20
21
21
21
21
21
21
21
21
21
21
21
21
21
21
21
21
21
21
21
21
21
21
21
21
21
21
21
21
21
21
21
21
21
21
21
21
21
21
21
21
21
21
21
21
21
21
21
21
21
21
21
21
21
21
21
21
21
21
21
21
21
21
21
21
21
21
21
21
21
21
21
21
21
21
22
23
24
25
26
27
27
27
28
29
30
31
32
33
34
35
35
35
35
35
35
35
35
35
35
35
35
35
35
35
35
35
35
35
35
35
35
35
35
35
35
35
35
35
35
35
35
35
35
35
35
35
35
35
35
35
35
35
35
35
35
35
35
35
35
35
35
35
35
35
35
35
35
35
35
35
35
35
35
35
35
35
35
35
35
35
35
35
35
35
35
35
35
Add line.Add line.Add line.Add line.Add line.import SwiftUI
import ArcGIS

@MainActor
private class Model: ObservableObject {

}

struct ContentView: View {

    @StateObject private var model = Model()

    @State private var map = Map(
        item: PortalItem(
            portal: .arcGISOnline(connection: .anonymous),

            id: PortalItem.ID("5a030a31e42841a89914bd7c5ecf4d8f")!

        )
    )

In the Model, create a @Published variable named offlineMap of type Map to store the output of the downloaded map.

ContentView.swift
Use dark colors for code blocks
18
18
18
18
18
18
18
18
18
18
18
18
18
18
18
18
18
18
19
20
21
22
23
23
23
23
23
23
23
23
23
23
23
23
23
23
23
23
23
23
23
23
23
23
23
23
23
23
23
23
23
23
23
23
23
23
23
23
23
23
23
23
23
23
23
23
23
23
23
23
23
23
23
23
23
23
23
23
23
23
23
23
23
23
23
23
23
23
23
23
23
23
23
23
24
24
24
24
24
24
24
24
24
24
24
24
24
24
24
24
24
24
24
24
24
24
24
24
24
24
24
24
24
24
24
24
24
24
24
24
24
24
24
24
24
24
24
24
24
24
24
24
24
24
24
24
24
24
24
24
24
24
24
24
24
24
24
24
24
24
24
24
24
24
24
24
24
24
24
24
24
24
24
24
24
24
24
24
24
24
24
24
24
24
24
24
24
Add line.@MainActor
private class Model: ObservableObject {

    @Published private(set) var offlineMap: Map!

}

In the ContentView, modify the map view to display the model's offline map or the online map. If offlineMap has no value, then the map view should display the online map.

ContentView.swift
Use dark colors for code blocks
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
97
98
99
100
100
100
101
102
103
104
105
106
107
108
109
110
111
111
111
111
111
112
113
113
113
113
113
113
113
113
113
113
113
113
113
113
113
113
113
113
113
113
113
113
113
113
113
113
113
113
113
113
113
113
113
113
113
113
113
113
113
113
113
113
113
113
113
113
113
113
113
113
113
113
113
113
113
113
113
113
113
113
113
113
113
113
113
113
114
115
116
Change linestruct ContentView: View {

    @StateObject private var model = Model()

    @State private var map = Map(
        item: PortalItem(
            portal: .arcGISOnline(connection: .anonymous),

            id: PortalItem.ID("5a030a31e42841a89914bd7c5ecf4d8f")!

        )
    )

    var body: some View {

                MapView(map: model.offlineMap ?? map)

    }

}

Specify an area of the web map to take offline

Specify an area of the web map to take offline using either an Envelope or a Polygon. Use views to obtain data about the map view and an overlay to indicate the area on the map to be downloaded.

In the ContentView, wrap the map view inside a MapViewReader and expose the MapViewProxy in its closure. Name it mapView. MapViewProxy provides operations that can be performed on the map view, such as envelope(fromViewRect:). For more information see Perform GeoView operations.

ContentView.swift
Use dark colors for code blocks
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
97
98
99
100
100
100
101
102
103
104
105
106
107
108
109
110
111
111
111
112
113
114
115
115
115
115
115
115
115
115
115
115
115
115
115
115
115
115
115
115
115
115
115
115
115
115
115
115
115
115
115
115
115
115
115
115
115
115
115
115
115
115
115
115
115
115
115
115
115
115
115
115
115
115
115
115
115
115
115
115
115
115
115
115
116
117
117
117
118
119
120
Add line.Add line.Add line.Add line.Add line.struct ContentView: View {

    @StateObject private var model = Model()

    @State private var map = Map(
        item: PortalItem(
            portal: .arcGISOnline(connection: .anonymous),

            id: PortalItem.ID("5a030a31e42841a89914bd7c5ecf4d8f")!

        )
    )

    var body: some View {

            MapViewReader { mapView in

                MapView(map: model.offlineMap ?? map)

            }

    }

}

Wrap the map view reader inside a GeometryReader and expose the GeometryProxy in its closure. Name it geometry. GeometryProxy provides access to the size and coordinate space (for anchor resolution) of the views enclosed in the geometry reader.

ContentView.swift
Use dark colors for code blocks
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
97
98
99
100
100
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
117
117
117
117
117
117
117
117
117
117
117
117
117
117
117
117
117
117
117
117
117
117
117
117
117
117
117
117
117
117
117
117
117
117
117
117
117
117
117
117
117
117
117
117
117
117
117
117
117
117
117
117
117
117
117
117
117
117
117
117
117
118
119
120
121
122
123
124
Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.struct ContentView: View {

    @StateObject private var model = Model()

    @State private var map = Map(
        item: PortalItem(
            portal: .arcGISOnline(connection: .anonymous),

            id: PortalItem.ID("5a030a31e42841a89914bd7c5ecf4d8f")!

        )
    )

    var body: some View {

        GeometryReader { geometry in

            MapViewReader { mapView in

                MapView(map: model.offlineMap ?? map)

            }

        }

    }

}

Add an .overlay modifier to the map view. The overlay contains a red rectangle that encompasses an area to be downloaded.

ContentView.swift
Use dark colors for code blocks
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
112
113
114
115
116
117
118
119
119
119
119
119
119
119
120
121
122
123
124
125
126
126
126
126
126
126
126
126
126
126
126
126
126
126
126
126
126
126
126
126
126
126
126
126
126
126
126
126
126
126
126
126
126
126
126
126
126
126
126
126
126
126
126
126
126
126
126
126
126
127
128
129
130
131
131
131
Add line.Add line.Add line.Add line.Add line.Add line.    var body: some View {

        GeometryReader { geometry in

            MapViewReader { mapView in

                MapView(map: model.offlineMap ?? map)

                    .overlay {
                        Rectangle()
                            .stroke(.red, lineWidth: 2)
                            .padding(EdgeInsets(top: 60, leading: 20, bottom: 100, trailing: 20))
                            .opacity(model.offlineMap == nil ? 1 : 0)
                    }

            }

        }

    }

Download and display the offline map

Generate and download an offline map for a specified area of interest using an asynchronous task. When complete, it will provide the offline map that can be displayed in a map view.

In the Model, create a @Published GenerateOfflineMapJob variable called generateOfflineMapJob and a OfflineMapTask variable called offlineMapTask. These objects will contain the job and task needed to perform the download function. Learn more about Tasks and jobs.

ContentView.swift
Use dark colors for code blocks
18
18
18
18
18
18
18
18
18
18
18
18
18
18
18
18
18
18
19
20
21
22
23
24
25
26
26
26
26
26
26
26
26
26
26
26
26
26
26
26
26
26
26
26
26
26
26
26
26
26
26
26
26
26
26
26
26
26
26
26
26
26
26
26
26
26
26
26
26
26
26
26
26
26
26
26
26
26
26
26
26
26
26
26
26
26
26
26
26
26
26
26
26
26
27
27
27
27
27
27
27
27
27
27
27
27
27
27
27
27
27
27
27
27
27
27
27
27
27
27
27
27
27
27
27
27
27
27
27
27
27
27
27
27
27
27
27
27
27
27
27
27
27
27
27
27
27
27
27
27
27
27
27
27
27
27
27
27
27
27
27
27
27
27
27
27
27
27
27
27
27
27
27
27
27
27
27
27
27
27
27
27
27
27
27
27
27
Add line.Add line.@MainActor
private class Model: ObservableObject {

    @Published private(set) var offlineMap: Map!

    @Published private(set) var generateOfflineMapJob: GenerateOfflineMapJob!
    private var offlineMapTask: OfflineMapTask!

}

Create a @Published Boolean variable called isGenerateDisabled and set it to true. Create a variable called isShowingAlert and set it to false. These variables will be used to determine if the download button is enabled and if the completion alert is present.

ContentView.swift
Use dark colors for code blocks
18
18
18
18
18
18
18
18
18
18
18
18
18
18
18
18
18
18
19
20
21
22
23
24
25
26
27
28
29
29
29
29
29
29
29
29
29
29
29
29
29
29
29
29
29
29
29
29
29
29
29
29
29
29
29
29
29
29
29
29
29
29
29
29
29
29
29
29
29
29
29
29
29
29
29
28
27
26
25
24
23
21
19
17
15
13
11
9
8
7
6
5
5
5
6
6
6
6
6
6
6
6
6
6
6
6
6
6
6
6
6
6
6
6
6
6
6
6
6
6
6
6
6
6
6
6
6
6
6
6
6
6
6
6
6
6
6
6
6
6
6
6
6
6
6
6
6
6
6
6
6
6
6
6
6
6
6
6
6
6
6
6
6
6
6
6
6
6
6
6
6
6
6
6
6
6
6
6
6
6
6
6
6
6
6
6
6
Add line.Add line.@MainActor
private class Model: ObservableObject {

    @Published private(set) var offlineMap: Map!

    @Published private(set) var generateOfflineMapJob: GenerateOfflineMapJob!
    private var offlineMapTask: OfflineMapTask!

    @Published private(set) var isGenerateDisabled = true
    @Published var isShowingAlert = false

}

Create a private URL property named temporaryDirectoryURL. This property will generate a unique URL at which to store the offline map on the device.

ContentView.swift
Use dark colors for code blocks
18
18
18
18
18
18
18
18
18
18
18
18
18
18
18
18
18
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
39
39
39
39
39
39
39
39
39
39
39
39
39
39
39
39
39
39
39
39
39
39
39
39
39
39
39
39
39
39
39
39
39
39
39
39
39
39
39
39
39
39
39
39
39
39
39
39
39
39
39
39
39
39
39
40
40
40
40
40
40
40
40
40
40
40
40
40
40
40
40
40
40
40
40
40
40
40
40
40
40
40
40
40
40
40
40
40
40
40
40
40
40
40
40
40
40
40
40
40
40
40
40
40
40
40
40
40
40
40
40
40
40
40
40
40
40
40
40
40
40
40
40
40
40
40
40
40
40
40
40
40
40
40
40
40
40
40
40
40
40
40
40
40
40
40
40
40
Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.@MainActor
private class Model: ObservableObject {

    @Published private(set) var offlineMap: Map!

    @Published private(set) var generateOfflineMapJob: GenerateOfflineMapJob!
    private var offlineMapTask: OfflineMapTask!

    @Published private(set) var isGenerateDisabled = true
    @Published var isShowingAlert = false

    private let temporaryDirectory: URL = {
        // swiftlint:disable:next force_try
        return try! FileManager.default.url(
            for: .itemReplacementDirectory,
            in: .userDomainMask,
            appropriateFor: FileManager.default.temporaryDirectory,
            create: true
        )
    }()

}

Create a deinit function to remove the temporary directory after the app closes.

ContentView.swift
Use dark colors for code blocks
18
18
18
18
18
18
18
18
18
18
18
18
18
18
18
18
18
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
43
43
43
43
43
43
43
43
43
43
43
43
43
43
43
43
43
43
43
43
43
43
43
43
43
43
43
43
43
43
43
43
43
43
43
43
43
43
43
43
43
43
43
43
43
43
43
43
43
43
43
44
44
44
44
44
44
44
44
44
44
44
44
44
44
44
44
44
44
44
44
44
44
44
44
44
44
44
44
44
44
44
44
44
44
44
44
44
44
44
44
44
44
44
44
44
44
44
44
44
44
44
44
44
44
44
44
44
44
44
44
44
44
44
44
44
44
44
44
44
44
44
44
44
44
44
44
44
44
44
44
44
44
44
44
44
44
44
44
44
44
44
44
44
Add line.Add line.Add line.@MainActor
private class Model: ObservableObject {

    @Published private(set) var offlineMap: Map!

    @Published private(set) var generateOfflineMapJob: GenerateOfflineMapJob!
    private var offlineMapTask: OfflineMapTask!

    @Published private(set) var isGenerateDisabled = true
    @Published var isShowingAlert = false

    private let temporaryDirectory: URL = {
        // swiftlint:disable:next force_try
        return try! FileManager.default.url(
            for: .itemReplacementDirectory,
            in: .userDomainMask,
            appropriateFor: FileManager.default.temporaryDirectory,
            create: true
        )
    }()

    deinit {
        try? FileManager.default.removeItem(at: temporaryDirectory)
    }

}

Create an asynchronous function called initializeOfflineMapTask(onlineMap:). This function loads the online map and creates a OfflineMapTask from it. Set the isGenerateDisabled Boolean to false.

ContentView.swift
Use dark colors for code blocks
18
18
18
18
18
18
18
18
18
18
18
18
18
18
18
18
18
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
53
53
53
53
53
53
53
53
53
53
53
53
53
53
53
53
53
53
53
53
53
53
53
53
53
53
53
53
53
53
53
53
53
53
53
53
53
53
53
53
53
54
54
54
54
54
54
54
54
54
54
54
54
54
54
54
54
54
54
54
54
54
54
54
54
54
54
54
54
54
54
54
54
54
54
54
54
54
54
54
54
54
54
54
54
54
54
54
54
54
54
54
54
54
54
54
54
54
54
54
54
54
54
54
54
54
54
54
54
54
54
54
54
54
54
54
54
54
54
54
54
54
54
54
54
54
54
54
54
54
54
54
54
54
Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.@MainActor
private class Model: ObservableObject {

    @Published private(set) var offlineMap: Map!

    @Published private(set) var generateOfflineMapJob: GenerateOfflineMapJob!
    private var offlineMapTask: OfflineMapTask!

    @Published private(set) var isGenerateDisabled = true
    @Published var isShowingAlert = false

    private let temporaryDirectory: URL = {
        // swiftlint:disable:next force_try
        return try! FileManager.default.url(
            for: .itemReplacementDirectory,
            in: .userDomainMask,
            appropriateFor: FileManager.default.temporaryDirectory,
            create: true
        )
    }()

    deinit {
        try? FileManager.default.removeItem(at: temporaryDirectory)
    }

    func initializeOfflineMapTask(onlineMap: Map) async {
        do {
            try await onlineMap.load()
            offlineMapTask = OfflineMapTask(onlineMap: onlineMap)
            isGenerateDisabled = false
        } catch {
            print(error)
        }
    }

}

In the ContentView, call the initializeOfflineMapTask(onlineMap:) function in a .task modifier, passing in the online map. The task's function is called as the map view appears.

ContentView.swift
Use dark colors for code blocks
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
97
98
99
100
100
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
117
117
118
119
120
121
122
123
124
125
126
127
128
128
128
128
128
128
128
128
128
128
128
128
128
128
128
128
128
128
128
128
128
128
128
128
128
128
128
128
128
128
128
128
128
128
128
128
128
128
128
128
128
128
128
128
128
128
128
128
128
129
130
131
132
133
134
135
Add line.Add line.Add line.struct ContentView: View {

    @StateObject private var model = Model()

    @State private var map = Map(
        item: PortalItem(
            portal: .arcGISOnline(connection: .anonymous),

            id: PortalItem.ID("5a030a31e42841a89914bd7c5ecf4d8f")!

        )
    )

    var body: some View {

        GeometryReader { geometry in

            MapViewReader { mapView in

                MapView(map: model.offlineMap ?? map)

                    .task {
                        await model.initializeOfflineMapTask(onlineMap: map)
                    }

                    .overlay {
                        Rectangle()
                            .stroke(.red, lineWidth: 2)
                            .padding(EdgeInsets(top: 60, leading: 20, bottom: 100, trailing: 20))
                            .opacity(model.offlineMap == nil ? 1 : 0)
                    }

            }

        }

    }

}

In the Model, create an asynchronous function called makeGenerateOfflineMapParameters(areaOfInterest:). The function returns GenerateOfflineMapParameters, created using offlineMapTask and the area of interest.

ContentView.swift
Use dark colors for code blocks
18
18
18
18
18
18
18
18
18
18
18
18
18
18
18
18
18
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
62
62
62
62
62
62
62
62
62
62
62
62
62
62
62
62
62
62
62
62
62
62
62
62
62
62
62
62
62
62
62
62
63
63
63
63
63
63
63
63
63
63
63
63
63
63
63
63
63
63
63
63
63
63
63
63
63
63
63
63
63
63
63
63
63
63
63
63
63
63
63
63
63
63
63
63
63
63
63
63
63
63
63
63
63
63
63
63
63
63
63
63
63
63
63
63
63
63
63
63
63
63
63
63
63
63
63
63
63
63
63
63
63
63
63
63
63
63
63
63
63
63
63
63
63
Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.@MainActor
private class Model: ObservableObject {

    @Published private(set) var offlineMap: Map!

    @Published private(set) var generateOfflineMapJob: GenerateOfflineMapJob!
    private var offlineMapTask: OfflineMapTask!

    @Published private(set) var isGenerateDisabled = true
    @Published var isShowingAlert = false

    private let temporaryDirectory: URL = {
        // swiftlint:disable:next force_try
        return try! FileManager.default.url(
            for: .itemReplacementDirectory,
            in: .userDomainMask,
            appropriateFor: FileManager.default.temporaryDirectory,
            create: true
        )
    }()

    deinit {
        try? FileManager.default.removeItem(at: temporaryDirectory)
    }

    func initializeOfflineMapTask(onlineMap: Map) async {
        do {
            try await onlineMap.load()
            offlineMapTask = OfflineMapTask(onlineMap: onlineMap)
            isGenerateDisabled = false
        } catch {
            print(error)
        }
    }

    private func makeGenerateOfflineMapParameters(areaOfInterest: Envelope) async -> GenerateOfflineMapParameters? {
        do {
            return try await offlineMapTask.makeDefaultGenerateOfflineMapParameters(areaOfInterest: areaOfInterest)
        } catch {
            print(error)
            return nil
        }
    }

}

Create an asynchronous function called generateOfflineMap(extent:). This function is called when the user initiates the download. Set the isGenerateDisabled Boolean to true and create default parameters for the given extent. If the parameters fail to create, set the isGenerateDisabled Boolean to false.

ContentView.swift
Use dark colors for code blocks
18
18
18
18
18
18
18
18
18
18
18
18
18
18
18
18
18
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
69
69
69
69
69
69
69
69
69
69
69
69
68
67
66
65
64
63
62
62
62
62
62
63
64
65
65
65
65
65
65
65
65
65
65
65
65
65
65
65
65
65
65
65
65
65
65
65
65
65
65
65
65
65
65
65
65
65
65
65
65
65
65
65
65
65
65
65
65
65
65
65
65
65
65
65
65
65
65
65
65
65
65
65
65
65
65
65
65
65
65
65
65
65
65
65
65
65
65
65
65
65
65
65
65
65
65
65
65
65
65
65
65
65
65
65
65
65
Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.@MainActor
private class Model: ObservableObject {

    @Published private(set) var offlineMap: Map!

    @Published private(set) var generateOfflineMapJob: GenerateOfflineMapJob!
    private var offlineMapTask: OfflineMapTask!

    @Published private(set) var isGenerateDisabled = true
    @Published var isShowingAlert = false

    private let temporaryDirectory: URL = {
        // swiftlint:disable:next force_try
        return try! FileManager.default.url(
            for: .itemReplacementDirectory,
            in: .userDomainMask,
            appropriateFor: FileManager.default.temporaryDirectory,
            create: true
        )
    }()

    deinit {
        try? FileManager.default.removeItem(at: temporaryDirectory)
    }

    func initializeOfflineMapTask(onlineMap: Map) async {
        do {
            try await onlineMap.load()
            offlineMapTask = OfflineMapTask(onlineMap: onlineMap)
            isGenerateDisabled = false
        } catch {
            print(error)
        }
    }

    private func makeGenerateOfflineMapParameters(areaOfInterest: Envelope) async -> GenerateOfflineMapParameters? {
        do {
            return try await offlineMapTask.makeDefaultGenerateOfflineMapParameters(areaOfInterest: areaOfInterest)
        } catch {
            print(error)
            return nil
        }
    }

    func generateOfflineMap(extent: Envelope) async {
        isGenerateDisabled = true
        guard let parameters = await makeGenerateOfflineMapParameters(areaOfInterest: extent) else {
            isGenerateDisabled = false
            return
        }

    }

}

Create an offline map job using makeGenerateOfflineMapJob(parameters:downloadDirectory:overrides:) and start the job.

ContentView.swift
Use dark colors for code blocks
62
62
62
62
62
62
62
62
62
62
62
62
62
62
62
62
62
62
62
62
62
62
62
62
62
62
62
62
62
62
62
62
62
62
62
62
62
62
62
62
62
62
62
62
62
62
62
62
62
62
62
62
62
62
62
62
62
62
62
62
62
62
63
64
65
66
67
68
69
70
71
72
73
74
75
75
75
75
75
75
75
74
73
72
71
70
69
68
68
68
68
68
69
69
69
69
69
69
69
69
69
69
69
69
69
69
69
69
69
69
69
69
69
69
69
69
69
69
69
69
69
69
69
69
69
69
69
69
69
69
69
69
69
69
69
69
69
69
69
69
69
69
69
69
69
69
69
69
69
69
69
69
69
69
69
69
69
69
69
69
69
69
69
69
69
69
69
69
69
69
69
69
69
69
69
69
69
69
69
69
69
69
69
69
69
69
69
Add line.Add line.Add line.Add line.Add line.    func generateOfflineMap(extent: Envelope) async {
        isGenerateDisabled = true
        guard let parameters = await makeGenerateOfflineMapParameters(areaOfInterest: extent) else {
            isGenerateDisabled = false
            return
        }

        generateOfflineMapJob = offlineMapTask.makeGenerateOfflineMapJob(
            parameters: parameters,
            downloadDirectory: temporaryDirectory
        )
        generateOfflineMapJob.start()

    }

In a defer closure, ensure the job does not continue running by setting it to nil and set the isGenerateDisabled value according to whether or not offlineMap is instantiated.

ContentView.swift
Use dark colors for code blocks
62
62
62
62
62
62
62
62
62
62
62
62
62
62
62
62
62
62
62
62
62
62
62
62
62
62
62
62
62
62
62
62
62
62
62
62
62
62
62
62
62
62
62
62
62
62
62
62
62
62
62
62
62
62
62
62
62
62
62
62
62
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
81
81
81
81
81
81
81
82
83
84
85
86
86
86
86
86
86
86
86
86
86
86
86
86
86
86
86
86
86
86
86
86
86
86
86
86
86
86
86
86
86
86
86
86
86
86
86
86
86
86
86
86
86
86
86
86
86
86
86
86
86
86
86
86
86
86
86
86
86
86
86
86
86
86
86
86
86
86
86
86
86
86
86
86
86
86
86
86
86
86
86
86
86
86
86
86
86
86
86
86
86
86
86
86
86
86
Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.    func generateOfflineMap(extent: Envelope) async {
        isGenerateDisabled = true
        guard let parameters = await makeGenerateOfflineMapParameters(areaOfInterest: extent) else {
            isGenerateDisabled = false
            return
        }

        generateOfflineMapJob = offlineMapTask.makeGenerateOfflineMapJob(
            parameters: parameters,
            downloadDirectory: temporaryDirectory
        )
        generateOfflineMapJob.start()

        defer {
            generateOfflineMapJob = nil
            isGenerateDisabled = offlineMap != nil
        }
        do {

        } catch {
            print(error)
        }

    }

In the do closure, wait for the GenerateOfflineMapJob to produce an output that contains the downloaded offline map. Assign the output to the offlineMap property. Use EnvelopeBuilder to expand the extent by 0.8. Set the offline map's initial viewpoint to this new envelope. Indicate that an alert is shown to the user.

ContentView.swift
Use dark colors for code blocks
62
62
62
62
62
62
62
62
62
62
62
62
62
62
62
62
62
62
62
62
62
62
62
62
62
62
62
62
62
62
62
62
62
62
62
62
62
62
62
62
62
62
62
62
62
62
62
62
62
62
62
62
62
62
62
62
62
62
62
62
62
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
93
93
93
93
93
93
93
93
93
93
93
93
93
93
93
93
93
93
93
93
93
93
93
93
93
93
93
93
93
93
93
93
93
93
93
93
93
93
93
93
93
93
93
93
93
93
93
93
93
93
93
93
93
93
93
93
93
93
93
93
93
93
93
93
93
93
93
93
93
93
93
93
93
93
93
93
93
93
93
93
93
93
93
93
93
93
93
93
93
93
93
93
93
93
Add line.Add line.Add line.Add line.Add line.Add line.    func generateOfflineMap(extent: Envelope) async {
        isGenerateDisabled = true
        guard let parameters = await makeGenerateOfflineMapParameters(areaOfInterest: extent) else {
            isGenerateDisabled = false
            return
        }

        generateOfflineMapJob = offlineMapTask.makeGenerateOfflineMapJob(
            parameters: parameters,
            downloadDirectory: temporaryDirectory
        )
        generateOfflineMapJob.start()

        defer {
            generateOfflineMapJob = nil
            isGenerateDisabled = offlineMap != nil
        }
        do {

            let output = try await generateOfflineMapJob.output
            offlineMap = output.offlineMap
            let builder = EnvelopeBuilder(envelope: extent)
            builder.expand(by: 0.8)
            offlineMap.initialViewpoint = Viewpoint(boundingGeometry: builder.toGeometry())
            isShowingAlert = true

        } catch {
            print(error)
        }

    }

Setup the UI

Add a button to initiate the download, a ProgressView to display the download progress, and use alert(_:isPresented:presenting:actions:message:) to indicate when the download is complete.

In the ContentView, add a @State variable called isGeneratingOfflineMap and set it to false. This Boolean indicates whether an offline map is currently being generated.

ContentView.swift
Use dark colors for code blocks
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
110
110
110
110
110
110
110
110
110
110
110
110
110
110
110
110
110
110
110
110
110
110
110
110
110
110
110
110
110
110
110
110
110
110
110
110
110
110
110
110
110
110
110
110
110
110
110
110
110
110
110
110
110
110
110
110
110
110
110
110
110
110
110
110
110
110
110
110
110
110
110
110
110
110
110
110
110
Add line.struct ContentView: View {

    @StateObject private var model = Model()

    @State private var isGeneratingOfflineMap = false

    @State private var map = Map(
        item: PortalItem(
            portal: .arcGISOnline(connection: .anonymous),

            id: PortalItem.ID("5a030a31e42841a89914bd7c5ecf4d8f")!

        )
    )

Add an .interactionModes modifier to the map view. When isGeneratingOfflineMap is true, the user should not be able to interact. Otherwise, allow the user to pan and zoom.

ContentView.swift
Use dark colors for code blocks
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
132
132
132
132
132
132
132
132
132
132
132
132
132
132
132
132
132
132
132
132
132
132
132
132
132
132
132
132
132
132
132
132
132
132
132
132
132
132
132
132
132
132
132
132
132
132
132
132
133
134
135
136
137
137
137
Add line.    var body: some View {

        GeometryReader { geometry in

            MapViewReader { mapView in

                MapView(map: model.offlineMap ?? map)

                    .interactionModes(isGeneratingOfflineMap ? [] : [.pan, .zoom])

                    .task {
                        await model.initializeOfflineMapTask(onlineMap: map)
                    }

                    .overlay {
                        Rectangle()
                            .stroke(.red, lineWidth: 2)
                            .padding(EdgeInsets(top: 60, leading: 20, bottom: 100, trailing: 20))
                            .opacity(model.offlineMap == nil ? 1 : 0)
                    }

            }

        }

    }

Add an .overlay modifier to the map view. If isGeneratingOfflineMap is true, create a ProgressView to track model.generateOfflineMapJob?.progress. Customize the progress view style, frame, and other attributes as required.

ContentView.swift
Use dark colors for code blocks
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
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
147
147
147
147
147
147
147
147
147
147
147
147
147
147
147
147
147
147
147
147
147
147
147
147
147
147
147
147
147
147
147
147
147
148
149
150
151
152
152
152
Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.    var body: some View {

        GeometryReader { geometry in

            MapViewReader { mapView in

                MapView(map: model.offlineMap ?? map)

                    .interactionModes(isGeneratingOfflineMap ? [] : [.pan, .zoom])

                    .task {
                        await model.initializeOfflineMapTask(onlineMap: map)
                    }

                    .overlay {
                        Rectangle()
                            .stroke(.red, lineWidth: 2)
                            .padding(EdgeInsets(top: 60, leading: 20, bottom: 100, trailing: 20))
                            .opacity(model.offlineMap == nil ? 1 : 0)
                    }

                    .overlay {
                        if isGeneratingOfflineMap,
                           let progress = model.generateOfflineMapJob?.progress {
                            VStack(spacing: 16) {
                                ProgressView(progress)
                                    .progressViewStyle(.linear)
                                    .frame(maxWidth: 200)
                            }
                            .padding()
                            .background(.regularMaterial)
                            .clipShape(RoundedRectangle(cornerRadius: 15))
                            .shadow(radius: 3)
                        }
                    }

            }

        }

    }

Add an .alert(_:isPresented:presenting:actions:message:) modifier to the map view. Present an alert to indicate that the offline map has finished generating. Use the model's isShowingAlert property to determine when to present the alert.

ContentView.swift
Use dark colors for code blocks
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
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
153
153
153
153
153
153
153
153
153
153
153
153
153
153
153
153
153
153
153
153
153
153
153
153
153
153
153
154
155
156
157
158
158
158
Add line.Add line.Add line.Add line.Add line.    var body: some View {

        GeometryReader { geometry in

            MapViewReader { mapView in

                MapView(map: model.offlineMap ?? map)

                    .interactionModes(isGeneratingOfflineMap ? [] : [.pan, .zoom])

                    .task {
                        await model.initializeOfflineMapTask(onlineMap: map)
                    }

                    .overlay {
                        Rectangle()
                            .stroke(.red, lineWidth: 2)
                            .padding(EdgeInsets(top: 60, leading: 20, bottom: 100, trailing: 20))
                            .opacity(model.offlineMap == nil ? 1 : 0)
                    }

                    .overlay {
                        if isGeneratingOfflineMap,
                           let progress = model.generateOfflineMapJob?.progress {
                            VStack(spacing: 16) {
                                ProgressView(progress)
                                    .progressViewStyle(.linear)
                                    .frame(maxWidth: 200)
                            }
                            .padding()
                            .background(.regularMaterial)
                            .clipShape(RoundedRectangle(cornerRadius: 15))
                            .shadow(radius: 3)
                        }
                    }

                    .alert("Offline map generated", isPresented: $model.isShowingAlert) {
                        Button("Done") {
                            model.isShowingAlert = false
                        }
                    }

            }

        }

    }

Add a Button labeled "Download Map Area" to a toolbar at the bottom of the map view. When you click on the button, the isGeneratingOfflineMap property is set to true. The button is disabled if the offline map has been generated (model.isGeneratedDisabled == true) or if the offline map is being generated (isGeneratingOfflineMap == true).

ContentView.swift
Use dark colors for code blocks
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
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
160
161
162
162
162
162
162
162
162
162
162
162
162
162
162
162
162
162
163
164
165
166
167
168
169
170
170
170
Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.    var body: some View {

        GeometryReader { geometry in

            MapViewReader { mapView in

                MapView(map: model.offlineMap ?? map)

                    .interactionModes(isGeneratingOfflineMap ? [] : [.pan, .zoom])

                    .task {
                        await model.initializeOfflineMapTask(onlineMap: map)
                    }

                    .overlay {
                        Rectangle()
                            .stroke(.red, lineWidth: 2)
                            .padding(EdgeInsets(top: 60, leading: 20, bottom: 100, trailing: 20))
                            .opacity(model.offlineMap == nil ? 1 : 0)
                    }

                    .overlay {
                        if isGeneratingOfflineMap,
                           let progress = model.generateOfflineMapJob?.progress {
                            VStack(spacing: 16) {
                                ProgressView(progress)
                                    .progressViewStyle(.linear)
                                    .frame(maxWidth: 200)
                            }
                            .padding()
                            .background(.regularMaterial)
                            .clipShape(RoundedRectangle(cornerRadius: 15))
                            .shadow(radius: 3)
                        }
                    }

                    .alert("Offline map generated", isPresented: $model.isShowingAlert) {
                        Button("Done") {
                            model.isShowingAlert = false
                        }
                    }

                    .toolbar {
                        ToolbarItem(placement: .bottomBar) {

                            Button("Download Map Area") {
                                isGeneratingOfflineMap = true
                            }

                            .disabled(model.isGenerateDisabled || isGeneratingOfflineMap)

                        }
                    }

            }

        }

    }

Add a .task modifier to the button using isGeneratingOfflineMap as its identifier. When isGeneratingOfflineMap is true, create a frame from the geometry using frame(in coordinateSpace:). Use the frame to create an envelope in the map view using envelope(viewRect:). Pass the resulting envelope into the model's generateOfflineMap(extent:) function and set isGeneratingOfflineMap to false.

ContentView.swift
Expand
Use dark colors for code blocks
153
153
153
153
153
153
153
153
153
153
153
153
153
153
153
153
153
153
153
153
153
153
153
153
153
153
153
153
153
153
153
153
153
153
153
153
153
153
153
153
153
153
153
153
153
153
153
153
153
153
153
153
153
153
153
153
153
153
153
153
153
153
153
153
153
153
153
153
153
153
153
153
153
153
153
153
153
153
153
153
153
153
153
153
153
153
153
153
153
153
153
153
153
153
153
153
153
153
153
153
153
153
153
153
153
153
153
153
153
153
153
153
153
153
153
153
153
153
153
153
153
153
153
153
153
153
153
153
153
153
153
153
153
153
153
153
153
153
153
153
153
153
153
153
153
153
153
153
153
153
153
153
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
179
179
179
179
179
179
179
179
Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.                    .toolbar {
                        ToolbarItem(placement: .bottomBar) {

                            Button("Download Map Area") {
                                isGeneratingOfflineMap = true
                            }

                            .disabled(model.isGenerateDisabled || isGeneratingOfflineMap)

                            .task(id: isGeneratingOfflineMap) {
                                guard isGeneratingOfflineMap else { return }
                                let viewRect = geometry.frame(in: .local).inset(
                                    by: UIEdgeInsets(
                                        top: 60,
                                        left: geometry.safeAreaInsets.leading + 20,
                                        bottom: 100,
                                        right: -geometry.safeAreaInsets.trailing + 20
                                    )
                                )
                                guard let extent = mapView.envelope(fromViewRect: viewRect) else { return }
                                await model.generateOfflineMap(extent: extent)
                                isGeneratingOfflineMap = false
                            }

                        }
                    }
Expand

Run the solution

Press Command + R to run the app.

If you are using the Xcode simulator your system must meet these minimum requirements: macOS 14 (Sonoma), Xcode 16, iOS 18. If you are using a physical device, then refer to the system requirements.

You should see a web map of the Naperville water network in the map view and a Download Map Area button embedded within the bottom toolbar.

Tap the Download Map Area button to download the visible area of the web map, offline. Once the download is complete, you will be able to pinch, drag, and double-tap the map view to explore this offline map.

Alternatively, you can download the tutorial solution, as follows.

Option 2: Download the solution

Click the Download solution link under Solution and unzip the file to a location on your machine.
Open the .xcodeproj file in Xcode.

Since the downloaded solution does not contain authentication credentials, you must first set up authentication to create credentials, and then add the developer credentials to the solution.

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
Copy and paste the API key access token into a safe location. It will be used in a later step.

Create new OAuth credentials to access the secure resources used in this tutorial.

Complete the Create OAuth credentials for user authentication tutorial to obtain a Client ID and Redirect URL.

A Client ID uniquely identifies your app on the authenticating server. If the server cannot find an app with the provided Client ID, it will not proceed with authentication.
The Redirect URL (also referred to as a callback url) is used to identify a response from the authenticating server when the system returns control back to your app after an OAuth login. Since it does not necessarily represent a valid endpoint that a user could navigate to, the redirect URL can use a custom scheme, such as my-app://auth. It is important to make sure the redirect URL used in your app's code matches a redirect URL configured on the authenticating server.
Copy and paste the Client ID and Redirect URL into a safe location. They will be used in a later step.

All users that access this application need account privileges to access the ArcGIS Basemap Styles service.

Set developer credentials in the solution

To allow your app users to access ArcGIS location services, use the developer credentials that you created in the Set up authentication step to authenticate requests for resources.

Pass your API Key access token to the ArcGISEnvironment.

In the Project Navigator, click MainApp.swift.

Set the AuthenticationMode to .apiKey.

MainApp.swift
Use dark colors for code blocks
    // Change the `AuthenticationMode` to `.apiKey` if your application uses API key authentication.

    private var authenticationMode: AuthenticationMode { .apiKey }

Set the apiKey property with your API key access token.

MainApp.swift
Expand
Use dark colors for code blocks
    // Please enter an API key access token if your application uses API key authentication.

    private let apiKey = APIKey("<#YOUR-ACCESS-TOKEN#>")

Expand

Best Practice: The access token is stored directly in the code as a convenience for this tutorial. Do not store credentials directly in source code in a production environment.

Use the Authenticator toolkit component to manage your OAuth credentials and pass it to the ArcGISEnvironment.

In the Project Navigator, click MainApp.swift.

Set the AuthenticationMode to .user.

MainApp.swift
Use dark colors for code blocks
// Change the `AuthenticationMode` to `.user` if your application uses OAuth credentials.

private var authenticationMode: AuthenticationMode { .user }

Set your portalURL, clientID and redirectURL values.

MainApp.swift
Expand
Use dark colors for code blocks
    // Setup an `Authenticator` with OAuth configuration if your application uses OAuth credentials.
    @ObservedObject var authenticator = Authenticator(
        oAuthUserConfigurations: [
            OAuthUserConfiguration(

                // Please enter OAuth credentials for user authentication.

                portalURL: URL(string: "<#YOUR-PORTAL-URL#>")!,
                clientID: "<#YOUR-CLIENT-ID#>",
                redirectURL: URL(string: "<#YOUR-REDIRECT-URL#>")!

            )
        ]
    )
Expand

Best Practice: The OAuth credentials are stored directly in the code as a convenience for this tutorial. Do not store credentials directly in source code in a production environment.

Run the solution

Press Command + R to run the app.

You should see a web map of the Naperville water network in the map view and a Download Map Area button embedded within the bottom toolbar.

What's next?

Learn how to use additional API features, ArcGIS location services, and ArcGIS tools in these tutorials:

Create a mobile map package