Skip To Content ArcGIS for Developers Sign In Dashboard

Overview

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

A web map is a JSON structure that contains the settings required to display a 2D map. ArcGIS and custom applications can load web maps and automatically configure the map extent, basemap, layers and styles, pop-ups, labels and more. Web maps can be created interactively with the Map Viewer and ArcGIS Pro. Web maps are stored in ArcGIS Online or ArcGIS Enterprise as an item with a unique ID.

In this tutorial, you will build an app that loads and displays a web map.

Before you begin

You must have previously installed the ArcGIS Runtime SDK for Qt and set up the development environment for your operating system.

Steps

Open the starter app project

  1. If you have already completed the Create a starter app tutorial, start Qt Creator and open your starter app project. Otherwise, download and unzip the starter app project solution, and then open it in Qt Creator.

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).

  2. Add a property for the portal item ID of the web map in the ApplicationWindow QML component immediately after the title property.

    property string itemId: "41281c51f9de45edaf1c8ed44bb10e30"
    
  3. 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: "Qt_Starter_App"
         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"
             }
         }
     }
    
  4. 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 tutorial 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.