Create an offline app with a mobile map package (3 of 3)

1. Install and setup the ArcGIS Maps SDK for Kotlin on your development machine. Make sure you fulfill the SDK's system requirements.

2. Go to the Display a map tutorial and download the completed solution to get a starter code for this workflow.
   You do not need to create another API key credential.

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

   More info

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

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

      In the <string name="app_name"> element, change the text content to a title that suits your app objective.

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

      Change the value of rootProject.name to a title that suits your app objective.

   4. The UI theme composable in Display a map tutorial was DisplayAMapTheme. Rename the theme composable throughout the tutorial by refactoring DisplayAMapTheme.

      Right-click the function name DisplayAMapTheme and select Refactor -> Rename. Replace the name with a name that suits your app objective.

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

1. Install and setup the ArcGIS Maps SDK for Swift on your development machine. Make sure you fulfill the SDK's system requirements.

2. Go to the Display a map tutorial and download the completed solution to get a starter code for this workflow.
   You do not need to create another API key credential.

1. Install and setup the ArcGIS Maps SDK for Qt on your development machine. Make sure you fulfill the SDK's system requirements.

2. Start Qt Creator.

3. Click File > New File or Project. Under Projects, select ArcGIS.

4. Select the ArcGIS Maps 200.4.0 Qt Quick C++ app project template (or a later version) and click Choose.

   More info

   You may have several selections for the ArcGIS project type. Be sure to select ArcGIS Maps 200.4.0 Qt Quick C++ app (or a later version).

5. In the Project Location dialog, name your project something that fits your scenario, e.g. Display_an_offline_map. Click Next.

6. In the Define Build System dialog, select qmake for your build system. Click Next.

7. In the Define Project Details dialog, give this app a description or leave as is. Leave the rest of this dialog as is.

8. Leave the 3D project box unchecked. At the ArcGIS Online Basemap dropdown menu, select Streets. Then click Next.

9. On the Kit Selection dialog, check the kit(s) you previously set up when you installed the API. You should select a Desktop kit to run this tutorial. Then click Next.

10. At the Project Management dialog, the option to Add as a subproject to root project is only available if you have already created a root project. Ignore this dialog for this tutorial. Click Next.

In Android API level 30, use of scoped storage is mandatory. You can no longer use adb push or the Device Explorer to manually create the required path /sdcard/Android/data/com.example.app/files, to which you will upload the mobile map packageA mobile map package (MMPK) is a standalone file that contains one or more map definitions, including the basemap layers, data layers, layer styles, and pop-up styles for use in offline applications built with ArcGIS Maps SDKs for Native Apps.Learn more. Only the Android OS has the appropriate permissions to do so.

Consequently, this tutorial guides you through the following stages. (1) Build and install the app on a device first, allowing Android OS to create the folders on the device file system.(2) Upload the .mmpk file to that path using Device Explorer. (3) Restart the installed app to display the map from the mobile map package.

You will add a mobile map package (MMPK)A mobile map package (MMPK) is a standalone file that contains one or more map definitions, including the basemap layers, data layers, layer styles, and pop-up styles for use in offline applications built with ArcGIS Maps SDKs for Native Apps.Learn more to your Xcode project.

Once you have the mobile map package:

1. In Xcode's app menu, click File > Add Files to "...".
2. Navigate to and select the .mmpk file, e.g. SantaMonicaParcels.mmpk.
3. Choose Options, select the Copy items if needed checkbox, and ensure the project target is selected in Add to targets. Click Add.

You will add a mobile map package (MMPK)A mobile map package (MMPK) is a standalone file that contains one or more map definitions, including the basemap layers, data layers, layer styles, and pop-up styles for use in offline applications built with ArcGIS Maps SDKs for Native Apps.Learn more to your Qt Creator project.

1. Copy the file SantaMonicaParcels.mmpk to a local path on your hard drive (for example: C:/tutorial_mmpk/SantaMonicaParcels.mmpk). Make a note of this path as you will need supply it later.

Add a mobile map package (MMPK)A mobile map package (MMPK) is a standalone file that contains one or more map definitions, including the basemap layers, data layers, layer styles, and pop-up styles for use in offline applications built with ArcGIS Maps SDKs for Native Apps.Learn more to your Flutter project.

1. In Visual Studio Code, create a new folder: assets. Place the mobile map package file within this folder, for example: assets/SantaMonicaParcels.mmpk.

