Display a styled vector basemap


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.


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. ::: labs-info Vector tile layers can be added to basemaps or added directly to the map as layers. One way to load the layer is to access it from an existing portal item ID. The item ID can be found at the end of the URL in ArcGIS Online or by using the ArcGIS Vector Tile Style Editor. Learn more about loading layers by portal item ID.

    The URL for the vector basemap tile service was created in advance for this tutorial. To learn how to style your basemap see the Style a vector basemap tutorial. :::

    Use dark colors for code blocksCopy
    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
         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. ::: labs-info Run the app from within ArcGIS AppStudio by clicking the app in the App Gallery and then clicking the Run icon from the tool pallette.

    In Qt Creator, there are several ways to run the project:

    • Press Control-R/Command-R on the keyboard.
    • In the app menu, click Build > Run.
    • Click the Run button from the tool palette. :::

Congratulations, you're done!

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

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