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 an offline map custom

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. A development and deployment environment that meets the system requirements.

  3. An IDE for Android development in Kotlin.

Steps

Open an Android Studio project

  1. To start this tutorial, complete the Display a map tutorial. Or download and unzip the Display a map solution in a new folder.

  2. Modify the old project for use in this new tutorial. Expand More info for instructions.

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

Add import statements and some Compose variables

  1. In the Android tool window, open app > kotlin+java > com.example.app > screens > MainScreen.kt. Replace the import statements with the imports needed for this tutorial.

    MainScreen.kt
    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
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    192
    193
    194
    195
    196
    197
    198
    199
    200
    201
    202
    203
    204
    205
    206
    207
    208
    209
    210
    211
    212
    213
    214
    215
    216
    217
    218
    219
    220
    221
    222
    223
    224
    @file:OptIn(ExperimentalMaterial3Api::class)
    
    package com.example.app.screens
    
    import android.content.Context
    import android.widget.Toast
    import androidx.compose.foundation.layout.Column
    import androidx.compose.foundation.layout.fillMaxSize
    import androidx.compose.foundation.layout.fillMaxWidth
    import androidx.compose.foundation.layout.padding
    import androidx.compose.material3.ExperimentalMaterial3Api
    import androidx.compose.material3.LinearProgressIndicator
    import androidx.compose.material3.Scaffold
    import androidx.compose.material3.Text
    import androidx.compose.material3.TopAppBar
    import androidx.compose.runtime.Composable
    import androidx.compose.runtime.LaunchedEffect
    import androidx.compose.runtime.mutableIntStateOf
    import androidx.compose.runtime.mutableStateOf
    import androidx.compose.runtime.remember
    import androidx.compose.runtime.rememberCoroutineScope
    import androidx.compose.ui.Modifier
    import androidx.compose.ui.platform.LocalContext
    import androidx.compose.ui.res.stringResource
    import com.arcgismaps.Color
    import com.arcgismaps.geometry.Envelope
    import com.arcgismaps.geometry.SpatialReference
    import com.arcgismaps.mapping.ArcGISMap
    import com.arcgismaps.mapping.PortalItem
    import com.arcgismaps.mapping.symbology.SimpleFillSymbol
    import com.arcgismaps.mapping.symbology.SimpleFillSymbolStyle
    import com.arcgismaps.mapping.symbology.SimpleLineSymbol
    import com.arcgismaps.mapping.symbology.SimpleLineSymbolStyle
    import com.arcgismaps.mapping.view.Graphic
    import com.arcgismaps.mapping.view.GraphicsOverlay
    import com.arcgismaps.portal.Portal
    import com.arcgismaps.tasks.offlinemaptask.GenerateOfflineMapParameters
    import com.arcgismaps.tasks.offlinemaptask.OfflineMapTask
    import com.arcgismaps.toolkit.geoviewcompose.MapView
    import com.example.app.R
    import kotlinx.coroutines.CoroutineScope
    import kotlinx.coroutines.launch
    import java.util.Calendar
    
    
  2. In the MainScreen composable, create two variables: context to hold the local context of your app and coroutineScope to which you assign rememberCoroutineScope().

    MainScreen.kt
    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
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    192
    193
    194
    195
    196
    197
    198
    199
    200
    201
    202
    203
    204
    205
    206
    207
    208
    209
    210
    211
    212
    213
    214
    215
    216
    217
    218
    219
    220
    221
    222
    223
    224
    @Composable
    fun MainScreen() {
    
        val context = LocalContext.current
        val coroutineScope = rememberCoroutineScope()
    
        var map = remember {
            createMap()
        }
    
        Scaffold(
            topBar = { TopAppBar(title = { Text(text = stringResource(id = R.string.app_name)) }) }
        ) {
    
                MapView(
                    modifier = Modifier.fillMaxSize(),
                    arcGISMap = 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.

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

    acc027394bc84c2fb04d1ed317aac674

    .

Define a progress bar

  1. In MainScreen, add two variables used in displaying a progress bar.

    Add a remember variable named currentProgress. Inside the remember, call mutableIntStateOf(0). The remembered value is an integer indicating the percent completion of an ongoing operation.

    Then add a remember variable named showProgressBar. Inside the remember block, call mutableStateOf(false). The remembered value is Boolean indicating whether the progress bar is currently visible or not.

    MainActivity.kt
    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
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    192
    193
    194
    195
    196
    197
    198
    199
    200
    201
    202
    203
    204
    205
    206
    207
    208
    209
    210
    211
    212
    213
    214
    215
    216
    217
    218
    219
    220
    221
    222
    223
    224
    @Composable
    fun MainScreen() {
    
        val context = LocalContext.current
        val coroutineScope = rememberCoroutineScope()
    
        val currentProgress = remember { mutableIntStateOf(0) }
        val showProgressBar = remember { mutableStateOf(false) }
    
        var map = remember {
            createMap()
        }
    
        Scaffold(
            topBar = { TopAppBar(title = { Text(text = stringResource(id = R.string.app_name)) }) }
        ) {
    
                MapView(
                    modifier = Modifier.fillMaxSize(),
                    arcGISMap = map,
    
                )
    
        }
    
    }
    
  2. Inside the Scaffold block, find the MapView from the Display a map tutorial and replace it with a call of the Column composable.

    A Column allows you to display the progress bar at the top of the screen and the map view below it. Inside the Column block, add a LinearProgressIndicator and then add back the MapView code.

    MainActivity.kt
    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
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    192
    193
    194
    195
    196
    197
    198
    199
    200
    201
    202
    203
    204
    205
    206
    207
    208
    209
    210
    211
    212
    213
    214
    215
    216
    217
    218
    219
    220
    221
    222
    223
    224
        Scaffold(
            topBar = { TopAppBar(title = { Text(text = stringResource(id = R.string.app_name)) }) }
        ) {
    
            Column(
                modifier = Modifier.fillMaxSize().padding(it)
            ) {
                if (showProgressBar.value) {
                    LinearProgressIndicator(
                        modifier = Modifier.fillMaxWidth(),
                        progress = currentProgress.intValue / 100f
                    )
                }
    
                MapView(
                    modifier = Modifier.fillMaxSize(),
                    arcGISMap = map,
    
                )
    
            }
    
        }
    

Display the web map

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

  1. In MainScreen.kt, delete the code inside createMap().

    Create a Portal pointing to ArcGIS Online. Then create a PortalItem for the Naperville water network, using the portal and the web map's item ID. Then return the map.

    MainScreen.kt
    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
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    192
    193
    194
    195
    196
    197
    198
    199
    200
    201
    202
    203
    204
    205
    206
    207
    208
    209
    210
    211
    212
    213
    214
    215
    216
    217
    218
    219
    220
    221
    222
    223
    224
    fun createMap(): ArcGISMap {
    
        val portal = Portal(
            url = "https://www.arcgis.com",
            connection = Portal.Connection.Anonymous
        )
        val portalItem = PortalItem(
            portal = portal,
            itemId = "acc027394bc84c2fb04d1ed317aac674"
        )
        return ArcGISMap(portalItem)
    
    }
    
    Expand
  2. Click Run > Run > app to run the app.

    You should see a map of the stormwater network within Naperville, IL, USA . Use the mouse to drag, scroll, and double-click the map view to explore the map.

Specify an area of the web map to take offline

You can specify an area of the web map that you want to be taken offline. Use an Envelope to specify the geometry of the offline area and a transparent symbol with red outline to visually identify the area on the screen.

  1. Create a graphic from an offline map area and a red-outline symbol.

    1. Create a function named createAreaOfInterest() that takes a lambda as parameter and returns an Envelope. The type of the lambda takes a Graphic and returns nothing.

    2. Create an Envelope with maximum and minimum coordinates in the center of Naperville, IL, and assign it to a variable named offlineArea.

    3. Create a SimpleLineSymbol with a red solid line. Then create a transparent SimpleFillSymbol using the solid red line. Last, create a Graphic using the offline area and the fill symbol.

    4. Use the onOfflineAreaCreated parameter to invoke the lambda, passing in the offlineAreaGraphic you created. Then return offlineArea.

      MainScreen.kt
      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
      37
      38
      39
      40
      41
      42
      43
      44
      45
      46
      47
      48
      49
      50
      51
      52
      53
      54
      55
      56
      57
      58
      59
      60
      61
      62
      63
      64
      65
      66
      67
      68
      69
      70
      71
      72
      73
      74
      75
      76
      77
      78
      79
      80
      81
      82
      83
      84
      85
      86
      87
      88
      89
      90
      91
      92
      93
      94
      95
      96
      97
      98
      99
      100
      101
      102
      103
      104
      105
      106
      107
      108
      109
      110
      111
      112
      113
      114
      115
      116
      117
      118
      119
      120
      121
      122
      123
      124
      125
      126
      127
      128
      129
      130
      131
      132
      133
      134
      135
      136
      137
      138
      139
      140
      141
      142
      143
      144
      145
      146
      147
      148
      149
      150
      151
      152
      153
      154
      155
      156
      157
      158
      159
      160
      161
      162
      163
      164
      165
      166
      167
      168
      169
      170
      171
      172
      173
      174
      175
      176
      177
      178
      179
      180
      181
      182
      183
      184
      185
      186
      187
      188
      189
      190
      191
      192
      193
      194
      195
      196
      197
      198
      199
      200
      201
      202
      203
      204
      205
      206
      207
      208
      209
      210
      211
      212
      213
      214
      215
      216
      217
      218
      219
      220
      221
      222
      223
      224
      fun createAreaOfInterest(
          onOfflineAreaCreated: (Graphic) -> Unit
      ): Envelope {
      
          // Create an envelope that defines the area to take offline
          val offlineArea = Envelope(
              xMin = -88.1526,
              yMin = 41.7694,
              xMax = -88.1490,
              yMax = 41.7714,
              spatialReference = SpatialReference.wgs84()
          )
      
          // Create a graphic to display the area to take offline
          val lineSymbol = SimpleLineSymbol(
              style = SimpleLineSymbolStyle.Solid,
              color = Color.red,
              width = 2f
          )
          val fillSymbol = SimpleFillSymbol(
              style = SimpleFillSymbolStyle.Solid,
              color = Color.transparent,
              outline = lineSymbol
          )
          val offlineAreaGraphic = Graphic(
              geometry = offlineArea,
              symbol = fillSymbol
          )
      
          // Add the offline area outline to the graphics overlay
          onOfflineAreaCreated(offlineAreaGraphic)
      
      
          return offlineArea
      }
      
      Expand
  2. Near the top of the MainScreen composable, create a remember variable named graphicsOverlay. Inside the remember block, instantiate GraphicsOverlay.

    Then create a remember variable named graphicsOverlays. Inside the remember block, create a list that contains one item: graphicsOverlay.

    Last, pass graphicsOverlays to the map view.

    MainScreen.kt
    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
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    192
    193
    194
    195
    196
    197
    198
    199
    200
    201
    202
    203
    204
    205
    206
    207
    208
    209
    210
    211
    212
    213
    214
    215
    216
    217
    218
    219
    220
    221
    222
    223
    224
    @Composable
    fun MainScreen() {
    
        val context = LocalContext.current
        val coroutineScope = rememberCoroutineScope()
    
        val currentProgress = remember { mutableIntStateOf(0) }
        val showProgressBar = remember { mutableStateOf(false) }
    
        val graphicsOverlay = remember { GraphicsOverlay() }
        val graphicsOverlays = remember { listOf(graphicsOverlay) }
    
        var map = remember {
            createMap()
        }
    
        Scaffold(
            topBar = { TopAppBar(title = { Text(text = stringResource(id = R.string.app_name)) }) }
        ) {
    
            Column(
                modifier = Modifier.fillMaxSize().padding(it)
            ) {
                if (showProgressBar.value) {
                    LinearProgressIndicator(
                        modifier = Modifier.fillMaxWidth(),
                        progress = currentProgress.intValue / 100f
                    )
                }
    
                MapView(
                    modifier = Modifier.fillMaxSize(),
                    arcGISMap = map,
    
                    graphicsOverlays = graphicsOverlays
    
                )
    
            }
    
        }
    
    }
    
    Expand
  3. Create a remember variable named offlineArea. Set it by calling the createAreaOfInterest() function you just created and passing a lambda as the onOfflineAreaCreated parameter. Your lambda takes a Graphic and adds it to the graphics overlay.

    MainScreen.kt
    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
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    192
    193
    194
    195
    196
    197
    198
    199
    200
    201
    202
    203
    204
    205
    206
    207
    208
    209
    210
    211
    212
    213
    214
    215
    216
    217
    218
    219
    220
    221
    222
    223
    224
    @Composable
    fun MainScreen() {
    
        val context = LocalContext.current
        val coroutineScope = rememberCoroutineScope()
    
        val currentProgress = remember { mutableIntStateOf(0) }
        val showProgressBar = remember { mutableStateOf(false) }
    
        val graphicsOverlay = remember { GraphicsOverlay() }
        val graphicsOverlays = remember { listOf(graphicsOverlay) }
    
        val offlineArea = remember {
            createAreaOfInterest(
                onOfflineAreaCreated = { graphic -> graphicsOverlay.graphics.add(graphic) }
            )
        }
    
    Expand
  4. Click Run > Run > app to run the app.

    You should see a red outline on the stormwater network within Naperville, IL, USA . This indicates the area of the web map that you are going to take offline.

Download an offline map area

The workflow for downloading an offline map area from the server to the Android device is as follows:

  • Create an offline map task, passing in the web map.
  • Create a default set of parameters to be used for downloading an offline map area. (Use the offline map task.)
  • Create a job for downloading the offline map area. (Use the offline map task and pass the default parameters.)
  • Start the job.
  • Display the offline map area.

For the sake of this tutorial, we will first define a function named downloadOfflineMapArea(), which will take OfflineMapTask and GenerateOfflineMapParameters (and other values) and download the offline map area. Then we will go to the MainScreen block, create OfflineMapTask and GenerateOfflineMapParameters objects, and call downloadOfflineMapArea() with the appropriate values.

Define downloadOfflineMapArea()

  1. Create a top-level suspend function named downloadOfflineMapArea(). Declare the parameters indicated in the code below.

    MainScreen.kt
    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
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    192
    193
    194
    195
    196
    197
    198
    199
    200
    201
    202
    203
    204
    205
    206
    207
    208
    209
    210
    211
    212
    213
    214
    215
    216
    217
    218
    219
    220
    221
    222
    223
    224
    suspend fun downloadOfflineMapArea(
        context: Context,
        coroutineScope: CoroutineScope,
        offlineMapTask: OfflineMapTask,
        parameters: GenerateOfflineMapParameters,
        updateProgress: (Int) -> Unit,
        onDownloadOfflineMapSuccess: (ArcGISMap) -> Unit,
        onDownloadOfflineMapFailure: () -> Unit
    ) {
    
    }
    
    Expand
  2. Create a variable named downloadLocation, which holds the path on the device system where offline map area will be downloaded. The path is a string.

    MainScreen.kt
    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
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    192
    193
    194
    195
    196
    197
    198
    199
    200
    201
    202
    203
    204
    205
    206
    207
    208
    209
    210
    211
    212
    213
    214
    215
    216
    217
    218
    219
    220
    221
    222
    223
    224
    suspend fun downloadOfflineMapArea(
        context: Context,
        coroutineScope: CoroutineScope,
        offlineMapTask: OfflineMapTask,
        parameters: GenerateOfflineMapParameters,
        updateProgress: (Int) -> Unit,
        onDownloadOfflineMapSuccess: (ArcGISMap) -> Unit,
        onDownloadOfflineMapFailure: () -> Unit
    ) {
    
        // Build a folder path named with today's date/time to store the offline map
        val downloadLocation =
            context.getExternalFilesDir(null)?.path + "OfflineMap_" + Calendar.getInstance().time
    
    }
    
    Expand
  3. Create a job that will generate the offline map area. To do this, call OfflineMapTask.createGenerateOfflineMapJob() and pass the default parameters and the downloadLocation.

    MainScreen.kt
    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
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    192
    193
    194
    195
    196
    197
    198
    199
    200
    201
    202
    203
    204
    205
    206
    207
    208
    209
    210
    211
    212
    213
    214
    215
    216
    217
    218
    219
    220
    221
    222
    223
    224
    suspend fun downloadOfflineMapArea(
        context: Context,
        coroutineScope: CoroutineScope,
        offlineMapTask: OfflineMapTask,
        parameters: GenerateOfflineMapParameters,
        updateProgress: (Int) -> Unit,
        onDownloadOfflineMapSuccess: (ArcGISMap) -> Unit,
        onDownloadOfflineMapFailure: () -> Unit
    ) {
    
        // Build a folder path named with today's date/time to store the offline map
        val downloadLocation =
            context.getExternalFilesDir(null)?.path + "OfflineMap_" + Calendar.getInstance().time
    
        // Create a job with GenerateOfflineMapParameters and a download directory path
        val generateOfflineMapJob = offlineMapTask.createGenerateOfflineMapJob(
            parameters = parameters,
            downloadDirectoryPath = downloadLocation
        )
    
    }
    
    Expand
  4. Update the progress of the generate offline map job.

    MainScreen.kt
    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
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    192
    193
    194
    195
    196
    197
    198
    199
    200
    201
    202
    203
    204
    205
    206
    207
    208
    209
    210
    211
    212
    213
    214
    215
    216
    217
    218
    219
    220
    221
    222
    223
    224
    suspend fun downloadOfflineMapArea(
        context: Context,
        coroutineScope: CoroutineScope,
        offlineMapTask: OfflineMapTask,
        parameters: GenerateOfflineMapParameters,
        updateProgress: (Int) -> Unit,
        onDownloadOfflineMapSuccess: (ArcGISMap) -> Unit,
        onDownloadOfflineMapFailure: () -> Unit
    ) {
    
        // Build a folder path named with today's date/time to store the offline map
        val downloadLocation =
            context.getExternalFilesDir(null)?.path + "OfflineMap_" + Calendar.getInstance().time
    
        // Create a job with GenerateOfflineMapParameters and a download directory path
        val generateOfflineMapJob = offlineMapTask.createGenerateOfflineMapJob(
            parameters = parameters,
            downloadDirectoryPath = downloadLocation
        )
    
        coroutineScope.launch {
            generateOfflineMapJob.progress.collect { progress ->
                updateProgress(progress)
            }
        }
    
    }
    
    Expand
  5. Start the generate offline map job.

    MainScreen.kt
    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
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    192
    193
    194
    195
    196
    197
    198
    199
    200
    201
    202
    203
    204
    205
    206
    207
    208
    209
    210
    211
    212
    213
    214
    215
    216
    217
    218
    219
    220
    221
    222
    223
    224
    suspend fun downloadOfflineMapArea(
        context: Context,
        coroutineScope: CoroutineScope,
        offlineMapTask: OfflineMapTask,
        parameters: GenerateOfflineMapParameters,
        updateProgress: (Int) -> Unit,
        onDownloadOfflineMapSuccess: (ArcGISMap) -> Unit,
        onDownloadOfflineMapFailure: () -> Unit
    ) {
    
        // Build a folder path named with today's date/time to store the offline map
        val downloadLocation =
            context.getExternalFilesDir(null)?.path + "OfflineMap_" + Calendar.getInstance().time
    
        // Create a job with GenerateOfflineMapParameters and a download directory path
        val generateOfflineMapJob = offlineMapTask.createGenerateOfflineMapJob(
            parameters = parameters,
            downloadDirectoryPath = downloadLocation
        )
    
        coroutineScope.launch {
            generateOfflineMapJob.progress.collect { progress ->
                updateProgress(progress)
            }
        }
    
        // Start the job to download the offline map
        generateOfflineMapJob.start()
        showMessage( context, "Generate offline map job has started.")
    
    }
    
    Expand
  6. Respond to the result of the generate offline map job.

    Among the parameters passed to downloadOfflineMapArea(), two are particularly important here:

    • onDownloadOfflineMapSuccess
    • onDownloadOfflineMapFailure

    Both parameters are of function type (lambda).

    In the onSuccess block, invoke the onDownloadOfflineMapSuccess() lambda, passing the offline map from the generate offline map result. In the onFailure block, invoke the onDownloadOfflineMapFailure() lambda.

    MainScreen.kt
    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
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    192
    193
    194
    195
    196
    197
    198
    199
    200
    201
    202
    203
    204
    205
    206
    207
    208
    209
    210
    211
    212
    213
    214
    215
    216
    217
    218
    219
    220
    221
    222
    223
    224
    suspend fun downloadOfflineMapArea(
        context: Context,
        coroutineScope: CoroutineScope,
        offlineMapTask: OfflineMapTask,
        parameters: GenerateOfflineMapParameters,
        updateProgress: (Int) -> Unit,
        onDownloadOfflineMapSuccess: (ArcGISMap) -> Unit,
        onDownloadOfflineMapFailure: () -> Unit
    ) {
    
        // Build a folder path named with today's date/time to store the offline map
        val downloadLocation =
            context.getExternalFilesDir(null)?.path + "OfflineMap_" + Calendar.getInstance().time
    
        // Create a job with GenerateOfflineMapParameters and a download directory path
        val generateOfflineMapJob = offlineMapTask.createGenerateOfflineMapJob(
            parameters = parameters,
            downloadDirectoryPath = downloadLocation
        )
    
        coroutineScope.launch {
            generateOfflineMapJob.progress.collect { progress ->
                updateProgress(progress)
            }
        }
    
        // Start the job to download the offline map
        generateOfflineMapJob.start()
        showMessage( context, "Generate offline map job has started.")
    
        generateOfflineMapJob.result().onSuccess { generateOfflineMapResult ->
            onDownloadOfflineMapSuccess(generateOfflineMapResult.offlineMap)
        }.onFailure {
            onDownloadOfflineMapFailure()
        }
    
    }
    
    Expand

Call downloadOfflineMapArea()

  1. In the MainScreen composable, after the map variable: add the LaunchedEffect composable. Then create an OfflineMapTask, passing map.

    MainScreen.kt
    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
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    192
    193
    194
    195
    196
    197
    198
    199
    200
    201
    202
    203
    204
    205
    206
    207
    208
    209
    210
    211
    212
    213
    214
    215
    216
    217
    218
    219
    220
    221
    222
    223
    224
        val context = LocalContext.current
        val coroutineScope = rememberCoroutineScope()
    
        val currentProgress = remember { mutableIntStateOf(0) }
        val showProgressBar = remember { mutableStateOf(false) }
    
        val graphicsOverlay = remember { GraphicsOverlay() }
        val graphicsOverlays = remember { listOf(graphicsOverlay) }
    
        val offlineArea = remember {
            createAreaOfInterest(
                onOfflineAreaCreated = { graphic -> graphicsOverlay.graphics.add(graphic) }
            )
        }
    
        var map = remember {
            createMap()
        }
    
        LaunchedEffect(Unit) {
    
            // Create an offline map task using the current map
            val offlineMapTask = OfflineMapTask(map)
    
        }
    
    Expand
  2. You will now create a default set of parameters for generating an offline map area on the server and and downloading the area.

    Call OfflineMapTask.createDefaultGenerateOfflineMapParameters(), passing the offline map area. Then create an onSuccess block to handle the successful creation of the default parameters.

    MainScreen.kt
    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
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    192
    193
    194
    195
    196
    197
    198
    199
    200
    201
    202
    203
    204
    205
    206
    207
    208
    209
    210
    211
    212
    213
    214
    215
    216
    217
    218
    219
    220
    221
    222
    223
    224
        val context = LocalContext.current
        val coroutineScope = rememberCoroutineScope()
    
        val currentProgress = remember { mutableIntStateOf(0) }
        val showProgressBar = remember { mutableStateOf(false) }
    
        val graphicsOverlay = remember { GraphicsOverlay() }
        val graphicsOverlays = remember { listOf(graphicsOverlay) }
    
        val offlineArea = remember {
            createAreaOfInterest(
                onOfflineAreaCreated = { graphic -> graphicsOverlay.graphics.add(graphic) }
            )
        }
    
        var map = remember {
            createMap()
        }
    
        LaunchedEffect(Unit) {
    
            // Create an offline map task using the current map
            val offlineMapTask = OfflineMapTask(map)
    
            // Create a default set of parameters for generating the offline map from the area of interest
            offlineMapTask.createDefaultGenerateOfflineMapParameters(offlineArea)
                .onSuccess { parameters ->
    
                }
    
        }
    
    Expand
  3. In the onSuccess block, set the value of showProgressBar and show a message saying that the default parameters have been created.

    MainScreen.kt
    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
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    192
    193
    194
    195
    196
    197
    198
    199
    200
    201
    202
    203
    204
    205
    206
    207
    208
    209
    210
    211
    212
    213
    214
    215
    216
    217
    218
    219
    220
    221
    222
    223
    224
        val context = LocalContext.current
        val coroutineScope = rememberCoroutineScope()
    
        val currentProgress = remember { mutableIntStateOf(0) }
        val showProgressBar = remember { mutableStateOf(false) }
    
        val graphicsOverlay = remember { GraphicsOverlay() }
        val graphicsOverlays = remember { listOf(graphicsOverlay) }
    
        val offlineArea = remember {
            createAreaOfInterest(
                onOfflineAreaCreated = { graphic -> graphicsOverlay.graphics.add(graphic) }
            )
        }
    
        var map = remember {
            createMap()
        }
    
        LaunchedEffect(Unit) {
    
            // Create an offline map task using the current map
            val offlineMapTask = OfflineMapTask(map)
    
            // Create a default set of parameters for generating the offline map from the area of interest
            offlineMapTask.createDefaultGenerateOfflineMapParameters(offlineArea)
                .onSuccess { parameters ->
    
                    // When the parameters are successfully created, show progress bar and message
                    showProgressBar.value = true
                    showMessage(context, "Default parameters have been created.")
    
                }
    
        }
    
    Expand
  4. Continuing in the onSuccess block, call downloadOfflineMapArea() function, passing the offlineMapTask and the default parameters. Also pass a lambda for onDownloadOfflineMapSuccess and a lambda for onDownloadOfflineMapFailure.

    MainScreen.kt
    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
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    192
    193
    194
    195
    196
    197
    198
    199
    200
    201
    202
    203
    204
    205
    206
    207
    208
    209
    210
    211
    212
    213
    214
    215
    216
    217
    218
    219
    220
    221
    222
    223
    224
        val context = LocalContext.current
        val coroutineScope = rememberCoroutineScope()
    
        val currentProgress = remember { mutableIntStateOf(0) }
        val showProgressBar = remember { mutableStateOf(false) }
    
        val graphicsOverlay = remember { GraphicsOverlay() }
        val graphicsOverlays = remember { listOf(graphicsOverlay) }
    
        val offlineArea = remember {
            createAreaOfInterest(
                onOfflineAreaCreated = { graphic -> graphicsOverlay.graphics.add(graphic) }
            )
        }
    
        var map = remember {
            createMap()
        }
    
        LaunchedEffect(Unit) {
    
            // Create an offline map task using the current map
            val offlineMapTask = OfflineMapTask(map)
    
            // Create a default set of parameters for generating the offline map from the area of interest
            offlineMapTask.createDefaultGenerateOfflineMapParameters(offlineArea)
                .onSuccess { parameters ->
    
                    // When the parameters are successfully created, show progress bar and message
                    showProgressBar.value = true
                    showMessage(context, "Default parameters have been created.")
    
                    // Download the offline map
                    downloadOfflineMapArea(
                        context = context,
                        coroutineScope = coroutineScope,
                        offlineMapTask = offlineMapTask,
                        parameters = parameters,
                        updateProgress = { currentProgress.intValue = it },
                        onDownloadOfflineMapSuccess = { offlineMap ->
                            // Hide progress bar and show message when the job executes successfully
                            showProgressBar.value = false
                            showMessage(context, "Downloaded offline map area successfully.")
                            // Replace the current map with the result offline map
                            map = offlineMap
                            // Clear the offline area outline
                            graphicsOverlay.graphics.clear()
                        },
                        onDownloadOfflineMapFailure = {
                            showProgressBar.value = false
                            showMessage(context, "Failed to download offline map area.")
                        }
                    )
    
                }
    
        }
    
    Expand
  5. (Optional) The code in this tutorial calls a function to display messages to the user. One possible implementation of showMessage() is the following.

    MainScreen.kt
    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
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    192
    193
    194
    195
    196
    197
    198
    199
    200
    201
    202
    203
    204
    205
    206
    207
    208
    209
    210
    211
    212
    213
    214
    215
    216
    217
    218
    219
    220
    221
    222
    223
    224
    fun showMessage(context: Context, message: String) {
        Toast.makeText(context, message, Toast.LENGTH_LONG).show()
    }
  6. Click Run > Run > app to run the app.

    Initially, you should see the web map centered on Naperville, IL, USA, with a red outline indicating the area that will be taken offline. The download starts automatically, and the progress bar displays at the top of the screen as a dark-blue line, expanding to the right as progress is made. The download might take from a few seconds to a minute or more, depending on your internet connection.

    After the offline map area is downloaded to the Android device, you should see the offline map area, surrounded by a gray grid. You can now remove your network connection, and you will still be able to use the mouse to drag, scroll, and double-click the map view to explore this offline map area.

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.