You will learn: how to build an app that displays a vector basemap with custom styles.
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.
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.
Start Visual Studio.
Choose File > New > Project and select the ArcGIS Runtime App template for your chosen platform.
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;
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).
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".
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.
PortalItem layerPortalItem = await PortalItem.CreateAsync(arcGISOnline, customVectorLayerId);
ArcGISVectorTiledLayer customVectorTileLayer = new ArcGISVectorTiledLayer(layerPortalItem);
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);
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);
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.
Your map should display the custom forest and parks canvas basemap. Compare with our completed solution project.
Complete the tutorial Style a Vector Basemap and use your own custom basemap instead of the one provided here.
Review the tutorial Create a 2D map with a layer and load the trailheads layer on top of your custom basemap.
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.
Return to any of your completed ArcGIS tutorials for .NET and add code to replace the basemap with your new custom basemap.