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 basemapsA basemap is the foundational layer and data that provides the overall visual and geographic context for a map or scene. It typically includes geographic features and labels for land, water, roads, buildings, cities, places, and administrative boundaries, but can also include raster data such as satellite and areal images.Learn more that have custom styles. You can create your own custom styles with the ArcGIS Vector Tile Style EditorThe ArcGIS Vector Tile Style Editor is a web-based application used to create, edit, and save a custom style for vector tile basemap layer.Learn more. Custom basemaps are stored as tile layer itemsAn item, also known as a content item, is a resource stored in a portal such as a web map, hosted layer, style, script tool, file, or notebook.Learn more in ArcGIS OnlineArcGIS Online is a GIS mapping, analytics, data hosting, and content management software as a service (SaaS) product. It includes applications, tools, APIs, and location services for users and developers. It is subscription-based and requires an ArcGIS Online account.Learn more or ArcGIS EnterpriseArcGIS Enterprise is a GIS mapping, analytics, data hosting, and content management product that can be hosted on-premise or in a cloud infrastructure. It includes software, applications, tools, APIs, and services for users and developers.Learn more. To add the layerA layer is a reference to a collection of geographic data that is used to access and display data. The data for layers are typically provided by the basemap layer service and data services.Learn more 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.