Overview

You will learn: how to display a web map stored in ArcGIS Online in your ArcGIS Runtime app.

ArcGIS Runtime SDK for .NET allows you to access items (such as web maps) stored in ArcGIS Online and include them in your app. Since ArcGIS Online hosts lots of beautiful maps (and provides tools for creating your own), using pre-authored maps can make your apps consistent and efficient. Updates to a hosted web map will automatically appear in all apps that use them with no changes required to your code.

In this lab you will learn how to access a web map stored in ArcGIS Online. You will open a web map using its ID and display it in your app.

Steps

Create a new ArcGIS Runtime App Visual Studio Project

  1. Start Visual Studio.

  2. Choose File > New > Project and select the ArcGIS Runtime App template for your chosen platform.

Add code to access a web map from ArcGIS Online

  1. Open the MapViewModel.cs code file in your project. Find the definition for the Map property in the class. Notice that the default map is currently set to display a streets basemap. Remove the code that initializes the map (right of the '=', in other words).

    private Map _map;
    
  2. Add the following function to the MapViewModel class:

    private async void LoadWebMap()
    {
    
    }
    
  3. Create a variable to store an ArcGIS Online portal item ID. This is the unique ID for the Los Angeles Traffic portal item (web map).

    var itemId = "306eba7e8bc242d39f7347ff70a5f960";
    
  4. Build a URL that refers to the portal item on ArcGIS Online.

    var webMapUrl = string.Format("https://www.arcgisonline.com/sharing/rest/content/items/{0}/data", itemId);
    
  5. Add code that creates a new map. Use the URL to create a System.Uri that points to the web map portal item.

    Esri.ArcGISRuntime.Mapping.Map webMap = new Esri.ArcGISRuntime.Mapping.Map(new System.Uri(webMapUrl));
    

Display the web map in your app

  1. Set the MapViewModel.Map property with the web map.

    Map = webMap;
    
  2. Call your LoadWebMap function from the MapViewModel constructor.

    public MapViewModel()
    {
       LoadWebMap();
    }
    
  3. Run your app to test your code. When the app opens, you should see a traffic map of Los Angeles.

Congratulations, you're done!

Check out and compare with our completed solution project.

Challenge

Load other web maps

Use the search tools in ArcGIS Online to locate other web maps. Replace the web map id in your code to load them in your app. Better yet, complete the Create a web map lab and then display your own web map!

Change the displayed web map at run time

Add a control that allows the user to select from a list of available web maps when the app is running. Display the selected web map in your app.