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
-
Run ArcGIS AppStudio. Click your Starter app project in the App Gallery, and then click Edit. This will open your project in Qt Creator.
-
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 blocks Copy property real scaleFactor: AppFramework.displayScaleFactor // *** ADD *** property string portalUrl: "https://arcgis.com/sharing/rest/content/items/" property string itemID: "d2ff12395aeb45998c1b154e25d680e5"
-
In the code editor, scroll down to the
Map
declaration. Use theArcGIS
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:Vector Tiled Layer Use dark colors for code blocks Copy Map { id:map // *** UPDATE *** //BasemapTopographicVector {} Basemap { ArcGISVectorTiledLayer { url: portalUrl + itemID } }
-
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.