Add layers to a map (offline)

Overview

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

The ArcGIS Runtime SDK for Qt allows you to provide offline maps to your users so they can stay productive when their network connectivity is poor or offline. The map package is created with another tool, such as ArcGIS Pro, and loaded to your user's device.

Before you begin

You must have previously installed the ArcGIS Runtime SDK for Qt and set up the development environment for your operating system.

Prepare your data

Complete the tutorial Prepare your data for offline use. You will use the map package file created in that tutorial for the offline map data required in this tutorial.

Steps

Open the starter app project

1. If you have already completed the Create a starter app tutorial, start Qt Creator and open your starter app project. Otherwise, download and unzip the starter app project solution, and then open it in Qt Creator.

Load your map package on to your device

6. You created a map package in the tutorial Prepare your data for offline use. Load that file on to your device. If you did not complete that tutorial, download the map package we prepared.

Load and display the map package

7. Open the main.qml code file in your project (Resources > qml > qml.qrc > /qml > main.qml). If you followed the prior steps, it should already be open in the IDE.

8. Add a new import statement to import the ArcGISExtras library. You need this to use the System component that defines the userHomePath property you use later in this tutorial to access the map package file with a device independent path.

   import Esri.ArcGISExtras 1.1
   

9. Update the ApplicationWindow QML component with a property holding the path to the map package file. Add this new property immediately after the title property.

   property url dataPath: System.userHomePath + "/data/offline-maps-package.mmpk"
   

10. Update the MapView to remove the template code that loads the map, as your map will no longer load from an online server but instead use the map package. Assign an id to the MapView so you can reference it from other code. You load the map package separately in the next step.

    MapView {
        id: mapView
        anchors.fill: parent
    }
    

11. Add a MobileMapPackage component to load the map package file and then update your MapView to display it.

    MobileMapPackage {
        id: mapPackage
        path: dataPath
    
        Component.onCompleted: {
            mapPackage.load();
        }
    
        onLoadStatusChanged: {
            if (loadStatus === Enums.LoadStatusLoaded) {
                mapView.map = mapPackage.maps[0];
            } else if (loadStatus === Enums.LoadStatusfailedToLoad) {
                mapView.map = fallBackMap;
            }
        }
    }
    

12. Create an online map to use as a fall back in case the map package does not load. This way your app displays a map in case of failure to load the map package.

    Map {
        id: fallBackMap
        BasemapTopographicVector {}
    }
    

Congratulations, you're done!

Your map, as it was designed in ArcGIS Pro, should load and display with the view point centered on the Santa Monica Mountains. Compare your map with our completed solution project.

Challenge

Change map contents

Change map package