Workflow: Create an app using a mobile map package

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

2. Follow the Display a map tutorial or download the completed solution to get a starter code for this workflow.

3. Open the .sln file in Visual Studio.

   The Visual Studio solution, project, and the namespace for all classes currently use the name DisplayAMap. Follow the steps below if you prefer the name to reflect the current tutorial. These steps are not required, your code will still work if you keep the original name.

4. Update the name for the solution and the project.

   • In Visual Studio, in the Solution Explorer, right-click the solution name and choose Rename. Provide the new name for your solution.
   • In the Solution Explorer, right-click the project name and choose Rename. Provide the new name for your project.

5. Rename the namespace used by classes in the project.

   • In the Solution Explorer, expand the project node.
   • Double-click MapViewModel.cs in the Solution Explorer to open the file.
   • In the MapViewModel class, double-click the namespace name (DisplayAMap) to select it, and then right-click and choose Rename....
   • Provide the new name for the namespace.
   • Click Apply in the Rename: DisplayAMap window that appears in the upper-right of the code window. This will rename the namespace throughout your project.

6. Build the project.

   • Choose Build > Build solution (or press F6).

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

2. Complete the Display a map tutorial. Or download and unzip the Display a map solution in a new folder.

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. Follow the Display a map tutorial or download the completed solution to get a starter code for this workflow.

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.

You will add a mobile map package (MMPK) to your Visual Studio project. To get an .mmpk file, you can complete the Prepare the map and data step or download its solution.

1. From the Visual Studio Project menu, choose Add > Existing item ....

2. Navigate to the folder that contains your mobile map package. Change the file type in the dialog to All files (*.*), choose SantaMonicaParcels.mmpk, then click Add to add it to the project.

3. In the Visual Studio Solution Explorer, select SantaMonicaParcels.mmpk. In the Properties window, set the following properties of the file.

   • Build Action: Content
   • Copy to Output Directory: Copy always

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 package. 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) to your Xcode project. To get an .mmpk file, you can complete the Prepare the map and data step or download its solution.

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) to your Qt Creator project. To get an .mmpk file, you can complete the Prepare the map and data step or download its solution.

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.

1. In the Visual Studio > Solution Explorer, double-click MapViewModel.cs to open the file.

2. Add additional required using statements at the top of the class.

   MapViewModel.cs

   Use dark colors for code blocks

   13 13 13 13 13 13 13 13 13 13 13 13 13 14 15 16 17 18 19 20 21 22 23 24 24 24 24 24 24 24 24 24 24 24 24 24 24 24 24 24 24 24 24 24 24 24 24 24 24 24 24 24 24 24 24 24 24 24 24 24 24 24 24 24 24 24 24 24 24 24 24 24 24 24 24 24 24

   Add line.Add line.

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20
   21
   22
   23
   24
   25
   26
   27
   28
   29
   30
   31
   32
   33
   34
   35
   36
   37
   38
   39
   40
   41
   42
   43
   44
   45
   46
   47
   48
   49
   50
   51
   52
   53
   54
   55
   56
   57
   58
   59
   60
   61
   62
   63
   64
   65
   66
   67
   68
   69
   70
   71
   72
   73
   74
   75
   76
   77
   using System;
   using System.Collections.Generic;
   using System.Text;
   
   using Esri.ArcGISRuntime.Geometry;
   using Esri.ArcGISRuntime.Mapping;
   using System.ComponentModel;
   using System.Runtime.CompilerServices;
   
   using System.Linq;
   using System.Threading.Tasks;
   

3. In the MapViewModel class, remove all the existing code in the SetupMap() function.

4. Modify the signature of the SetupMap() function to include the async keyword and to return Task rather than void.

   MapViewModel.cs

   Expand

   Use dark colors for code blocks

   57 57 57 57 57 57 57 57 57 57 57 57 57 57 57 57 57 57 57 57 57 57 57 57 57 57 57 57 57 57 57 57 57 57 57 57 57 57 57 57 57 57 57 57 57 57 57 57 57 57 57 57 57 57 57 57 57 58 59 60 60 60 60 60 60 60 60 60 60 60 60 60 61 61 61 61 61

   Change lineChange line

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20
   21
   22
   23
   24
   25
   26
   27
   28
   29
   30
   31
   32
   33
   34
   35
   36
   37
   38
   39
   40
   41
   42
   43
   44
   45
   46
   47
   48
   49
   50
   51
   52
   53
   54
   55
   56
   57
   58
   59
   60
   61
   62
   63
   64
   65
   66
   67
   68
   69
   70
   71
   72
   73
   74
   75
   76
   77
           private async Task SetupMap()
           {
   
           }
   

   Expand
   More info

   When calling methods asynchronously inside a function (using the await keyword), the async keyword is required in the signature.

   Although a void return type would continue to work, this is not considered best practice. Exceptions thrown by an async void method cannot be caught outside of that method, are difficult to test, and can cause serious side effects if the caller is not expecting them to be asynchronous. The only circumstance where async void is acceptable is when using an event handler, such as a button click.

   See the Microsoft documentation for more information about Asynchronous programming with async and await.

