Display a web map

Learn how to create and display a from a stored in .

display a web map

A contains the definition of a , including properties such as the , initial , , , , and . You can author and save web maps using the or and share them in . Each web map is stored as an item in or , allowing you to access a from a using its and display it in your app.

In this tutorial, you use a 's to display a of trails, trailheads and parks in the Santa Monica Mountains . The web map is hosted in .

Prerequisites

Before starting this tutorial:

Optionally, you may want to install the ArcGIS Maps SDK for .NET to get access to project templates in Visual Studio (Windows only) and offline copies of the NuGet packages.

Steps

Open the Visual Studio solution

  1. To start the tutorial, complete the Display a map tutorial or download and unzip the solution.

  2. Open the .sln file in Visual Studio.

  3. If you downloaded the solution, get an access token and set the API key.

Update the tutorial name used in the project (optional)

The Visual Studio solution, project, and the namespace for all classes currently use the name DisplayAMap. 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.

Get the web map item ID

You can use to create and view . Use the to identify the web map . This item ID will be used later in the tutorial.

  1. Go to the LA Trails and Parks web map in the Map Viewer in . This web map displays trails, trailheads and parks in the Santa Monica Mountains.
  2. Make a note of the item ID at the end of the browser's URL. The item ID should be

    41281c51f9de45edaf1c8ed44bb10e30

Display the web map

You can display a using the web map's . Create a from the web map portal , and display it in your app.

  1. In Visual Studio, in the Solution Explorer, double-click MapViewModel.cs to open the file.

  2. Add additional required using statements at the top of the class.

    MapViewModel.cs
    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
    using System;
    using System.Collections.Generic;
    using System.Text;
    using Esri.ArcGISRuntime.Geometry;
    using Esri.ArcGISRuntime.Mapping;
    using System.ComponentModel;
    using System.Runtime.CompilerServices;
    
    using Esri.ArcGISRuntime.Portal;
    using System.Threading.Tasks;
    
  3. In the MapViewModel class, remove all the existing code in the SetupMap() function.

    MapViewModel.cs
    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
            private void SetupMap()
            {
    
                // Create a new map with a 'topographic vector' basemap.
                Map = new Map(BasemapStyle.ArcGISTopographic);
    
            }
    
  4. Modify the signature of the SetupMap() function to include the async keyword and return Task rather than void.

    MapViewModel.cs
    Expand
    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
            private async Task SetupMap()
            {
    
            }
    
    Expand
  5. Modify the call to SetupMap() (in the MapViewModel constructor) to avoid a compilation warning. After changing SetupMap() to an asynchronous method, the following warning appears in the Visual Studio Error List.

    1
    2
    Because this call is not awaited, execution of the current method continues before the call is
    completed. Consider applying the 'await' operator to the result of the call.

    Because your code does not anticipate a return value from this call, the warning can be ignored. To be more specific about your intentions with this call and to address the warning, add the following code to store the return value in a discard.

    MapViewModel.cs
    Expand
    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
            public MapViewModel()
            {
    
                _ = SetupMap();
    
            }
    
    Expand
  6. Add code to the SetupMap() function to create a PortalItem for the . To do this, provide the web map's and an ArcGISPortal referencing .

    MapViewModel.cs
    Expand
    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
            private async Task SetupMap()
            {
    
                // Create a portal. If a URI is not specified, www.arcgis.com is used by default.
                ArcGISPortal portal = await ArcGISPortal.CreateAsync();
    
                // Get the portal item for a web map using its unique item id.
                PortalItem mapItem = await PortalItem.CreateAsync(portal, "41281c51f9de45edaf1c8ed44bb10e30");
    
            }
    
    Expand
  7. Create a Map using the PortalItem. To display the , set the MapViewModel.Map property to this new Map.

    MapViewModel.cs
    Expand
    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
            private async Task SetupMap()
            {
    
                // Create a portal. If a URI is not specified, www.arcgis.com is used by default.
                ArcGISPortal portal = await ArcGISPortal.CreateAsync();
    
                // Get the portal item for a web map using its unique item id.
                PortalItem mapItem = await PortalItem.CreateAsync(portal, "41281c51f9de45edaf1c8ed44bb10e30");
    
                // Create the map from the item.
                Map map = new Map(mapItem);
    
                // To display the map, set the MapViewModel.Map property, which is bound to the map view.
                this.Map = map;
    
            }
    
    Expand
  8. Click Debug > Start Debugging (or press <F5> on the keyboard) to run the app.

You should see a map of trails, trailheads and parks in the Santa Monica Mountains . Click, drag, and scroll the mouse wheel on the map view to explore the map.

What's next?

Learn how to use additional API features, ArcGIS location services, and ArcGIS tools in these tutorials:

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.

You can no longer sign into this site. Go to your ArcGIS portal or the ArcGIS Location Platform dashboard to perform management tasks.

Your ArcGIS portal

Create, manage, and access API keys and OAuth 2.0 developer credentials, hosted layers, and data services.

Your ArcGIS Location Platform dashboard

Manage billing, monitor service usage, and access additional resources.

Learn more about these changes in the What's new in Esri Developers June 2024 blog post.

Close