Display a styled vector basemap | ArcGIS for Developers

ArcGIS Tutorials NET Maps & Layers

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

In this tutorial, 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

Start Visual Studio.

Visual Studio 2017 is recommended. Please check system requirements for more information.
Choose File > New > Project and select the ArcGIS Runtime App template for your chosen platform.

You need to install the ArcGIS Runtime SDK for .NET Visual Studio Extension to add these templates to Visual Studio. See the Install topic in the developers guide for more information.

Add code to access a layer item from ArcGIS Online

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

The ArcGIS Runtime App templates use the Model-View-ViewModel (MVVM) pattern. The Map property in the MapViewModel.cs class is bound to the Map property of the MapView in the UI.
```
private Map _map;
```

Add the following function to the MapViewModel class:

private async void CreateStyledVectorBasemap()
{

}

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

The easiest way to find the unique ID for a portal item is to check the item's URL in ArcGIS Online. The ID will be listed as "id=abc123" when viewing the item details page (or "webmap=abc123" if viewing a web map in the map viewer).
```
string customVectorLayerId = "d2ff12395aeb45998c1b154e25d680e5";
```
At the top of the MapViewModel module, add the following using statement to bring in classes from Esri.ArcGISRuntime.Portal.
```
using Esri.ArcGISRuntime.Portal;
```
Return to the CreateStyledVectorBasemap function and create a new ArcGISPortal that references ArcGIS Online with the URL "https://www.arcgis.com".

If you leave the URL empty, ArcGISPortal will connect to the default portal - ArcGIS Online. If you need to connect to an organizational portal, you can specify its URL. Connecting to a portal is a network operation. This asynchronous method will wait until the operation completes before continuing.
```
ArcGISPortal arcGISOnline = await ArcGISPortal.CreateAsync(new Uri("https://www.arcgis.com"));
```
Get the portal item using the item ID and use it to create an ArcGISVectorTiledLayer.

Vector tile layers can be added directly to the map as layers or a basemap. The easiest way is to load the layer from an existing portal item by ID. The item ID can be found at the end of the URL in ArcGIS Online and using the ArcGIS Vector Tile Style Editor. Learn more about loading layers by portal item ID here.
```
PortalItem layerPortalItem = await PortalItem.CreateAsync(arcGISOnline, customVectorLayerId);
ArcGISVectorTiledLayer customVectorTileLayer = new ArcGISVectorTiledLayer(layerPortalItem);
```

Configure a new map that uses the layer as a basemap

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

Vector tile layers are constructed from tile layers with the ArcGISVectorTiledLayer class. Since this class is derived from the abstract Layer class, these objects can be used as a Basemap.
```
Basemap vectorLayerBasemap = new Basemap(customVectorTileLayer);
Map map = new Map(vectorLayerBasemap);
```
Set the initial viewpoint with the variables below so the map zooms to the Santa Monica Mountains when the app loads.

The latitude and longitude values chosen here keep the initial viewpoint centered on the Los Angeles area. The scale value matches the level of detail used in other tutorials.
```
double initialLatitude = 34.09042;
double initialLongitude = -118.71511;
double initialScale = 300000;
map.InitialViewpoint = new Viewpoint(initialLatitude, initialLongitude, initialScale);
```
Assign the map to the view model's Map property to expose it through data binding to the app's MapView.
```
Map = map;
```
In the MapViewModel constructor, add a call to the CreateStyledVectorBasemap function.
```
public MapViewModel()
{
    CreateStyledVectorBasemap();
}
```
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

Complete the tutorial Style a Vector Basemap and use your own custom basemap instead of the one provided here.

Add layers

Review the tutorial Create a 2D map with a layer and load the trailheads layer on top of your custom basemap.

Handle load errors

Custom basemaps may not load in your app for multiple reasons, including network availability, the item's privacy settings, or an incorrect item id. Add error handling to your app to alert the user if the map does not load and display a message explaining why.

Update completed tutorials

Return to any of your completed ArcGIS tutorials for .NET and add code to replace the basemap with your new custom basemap.