Skip To Content ArcGIS for Developers Sign In Dashboard

Overview

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

A web map is a JSON structure that contains the settings required to display a 2D map. ArcGIS and custom applications can load web maps and automatically configure the map extent, basemap, layers and styles, pop-ups, labels and more. Web maps can be created interactively with the Map Viewer and ArcGIS Pro. Web maps are stored in ArcGIS Online or ArcGIS Enterprise as an item with a unique ID.

In this tutorial, you will build an app that loads and displays a web map.

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 tutorial 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.