Display an offline map (on-demand)

Before starting this tutorial, you need the following:

1. 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.

Option 1: Develop the code

Open an Android Studio project

1. Open the project you created by completing the Display a map tutorial.

2. Continue with the following instructions to download and display an offline map for a user-defined geographical area of a web map.

3. Modify the old project for use in this new tutorial.

   Expand for detailed instructions

   1. On your file system, delete the .idea folder, if present, at the top level of your project.

   2. In the Android view, open app > res > values > strings.xml.

      In the <string name="app_name"> element, change the text content to Display an offline map (on-demand).

      strings.xml

      <resources>
      
          <string name="app_name">Display an offline map (on-demand)</string>
      
      </resources>

   3. In the Android view, open Gradle Scripts > settings.gradle.kts.

      Change the value of rootProject.name to “Display an offline map (on-demand)”.

      settings.gradle.kts

      14 collapsed lines
      pluginManagement {
          repositories {
              google {
                  content {
                      includeGroupByRegex("com\\.android.*")
                      includeGroupByRegex("com\\.google.*")
                      includeGroupByRegex("androidx.*")
                  }
              }
              mavenCentral()
              gradlePluginPortal()
          }
      }
      
      dependencyResolutionManagement {
          repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
          repositories {
              google()
              mavenCentral()
              maven { url = uri("https://esri.jfrog.io/artifactory/arcgis") }
          }
      }
      
      rootProject.name = "Display an offline map (on-demand)"
      include(":app")

   4. Click File > Sync Project with Gradle files. Android Studio will recognize your changes and create a new .idea folder.

Add import statements and some Compose variables

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

   MainScreen.kt

   @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(). Change the map declaration to var rather than val. You will be assigning the downloaded offline map to the map variable later in this tutorial.

   MainScreen.kt

   @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 Tools, also known as developer tools, are ArcGIS software applications such as portal and ArcGIS Pro that developers can use to prepare content and data for custom applications they are building. Learn more to create and view web maps A web map is a map stored as a JSON object that defines properties such as the basemap layer, data layers, layer styles, and pop-up styles. Its JSON structure is defined by the web map specification. Learn more . Use the Map Viewer Map Viewer is a browser-based mapping tool that can view, create, and save web maps. It can also perform mapping, visualization, and spatial analysis operations. Learn more to identify the web map item ID An item ID is a unique identifier representing a single item stored, managed, and accessed in a portal, such as a web map, hosted layer, or file. Learn more . This item ID will be used later in the tutorial.

1. Go to the Naperville water network in the Map Viewer Map Viewer is a browser-based mapping tool that can view, create, and save web maps. It can also perform mapping, visualization, and spatial analysis operations. Learn more in ArcGIS Online ArcGIS Online is a GIS mapping, analytics, data hosting, and content management software as a service (SaaS) product. It includes applications, tools, APIs, and location services for users and developers. It is subscription-based and requires an ArcGIS Online account. Learn more . This web map A web map is a map stored as a JSON object that defines properties such as the basemap layer, data layers, layer styles, and pop-up styles. Its JSON structure is defined by the web map specification. Learn more displays stormwater network within Naperville, IL, USA .
2. Make a note of the item ID An item ID is a unique identifier representing a single item stored, managed, and accessed in a portal, such as a web map, hosted layer, or file. Learn more 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.

   MainScreen.kt

   @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.

   MainScreen.kt

       Scaffold(
           topBar = { TopAppBar(title = { Text(text = stringResource(id = R.string.app_name)) }) }
       ) {
   
           Column(
               modifier = Modifier.fillMaxSize().padding(it)
           ) {
               if (showProgressBar.value) {
                   LinearProgressIndicator(
                       progress = {
                           currentProgress.intValue / 100f
                       },
                       modifier = Modifier.fillMaxWidth(),
                   )
               }
   
               MapView(
                   modifier = Modifier.fillMaxSize(),
                   arcGISMap = map,
   
               )
   
           }
   
       }

