Add layers to a map (offline)

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

Change map contents

Change map package