Add layers to a map (offline) | ArcGIS for Developers

ArcGIS DevLabs Qt 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 be productive when their network connectivity is poor or offline. The map package is a file 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 your development environment. Please review the install and setup instructions if you have not done this.

Prepare your data

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

Steps

Create a new ArcGIS Runtime App Qt Creator Project

Start Qt Creator.
Choose File > New File or Project and select the ArcGIS project template for ArcGIS Runtime 100.0.0 Qt Quick app. Give your app a name. For this lab we chose add-layers-to-a-map-offline, but you can choose any name that suits you. Also select the location where your project files should reside on your system. Select Continue.

You may have several selections for the ArcGIS project type. Be sure to select ArcGIS Runtime 100.0.0 Qt Quick app since we are constructing a QML project.
On the Define Project Details dialog, leave the settings as suggested. Select Continue.

You can change the project description to be something more suitable to the project you are building, but this is optional.

You can select any basemap, but we are going to change that as part of this lab. The map will load from the map package.

Do not change the 3D options as they will conflict with the lab we are building here.
On the Kit Selection dialog, check the kits you previously setup when you installed the SDK. Select Continue.
Verify your selections and select Done.

Load your map package on to your device

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

For mobile devices, there are many ways to load a file - called "sideloading". You can use the USB cable with adb or Android File Transfer, include it in the app bundle on iOS, email the file to yourself, or load it on to an SD card.

Load and display the map package

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.

The QML code you see here was generated by the project template.
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 lab to access the map package file with a device independent path.
```
import Esri.ArcGISExtras 1.1
```
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.

Be sure to set the path to this file to where you loaded it in the prior step.
```
property url dataPath: System.userHomePath + "/data/devlabs-package.mmpk"
```
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
}
```
Add a MobileMapPackage component to load the map package file and then update your MapView to display it.

Add MobileMapPackage after the complete definition of the MapView.

The file path used here may differ depending on how you loaded the file on your device. You may be required to alter the path to the file accordingly.

Loading the map package file is an asynchronous process because you do not want to block the device while the file loads. Therefore you use the signal onLoadStatusChanged to access the map once it is loaded.

If it fails to load the map package we fall back to show an online map.
```
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;
        }
    }
}
```
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

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, change symbology. 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 QMLs FileDialog.