Display a map from a mobile map package

Learn how to display a map from a mobile map package (MMPK).

In this tutorial you will display a fully interactive map from a mobile map package (MMPK). The map contains a basemap layer and data layers and does not require a network connection.

Prerequisites

Steps

Open the Xcode project

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

2. Open the .xcodeproj file in Xcode.

Add a mobile map package

You will add a mobile map package (MMPK) to your Xcode project. To get an .mmpk file, you can complete the Create a mobile map package tutorial 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. If you used the tutorial solution, it will be named MahouRivieraTrails.mmpk.
3. Choose Show Options, select the Copy items if needed checkbox, and ensure the project target is selected in Add to targets. Click Add.

Open the mobile map package and display a map

Select a map from the maps contained in a mobile map package, and display it in a map view. Use the MobileMapPackage class to access the mobile map package, and load it to read its contents.

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

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

   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
   struct ContentView: 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 package you added to the project.

   More info

   The file name must match exactly. The name reflects the MahouRivieraTrails.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

   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 27 28 28 28 28 28 28 28 28 28 28 28 28 28 28 28 29

   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
   struct ContentView: View {
   
       @State private var map = Map()
   
       private func loadMobileMapPackage() async throws {
           guard let mobileMapPackage = MobileMapPackage(name: "MahouRivieraTrails", 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

   23 23 23 23 23 23 23 23 23 23 23 23 23 23 23 23 23 23 23 23 23 23 23 24 25 26 27 28 29 30 31 31 31 31 31 31 31 31 31 31 31 31 31 31 31 31 31

   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
       private func loadMobileMapPackage() async throws {
           guard let mobileMapPackage = MobileMapPackage(name: "MahouRivieraTrails", bundle: .main) else { return }
   
           try await mobileMapPackage.load()
           guard let map = mobileMapPackage.maps.first else { return }
           self.map = map
   
       }
   

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

   ContentView.swift

   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 39 40 41 42 43 44 45 45 45

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

   Expand

6. Press Command + R to run the app.

   More info

   If you are using the Xcode simulator your system must meet these minimum requirements: macOS Monterey 12.5, Xcode 15, iOS 17. If you are using a physical device, then refer to the system requirements.

You should see a map of trail heads, trails, and parks for the area south of the Santa Monica mountains. You will be able to pinch (to zoom and rotate), drag, and double-tap the map view to explore the map.

What's next?

Learn how to use additional API features, ArcGIS location services, and ArcGIS tools in these tutorials: