Display an offline map (on-demand)

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.

Steps

Open the Xcode project

To start the tutorial, complete the Display a web map tutorial or download and unzip the solution.
Open the .xcodeproj file in Xcode.
If you downloaded the solution, get an access token and set the API key.
An API Key gives your app access to secure resources used in this tutorial.
1. Go to the Create an API key tutorial to obtain a new API key access token. Ensure that the following privilege is enabled: Location services > Basemaps > Basemap styles service. Copy the access token as it will be used in the next step.
2. In Xcode, in the Project Navigator, click MainApp.swift.
3. In the Editor, set the ArcGISEnvironment.apiKey property on the ArcGISEnvironment with your access token.
  MainApp.swift
  Expand
  Use dark colors for code blocks
  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 init() { ArcGISEnvironment.apiKey = APIKey("<#YOUR-ACCESS-TOKEN#>") }
  Expand
  Warning
  The access token is stored directly in the code as a convenience for this tutorial. Storing access tokens in the source code is not best practice.

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