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 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.
You must have previously installed ArcGIS AppStudio.
If you completed the Create a starter app tutorial, start ArcGIS AppStudio and then open your starter app project. Otherwise, complete the tutorial now and open the project.
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.
Run ArcGIS AppStudio. Click your Starter app project in the App Gallery, and then click {;} Edit. This will open your project in Qt Creator.
In the Qt Creator Projects window, right-click assets and click Show in Finder. This will open the assets folder.
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.
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"
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"
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
}
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));
}
}
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()
}
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
// }
//}
In the lower left Sidebar, click Run or press Control-R/Command-R to run the app.
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.
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.
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.
Add a map file picker to allow your user to select the map package. Try starting with QML's FileDialog
.