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 AppDelegate.swift.
3. In the editor, set the APIKey property on the AGSArcGISRuntimeEnvironment with your access token.
  AppDelegate.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 func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool { AGSArcGISRuntimeEnvironment.apiKey = "YOUR_ACCESS_TOKEN" return true }
  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 AGSMap from the web map's AGSPortalItem, and display it in your app's AGSMapView.

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

In the editor, modify the setupMap() function. Provide the web map's item ID.

The code creates an AGSPortalItem using the AGSPortal that references ArcGIS Online, and the web map's itemID. The portalItem is used to create an AGSMap that is displayed in the app's AGSMapView.

ViewController.swift
Expand
Use dark colors for code blocks
33
33
33
33
33
33
33
33
33
33
33
33
33
33
33
33
33
33
33
33
33
33
33
33
33
32
31
30
29
29
29
29
29
30
31
32
33
34
35
36
37
38
39
40
40
40
40
39
38
37
36
35
34
33
32
31
30
29
28
27
27
27
26
25
24
23
22
21
20
19
18
17
16
15
14
13
12
11
10
9
8
7
6
5
5
5
4
3
2
1
0
-1
-2
-3
-4
-5
-6
-7
-8
-9
-10
-11
-12
-13
-14
-15
-16
-17
-18
-19
-19
-19
-19
-19
-19
-19
-19
-19
-19
-19
-19
-19
-19
-19
-19
-19
-19
-19
-19
-19
-19
-19
-19
-19
-19
-19
-19
-19
-19
-19
-19
-19
-19
-19
-19
-19
-19
-19
-19
Change lineChange lineChange lineChange lineChange lineChange lineChange line    private func setupMap() {

        let map = AGSMap(
            item: AGSPortalItem(
                portal: AGSPortal.arcGISOnline(withLoginRequired: false),
                itemID: "5a030a31e42841a89914bd7c5ecf4d8f"
            )
        )
        mapView.map = map

    }
Expand

Setup the UI

Setup your UI with a button that allows your users to select an area to download using an AGSGenerateOfflineMapJob. Then, add a UIProgressView that reports the job's progress to your user.

Create a method named userSelectedDownloadOfflineMap:() and assign it the @objc keyword. The @objc method keyword exposes the method to Objective-C, a necessary step for using the UIBarButtonItem API.
For now, leave the body of the method blank.

ViewController.swift
Expand
Use dark colors for code blocks
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
85
84
83
82
82
82
82
82
82
82
82
82
82
82
82
82
82
82
82
82
82
82
81
80
79
77
75
73
71
69
67
65
63
62
61
61
61
60
59
58
57
56
55
54
53
52
51
50
49
48
47
46
45
44
43
42
41
40
39
39
39
40
41
42
42
42
42
42
42
42
42
42
42
42
43
43
42
41
40
39
38
37
36
35
34
33
32
31
30
29
28
27
26
25
24
23
22
21
20
19
18
17
16
15
14
13
12
11
10
9
8
7
6
5
4
3
2
1
0
-1
-2
-3
-4
-4
Add line.Add line.Add line.Add line.    @objc
    func userSelectedDownloadOfflineMap(_ sender: UIBarButtonItem) {

    }
Expand

Create a private method to setup the app's UI. Within it, create a UIProgressView and assign it to navigationItem.titleView.

ViewController.swift
Expand
Use dark colors for code blocks
47
47
47
47
47
47
47
47
47
47
47
47
47
47
47
47
47
47
47
47
47
47
47
47
47
46
45
44
43
43
43
43
43
43
43
43
43
43
43
43
43
43
43
43
43
43
43
44
45
46
46
46
46
46
46
46
46
46
47
47
47
47
46
45
44
43
42
41
40
39
38
37
36
35
34
33
32
31
30
29
28
27
26
25
25
25
25
25
25
24
23
22
21
20
19
18
17
16
15
15
15
14
13
12
11
10
9
8
7
6
5
4
3
2
1
0
-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
-32
Add line.Add line.Add line.Add line.    private func setupUI() {
        navigationItem.titleView = UIProgressView()

    }