2. Open pubspec.yml and add an asset entry for the assets folder.

   pubspec.yaml

   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
   flutter:
     uses-material-design: true
   
     assets:
       - assets/
   

1. In the Android tool window, open app > kotlin+java > com.example.app > MainScreen.kt. Expand the code block below, and replace the existing import statements in your project with the imports needed for this tutorial.

   MainScreen.kt

   Expand

   Use dark colors for code blocksCopy

   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
   import com.arcgismaps.mapping.ArcGISMap
   import com.arcgismaps.mapping.BasemapStyle
   import com.arcgismaps.mapping.MobileMapPackage
   import com.arcgismaps.toolkit.geoviewcompose.MapView
   

   Expand

2. Delete code from the Display a map tutorial that will not be used in this workflow.

   Display a Map tutorial

   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
   @Composable
   fun MainScreen() {
       val map = remember {
           createMap()
       }
            Scaffold(
           topBar = { TopAppBar(title = { Text(text = stringResource(id = R.string.app_name)) }) }
       ) {
           MapView(
               modifier = Modifier.fillMaxSize().padding(it),
               arcGISMap = map
           )
       }
   }
   
   fun createMap(): ArcGISMap {
       return ArcGISMap(BasemapStyle.ArcGISTopographic).apply {
           initialViewpoint = Viewpoint(
               latitude = 34.0270,
               longitude = -118.8050,
               scale = 72000.0
           )
       }
   }

3. In the Android tool window, open app > res > values > strings.xml. Change the value of the app_name string to App using a mobile map package.

4. Create a MapViewModel class. Inside it, create properties and an init block as shown in the code below.

   The init block shows a warning message if you have not uploaded the mobile map package to your device file system.

   More info on properties

   • map, which is initialized using the by keyword and a mutable state of ArcGISMap.
   • context for the application context.
   • mobileMapPackageLocalPath, which is the path where the downloaded map will be stored on the file system of your device. It is a string.
   • TAG to pass to the logging functions.
   MapViewModel

   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
   class MapViewModel(
       private val application: Application,
       private val coroutineScope: CoroutineScope,
   ): AndroidViewModel(application) {
   
       var map by mutableStateOf(ArcGISMap(BasemapStyle.ArcGISTopographic))
   
       val context = application.applicationContext
   
       val mobileMapPackageLocalPath by lazy {
           // Get the path that will hold the mobile map package.
           context.getExternalFilesDir(null)?.path + File.separator + getString(
               context,
               R.string.santa_monica_parcels_webmap_offline_mmpk
           )
       }
   
       private val TAG = this.javaClass.name
   
   }

5. In MainScreen, create variables as shown below.

   More info on variables

   • application holds the application context.
   • coroutineScope provides a single coroutine scope for launching new coroutines.
   • mapViewModel instantiates the MapViewModel class.
   MainScreen

   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
   @Composable
   fun MainScreen() {
   
       val application = LocalContext.current.applicationContext as Application
       val coroutineScope = rememberCoroutineScope()
   
       val mapViewModel = remember { MapViewModel(application, coroutineScope) }
   
   }
   

6. In MainScreen, call Scaffold, passing a top bar that displays the name of the app. Inside the content block, call Column, which will hold the map view and a button.

   MainScreen

   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
   @Composable
   fun MainScreen() {
   
       val application = LocalContext.current.applicationContext as Application
       val coroutineScope = rememberCoroutineScope()
   
       val mapViewModel = remember { MapViewModel(application, coroutineScope) }
   
       Scaffold(
           topBar = { TopAppBar(title = { Text(text = stringResource(id = R.string.app_name)) }) }
       ) {
           Column(
               modifier = Modifier
                   .fillMaxSize()
                   .padding(it)
           ) {
   
           }
       }
   
   }
   

7. Inside the content block for Column, call MapView and pass in the map from the map view model.

   MainScreen

   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
       Scaffold(
           topBar = { TopAppBar(title = { Text(text = stringResource(id = R.string.app_name)) }) }
       ) {
           Column(
               modifier = Modifier
                   .fillMaxSize()
                   .padding(it)
           ) {
   
               MapView(
                   modifier = Modifier
                       .fillMaxSize()
                       .weight(1f),
                   arcGISMap = mapViewModel.map
               )
   
           }
       }
   

