Display a map from a mobile map package

Before starting this tutorial:

1. You need an ArcGIS Location Platform or ArcGIS Online account.

2. Your system meets the system requirements.

3. You need an IDE for Flutter - we recommend VS Code.

Option 1: Develop the code

1. Open the project you created by completing the Display a map tutorial.

2. Continue with the following instructions to display a map from a mobile map package (.mmpk) file.

Add a mobile map package

Add a mobile map package (.mmpk) for distribution with your app.

1. Create or download the MahouRivieraTrails.mmpk mobile map package. Complete the Create a mobile map package tutorial to create the package yourself. Otherwise, download the solution file: MahouRivieraTrails.mmpk.

2. In VS Code, create a new folder: assets. Place the mobile map package file within this folder, for example: assets/MahouRivieraTrails.mmpk.

3. Open pubspec.yaml and add an asset entry for the mobile map package.

   pubspec.yaml

   Use dark colors for code blocks

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20
   21
   22
   23
   24
   25
   26
   # ...
   
   flutter:
     uses-material-design: true
   
     assets:
       - assets/MahouRivieraTrails.mmpk

Import additional library and packages

As part of this tutorial, you will need to access resources packaged with the app. You will add core dependencies: dart:io and services.dart. dart:io provides access to an API to deal with files and directories, while services.dart will allow you to access the mobile map package file that is packaged with the app. In addition, you'll add the path_provider package to access local files on the device.

1. In VS Code, double-click lib\main.dart to open the file.

2. From the menu bar, select View > Terminal to open a new terminal.

3. Add the path_provider package to the project as a dependency running the following command:

   Use dark colors for code blocksCopy

   1
   flutter pub add path_provider
   More info on path_provider

   The path_provider package provides a Flutter plugin for finding commonly used locations on the file system. You can learn more about this package on pub.dev.

