Skip To Content ArcGIS for Developers Sign In Dashboard

Overview

You will learn: how to build an app to load a basemap and feature layers from a mobile map package (.mmpk) file.

Offline maps allow users to load basemaps and layers when their network connectivity is poor or offline. Mobile map packages can be created in ArcGIS Pro and loaded in your app with the MobileMapPackage class.

In this tutorial, you will load a mobile map package file so you can view the basemap and layers while the application is running offline and fully disconnected from the network.

Before you begin

You must have previously installed AppStudio for ArcGIS.

Open the starter app project

If you completed the Create a starter app tutorial, start AppStudio and then open your starter app project. Otherwise, complete the tutorial now and open the project.

Get the offline map data

You will need a mobile map package file (.mmpk) to complete this tutorial. You can download the mobile map package we prepared or you can learn how to create your own in the Prepare your data for offline use.

Steps

Add the mobile map package to the project

  1. Run AppStudio. Click your Starter app project in the App Gallery, and then click {;} Edit. This will open your project in Qt Creator.

  2. In the Qt Creator Projects window, right-click assets and click Show in Finder. This will open the assets folder.

  3. Copy the offline-maps-package.mmpk mobile map package file into the assets folder. If you don't have the file you can download it here.

  4. In the Projects window, double-click MyApp > MyApp.qmlproject to open it in the editor. Update the Files section to include mmpk files.

    Files {
        directory: "."
        recursive: true
        // *** UPDATE ***
        filter: "*.json;*.html;*.txt;*.mmpk"
    

Load the mobile map package

  1. In the Projects window, double-click MyApp > MyApp.qml to open it in the editor. Add the following code to declare a property with the URL of the mmpk file.

     property real scaleFactor: AppFramework.displayScaleFactor
    
     // *** ADD ***
     property string assetsPath: "./assets/"
     property string mapPackageFileName: "offline-maps-package.mmpk"
    
  2. Below the properties, declare a MobileMapPackage QML type. Set its path to the location of the map package file added in the previous step.

     property string mapPackageFileName: "offline-maps-package.mmpk"
    
     // *** ADD ***
     MobileMapPackage {
         id: mmpk
         path: assetsPath + mapPackageFileName
     }
    
  3. Map package files can be large and take some time to unpack and load. In the MobileMapPackage declaration, add a onLoadStatusChanged handler and use the loadable pattern to asynchronously load the map package and verify its content before assigning it to the map.

     MobileMapPackage {
         id: mmpk
         path: assetsPath + mapPackageFileName
    
         // *** ADD ***
         // wait for the mobile map package to load
         onLoadStatusChanged: {
             // only proceed once the map package is loaded
             if (loadStatus !== Enums.LoadStatusLoaded) {
                 return;
             }
    
             if (mmpk.maps.length < 1) {
                 // map package loaded but has no maps
                 return;
             }
    
             // set the map view's map to the first map in the mobile map package
             mapView.map = mmpk.maps[0];
         }
    
         onErrorChanged: {
             console.log("Mobile Map Package Error: %1 %2".arg(error.message).arg(error.additionalMessage));
         }
     }
    
  4. In the code editor, scroll down to the MapView declaration. Add a Component.onCompleted handler to initiate the load of the map package.

     MapView {
         id:mapView
    
         // *** ADD ***
         Component.onCompleted: {
             mmpk.load()
         }
    

Remove the online map

  1. Scroll down to the Map declaration. Since the map will load from the map package file, remove the entire Map declaration.

    // *** REMOVE ***
    // add a basemap
    //Map {
    //    id:map
    //    BasemapTopographicVector {}
    //    initialViewpoint: ViewpointCenter {
    //        id:initialViewpoint
    //        center: Point {
    //            x: -118.80543                                        // Longitude
    //            y: 34.02700                                          // Latitude
    //            spatialReference: SpatialReference { wkid: 4326 }    // WGS84
    //        }
    //        targetScale: 300000
    //    }
    //}
    
  2. In the lower left Sidebar, click Run or press Control-R/Command-R to run the app.

Congratulations, you're done!

Your should see your map display the data in the Santa Monica Mountains area that was packaged in the .mmpk file. Compare your map with our completed solution project.

Challenge

Run the app disconnected from the network

In your computer settings, disable your network and wifi adaptor to completely disconnect from the network. Run your application again and zoom in and out to view the extent of the offline data.

Change map contents

Learn how you can change many elements of your map without writing any code. Return to ArcGIS Pro and alter your map: change the extent, add or remove layers, and change the symbols. Republish your map package and load it on your device.

Change map package

Add a map file picker to allow your user to select the map package. Try starting with QML's FileDialog.