8. Add a button, providing a callback function as the onClick parameter. The callback invokes displayMapFromMobileMapPackage() in the map view model.

   MainScreen

   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
               MapView(
                   modifier = Modifier
                       .fillMaxSize()
                       .weight(1f),
                   arcGISMap = mapViewModel.map
               )
   
               Button(
                   onClick = {
                       coroutineScope.launch {
                           mapViewModel.displayMapFromMobileMapPackage()
                       }
                   }
   
               ) {
                   Text(text = "Display map from mmpk")
               }
   

9. In the MapViewModel class, create a suspend function named downloadOfflineMapArea(). Inside the function, do the following.

   • Create a MobileMapPackage instance, providing the path to the mobile map package on your device file system.
   • Load the mobile map package.
   • If the load succeeded, get the first map stored in the mobile map package and assign it to the map variable. If the load failed, display an error message.
   MapViewModel

   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
       suspend fun displayMapFromMobileMapPackage() {
           // Load the mobile map package
           val mapPackage = MobileMapPackage(mobileMapPackageLocalPath)
           mapPackage.load().onSuccess {
               map = mapPackage.maps.first()
           }.onFailure { error ->
               showMessage(context, "Failed to load mobile map package: ${error.message}")
           }
       }
   

   Expand

10. (Optional) The code in this workflow displays messages to the user and logs activity in Logcat. Here is a possible implementation.

    MainScreen

    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
        private fun showMessage(context: Context, message: String) {
            Toast.makeText(context, message, Toast.LENGTH_LONG).show()
            Log.i(TAG, message)
        }
    

    Expand

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

    Your app will be built and installed on the Android Virtual Device (AVD) that is currently selected in the Android Studio toolbar. On the AVD, you should see the title App using a mobile map package, an ArcGIS Topographic map zoomed out to world view, and a brief Toast telling you to upload the mobile map package file to your device.

    For this first run, the Display map from mmpk button will be disabled.

Add mobile map package to device and run app again

1. Add the mobile map package (MMPK)A mobile map package (MMPK) is a standalone file that contains one or more map definitions, including the basemap layers, data layers, layer styles, and pop-up styles for use in offline applications built with ArcGIS Maps SDKs for Native Apps.Learn more to your device.

2. In Android Studio, verify that your Android Virtual Device (AVD) is still connected. If it is not, expand More info below.

   More info

   If you already closed the AVD on which you installed your app, then launch the Android Emulator manually.

   1. Click Tools > AVD Manager. In the Android Virtual Device Manager, double-click on the AVD you used before.

3. Display the Device Explorer tool window, which shows the file system on your AVD. Click View > Tool Windows > Device Explorer and wait until Device Manager connects to your AVD and shows the file system tree.

4. Upload the SantaMonicaParcels.mmpk file from your development computer.

   1. In Device Explorer, right-click on the sdcard > Android > data directory and click Synchronize.

   2. Right-click on sdcard > Android > data > com.example.app > files and click Upload. Navigate to the SantaMonicaParcels.mmpk file on your development computer. Then click OK.

5. Shut down the app running on your AVD.

6. Run the app a second time by clicking Run > Run > app.

   The Display map from mmpk button is now enabled. Click it to display the first map from the mobile map package.

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

2. Update the map variable to initialize a simple map object. Setting a basemap and initial viewpoint is not needed in this scenario.

   ContentView.swift

   Use dark colors for code blocksCopy

   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
   struct CreateAppMPKView: View {
   
       @State private var map = Map()
   
       var body: some View {
   
           MapView(map: map)
   
       }
   
   }

3. Create a function called loadMobileMapPackage() to set the MobileMapPackage referencing the mobile map packageA mobile map package (MMPK) is a standalone file that contains one or more map definitions, including the basemap layers, data layers, layer styles, and pop-up styles for use in offline applications built with ArcGIS Maps SDKs for Native Apps.Learn more you added to the project.

   More info

   The file name must match exactly. The name reflects the SantaMonicaTrails.mmpk added to the bundle.

   If you sideloadSideloading is the process of deploying a file or package to a device without using a network.Learn more or download the .mmpk file, you should provide the full file URL to the file's location on the device.

   ContentView.swift

   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
   struct CreateAppMPKView: View {
   
       @State private var map = Map()
   
       private func loadMobileMapPackage() async throws {
   
           guard let mobileMapPackage = MobileMapPackage(name: "SantaMonicaParcels", bundle: .main) else { return }
   
       }
   
   }

