Display a styled vector basemap

Overview

You will learn: how to build an app that displays a vector basemap with custom styles.

Applications can access and display vector tile basemaps and basemaps that have custom styles. You can create your own custom styles with the ArcGIS Vector Tile Style Editor. Custom basemaps are stored as tile layer items in ArcGIS Online or ArcGIS Enterprise. To add the layer to your map, use the item ID to create the vector tile layer, add it to a basemap, and then add the basemap to your application. Additional layers can also be added to a basemap to enhance the visualization. To learn more about how to create your own custom basemap styles, 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. This basemap emphasizes national forests and parks.

Before you begin

You must have previously installed ArcGIS AppStudio.

Open the starter app project

If you completed the Create a starter app tutorial, start ArcGIS AppStudio and then open your starter app project. Otherwise, complete the tutorial now and open the project.

Steps

Declare properties

1. Run ArcGIS AppStudio. Click your Starter app project in the App Gallery, and then click Edit. This will open your project in Qt Creator.

2. In the Qt Creator Projects window, double-click MyApp.qml to open it in the editor. In the App declaration, add the following properties to declare the portal where to find the custom basemap style and its item ID.

   Use dark colors for code blocksCopy

   1
   2
   3
   4
   5
   property real scaleFactor: AppFramework.displayScaleFactor
   
   // *** ADD ***
   property string portalUrl: "https://arcgis.com/sharing/rest/content/items/"
   property string itemID: "d2ff12395aeb45998c1b154e25d680e5"

3. In the code editor, scroll down to the Map declaration. Use the ArcGISVectorTiledLayer QML type to load a custom vector type style as a basemap layer using its item ID. Update the basemap declaration with the following code:

   Use dark colors for code blocksCopy

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
        Map {
          id:map
   
          // *** UPDATE ***
          //BasemapTopographicVector {}
   
          Basemap {
              ArcGISVectorTiledLayer {
                  url: portalUrl + itemID
              }
          }

4. In the lower left Sidebar, click Run or press Control-R/Command-R to run the app.

Congratulations, you're done!

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