Display a styled vector basemap

Overview

You will learn: how to display a vector basemap with custom styles in a native app.

With ArcGIS Runtime SDK for .NET you can build mapping applications that use Esri vector basemaps with custom styles. If you don't already have a custom basemap style, you can create a new one with the ArcGIS Vector Tile Style Editor. This application allows you to create a style interactively and then save the style in ArcGIS Online as a portal item. Each portal item has a unique ID that your application can use to load the style as a layer or a basemap. See Display a map for more details. To learn more about how to create a new custom style with the ArcGIS Vector Tile Style Editor, see the Style a Vector Basemap lab.

In this lab, you will build a mapping app that loads a custom vector basemap named Forest and Parks Canvas Map. This basemap emphasizes national forests and parks.

Before you begin

Make sure you have installed a supported version of Visual Studio. Please check system requirements for more information.

The ArcGIS Runtime SDK for .NET Visual Studio extension must be installed to use the app templates. Please review the install instructions if you have not done this.

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 layer item from ArcGIS Online

3. 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;
   

4. Add the following function to the MapViewModel class:

   private async void CreateStyledVectorBasemap()
   {
   
   }
   

5. Create a variable to store an ArcGIS Online portal item ID. This is the unique ID for the Forest and Parks Canvas portal item (styled vector layer).

   string customVectorLayerId = "d2ff12395aeb45998c1b154e25d680e5";
   

6. At the top of the MapViewModel module, add the following using statement to bring in classes from Esri.ArcGISRuntime.Portal.

   using Esri.ArcGISRuntime.Portal;
   

7. Return to the CreateStyledVectorBasemap function and create a new ArcGISPortal that references ArcGIS Online with the URL "https://www.arcgis.com".

   ArcGISPortal arcGISOnline = await ArcGISPortal.CreateAsync(new Uri("https://www.arcgis.com"));
   

8. Get the portal item using the item id and use it to create an ArcGISVectorTiledLayer.

   PortalItem layerPortalItem = await PortalItem.CreateAsync(arcGISOnline, customVectorLayerId);
   ArcGISVectorTiledLayer customVectorTileLayer = new ArcGISVectorTiledLayer(layerPortalItem);
   

Configure a new map that uses the layer as a basemap

9. Create a new basemap from the portal item, and then create a new Map object to use your custom basemap.

   Basemap vectorLayerBasemap = new Basemap(customVectorTileLayer);
   Map map = new Map(vectorLayerBasemap);
   

10. Set the initial viewpoint with the variables below so the map zooms to the Santa Monica Mountains when the app loads.

    double initialLatitude = 34.09042;
    double initialLongitude = -118.71511;
    double initialScale = 300000;
    map.InitialViewpoint = new Viewpoint(initialLatitude, initialLongitude, initialScale);
    

11. Assign the map to the view model's Map property to expose it through data binding to the app's MapView.

    Map = map;
    

12. In the MapViewModel constructor, add a call to the CreateStyledVectorBasemap function.

    public MapViewModel()
    {
        CreateStyledVectorBasemap();
    }
    

13. Run the code and explore the custom national forest and parks vector styles.

Congratulations, you're done!

Your map should display the custom forest and parks canvas basemap. Compare with our completed solution project.

Challenge

Use your own custom basemap

Add layers

Handle load errors

Update completed labs