5. (Optional) Modify the call to SetupMap() (in the MapViewModel constructor) to avoid a compilation warning. After changing SetupMap() to an asynchronous method, the following warning appears in the Visual Studio Error List.

   Use dark colors for code blocksCopy

   1
   2
   Because this call is not awaited, execution of the current method continues before the call is
   completed. Consider applying the 'await' operator to the result of the call.

   Because your code does not anticipate a return value from this call, the warning can be ignored. Your code will run despite the warning. But if you want to be more specific about your intentions with this call and to address the warning, add the following code to store the return value in a discard.

   MapViewModel.cs

   Expand

   Use dark colors for code blocks

   32 32 32 32 32 32 32 32 32 32 32 32 32 32 32 32 32 32 32 32 32 32 32 32 32 32 32 32 32 32 32 32 33 34 35 36 37 38 38 38 38 38 38 38 38 38 38 38 38 38 38 38 38 38 38 38 38 38 38 38 38 38 38 38 38 38 38 38 38 38 38 38 38 38 38 38 38

   Change line

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20
   21
   22
   23
   24
   25
   26
   27
   28
   29
   30
   31
   32
   33
   34
   35
   36
   37
   38
   39
   40
   41
   42
   43
   44
   45
   46
   47
   48
   49
   50
   51
   52
   53
   54
   55
   56
   57
   58
   59
   60
   61
   62
   63
   64
   65
   66
   67
   68
   69
   70
   71
   72
   73
   74
   75
   76
   77
           public MapViewModel()
           {
   
               _ = SetupMap();
   
           }
   

   Expand
   More info

   From the Microsoft documentation:

   "[Discards] are placeholder variables that are intentionally unused in application code. Discards are equivalent to unassigned variables; they don't have a value. A discard communicates intent to the compiler and others that read your code: You intended to ignore the result of an expression."

6. Add the following code to the SetupMap() function. This code defines the path to the mobile map package relative to the app, creates the mobile map package using the MobileMapPackage constructor, loads the mobile map package asynchronously, and adds the first map in the mobile map package to the MapView.

   Expand

   Use dark colors for code blocks

   60 60 60 60 60 60 60 60 60 60 60 60 60 60 60 60 60 60 60 60 60 60 60 60 60 60 60 60 60 60 60 60 60 60 60 60 60 60 60 60 60 60 60 60 60 60 60 60 60 60 60 60 60 60 60 60 60 60 60 60 61 62 63 64 65 66 67 68 69 70 71 71 71 71 71 71 71

   Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20
   21
   22
   23
   24
   25
   26
   27
   28
   29
   30
   31
   32
   33
   34
   35
   36
   37
   38
   39
   40
   41
   42
   43
   44
   45
   46
   47
   48
   49
   50
   51
   52
   53
   54
   55
   56
   57
   58
   59
   60
   61
   62
   63
   64
   65
   66
   67
   68
   69
   70
   71
   72
   73
   74
   75
   76
   77
               // Define the path to the mobile map package.
               string pathToMobileMapPackage = System.IO.Path.Combine(Environment.CurrentDirectory, @"SantaMonicaParcels.mmpk");
   
               // Instantiate a new mobile map package.
               MobileMapPackage santaMonicaParcels_MobileMapPackage = new MobileMapPackage(pathToMobileMapPackage);
   
               // Load the mobile map package.
               await santaMonicaParcels_MobileMapPackage.LoadAsync();
   
               // Show the first map in the mobile map package.
               this.Map = santaMonicaParcels_MobileMapPackage.Maps.FirstOrDefault();
   

   Expand
   More info

   A MobileMapPackage can contain many maps in a Maps array.

   Loading the mobile map package is an asynchronous process. The file is read on a thread that does not block the UI.

