Work with web maps

Web maps can be created using or Portal for ArcGIS and are saved as text files that describe map characteristics (such as the layers they contain). A web map is assigned a globally unique ID that can be used to access the map programmatically using ArcGIS Runtime SDK for .NET.

Web map format

The ArcGIS web map is a text file that consists of a structured series of key-value pairs that describe layers, tasks, pop-up information, bookmarks, metadata, and other properties of the map. Web maps are expressed in JavaScript Object Notation (JSON), a clear text format that can be easily transferred, stored, or manipulated. Once you know how web map content is structured, you can read or write web maps from custom clients. There are two primary strings of JSON that comprise a web map:

  • The web map item information string contains a title, description, and various metadata used to summarize the web map on or other portal.
  • The web map data string contains information needed to display the map, such as the layers, pop-ups, and bookmarks it contains.

The following code sample shows a web map data string that defines a basemap and a single operational layer:

  "operationalLayers": [{
    "mode": 1,
    "opacity": 1,
    "title": "Demographics/ESRI_Census_USA",
    "url": "",
    "visibility": true,
    "visibleLayers": [
  "baseMap": {
    "baseMapLayers": [{
      "id": "NatGeo_World_Map_9586",
      "opacity": 1,
      "visibility": true,
      "url": ""
    "title": "National Geographic"
  "version": 1.1

Access a web map

When you make and save a web map using or Portal for ArcGIS, it is given a globally unique ID. You can reference this ID to pull the entire map or any of its contents into apps you build with Esri APIs. If you know the ID of a web map you'd like to display in your ArcGIS Runtime app, you can create an ArcGISPortalItem using the item ID. You can then open the item as a WebMap and access the layers, tasks, and bookmarks that it contains.

The following code sample opens a web map hosted by and displays information about the operational layers it contains:

// open a portal
var portal = await ArcGISPortal.CreateAsync(new Uri(""));

// use the unique item id to access the portal item
var item = await ArcGISPortalItem.CreateAsync(portal, "4b2b2784f68e4e5fb0c39c770f1b25ea");

// get the item as a web map
var webmap = await WebMap.FromPortalItemAsync(item);

// loop thru all operational layers in the web map and display their name and url
foreach (var lyr in webmap.OperationalLayers)
    MyLayerListBox.Items.Add(lyr.Title + " - " + lyr.Url);

The web map ID is included in the URL when you view it from For example, is the web map for Redlands drinking fountains. You can copy the text that follows webmap= in the URL string for use in your code.

If you don't know the item ID of a particular web map, you can search for web maps using keywords. Once you find an interesting web map, you can open it using the same technique described previously.

The following code sample shows how to search for web maps with the keyword "fountain". The first match found (sorted on the average rating) is then opened.

// open a portal
var portal = await ArcGISPortal.CreateAsync(new Uri(""));

// create a SearchParameters object
// set it to search for "fountain", to sort descending by the average rating, and limit to 10 results
var searchParameters = new SearchParameters()
    QueryString = "fountain",
    SortField = "avgrating",
    SortOrder = QuerySortOrder.Descending,
    Limit = 10

// do the search
var searchResult = await portal.SearchItemsAsync(searchParameters);

// get the first result
var firstItem = searchResult.Results.FirstOrDefault();

// if a web map was found, open it
if (firstItem != null && firstItem.Type == ItemType.WebMap)
    var webMap = await WebMap.FromPortalItemAsync(firstItem);
    // ... do something with the web map here ...

Display a web map

You can extract individual layers from a web map to display in your app, or you can assign the entire web map to your app's map view. The WebMapViewModel class serves as a wrapper for a web map to which you can bind your map view. This class helps you implement the Model-View-ViewModel (MVVM) pattern in your ArcGIS Runtime SDK for .NET apps.

The following code sample opens a web map using its item ID, creates a new WebMapViewModel, then assigns the resulting Map to the app's MapView control:

// get a ref to the portal
var portal = await ArcGISPortal.CreateAsync(new Uri(""));

// use the unique item id to access the portal item
var item = await ArcGISPortalItem.CreateAsync(portal, "4b2b2784f68e4e5fb0c39c770f1b25ea");

// get the item as a web map
var webmap = await WebMap.FromPortalItemAsync(item);

// create a WebMapViewModel to contain the web map
var vm = await WebMapViewModel.LoadAsync(webmap, portal);

// assign the Map property of the view model to the Map property of the MapView control to display the web map
this.MyMapView.Map = vm.Map;

Display popups from a web map

When you author a web map in ArcGIS Online, you can define popups to display attribute information for features in the map. You can choose which attributes to include as well as format preferences for their display. Each layer in the web map can have distinct popup properties defined. When adding a web map to your ArcGIS Runtime SDK app, popups will not be displayed out of the box. With some additional work, however, you can display attribute information for features using popup definitions stored with a web map.

The WebMap class provides properties that describe the information stored with a web map, such as the layers, bookmarks, and tasks it contains. Each WebMapLayer in the web map also has properties to describe layer preferences that have been defined, including the display of popups.

Use the WebMapLayer.PopupInfo property to get popup preferences for a layer, as shown in the following example.

var popupInfo = webMap.OperationalLayers[0].PopupInfo;

The PopupInfo class provides properties that describe which attributes should be included, how to format their display, and whether or not they should be editable. Associated media, such as charts and images, can also be defined for a popup.

The following example creates a new collection of attributes for display by including only those fields defined in the popup info.

// get the popup fields for the layer
var popupInfo = webMapLayer.PopupInfo;
var popupFields = popupInfo.FieldInfos;

// create a new dictionary to store attributes for display in the popup
var popupAttributes = new Dictionary<string, object>();

// find the attributes that should be shown in the popup
var attributes = feature.Attributes;
foreach (var field in attributes.Keys)
    // loop thru all fields defined in the popup info
    foreach(var popupField in popupFields) 
        // if the current field is defined for the popup, add the attribute to the results
        if (popupField.FieldName.ToLower() == field.ToLower())
            if (popupField.IsVisible)
                // get the attribute value
                var fieldValue = attributes[field];

                // if a format has been specified, apply it to the value
                if (popupField.Format != null)
                    var valueFormat = popupField.Format;
                    fieldValue = valueFormat.GetFormattedValue(attributes[field]);

                // add the field display name and formatted value to the dictionary
                popupAttributes.Add(popupField.Label, fieldValue);

After filtering a set of attributes according to the preferences set in a layer's PopupInfo, you can bind the attributes to a UI element for display. To mimic the behavior of the web map popups, you may want to use the OverlayItemsControl. The following example shows XAML that defines a ListView control as a map overlay. When bound to a Dictionary of attributes, the field name (key) and value will be displayed according to the binding defined in the ItemTemplate.

<esri:MapView x:Name="MyMapView" MapViewTapped="MyMapView_Tapped">
                <ListView x:Name="PopupAttributeList" ItemsSource="{Binding}">
                            <StackPanel Orientation="Horizontal">
                                <TextBlock Text="{Binding Key}" FontWeight="Bold" FontSize="12" Foreground="Blue" Margin="10,3"/>
                                <TextBlock Text="{Binding Value}" FontSize="12" Foreground="Blue" />

See the Display map overlays topic for more information.

Related topics