Display the web map

You can display a web map A web map is a map stored as a JSON object that defines properties such as the basemap layer, data layers, layer styles, and pop-up styles. Its JSON structure is defined by the web map specification. Learn more using the web map’s item ID An item ID is a unique identifier representing a single item stored, managed, and accessed in a portal, such as a web map, hosted layer, or file. Learn more . Create a map A map is a collection of layers that are displayed in 2D. It is typically composed of a basemap layer and data layers. Learn more from the web map portal item An item, also known as a content item, is a resource stored in a portal such as a web map, hosted layer, style, script tool, file, or notebook. Learn more , 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 An item ID is a unique identifier representing a single item stored, managed, and accessed in a portal, such as a web map, hosted layer, or file. Learn more . Then return the map.

   MainScreen.kt

   136 collapsed lines
   @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
   
   @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) }
           )
       }
   
       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.")
                       }
                   )
   
               }
   
       }
   
       Scaffold(
           topBar = { TopAppBar(title = { Text(text = stringResource(id = R.string.app_name)) }) }
       ) {
   
           Column(
               modifier = Modifier.fillMaxSize().padding(it)
           ) {
               if (showProgressBar.value) {
                   LinearProgressIndicator(
                       progress = {
                           currentProgress.intValue / 100f
                       },
                       modifier = Modifier.fillMaxWidth(),
                   )
               }
   
               MapView(
                   modifier = Modifier.fillMaxSize(),
                   arcGISMap = map,
   
                   graphicsOverlays = graphicsOverlays
   
               )
   
           }
   
       }
   
   }
   
   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)
   
   }
   78 collapsed lines
   
   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
   }
   
   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()
       }
   
   }
   
   fun showMessage(context: Context, message: String) {
       Toast.makeText(context, message, Toast.LENGTH_LONG).show()
   }