7. Click Debug > Start Debugging (or press F5 on the keyboard) to run the app.

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 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
   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 sytem.
   • 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) to your device. To get an .mmpk file, you can complete the Prepare the map and data step or download its solution.

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 blocks

   18 18 18 18 18 18 18 18 18 18 18 18 18 18 18 18 18 18 19 20 21 22 23 24 24 24 24 24 24 25 26 27 28 29 30 30 30 30 30 30 30 30 30 31 32 33

   Change line

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20
   21
   22
   23
   24
   25
   26
   27
   28
   29
   30
   31
   32
   33
   34
   35
   36
   37
   38
   39
   40
   41
   42
   43
   44
   45
   46
   struct ContentView: View {
   
       @State private var map = Map()
   
       private func loadMobileMapPackage() async throws {
   
       }
   
       var body: some View {
   
           MapView(map: map)
   
       }
   
   }

3. Create a function called loadMobileMapPackage() to set the MobileMapPackage referencing the mobile map package 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 sideload 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

   18 18 18 18 18 18 18 18 18 18 18 18 18 18 18 18 18 18 19 20 21 22 23 24 25 26 26 26 26 27 28 28 28 28 28 28 28 28 28 28 28 28 28 28 28 29

   Add line.Add line.

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20
   21
   22
   23
   24
   25
   26
   27
   28
   29
   30
   31
   32
   33
   34
   35
   36
   37
   38
   39
   40
   41
   42
   43
   44
   45
   46
   struct ContentView: 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 map in the package to the @State map.

   More info

   An MobileMapPackage can contain many maps in a maps array.

   Loading the mobile map package 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

   24 24 24 24 24 24 24 24 24 24 24 24 24 24 24 24 24 24 24 24 24 24 24 24 25 26 27 28 28 28 28 28 28 28 28 28 28 28 28 28 28 28 28 28 28 28

   Add line.Add line.

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20
   21
   22
   23
   24
   25
   26
   27
   28
   29
   30
   31
   32
   33
   34
   35
   36
   37
   38
   39
   40
   41
   42
   43
   44
   45
   46
           guard let mobileMapPackage = MobileMapPackage(name: "SantaMonicaParcels", bundle: .main) else { return }
   
           try await mobileMapPackage.load()
           guard let map = 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

   31 31 31 31 31 31 31 31 31 31 31 31 31 31 31 31 31 31 31 31 31 31 31 31 31 31 31 31 31 31 31 32 33 34 35 36 37 38 39 40 41 42 43 44 44 44

   Add line.Add line.Add line.Add line.Add line.Add line.Add line.

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20
   21
   22
   23
   24
   25
   26
   27
   28
   29
   30
   31
   32
   33
   34
   35
   36
   37
   38
   39
   40
   41
   42
   43
   44
   45
   46
       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

   12 12 12 12 12 12 12 12 12 12 12 12 13 14 15 16 17 18 18 18 18 18 18 18 18 18 18 18 18 18 18 18 18 18 18 18 18 18 18 18 18 18 18 18 18 18 18 18 18

   Remove line

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20
   21
   22
   23
   24
   25
   26
   27
   28
   29
   30
   31
   32
   33
   34
   35
   36
   37
   38
   39
   40
   41
   42
   43
   44
   45
   46
   47
   48
   49
   #ifndef DISPLAY_AN_MMPK_H
   #define DISPLAY_AN_MMPK_H
   
   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

   39 39 39 39 39 39 39 39 39 39 39 39 39 39 39 39 39 39 39 39 39 39 39 39 39 39 39 39 39 39 39 39 39 39 39 39 39 39 39 40 41 42 43 44 44 44 44 44 44

   Remove line

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20
   21
   22
   23
   24
   25
   26
   27
   28
   29
   30
   31
   32
   33
   34
   35
   36
   37
   38
   39
   40
   41
   42
   43
   44
   45
   46
   47
   48
   49
   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

   12 12 12 12 12 12 12 12 12 12 12 12 13 14 15 16 17 18 18 18 18 18 18 18 18 18 18 18 18 18 18 18 18 18 18 18 18 18 18 18 18 18 18 18 18 18 18 18 18 18 18 18

   Remove lineRemove line

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20
   21
   22
   23
   24
   25
   26
   27
   28
   29
   30
   31
   32
   33
   34
   35
   36
   37
   38
   39
   40
   41
   42
   43
   44
   45
   46
   47
   48
   49
   50
   51
   52
   #include "Display_an_mmpk.h"
   
   #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

   19 19 19 19 19 19 19 19 19 19 19 19 19 19 19 19 19 19 19 20 21 22 23 24 25 26 26 26 26 26 26 26 26 26 26 26 26 26 26 26 26 26 26 26 26 26 26 26 26 26 26 26

   Change lineRemove line

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20
   21
   22
   23
   24
   25
   26
   27
   28
   29
   30
   31
   32
   33
   34
   35
   36
   37
   38
   39
   40
   41
   42
   43
   44
   45
   46
   47
   48
   49
   50
   51
   52
   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

   52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 53 54 55 56 57 58 59 60 61 62 63 63 63 63 63 63

   Remove line

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20
   21
   22
   23
   24
   25
   26
   27
   28
   29
   30
   31
   32
   33
   34
   35
   36
   37
   38
   39
   40
   41
   42
   43
   44
   45
   46
   47
   48
   49
   50
   51
   52
   53
   54
   55
   56
   57
   58
   59
   60
   61
   62
   63
   64
   65
   66
   67
   68
   // Set the view (created in QML)
   void Display_a_map::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

   37 37 37 37 37 37 37 37 37 37 37 37 37 37 37 37 37 37 37 37 37 37 37 37 37 37 37 37 37 37 37 37 37 37 37 37 37 38 39 40 41 42 42 42 42 42 42

   Add line.

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20
   21
   22
   23
   24
   25
   26
   27
   28
   29
   30
   31
   32
   33
   34
   35
   36
   37
   38
   39
   40
   41
   42
   43
   44
   45
   46
   47
   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

   12 12 12 12 12 12 12 12 12 12 12 12 13 14 15 16 17 18 18 18 18 18 18 18 18 18 18 18 18 18 18 18 18 18 18 18 18 18 18 18 18 18 18 18 18 18 18 18 18 18 18 18 18 18 18 18 18 18 18 18 18 18 18 18 18 18 18 18 18 18 18 18 18 18 18 18 18

   Add line.Add line.

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20
   21
   22
   23
   24
   25
   26
   27
   28
   29
   30
   31
   32
   33
   34
   35
   36
   37
   38
   39
   40
   41
   42
   43
   44
   45
   46
   47
   48
   49
   50
   51
   52
   53
   54
   55
   56
   57
   58
   59
   60
   61
   62
   63
   64
   65
   66
   67
   68
   69
   70
   71
   72
   73
   74
   75
   76
   77
   #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

   36 36 36 36 36 36 36 36 36 36 36 36 36 36 36 36 36 36 36 36 36 36 36 36 36 36 36 36 36 36 36 36 36 36 36 36 37 38 39 40 41 42 43 44 45 46 47 48 49 49 49 49 49 49 49 49 49 49 49 49 49 49 49 49 49 49 49 49 49 49 49 49 49 49 49 49 49

   Add line.

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20
   21
   22
   23
   24
   25
   26
   27
   28
   29
   30
   31
   32
   33
   34
   35
   36
   37
   38
   39
   40
   41
   42
   43
   44
   45
   46
   47
   48
   49
   50
   51
   52
   53
   54
   55
   56
   57
   58
   59
   60
   61
   62
   63
   64
   65
   66
   67
   68
   69
   70
   71
   72
   73
   74
   75
   76
   77
   // 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

   46 46 46 46 46 46 46 46 46 46 46 46 46 46 46 46 46 46 46 46 46 46 46 46 46 46 46 46 46 46 46 46 46 46 46 46 46 46 46 46 46 46 46 46 46 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

   Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20
   21
   22
   23
   24
   25
   26
   27
   28
   29
   30
   31
   32
   33
   34
   35
   36
   37
   38
   39
   40
   41
   42
   43
   44
   45
   46
   47
   48
   49
   50
   51
   52
   53
   54
   55
   56
   57
   58
   59
   60
   61
   62
   63
   64
   65
   66
   67
   68
   69
   70
   71
   72
   73
   74
   75
   76
   77
       setupMapFromMmpk();
   
       emit mapViewChanged();
   
   }
   
   void Display_an_mmpk::setupMapFromMmpk()
   {
     // Instantiate a MobileMapPackage object and establish the path to the MMPK file.
     MobileMapPackage* m_mobileMapPackage = new MobileMapPackage(
       "<PATH_TO_MMPK_FILE>/SantaMonicaParcels.mmpk", this);
   
     // Use connect to signal when the package is done loading so that m_mapView can be
     // set to the first map (0). Check that the mmpk file has loaded correctly.
     connect(m_mobileMapPackage, &MobileMapPackage::doneLoading, this,
       [m_mobileMapPackage, this](Error error)
     {
       // Check that the mmpk file has loaded correctly
       if (!error.isEmpty())
       {
         qDebug() << "Error:" << error.message()<< error.additionalMessage();
         return;
       }
   
       // Get the first map in the list of maps, and set the map on the map view to display.
       // This could be set to any map in the list.
       m_mapView->setMap(m_mobileMapPackage->maps().at(0));
     });
   
     m_mobileMapPackage->load();
   }
   More info

   A MobileMapPackage can contain many maps in a Maps list. Loading the mobile map package 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.