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.

display offline map on demand

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:

  1. You need an ArcGIS Location Platform or ArcGIS Online account.

  2. Your system meets the system requirements.

Steps

Open the Xcode project

  1. To start the tutorial, complete the Display a web map tutorial or download and unzip the solution.

  2. Open the .xcodeproj file in Xcode.

  3. If you downloaded the solution, get an access token and set the API key.

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.

  1. Go to the Naperville water network in the Map Viewer in ArcGIS Online. This web map displays a stormwater network within Naperville, Illinois, USA.

  2. Make a note of the item ID at the end of the browser's URL.

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.

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

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

    ViewController.swift
    Expand
    Use dark colors for code blocks
    30 31 32 33 34 35 36 37 38 39 40
    Change lineChange lineChange lineChange lineChange lineChange lineChange line
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
        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.

  1. 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
    40 41 42 43
    Add line.Add line.Add line.Add line.
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
        @objc
        func userSelectedDownloadOfflineMap(_ sender: UIBarButtonItem) {
    
        }
    
    Expand
  2. 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
    44 45 46 47
    Add line.Add line.Add line.Add line.
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
        private func setupUI() {
            navigationItem.titleView = UIProgressView()
    
        }
    
    Expand
  3. Reveal the navigation controller's toolbar and create a UIBarButtonItem that allows your user to select an area of the map to take offline.

    ViewController.swift
    Expand
    Use dark colors for code blocks
    44 45 46 47 48 49 50 51 52 53 54 55
    Add line.Add line.Add line.Add line.Add line.Add line.Add line.
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
        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
  4. In the viewDidLoad() method, call setupUI().

    ViewController.swift
    Expand
    Use dark colors for code blocks
    21 22 23 24 25 26 27 28
    Add line.
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
        override func viewDidLoad() {
            super.viewDidLoad()
    
            setupMap()
    
            setupUI()
    
        }
    
    Expand
  5. In Xcode, in the Project Navigator, click Main.storyboard.

  6. In the editor, select ViewController, and in the menu bar, click Editor > Embed In > Navigation Controller.

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.

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

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

    ViewController.swift
    Expand
    Use dark colors for code blocks
    61 62
    Add line.
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
        private let graphicsOverlay = AGSGraphicsOverlay()
    
    
    Expand
  3. 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
    61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77
    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.
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
        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
  4. 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
    61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81
    Add line.Add line.Add line.Add line.
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
        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
  5. In the viewDidLoad() method, call setupGraphicsOverlay().

    ViewController.swift
    Expand
    Use dark colors for code blocks
    21 22 23 24 25 26 27 28 29 30
    Add line.
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
        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.

  1. 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
    87 88 89 90 91 92 93 94 95 96
    Add line.Add line.Add line.Add line.
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
        @objc
        func userSelectedDownloadOfflineMap(_ sender: UIBarButtonItem) {
    
        }
    
        private var temporaryDirectoryURL: URL {
            FileManager.default.temporaryDirectory
                .appendingPathComponent(ProcessInfo().globallyUniqueString)
        }
    
    
    Expand
  2. 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
    92 93 94 95 96 97
    Add line.
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
        private var temporaryDirectoryURL: URL {
            FileManager.default.temporaryDirectory
                .appendingPathComponent(ProcessInfo().globallyUniqueString)
        }
    
        private var offlineMapTask: AGSOfflineMapTask?
    
    Expand
  3. 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
    87 88 89 90 91 92 93 94 95 96 97 98 99
    Add line.
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
        @objc
        func userSelectedDownloadOfflineMap(_ sender: UIBarButtonItem) {
    
        }
    
        private var temporaryDirectoryURL: URL {
            FileManager.default.temporaryDirectory
                .appendingPathComponent(ProcessInfo().globallyUniqueString)
        }
    
        private var offlineMapTask: AGSOfflineMapTask?
    
        private var offlineMapJob: AGSGenerateOfflineMapJob?
    
    Expand
  4. 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
    99 100 101 102 103
    Add line.Add line.Add line.
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
        private var offlineMapJob: AGSGenerateOfflineMapJob?
    
        private func downloadOfflineMap(with offlineArea: AGSGeometry, at downloadDirectory: URL) {
    
        }
    
    Expand
  5. Create an AGSOfflineMapTask by supplying the web map in the constructor.

    ViewController.swift
    Expand
    Use dark colors for code blocks
    99 100 101 102 103 104 105 106
    Add line.Add line.
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
        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
  6. 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
    101 102 103 104 105 106 107 108 109 110 111 112
    Add line.Add line.Add line.Add line.Add line.
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
        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
  7. 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.

    ViewController.swift
    Expand
    Use dark colors for code blocks
    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
    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.
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
        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
  8. 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
    87 88 89 90 91 92
    Add line.
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
        @objc
        func userSelectedDownloadOfflineMap(_ sender: UIBarButtonItem) {
    
            guard let offlineArea = mapView.visibleArea else { return }
    
        }
    
    Expand
  9. 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
    87 88 89 90 91 92 93 94
    Add line.
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
        @objc
        func userSelectedDownloadOfflineMap(_ sender: UIBarButtonItem) {
    
            guard let offlineArea = mapView.visibleArea else { return }
    
            sender.isEnabled = false
    
        }
    
    Expand
  10. Create a graphic for the selected offline area.

    ViewController.swift
    Expand
    Use dark colors for code blocks
    87 88 89 90 91 92 93 94 95 96
    Add line.
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
        @objc
        func userSelectedDownloadOfflineMap(_ sender: UIBarButtonItem) {
    
            guard let offlineArea = mapView.visibleArea else { return }
    
            sender.isEnabled = false
    
            addGraphic(for: offlineArea)
    
        }
    
    Expand
  11. 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
    87 88 89 90 91 92 93 94 95 96 97 98
    Add line.
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
        @objc
        func userSelectedDownloadOfflineMap(_ sender: UIBarButtonItem) {
    
            guard let offlineArea = mapView.visibleArea else { return }
    
            sender.isEnabled = false
    
            addGraphic(for: offlineArea)
    
            mapView.setViewpointGeometry(offlineArea, padding: 25)
    
        }
    
    Expand
  12. Call downloadOfflineMapWithOfflineArea:atDownloadDirectory:() by supplying the selected offline area and temporaryDirectoryURL.

    ViewController.swift
    Expand
    Use dark colors for code blocks
    87 88 89 90 91 92 93 94 95 96 97 98 99 100
    Add line.
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
        @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
  13. Press Command + R to run the app.

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:

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