Expand

Reveal the navigation controller's toolbar and create a UIBarButtonItem that allows your user to select an area of the map to take offline.

The code creates an array of three UIBarButtonItem objects. The first and last objects reserve flexible space within the toolbar and the middle object is the download button. The button's title reads, "Download Map Area", and tapping it performs the method userSelectedDownloadOfflineMap:().

ViewController.swift
Expand
Use dark colors for code blocks
47
47
47
47
47
47
47
47
47
47
47
47
47
47
47
47
47
47
47
47
47
47
47
47
47
46
45
44
43
43
43
43
43
43
43
43
43
43
43
43
43
43
43
43
43
43
43
44
45
46
47
48
49
50
51
52
53
54
55
55
55
55
54
53
52
51
50
49
48
47
46
45
44
43
42
41
40
39
38
37
36
35
34
33
33
33
33
33
33
32
31
30
29
28
27
26
25
24
23
23
23
22
21
20
19
18
17
16
15
14
13
12
11
10
9
8
7
6
5
4
3
2
1
0
-1
-2
-3
-4
-5
-6
-7
-8
-9
-10
-11
-12
-13
-14
-15
-16
-17
-18
-19
-20
-21
-22
-23
-24
-24
Add line.Add line.Add line.Add line.Add line.Add line.Add line.    private func setupUI() {
        navigationItem.titleView = UIProgressView()

        navigationController?.isToolbarHidden = false
        let items = [
            UIBarButtonItem(barButtonSystemItem: .flexibleSpace, target: nil, action: nil),
            UIBarButtonItem(title: "Download Map Area", style: .plain, target: self, action: #selector(userSelectedDownloadOfflineMap)),
            UIBarButtonItem(barButtonSystemItem: .flexibleSpace, target: nil, action: nil)
        ]
        setToolbarItems(items, animated: true)

    }
Expand

In the viewDidLoad() method, call setupUI().

ViewController.swift
Expand
Use dark colors for code blocks
20
20
20
20
20
20
20
20
20
20
20
20
20
20
20
20
20
20
20
20
21
22
23
24
25
26
27
27
27
28
28
28
28
28
28
28
28
28
28
28
28
28
28
28
28
28
28
28
28
28
28
28
28
28
28
28
28
28
28
28
28
28
27
26
25
24
23
22
21
20
19
18
17
16
15
14
13
12
11
10
9
8
7
6
6
6
6
6
6
5
4
3
2
1
0
-1
-2
-3
-4
-4
-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
-51
Add line.    override func viewDidLoad() {
        super.viewDidLoad()

        setupMap()

        setupUI()

    }
Expand

In Xcode, in the Project Navigator, click Main.storyboard.
In the editor, select ViewController, and in the menu bar, click Editor > Embed In > Navigation Controller.

Embedding ViewController within a Navigation Controller will place a navigation bar at the top of ViewController. Inside the navigation bar you will find the progress view.

Setup the offline area graphics

A graphics overlay is a container for graphics. A graphic is added to display the selected offline area on the map.

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

In the editor, create a private AGSGraphicsOverlay property to contain an offline area graphic.

ViewController.swift
Expand
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
61
60
60
60
60
60
60
60
60
60
60
60
60
60
60
60
60
60
60
60
60
60
60
60
60
60
60
60
60
60
60
60
60
60
60
61
62
62
62
62
62
62
62
62
62
62
62
62
62
62
62
62
62
62
62
62
61
61
61
61
61
61
60
59
58
57
56
55
54
53
52
51
51
51
50
49
48
47
46
45
44
43
42
41
40
39
38
37
36
35
34
33
32
31
30
29
28
27
26
25
24
23
22
21
20
19
18
17
16
15
14
13
12
11
10
9
8
7
6
5
4
4
Add line.    private let graphicsOverlay = AGSGraphicsOverlay()

Expand

Define a private method to setup the graphics overlay. In the method, create an AGSSimpleRenderer to render graphics. Define a symbol for the renderer using an AGSSimpleFillSymbol and an AGSSimpleLineSymbol.

ViewController.swift
Expand
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
61
60
60
60
60
60
60
60
60
60
60
60
60
60
60
60
60
60
60
60
60
60
60
60
60
60
60
60
60
60
60
60
60
60
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
77
77
77
77
76
76
76
76
76
76
75
74
73
72
71
70
69
68
67
66
66
66
65
64
63
62
61
60
59
58
57
56
55
54
53
52
51
50
49
48
47
46
45
44
43
42
41
40
39
38
37
36
35
34
33
32
31
30
29
28
27
26
25
24
23
22
21
20
19
19
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.    private let graphicsOverlay = AGSGraphicsOverlay()

    private func setupGraphicsOverlay() {
        graphicsOverlay.renderer = AGSSimpleRenderer(
            symbol: AGSSimpleFillSymbol(
                style: .solid,
                color: .clear,
                outline: AGSSimpleLineSymbol(
                    style: .solid,
                    color: .red,
                    width: 3
                )
            )
        )
        mapView.graphicsOverlays.add(graphicsOverlay)
    }

Expand

Define a private method named that adds a graphic to the graphics overlay for the supplied offlineArea geometry.

ViewController.swift
Expand
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
61
60
60
60
60
60
60
60
60
60
60
60
60
60
60
60
60
60
60
60
60
60
60
60
60
60
60
60
60
60
60
60
60
60
60
61
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
80
79
78
77
76
75
74
73
72
71
71
71
70
69
68
67
66
65
64
63
62
61
60
59
58
57
56
55
54
53
52
51
50
49
48
47
46
45
44
43
42
41
40
39
38
37
36
35
34
33
32
31
30
29
28
27
26
25
24
24
Add line.Add line.Add line.Add line.    private let graphicsOverlay = AGSGraphicsOverlay()

    private func setupGraphicsOverlay() {
        graphicsOverlay.renderer = AGSSimpleRenderer(
            symbol: AGSSimpleFillSymbol(
                style: .solid,
                color: .clear,
                outline: AGSSimpleLineSymbol(
                    style: .solid,
                    color: .red,
                    width: 3
                )
            )
        )
        mapView.graphicsOverlays.add(graphicsOverlay)
    }

    private func addGraphic(for offlineArea: AGSGeometry) {
        let graphic = AGSGraphic(geometry: offlineArea, symbol: nil)
        graphicsOverlay.graphics.add(graphic)
    }
Expand

In the viewDidLoad() method, call setupGraphicsOverlay().

ViewController.swift
Expand
Use dark colors for code blocks
20
20
20
20
20
20
20
20
20
20
20
20
20
20
20
20
20
20
20
20
21
22
23
24
25
26
27
28
29
30
30
30
30
30
30
30
30
30
30
30
30
30
30
30
30
30
30
30
30
30
30
30
30
30
30
30
30
30
30
30
30
30
30
30
30
30
30
30
30
30
30
30
30
30
30
30
30
30
30
30
30
30
30
30
30
30
30
30
30
29
28
27
26
25
24
23
22
21
20
20
20
19
18
17
16
15
14
13
12
11
10
9
8
7
6
5
4
3
2
1
0
-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
-27
Add line.    override func viewDidLoad() {
        super.viewDidLoad()

        setupMap()

        setupUI()

        setupGraphicsOverlay()

    }
Expand

Download the map for offline use

When a user specifies an area of the web map to take offline, a number of tasks are performed.

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

ViewController.swift
Expand
Use dark colors for code blocks
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
87
88
89
89
89
89
89
89
89
89
89
89
89
90
91
92
93
94
95
96
96
96
96
95
94
93
92
91
90
89
88
87
86
85
84
83
82
81
80
79
78
77
76
75
74
73
72
71
70
69
68
67
66
65
64
63
62
61
60
59
58
57
57
Add line.Add line.Add line.Add line.    @objc
    func userSelectedDownloadOfflineMap(_ sender: UIBarButtonItem) {

    }

    private var temporaryDirectoryURL: URL {
        FileManager.default.temporaryDirectory
            .appendingPathComponent(ProcessInfo().globallyUniqueString)
    }

Expand

Create a private, optional AGSOfflineMapTask property named offlineMapTask. The offline map task is used to create an AGSGenerateOfflineMapJob, provided a few parameters, and a geometry.

ViewController.swift
Expand
Use dark colors for code blocks
101
101
101
101
101
101
101
101
101
101
101
101
101
101
101
101
101
101
101
101
101
101
101
101
101
101
101
101
101
101
101
101
101
101
101
101
101
101
101
101
101
101
101
101
101
101
101
101
101
101
101
101
101
101
101
101
101
101
101
101
101
101
101
101
101
101
101
101
101
101
101
101
101
101
101
101
101
101
101
101
101
101
101
101
101
101
101
101
101
100
99
98
97
96
95
94
93
92
91
91
91
92
93
94
95
96
97
97
96
95
94
93
92
91
90
89
88
87
86
85
84
83
82
81
80
79
78
77
76
75
74
73
72
71
70
69
68
67
66
65
64
63
62
61
60
59
58
57
57
Add line.    private var temporaryDirectoryURL: URL {
        FileManager.default.temporaryDirectory
            .appendingPathComponent(ProcessInfo().globallyUniqueString)
    }

    private var offlineMapTask: AGSOfflineMapTask?
Expand

Create a private, optional AGSGenerateOfflineMapJob property named offlineMapJob. The offline map job handles transactions with the service to download an area of the web map offline.

ViewController.swift
Expand
Use dark colors for code blocks
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
87
88
89
89
89
89
89
89
89
89
89
89
89
90
91
92
93
94
95
96
97
98
99
99
98
97
96
95
94
93
92
91
90
89
88
87
86
85
84
83
82
81
80
79
78
77
76
75
74
73
72
71
70
69
68
67
66
65
64
63
62
61
61
Add line.    @objc
    func userSelectedDownloadOfflineMap(_ sender: UIBarButtonItem) {

    }

    private var temporaryDirectoryURL: URL {
        FileManager.default.temporaryDirectory
            .appendingPathComponent(ProcessInfo().globallyUniqueString)
    }

    private var offlineMapTask: AGSOfflineMapTask?

    private var offlineMapJob: AGSGenerateOfflineMapJob?
Expand

Define a private method to perform the download. This method receives two parameters, an AGSGeometry defining the offline area and a URL at which to store the downloaded map.

ViewController.swift
Expand
Use dark colors for code blocks
108
108
108
108
108
108
108
108
108
108
108
108
108
108
108
108
108
108
108
108
108
108
108
108
108
108
108
108
108
108
108
108
108
108
108
108
108
108
108
108
108
108
108
108
108
108
108
108
108
108
108
108
108
108
108
108
108
108
108
108
108
108
108
108
108
108
108
108
108
108
108
108
108
108
108
108
108
108
108
108
108
108
108
108
108
108
108
108
108
107
106
105
104
103
102
101
100
99
98
98
98
98
98
98
98
98
98
98
99
100
101
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
103
103
Add line.Add line.Add line.    private var offlineMapJob: AGSGenerateOfflineMapJob?

    private func downloadOfflineMap(with offlineArea: AGSGeometry, at downloadDirectory: URL) {

    }
Expand

Create an AGSOfflineMapTask by supplying the web map in the constructor.

ViewController.swift
Expand
Use dark colors for code blocks
108
108
108
108
108
108
108
108
108
108
108
108
108
108
108
108
108
108
108
108
108
108
108
108
108
108
108
108
108
108
108
108
108
108
108
108
108
108
108
108
108
108
108
108
108
108
108
108
108
108
108
108
108
108
108
108
108
108
108
108
108
108
108
108
108
108
108
108
108
108
108
108
108
108
108
108
108
108
108
108
108
108
108
108
108
108
108
108
108
107
106
105
104
103
102
101
100
99
98
98
98
98
98
98
98
98
98
98
99
100
101
102
103
104
105
105
105
105
105
105
105
105
105
105
105
105
105
105
105
105
105
105
105
105
105
105
105
105
105
105
105
105
105
105
105
105
106
106
106
Add line.Add line.    private var offlineMapJob: AGSGenerateOfflineMapJob?

    private func downloadOfflineMap(with offlineArea: AGSGeometry, at downloadDirectory: URL) {

        guard let map = mapView.map else { return }
        offlineMapTask = AGSOfflineMapTask(onlineMap: map)

    }
Expand

Use the offline map task to generate offline map job parameters by supplying the offline area geometry.

ViewController.swift
Expand
Use dark colors for code blocks
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
110
110
110
110
110
110
110
110
110
110
110
109
108
107
106
105
104
103
102
101
100
100
100
100
100
100
100
100
100
100
100
100
101
102
103
104
105
106
107
108
109
109
109
109
109
109
109
109
109
109
109
109
109
109
109
109
109
109
109
109
109
109
109
109
109
109
110
111
112
112
112
Add line.Add line.Add line.Add line.Add line.    private func downloadOfflineMap(with offlineArea: AGSGeometry, at downloadDirectory: URL) {

        guard let map = mapView.map else { return }
        offlineMapTask = AGSOfflineMapTask(onlineMap: map)

        offlineMapTask?.defaultGenerateOfflineMapParameters(withAreaOfInterest: offlineArea) { [weak self] parameters, error in
            guard let self = self else { return }
            guard let offlineMapTask = self.offlineMapTask else { return }

        }

    }
Expand

Create the generate offline map job by supplying the offline map task with AGSGenerateOfflineMapParameters. Use the offline map parameters to specify your preferences for the offline map. Finally, set the job's progress to the progress view's observedProgress property and start the job.

The offline map job is specified with two parameters.

Set the updateMode to .noUpdates ensures that the offline map remains read-only.
Set the esriVectorTilesDownloadOption to .useReducedFontsService to reduce the download size by stripping unused language characters from fonts.

ViewController.swift
Expand
Use dark colors for code blocks
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
110
110
110
110
110
110
110
110
110
110
110
109
108
107
106
105
104
103
102
101
100
100
100
100
100
100
100
100
100
100
100
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
137
137
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.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.    private func downloadOfflineMap(with offlineArea: AGSGeometry, at downloadDirectory: URL) {

        guard let map = mapView.map else { return }
        offlineMapTask = AGSOfflineMapTask(onlineMap: map)

        offlineMapTask?.defaultGenerateOfflineMapParameters(withAreaOfInterest: offlineArea) { [weak self] parameters, error in
            guard let self = self else { return }
            guard let offlineMapTask = self.offlineMapTask else { return }

            if let parameters = parameters {
                parameters.updateMode = .noUpdates
                parameters.esriVectorTilesDownloadOption = .useReducedFontsService
                let job = offlineMapTask.generateOfflineMapJob(with: parameters, downloadDirectory: downloadDirectory)
                (self.navigationItem.titleView as! UIProgressView).observedProgress = job.progress
                var n = 0
                job.start(statusHandler: { _ in
                    while n < job.messages.count {
                        print("Job message \(n): \(job.messages[n].message)")
                        n += 1
                    }
                }, completion: { [weak self] result, error in
                    guard let self = self else { return }
                    if let result = result {
                        self.mapView.map = result.offlineMap
                    } else if let error = error {
                        print("Error downloading the offline map: \(error)")
                        return
                    }
                })
                self.offlineMapJob = job
            } else if let error = error {
                print("Error fetching default parameters for the area of interest: \(error.localizedDescription)")
            }

        }

    }
Expand

In the userSelectedDownloadOfflineMap:() method, use the map view's visible area geometry to download the map.

ViewController.swift
Expand
Use dark colors for code blocks
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
87
88
89
90
91
91
91
91
91
91
91
91
91
92
92
92
92
92
92
92
92
92
92
92
92
92
92
92
92
92
92
92
92
92
92
92
92
92
92
92
92
92
92
92
92
92
92
92
92
92
92
92
92
92
92
92
92
92
92
92
92
92
92
Add line.    @objc
    func userSelectedDownloadOfflineMap(_ sender: UIBarButtonItem) {

        guard let offlineArea = mapView.visibleArea else { return }

    }
Expand

Disable the button after the user has selected an area of the map to take offline.

ViewController.swift
Expand
Use dark colors for code blocks
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
87
88
89
90
91
92
93
93
93
93
93
93
93
94
94
94
94
94
94
94
94
94
94
94
94
94
94
94
94
94
94
94
94
94
94
94
94
94
94
94
94
94
94
94
94
94
94
94
94
94
94
94
94
94
94
94
94
94
94
94
94
94
94
Add line.    @objc
    func userSelectedDownloadOfflineMap(_ sender: UIBarButtonItem) {

        guard let offlineArea = mapView.visibleArea else { return }

        sender.isEnabled = false

    }
Expand

Create a graphic for the selected offline area.

ViewController.swift
Expand
Use dark colors for code blocks
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
87
88
89
90
91
92
93
94
95
95
95
95
95
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
Add line.    @objc
    func userSelectedDownloadOfflineMap(_ sender: UIBarButtonItem) {

        guard let offlineArea = mapView.visibleArea else { return }

        sender.isEnabled = false

        addGraphic(for: offlineArea)

    }
Expand

Set the map view's view point for the selected offline area. Pad the area to slightly zoom the map view out, allowing you to visualize the context of the selected map area.

ViewController.swift
Expand
Use dark colors for code blocks
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
87
88
89
90
91
92
93
94
95
96
97
97
97
98
98
98
98
98
98
98
98
98
98
98
98
98
98
98
98
98
98
98
98
98
98
98
98
98
98
98
98
98
98
98
98
98
98
98
98
98
98
98
98
98
98
98
98
98
98
98
98
98
98
Add line.    @objc
    func userSelectedDownloadOfflineMap(_ sender: UIBarButtonItem) {

        guard let offlineArea = mapView.visibleArea else { return }

        sender.isEnabled = false

        addGraphic(for: offlineArea)

        mapView.setViewpointGeometry(offlineArea, padding: 25)

    }
Expand

Call downloadOfflineMapWithOfflineArea:atDownloadDirectory:() by supplying the selected offline area and temporaryDirectoryURL.

ViewController.swift
Expand
Use dark colors for code blocks
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
87
88
89
90
91
92
93
94
95
96
97
98
99
100
100
100
100
100
100
100
100
100
100
100
100
100
100
100
100
100
100
100
100
100
100
100
100
100
100
100
100
100
100
100
100
100
100
100
100
100
100
100
100
100
100
100
100
100
100
100
100
100
100
Add line.    @objc
    func userSelectedDownloadOfflineMap(_ sender: UIBarButtonItem) {

        guard let offlineArea = mapView.visibleArea else { return }

        sender.isEnabled = false

        addGraphic(for: offlineArea)

        mapView.setViewpointGeometry(offlineArea, padding: 25)

        downloadOfflineMap(with: offlineArea, at: temporaryDirectoryURL)

    }
Expand

Press Command + R to run the app.

If you are using the Xcode simulator your system must meet these minimum requirements: macOS Big Sur 11.3, Xcode 13, iOS 13. 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, a progress bar embedded within the top navigation bar, 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. Remove your network connection and you will still be able to pinch, drag, and double-tap the map view to explore this offline map.

What's next?

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

Create a mobile map package