Build an app with one of the ArcGIS Maps SDKs for Native Apps
Prerequisites
- You need an ArcGIS Online or ArcGIS Enterprise account.
- You need to complete Step 3. Get an access token.
Steps
Set up offline app
In this step, choose the appropriate ArcGIS Maps SDK for your platform and set up your development environment.
-
Install and setup the ArcGIS Maps SDK for .NET on your development machine. Make sure you fulfill the SDK's system requirements.
-
Go to the Display a map tutorial and download the completed solution to get a starter code for this workflow.
You do not need to create another API key credential. -
Open the
.slnfile in Visual Studio.The Visual Studio solution, project, and the namespace for all classes currently use the name
Display. Follow the steps below if you prefer the name to reflect the current tutorial. These steps are not required, your code will still work if you keep the original name.A Map -
Update the name for the solution and the project.
- In Visual Studio, in the Solution Explorer, right-click the solution name and choose Rename. Provide the new name for your solution.
- In the Solution Explorer, right-click the project name and choose Rename. Provide the new name for your project.
-
Rename the namespace used by classes in the project.
- In the Solution Explorer, expand the project node.
- Double-click MapViewModel.cs in the Solution Explorer to open the file.
- In the
Mapclass, double-click the namespace name (View Model Display) to select it, and then right-click and choose Rename....A Map - Provide the new name for the namespace.
- Click Apply in the Rename: DisplayAMap window that appears in the upper-right of the code window. This will rename the namespace throughout your project.
-
Build the project.
- Choose Build > Build solution (or press F6).
Set the access token
-
Paste the access token you copied in the previous step into your code.
App.xaml.csUse dark colors for code blocks Copy public partial class App : Application { protected override void OnStartup(StartupEventArgs e) { base.OnStartup(e); // Note: it is not best practice to store API keys in source code. // The API key is referenced here for the convenience of this example. Esri.ArcGISRuntime.ArcGISRuntimeEnvironment.ApiKey = "YOUR_ACCESS_TOKEN"; } } }
Download and display the offline map
Load the web map from your portal and retrieve its offline map areas. Then, download and display it as an offline map in your app. The existing map from the downloaded solution will be replaced by the offline map.
-
In the Visual Studio > Solution Explorer, double-click MapViewModel.cs to open the file.
The project uses the Model-View-ViewModel (MVVM) design pattern to separate the application logic (view model) from the user interface (view).
Mapcontains the view model class for the application, calledView Model.cs Map. See the Microsoft documentation for more information about the Model-View-ViewModel pattern.View Model -
Add additional required
usingstatements at the top of the class.MapViewModel.csUse dark colors for code blocks using System; using System.Collections.Generic; using Esri.ArcGISRuntime.Portal; using System.Text; using System.Threading.Tasks; using System.ComponentModel; using System.Runtime.CompilerServices; using System.Linq; using Esri.ArcGISRuntime.Mapping; using Esri.ArcGISRuntime.Tasks.Offline; -
Create an empty global variable
_downloadto store the path to the downloaded map area later.Location MapViewModel.csUse dark colors for code blocks private string _downloadLocation; private Map? _map; public Map? Map { get { return _map; } set { _map = value; OnPropertyChanged(); } } -
Modify the
Setupfunction signature toMap private asyncreturning aTaskand change the method name toGet. Also remove theOfflline Preplanned Map Mapinitializer from the function.MapViewModel.csUse dark colors for code blocks Copy private async Task GetOfflinePreplannedMap() { } -
Remove the
Mapinitializer from theSetupfunction. Because the map area will be downloaded from the web map, this is no longer needed.Map MapViewModel.csUse dark colors for code blocks private async Task GetOfflinePreplannedMap() { } -
Inside
Main, remove the viewpoint configuration.Window.xaml.cs MainWindow.xaml.csUse dark colors for code blocks public MainWindow() { InitializeComponent(); MapPoint mapCenterPoint = new MapPoint(-118.805, 34.027, SpatialReferences.Wgs84); MainMapView.SetViewpoint(new Viewpoint(mapCenterPoint, 100000)); } -
Get the web map item ID from your portal, for example
4c4c3a28388446a19278b3a17051730e. -
Create a
Mapfrom the web map using its item ID.MapViewModel.csUse dark colors for code blocks private async Task GetOfflinePreplannedMap() { var portal = await ArcGISPortal.CreateAsync(); var portalItem = await PortalItem.CreateAsync(portal, "YOUR_ITEM_ID"); // Replace with your web map ID var map = new Map(portalItem); } -
Create an
Offlinereferencing the web mapMap Task A web map is a map stored as a JSON object that defines properties such as the basemap layer, data layers, layer styles, and pop-up styles. Its JSON structure is defined by the web map specification. . This task object reads the offline properties of the web map and manages downloading an offline mapAn offline map is a map area and its data content downloaded from an offline-enabled web map for use in offline applications built with ArcGIS Maps SDKs for Native Apps. from it.MapViewModel.csUse dark colors for code blocks private async Task GetOfflinePreplannedMap() { var portal = await ArcGISPortal.CreateAsync(); var portalItem = await PortalItem.CreateAsync(portal, "YOUR_ITEM_ID"); // Replace with your web map ID var map = new Map(portalItem); OfflineMapTask offlineMapTask = await OfflineMapTask.CreateAsync(map); } -
Use the
Offlineto list any available ahead-of-time offline mapsMap Task An offline map is a map area and its data content downloaded from an offline-enabled web map for use in offline applications built with ArcGIS Maps SDKs for Native Apps. . In the ArcGIS Maps SDKs for Native Apps the ahead-of-time offline map areas are referred to as preplanned areas.MapViewModel.csUse dark colors for code blocks private async Task GetOfflinePreplannedMap() { var portal = await ArcGISPortal.CreateAsync(); var portalItem = await PortalItem.CreateAsync(portal, "YOUR_ITEM_ID"); // Replace with your web map ID var map = new Map(portalItem); OfflineMapTask offlineMapTask = await OfflineMapTask.CreateAsync(map); IReadOnlyList<PreplannedMapArea> availableAreas = await offlineMapTask.GetPreplannedMapAreasAsync(); } -
Get a set of default
Download. These parameters describe how the owner of the web map configured the offline map to be downloaded by default. You can modify the parameters to fine tune the downloaded offline map.Preplanned Offline Map Parameters MapViewModel.csUse dark colors for code blocks private async Task GetOfflinePreplannedMap() { var portal = await ArcGISPortal.CreateAsync(); var portalItem = await PortalItem.CreateAsync(portal, "YOUR_ITEM_ID"); // Replace with your web map ID var map = new Map(portalItem); OfflineMapTask offlineMapTask = await OfflineMapTask.CreateAsync(map); IReadOnlyList<PreplannedMapArea> availableAreas = await offlineMapTask.GetPreplannedMapAreasAsync(); if (availableAreas?.FirstOrDefault() is PreplannedMapArea area) { DownloadPreplannedOfflineMapParameters downloadParameters = await offlineMapTask.CreateDefaultDownloadPreplannedOfflineMapParametersAsync(area); string documentsFolder = Environment.GetFolderPath(Environment.SpecialFolder.MyDocuments); _downloadLocation = System.IO.Path.Combine(documentsFolder, "OfflineMap"); } } -
Define a path to store the downloaded map area and store it in the global variable
_download.Location MapViewModel.csUse dark colors for code blocks private async Task GetOfflinePreplannedMap() { var portal = await ArcGISPortal.CreateAsync(); var portalItem = await PortalItem.CreateAsync(portal, "YOUR_ITEM_ID"); // Replace with your web map ID var map = new Map(portalItem); OfflineMapTask offlineMapTask = await OfflineMapTask.CreateAsync(map); IReadOnlyList<PreplannedMapArea> availableAreas = await offlineMapTask.GetPreplannedMapAreasAsync(); if (availableAreas?.FirstOrDefault() is PreplannedMapArea area) { DownloadPreplannedOfflineMapParameters downloadParameters = await offlineMapTask.CreateDefaultDownloadPreplannedOfflineMapParametersAsync(area); string documentsFolder = Environment.GetFolderPath(Environment.SpecialFolder.MyDocuments); _downloadLocation = System.IO.Path.Combine(documentsFolder, "OfflineMap"); } } -
Use the parameters to create a
Downloadto download the offline mapPreplanned Offline Map Job An offline map is a map area and its data content downloaded from an offline-enabled web map for use in offline applications built with ArcGIS Maps SDKs for Native Apps. , specifying the download location.MapViewModel.csUse dark colors for code blocks private async Task GetOfflinePreplannedMap() { var portal = await ArcGISPortal.CreateAsync(); var portalItem = await PortalItem.CreateAsync(portal, "YOUR_ITEM_ID"); // Replace with your web map ID var map = new Map(portalItem); OfflineMapTask offlineMapTask = await OfflineMapTask.CreateAsync(map); IReadOnlyList<PreplannedMapArea> availableAreas = await offlineMapTask.GetPreplannedMapAreasAsync(); if (availableAreas?.FirstOrDefault() is PreplannedMapArea area) { DownloadPreplannedOfflineMapParameters downloadParameters = await offlineMapTask.CreateDefaultDownloadPreplannedOfflineMapParametersAsync(area); string documentsFolder = Environment.GetFolderPath(Environment.SpecialFolder.MyDocuments); _downloadLocation = System.IO.Path.Combine(documentsFolder, "OfflineMap"); DownloadPreplannedOfflineMapJob job = offlineMapTask.DownloadPreplannedOfflineMap(downloadParameters, _downloadLocation); } } -
Start the job and wait for it to complete, returning a
Mapthat is ready for use.MapViewModel.csUse dark colors for code blocks private async Task GetOfflinePreplannedMap() { var portal = await ArcGISPortal.CreateAsync(); var portalItem = await PortalItem.CreateAsync(portal, "YOUR_ITEM_ID"); // Replace with your web map ID var map = new Map(portalItem); OfflineMapTask offlineMapTask = await OfflineMapTask.CreateAsync(map); IReadOnlyList<PreplannedMapArea> availableAreas = await offlineMapTask.GetPreplannedMapAreasAsync(); if (availableAreas?.FirstOrDefault() is PreplannedMapArea area) { DownloadPreplannedOfflineMapParameters downloadParameters = await offlineMapTask.CreateDefaultDownloadPreplannedOfflineMapParametersAsync(area); string documentsFolder = Environment.GetFolderPath(Environment.SpecialFolder.MyDocuments); _downloadLocation = System.IO.Path.Combine(documentsFolder, "OfflineMap"); DownloadPreplannedOfflineMapJob job = offlineMapTask.DownloadPreplannedOfflineMap(downloadParameters, _downloadLocation); DownloadPreplannedOfflineMapResult result = await job.GetResultAsync(); if (result?.OfflineMap is Map offlineMap) { this.Map = offlineMap; } } } -
Click Debug > Start Debugging (or press F5 on the keyboard) to run the app.
Access the offline map
Create a function to load the previously downloaded offline map from its stored location, so it can be reused without redownloading.
-
Inside
Map, create aView Model.cs private asyncfunction returning aTaskcalledAccess.Map() MapViewModel.csUse dark colors for code blocks Copy private async Task AccessMap() { } -
Inside the function, create a
Mobilethat references the path to the downloaded offline map areaMap Package An offline map area, also known as a preplanned map area, is an area in a web map used to create an offline map. .MapViewModel.csUse dark colors for code blocks private async Task AccessMap() { var mobileMapPackage = await MobileMapPackage.OpenAsync(_downloadLocation); } -
Load the mobile map package and read the
Mapfrom it.MapViewModel.csUse dark colors for code blocks private async Task AccessMap() { var mobileMapPackage = await MobileMapPackage.OpenAsync(_downloadLocation); await mobileMapPackage.LoadAsync(); this.Map = mobileMapPackage.Maps.First(); } -
The function is now ready to be called to access a previously downloaded offline map area. You can trigger this function from a UI button click or by calling it directly from the constructor.
-
Click Debug > Start Debugging (or press F5 on the keyboard) to run the app.
Congratulations!
You have completed the Create an offline app how-to. The application uses the ArcGIS Maps SDKs for Native Apps to display an offline map.
What's next?
This is just one way to build an offline application with ArcGIS. Depending on your needs, you can also:
- Download map areas on demand.
- Work in fully offline environments with mobile packages
A mobile map package (MMPK) is a standalone file that contains one or more map definitions, including the basemap layers, data layers, layer styles, and pop-up styles for use in offline applications built with ArcGIS Maps SDKs for Native Apps. that support both 2D maps and 3D scenes. - Add editing, syncing, and advanced data workflows.
Explore the topics below to learn about other types of offline applications and data sources.
Introduction to offline apps
Learn about offline apps, when to use them, and their capabilities.
Types of offline apps
Learn about the different types of offline apps you can create based on network connectivity.
How to build an offline app
Learn about the steps required to build an offline app.
Types of mobile data sources
Learn about the different mobile data sources for building offline apps.
Partially offline apps
Learn the steps required to build an app that works when the network is unreliable.
Fully offline apps
Learn the steps required to build an app that works when the network is entirely absent.