2. Click Run > Run > app to run the app.

   You should see a map of the stormwater network within Naperville, IL, USA . Tap and hold to drag, scroll, and double-tap 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 A web map is a map stored as a JSON object that defines properties such as the basemap layer, data layers, layer styles, and pop-up styles. Its JSON structure is defined by the web map specification. Learn more 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

      111 collapsed lines
      @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
      
      @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) }
              )
          }
      
          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(
                          progress = {
                              currentProgress.intValue / 100f
                          },
                          modifier = Modifier.fillMaxWidth(),
                      )
                  }
      
                  MapView(
                      modifier = Modifier.fillMaxSize(),
                      arcGISMap = map,
      
                      graphicsOverlays = graphicsOverlays
      
                  )
      
              }
      
          }
      
      }
      
      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)
      
      }
      
      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
      }
      4 collapsed lines
      
      fun showMessage(context: Context, message: String) {
          Toast.makeText(context, message, Toast.LENGTH_LONG).show()
      }

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

   44 collapsed lines
   @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
   
   @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(
                       progress = {
                           currentProgress.intValue / 100f
                       },
                       modifier = Modifier.fillMaxWidth(),
                   )
               }
   
               MapView(
                   modifier = Modifier.fillMaxSize(),
                   arcGISMap = map,
   
                   graphicsOverlays = graphicsOverlays
   
               )
   
           }
   
       }
   
   }
   54 collapsed lines
   
   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)
   
   }
   
   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
   }
   
   fun showMessage(context: Context, message: String) {
       Toast.makeText(context, message, Toast.LENGTH_LONG).show()
   }

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.

   More info

   Consult the createAreaOfInterest() function to see the code that invokes the lambda and passes the offlineAreaGraphic.

   MainScreen.kt

   111 collapsed lines
   @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
   
   @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) }
           )
       }
   
       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(
                       progress = {
                           currentProgress.intValue / 100f
                       },
                       modifier = Modifier.fillMaxWidth(),
                   )
               }
   
               MapView(
                   modifier = Modifier.fillMaxSize(),
                   arcGISMap = map,
   
                   graphicsOverlays = graphicsOverlays
   
               )
   
           }
   
       }
   
   }
   
   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)
   
   }
   
   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
   }
   4 collapsed lines
   
   fun showMessage(context: Context, message: String) {
       Toast.makeText(context, message, Toast.LENGTH_LONG).show()
   }
   MainScreen.kt

   44 collapsed lines
   @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
   
   @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) }
           )
       }
   89 collapsed lines
   
       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(
                       progress = {
                           currentProgress.intValue / 100f
                       },
                       modifier = Modifier.fillMaxWidth(),
                   )
               }
   
               MapView(
                   modifier = Modifier.fillMaxSize(),
                   arcGISMap = map,
   
                   graphicsOverlays = graphicsOverlays
   
               )
   
           }
   
       }
   
   }
   
   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)
   
   }
   
   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
   }
   
   fun showMessage(context: Context, message: String) {
       Toast.makeText(context, message, Toast.LENGTH_LONG).show()
   }

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 An offline map is a map area and its data content downloaded from an offline-enabled web map for use in offline applications built with ArcGIS Maps SDKs for Native Apps. Learn more 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

   186 collapsed lines
   @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
   
   @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) }
           )
       }
   
       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.")
                       }
                   )
   
               }
   
       }
   
       Scaffold(
           topBar = { TopAppBar(title = { Text(text = stringResource(id = R.string.app_name)) }) }
       ) {
   
           Column(
               modifier = Modifier.fillMaxSize().padding(it)
           ) {
               if (showProgressBar.value) {
                   LinearProgressIndicator(
                       progress = {
                           currentProgress.intValue / 100f
                       },
                       modifier = Modifier.fillMaxWidth(),
                   )
               }
   
               MapView(
                   modifier = Modifier.fillMaxSize(),
                   arcGISMap = map,
   
                   graphicsOverlays = graphicsOverlays
   
               )
   
           }
   
       }
   
   }
   
   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)
   
   }
   
   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
   }
   
   suspend fun downloadOfflineMapArea(
       context: Context,
       coroutineScope: CoroutineScope,
       offlineMapTask: OfflineMapTask,
       parameters: GenerateOfflineMapParameters,
       updateProgress: (Int) -> Unit,
       onDownloadOfflineMapSuccess: (ArcGISMap) -> Unit,
       onDownloadOfflineMapFailure: () -> Unit
   ) {
   
   }
   4 collapsed lines
   
   fun showMessage(context: Context, message: String) {
       Toast.makeText(context, message, Toast.LENGTH_LONG).show()
   }

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

   186 collapsed lines
   @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
   
   @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) }
           )
       }
   
       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.")
                       }
                   )
   
               }
   
       }
   
       Scaffold(
           topBar = { TopAppBar(title = { Text(text = stringResource(id = R.string.app_name)) }) }
       ) {
   
           Column(
               modifier = Modifier.fillMaxSize().padding(it)
           ) {
               if (showProgressBar.value) {
                   LinearProgressIndicator(
                       progress = {
                           currentProgress.intValue / 100f
                       },
                       modifier = Modifier.fillMaxWidth(),
                   )
               }
   
               MapView(
                   modifier = Modifier.fillMaxSize(),
                   arcGISMap = map,
   
                   graphicsOverlays = graphicsOverlays
   
               )
   
           }
   
       }
   
   }
   
   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)
   
   }
   
   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
   }
   
   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
   
   }
   4 collapsed lines
   
   fun showMessage(context: Context, message: String) {
       Toast.makeText(context, message, Toast.LENGTH_LONG).show()
   }

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

   186 collapsed lines
   @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
   
   @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) }
           )
       }
   
       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.")
                       }
                   )
   
               }
   
       }
   
       Scaffold(
           topBar = { TopAppBar(title = { Text(text = stringResource(id = R.string.app_name)) }) }
       ) {
   
           Column(
               modifier = Modifier.fillMaxSize().padding(it)
           ) {
               if (showProgressBar.value) {
                   LinearProgressIndicator(
                       progress = {
                           currentProgress.intValue / 100f
                       },
                       modifier = Modifier.fillMaxWidth(),
                   )
               }
   
               MapView(
                   modifier = Modifier.fillMaxSize(),
                   arcGISMap = map,
   
                   graphicsOverlays = graphicsOverlays
   
               )
   
           }
   
       }
   
   }
   
   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)
   
   }
   
   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
   }
   
   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
       )
   
   }
   4 collapsed lines
   
   fun showMessage(context: Context, message: String) {
       Toast.makeText(context, message, Toast.LENGTH_LONG).show()
   }