4. Import dart:io, services.dart, and path_provider into main.dart.

   main.dart

   Use dark colors for code blocks

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20
   21
   22
   23
   24
   25
   26
   27
   28
   29
   30
   31
   32
   33
   34
   35
   36
   37
   38
   39
   40
   41
   42
   43
   44
   45
   46
   47
   48
   49
   50
   51
   52
   53
   54
   55
   56
   57
   58
   59
   60
   61
   62
   63
   64
   65
   66
   67
   68
   69
   70
   71
   72
   73
   74
   75
   76
   77
   78
   79
   80
   81
   82
   83
   84
   85
   86
   87
   88
   89
   90
   91
   92
   93
   94
   95
   96
   97
   98
   99
   import 'dart:io';
   import 'package:flutter/services.dart';
   import 'package:path_provider/path_provider.dart';
   
   import 'package:flutter/material.dart';
   import 'package:arcgis_maps/arcgis_maps.dart';
   
   void main() {
   
   More info on dart:io and services.dart

   The dart:io library provides API to deal with files and directories. You can read more about the library here. The services.dart package provides platform services, such as rootBundle that contains resources packaged with an app when it was built. You can learn more here.

Open the mobile map package and display a map

Select a map from the maps contained in a mobile map package and display it in a map view controller. Use the MobileMapPackage class to access the mobile map package and load it to read its contents.

1. In lib\main.dart, navigate to the onMapViewReady() and remove all the code contained within the method.

   main.dart

   Use dark colors for code blocks

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20
   21
   22
   23
   24
   25
   26
   27
   28
   29
   30
   31
   32
   33
   34
   35
   36
   37
   38
   39
   40
   41
   42
   43
   44
   45
   46
   47
   48
   49
   50
   51
   52
   53
   54
   55
   56
   57
   58
   59
   60
   61
   62
   63
   64
   65
   66
   67
   68
   69
   70
   71
   72
     void onMapViewReady() {
   
       final map = ArcGISMap.withBasemapStyle(BasemapStyle.arcGISTopographic);
   
       _mapViewController.arcGISMap = map;
       _mapViewController.setViewpoint(
         Viewpoint.withLatLongScale(
           latitude: 34.02700,
           longitude: -118.80500,
           scale: 72000,
         ),
       );
   
     }
   

2. Within onMapViewReady() define a constant to hold the name of the mobile map package.

   main.dart

   Use dark colors for code blocks

   1
   2
   3
   4
   5
   void onMapViewReady() {
   
       const mobileMapPackageName = 'MahouRivieraTrails.mmpk';
   
   }

3. Use rootBundle to load the mobile map package from the project's assets directory and store the reference within a final variable mobileMapPackageData. In addition, update the onMapViewReady() method signature to denote the method as asynchronous.

   main.dart > onMapViewReady()

   Use dark colors for code blocks

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20
   21
   22
   23
   24
   25
   26
   27
   28
   29
   30
   31
   32
   33
   34
   35
   36
   37
   38
   39
   40
   41
   42
   43
   44
   45
   46
   47
   48
   49
   50
   51
   52
   53
   54
   55
   56
   57
   58
   59
   60
   61
   62
   63
   64
   65
   66
   67
   68
   69
   70
   71
   72
   73
   74
   75
   76
   77
   78
   79
   80
   81
   82
   83
   84
   85
   86
   87
   88
   89
   90
   91
   92
   93
   94
   95
   96
   97
   98
   99
     void onMapViewReady() async {
   
       const mobileMapPackageName = 'MahouRivieraTrails.mmpk';
   
       // Retrieve the mobile map package from the asset bundle.
       final mobileMapPackageData = await rootBundle.load(
         'assets/$mobileMapPackageName',
       );
   
     }
   

4. Create a path to a temporary directory on the device to write and store the mobile map package.

   main.dart > onMapViewReady()

   Use dark colors for code blocks

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20
   21
   22
   23
   24
   25
   26
   27
   28
   29
   30
   31
   32
   33
   34
   35
   36
   37
   38
   39
   40
   41
   42
   43
   44
   45
   46
   47
   48
   49
   50
   51
   52
   53
   54
   55
   56
   57
   58
   59
   60
   61
   62
   63
   64
   65
   66
   67
   68
   69
   70
   71
   72
   73
   74
   75
   76
   77
   78
   79
   80
   81
   82
   83
   84
   85
   86
   87
   88
   89
   90
   91
   92
   93
   94
   95
   96
   97
   98
   99
       // Retrieve the mobile map package from the asset bundle.
       final mobileMapPackageData = await rootBundle.load(
         'assets/$mobileMapPackageName',
       );
   
       // Path to a temporary directory on the device.
       // NOTE: This location is not backed up and is suitable for storing
       // caches of downloaded files, in this case, your mobile map package.
       final platformTempDir = await getTemporaryDirectory();
   
       // Define the path on the device to the mobile map package.
       final pathToFile = '${platformTempDir.absolute.path}/$mobileMapPackageName';
   
       // Create a new file using the path to the mobile map package.
       final mobileMapPackageFile = File(pathToFile);
   
       // Synchronously write the mobile map package to the file
       // on the device.
       mobileMapPackageFile.writeAsBytesSync(
         mobileMapPackageData.buffer.asUint8List(),
         flush: true,
       );
   

5. Create a MobileMapPackage with the path to the file on the device and load it.

   main.dart > onMapViewReady()

   Use dark colors for code blocks

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20
   21
   22
   23
   24
   25
   26
   27
   28
   29
   30
   31
   32
   33
   34
   35
   36
   37
   38
   39
   40
   41
   42
   43
   44
   45
   46
   47
   48
   49
   50
   51
   52
   53
   54
   55
   56
   57
   58
   59
   60
   61
   62
   63
   64
   65
   66
   67
   68
   69
   70
   71
   72
   73
   74
   75
   76
   77
   78
   79
   80
   81
   82
   83
   84
   85
   86
   87
   88
   89
   90
   91
   92
   93
   94
   95
   96
   97
   98
   99
       // Synchronously write the mobile map package to the file
       // on the device.
       mobileMapPackageFile.writeAsBytesSync(
         mobileMapPackageData.buffer.asUint8List(),
         flush: true,
       );
   
       // Create a mobile map package using the Uri to the mobile map package file.
       final mobileMapPackage = MobileMapPackage.withFileUri(
         mobileMapPackageFile.uri,
       );
   
       // Load the metadata for the mobile map package.
       await mobileMapPackage.load();
   

6. Set the map view controller's ArcGIS map property to the first map in the mobile map package.

   main.dart > onMapViewReady()

   Use dark colors for code blocks

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20
   21
   22
   23
   24
   25
   26
   27
   28
   29
   30
   31
   32
   33
   34
   35
   36
   37
   38
   39
   40
   41
   42
   43
   44
   45
   46
   47
   48
   49
   50
   51
   52
   53
   54
   55
   56
   57
   58
   59
   60
   61
   62
   63
   64
   65
   66
   67
   68
   69
   70
   71
   72
   73
   74
   75
   76
   77
   78
   79
   80
   81
   82
   83
   84
   85
   86
   87
   88
   89
   90
   91
   92
   93
   94
   95
   96
   97
   98
   99
       // Load the metadata for the mobile map package.
       await mobileMapPackage.load();
   
       // Check that the mobile map package is not empty.
       if (mobileMapPackage.maps.isNotEmpty) {
         // Display the first map in the mobile map package in the map
         // view controller.
         _mapViewController.arcGISMap = mobileMapPackage.maps.first;
       }
   

Run the app

Follow these steps to run the application.

1. In VS Code's terminal, run:

   Use dark colors for code blocksCopy

   1
   flutter pub upgrade

2. Run:

   Use dark colors for code blocksCopy

   1
   dart run arcgis_maps install

3. Make sure you have an Android emulator, iOS simulator or physical device configured and running.

4. In VS Code, select Run > Run Without Debugging.

You should see a map of trail heads, trails, and parks for the area south of the Santa Monica mountains. You will be able to pinch (to zoom and rotate), drag, and double-tap the map view to explore the map.

Option 2: Download the solution

1. Click the Download solution link under Solution and unzip the file to a location on your machine.

2. Open the project in VS code.

Run the application

Follow these steps to run the application.

1. In VS Code's terminal, run:

   Use dark colors for code blocksCopy

   1
   flutter pub upgrade

2. Run:

   Use dark colors for code blocksCopy

   1
   dart run arcgis_maps install

3. Make sure you have an Android emulator, iOS simulator or physical device configured and running.

4. In VS Code, select Run > Run Without Debugging.

You should see a map of trail heads, trails, and parks for the area south of the Santa Monica mountains. You will be able to pinch (to zoom and rotate), drag, and double-tap the map view to explore the map.