Skip To Content ArcGIS for Developers Sign In Dashboard

Overview

You will learn: how to build an app to load and display a web map from ArcGIS Online.

Applications can load and display 2D web maps that have been previously created with the Map Viewer or ArcGIS Pro. Web maps contain all of the settings required to set up the map such as the extent, basemap, layers and styles, pop-ups, and labels. Web maps are stored as items in ArcGIS Online or ArcGIS Enterprise. Web maps are loaded by accessing a portal and requesting an item by ID. All of the settings are applied to the map and layers when the item is loaded, saving you time from having to set them up yourself. Learn more about working with web maps in the Create a web map tutorial or by using ArcGIS Pro.

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.

Open the starter app project

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.

Steps

Preview the web map

  1. Go to the LA Trails and Parks map to view the map in the Map Viewer. Make note of the ID at the end of the URL.

Display a web map

  1. In Projects, double click on Sources > Create_a_starter_app.cpp. Update the constructor initialization list and comment out the existing code in the constructor.

    Create_a_starter_app::Create_a_starter_app(QObject* parent /* = nullptr */):
      // *** UPDATE ***
      // QObject(parent),
      // m_map(new Map(Basemap::topographicVector(this), this))
      QObject(parent)
    {
      // *** UPDATE ***
      // const Point center(-118.71511, 34.09042, SpatialReference::wgs84());
      // const Viewpoint viewpoint(center, 300000.0);
      // m_map->setInitialViewpoint(viewpoint);
    }
    
  2. Add the following code to the empty constructor body to load a web map using its item ID and then override the default viewpoint for the web map.

    Display_a_web_map::Display_a_web_map(QObject* parent /* = nullptr */):
      QObject(parent)
    {
      // *** ADD ***
      const QString map_id("41281c51f9de45edaf1c8ed44bb10e30");
      const QUrl webmapUrl(QString("https://arcgis.com/sharing/rest/content/items/" + map_id));
      m_map = new Map(webmapUrl, this);
    }
    
  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 tutorial and then display your own web map.

Change and reload the web map

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 combo box like the one from the Display a styled vector basemap tutorial to give the user control over which web map is displayed.