4. Load the MobileMapPackage and check that it loads without error. Set the first mapA map is a collection of layers that are displayed in 2D. It is typically composed of a basemap layer and data layers.Learn more in the package to the @State map.

   More info

   An MobileMapPackage can contain many maps in a maps array.

   Loading the mobile map packageA mobile map package (MMPK) is a standalone file that contains one or more map definitions, including the basemap layers, data layers, layer styles, and pop-up styles for use in offline applications built with ArcGIS Maps SDKs for Native Apps.Learn more is an asynchronous process. The file is read on a thread that does not block the UI.

   ContentView.swift

   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
           guard let mobileMapPackage = MobileMapPackage(name: "SantaMonicaParcels", bundle: .main) else { return }
   
           try await mobileMapPackage.load()
           guard let loadedMap = mobileMapPackage.maps.first else { return }
   

5. Lastly, as the MapView is being built, use the .task view modifier to asynchronously call the loadMobileMapPackage().

   ContentView.swift

   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
       var body: some View {
   
           MapView(map: map)
   
               .task {
                   do {
                       try await loadMobileMapPackage()
                   } catch {
                       print(error)
                   }
               }
   
       }
   

6. Press Command + R to run the app.

1. In the Edit tab, double-click Headers > Display_an_mmpk.h to open the file. Remove the code that forward declares the Map class. This is no longer needed because the mobile map package (MMPK) will contain the map.

   Display_an_mmpk.h

   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
   namespace Esri::ArcGISRuntime {
   
   class Map;
   

2. Remove the code that creates the Map pointer variable m_map.

   Display_an_mmpk.h

   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
   private:
       Esri::ArcGISRuntime::MapQuickView* mapView() const;
       void setMapView(Esri::ArcGISRuntime::MapQuickView* mapView);
   
       Esri::ArcGISRuntime::Map* m_map = nullptr;
   

3. In the Edit tab, double-click Sources > Display_an_mmpk.cpp to open the file. Remove the lines #include "Map.h" and #include "MapTypes.h".

   Display_an_mmpk.cpp

   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
   
   #include "Map.h"
   #include "MapTypes.h"
   
   #include "MapQuickView.h"
   

4. Remove the comma after QObject(parent) and then modify the constructor to remove initialization with BasemapStyle and the Map. (Note that the BasemapStyle configured for your project may be different than that shown here.)

   Display_an_mmpk.cpp

   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
   using namespace Esri::ArcGISRuntime;
   
   Display_an_mmpk::Display_an_mmpk(QObject* parent /* = nullptr */):
   
       QObject(parent),
   
       m_map(new Map(BasemapStyle::ArcGISStreets, this))
   

5. Remove the line of code that assigns the variable m_map to m_mapView.

   Display_an_mmpk.cpp

   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
   // Set the view (created in QML)
   void Display_an_mmpk::setMapView(MapQuickView* mapView)
   {
       if (!mapView || mapView == m_mapView)
       {
           return;
       }
   
       m_mapView = mapView;
   
       m_mapView->setMap(m_map);
   
   }

6. Under private, declare the new function you will implement to load the mobile map package. Then save and close the file.

   Display_an_mmpk.h

   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
   private:
       Esri::ArcGISRuntime::MapQuickView* mapView() const;
       void setMapView(Esri::ArcGISRuntime::MapQuickView* mapView);
   
       void setupMapFromMmpk();
   

7. Add #include statements for the MobileMapPackage and Error classes.

   Display_an_mmpk.cpp

   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
   #include "Display_an_mmpk.h"
   
   #include "MapQuickView.h"
   
   #include "MobileMapPackage.h"
   #include "Error.h"
   

8. Add a call to a function that reads the map from the mobile map package. You will implement this function in the next step.

   Display_an_mmpk.cpp

   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
   // Set the view (created in QML)
   void Display_an_mmpk::setMapView(MapQuickView* mapView)
   {
       if (!mapView || mapView == m_mapView)
       {
           return;
       }
   
       m_mapView = mapView;
   
       setupMapFromMmpk();
   
       emit mapViewChanged();
   

9. Add code to implement setupMapFromMmpk(). This function defines the path to the MMPK file, instantiates the mobile map package using the MobileMapPackage constructor, loads the mobile map package, and once loaded, sets the first map in the mobile map package to the MapView. This also checks that the MMPK file was loaded correctly.

   Display_an_mmpk.cpp

   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
       setupMapFromMmpk();
   
       emit mapViewChanged();
   
   }
   
   void Display_an_mmpk::setupMapFromMmpk()
   {
       // Create a new mobile map package using the path to an .mmpk file on the device.
       MobileMapPackage* m_mobileMapPackage = new MobileMapPackage(
       "<PATH_TO_MMPK_FILE>/SantaMonicaParcels.mmpk", this);
   
       // Connect to the mobile map package's done loading event which returns the mobile map package.
       connect(m_mobileMapPackage, &MobileMapPackage::doneLoading, this, [m_mobileMapPackage, this]
               (Error error)
       {
           // Test if there are any errors loading the .mmpk file and display a message to the
           // user if there is one.
           if (!error.isEmpty())
           {
               qDebug() << "Error:" << error.message()<< error.additionalMessage();
               return;
           }
   
           // Get the QList of maps in the mobile map package.
           QList<Map*> qListMaps = m_mobileMapPackage->maps();
   
           // Get the first map in the QList of maps.
           Map* mapFirst = qListMaps.at(0);
   
           // Set the map view member variable to the first map.
           m_mapView->setMap(mapFirst);
       });
   
       // Call the mobile map package load event. This invokes the done loading code above.
       m_mobileMapPackage->load();
   }
   More info

   A MobileMapPackage can contain many maps in a Maps list. Loading the mobile map packageA mobile map package (MMPK) is a standalone file that contains one or more map definitions, including the basemap layers, data layers, layer styles, and pop-up styles for use in offline applications built with ArcGIS Maps SDKs for Native Apps.Learn more is an asynchronous process. The file is read on a thread that does not block the UI.

10. Press Ctrl + R to run the app.

1. You will need to access local project files. Add the path_provider package to the project as a dependency. In the Visual Studio Code menu bar, select Terminal > New Terminal and run flutter pub add path_provider.

2. Open the lib > main.dart file to import the packages. Import path_provider and the core dependencies, dart.io and services, into the main.dart file.

   main.dart

   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
   
   import 'dart:io';
   import 'package:path_provider/path_provider.dart';
   
   import 'package:flutter/services.dart';
   
   import 'package:arcgis_maps/arcgis_maps.dart';
   import 'package:flutter/material.dart';
   
   
   void main() {
   

3. After the build(), create an asynchronous method to copy the mobile map package from the assets folder. The method should take the asset path and file name as String parameters and return the file path as a Future<String>.

   main.dart

   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
     Future<String> copyMmpkFromAssets(String assetPath, String filename) async {
   
       return filePath;
     }
   
   

4. In the method, load the asset as byte data, get a writable directory, and write the byte data to a file.

   main.dart

   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
     Future<String> copyMmpkFromAssets(String assetPath, String filename) async {
   
       // Load asset as byte data.
       final byteData = await rootBundle.load(assetPath);
   
       // Get a writable directory.
       final dir = await getApplicationDocumentsDirectory();
       final filePath = '${dir.path}/$filename';
   
       // Write the byte data to a file.
       final file = File(filePath);
       await file.writeAsBytes(byteData.buffer.asUint8List());
   
       return filePath;
     }
   
   

5. In onMapViewReady(), denote the method as asynchronous.

   main.dart

   Use dark colors for code blocksCopy

   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
       return filePath;
     }
   
   
     void onMapViewReady() async {
   

6. Replace all the code contained in onMapViewReady(). Instead use the previously defined method to create and load a mobile map package.

   main.dart

   Use dark colors for code blocksCopy

   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
     void onMapViewReady() async {
   
       // Load the local mobile map package.
       final mmpkFile = await copyMmpkFromAssets(
         'assets/file.mmpk',
         'file.mmpk',
       );
       final mmpk = MobileMapPackage.withFileUri(Uri(path: mmpkFile));
   
       await mmpk.load();
   

7. If the mobile map package contains an array of maps, display the first map.

   main.dart

   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
       await mmpk.load();
   
       if (mmpk.maps.isNotEmpty) {
         // Get the first map in the mobile map package and set to the map view.
         _mapViewController.arcGISMap = mmpk.maps.first;
       }
   

8. Run the app. Expand More info for instructions.

   More info

   1. In the Visual Studio Code's terminal, run:

      Use dark colors for code blocksCopy

      1
        flutter pub upgrade

   2. Run:

      Use dark colors for code blocksCopy

      1
        dart run arcgis_maps install

   3. Make sure you have an Android emulator, iOS simulator or physical device configured and running.

   4. In the menu bar, select Run > Run Without Debugging.

   5. An area of the map will start downloading automatically upon app launch. Select View > Debug Console to see the download progress.

   Once the map has finished downloading, you will see an area of Santa Monica near the beach, zoomed in closer than the original view point.