4. Update the progress of the generate offline map job.

   MainScreen.kt

   186 collapsed lines
   @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
   
   @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) }
           )
       }
   
       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.")
                       }
                   )
   
               }
   
       }
   
       Scaffold(
           topBar = { TopAppBar(title = { Text(text = stringResource(id = R.string.app_name)) }) }
       ) {
   
           Column(
               modifier = Modifier.fillMaxSize().padding(it)
           ) {
               if (showProgressBar.value) {
                   LinearProgressIndicator(
                       progress = {
                           currentProgress.intValue / 100f
                       },
                       modifier = Modifier.fillMaxWidth(),
                   )
               }
   
               MapView(
                   modifier = Modifier.fillMaxSize(),
                   arcGISMap = map,
   
                   graphicsOverlays = graphicsOverlays
   
               )
   
           }
   
       }
   
   }
   
   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)
   
   }
   
   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
   }
   
   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)
           }
       }
   
   }
   4 collapsed lines
   
   fun showMessage(context: Context, message: String) {
       Toast.makeText(context, message, Toast.LENGTH_LONG).show()
   }

5. Start the generate offline map job.

   MainScreen.kt

   186 collapsed lines
   @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
   
   @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) }
           )
       }
   
       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.")
                       }
                   )
   
               }
   
       }
   
       Scaffold(
           topBar = { TopAppBar(title = { Text(text = stringResource(id = R.string.app_name)) }) }
       ) {
   
           Column(
               modifier = Modifier.fillMaxSize().padding(it)
           ) {
               if (showProgressBar.value) {
                   LinearProgressIndicator(
                       progress = {
                           currentProgress.intValue / 100f
                       },
                       modifier = Modifier.fillMaxWidth(),
                   )
               }
   
               MapView(
                   modifier = Modifier.fillMaxSize(),
                   arcGISMap = map,
   
                   graphicsOverlays = graphicsOverlays
   
               )
   
           }
   
       }
   
   }
   
   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)
   
   }
   
   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
   }
   
   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.")
   
   }
   4 collapsed lines
   
   fun showMessage(context: Context, message: String) {
       Toast.makeText(context, message, Toast.LENGTH_LONG).show()
   }

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

   186 collapsed lines
   @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
   
   @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) }
           )
       }
   
       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.")
                       }
                   )
   
               }
   
       }
   
       Scaffold(
           topBar = { TopAppBar(title = { Text(text = stringResource(id = R.string.app_name)) }) }
       ) {
   
           Column(
               modifier = Modifier.fillMaxSize().padding(it)
           ) {
               if (showProgressBar.value) {
                   LinearProgressIndicator(
                       progress = {
                           currentProgress.intValue / 100f
                       },
                       modifier = Modifier.fillMaxWidth(),
                   )
               }
   
               MapView(
                   modifier = Modifier.fillMaxSize(),
                   arcGISMap = map,
   
                   graphicsOverlays = graphicsOverlays
   
               )
   
           }
   
       }
   
   }
   
   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)
   
   }
   
   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
   }
   
   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()
       }
   
   }
   4 collapsed lines
   
   fun showMessage(context: Context, message: String) {
       Toast.makeText(context, message, Toast.LENGTH_LONG).show()
   }