Overview

You will learn: how to display a web map stored in ArcGIS Online in your ArcGIS Runtime SDK for Qt app.

ArcGIS Runtime SDK for Qt allows you to access items (such as web maps) stored in ArcGIS Online and include them in your app. Since ArcGIS Online hosts lots of beautiful maps (and provides tools for creating your own), using pre-authored maps can make your apps consistent and efficient. Updates to a hosted web map will automatically appear in all apps that use them with no changes required to your code.

In this lab you will learn how to access a web map stored in ArcGIS Online. You will open a web map using its item id and display it in your app.

Before you begin

You must have previously installed the ArcGIS Runtime SDK for Qt and set up your development environment. Please review the install and setup instructions if you have not done this.

Steps

Create a new ArcGIS Runtime App Qt Creator Project

  1. Start Qt Creator.

  2. Choose File > New File or Project and select the ArcGIS project template for ArcGIS Runtime Qt Quick app. Give your app a name. For this lab we chose display-a-web-map, but you can choose any name that suits you. Also select the location where your project files should reside on your system. Select Continue.

  3. On the Define Project Details dialog, leave the settings as suggested. Select Continue.

  4. On the Kit Selection dialog, check the kits you previously setup when you installed the SDK. Select Continue.

  5. Verify your selections and select Done.

Add code to access a web map from ArcGIS Online

  1. Open the main.qml code file in your project (Resources > qml > qml.qrc > /qml > main.qml). If you followed the prior steps, it should already be open in the IDE.

  2. Update the ApplicationWindow QML component to the following to display a MapView with a web map. Note how we do not specify an initial viewpoint for the map view. This is because the web map provides this information.

     ApplicationWindow {
         id: appWindow
         width: 800
         height: 600
         title: "Display-a-web-map"
         // Add a property string to hold the web map item ID. Separating this value in its own variable allows easy update of the item ID when you want to show a different web map.
         property string itemId: "41281c51f9de45edaf1c8ed44bb10e30"
    
         MapView {
             anchors.fill: parent
             wrapAroundMode: Enums.WrapAroundModeEnabledWhenSupported
             Map {
                 // Load the web map from a portal URL constructed with the item ID.
                 initUrl: "https://www.arcgis.com/sharing/rest/content/items/" + itemId + "/data"
             }
         }
     }
    
  3. Run your app to test your code. When the app opens, you should see a parks and trailhead map of the Los Angeles area.

Congratulations, you're done!

Compare your map with our completed solution project.

Challenge

Load other web maps

Use the search tools in ArcGIS Online to locate other web maps. Replace the web map id in your code to load them in your app. Better yet, complete the Create a web map lab and then display your own web map!

Change the web map content

Alter the content of your web map: change the basemap, change the layers, change the feature symbols. Note how you can reload the web map in your app and display the updated map without making any changes to your code.

Change the displayed web map at run time

After you've collected a set of item IDs for web maps that you like, try adding a QML list control to allow the user to select a web map.