Display a web map

Before starting this tutorial:

1. You need an ArcGIS Location Platform or ArcGIS Online account.

2. Your system meets the system requirements.

3. The ArcGIS Maps SDK for Qt, version 200.8.0 or later is installed.

4. The Qt 6.8.2 software development framework or later is installed.

Option 1: Develop the code

To start the tutorial, complete the Display a map tutorial. This creates a map to display the Santa Monica Mountains in California using the topographic basemap from the ArcGIS Basemap Styles service The ArcGIS Basemap Styles service, also referred to as the Basemap Styles service, is a location service that provides basemap styles and data for the world. It returns styles as Mapbox styles and web maps, and data as vector tiles and/or map tiles. It supports all of the styles in the ArcGIS Basemap style and Open Basemap style family. An ArcGIS Location Platform or ArcGIS Online account is required to use the service. Learn more .

Open a Qt Creator project

1. Open the project you created by completing the Display a map tutorial.
2. Continue with the following instructions to display a map from a web map stored in ArcGIS.

Get the web map item ID

You can use ArcGIS tools Tools, also known as developer tools, are ArcGIS software applications such as portal and ArcGIS Pro that developers can use to prepare content and data for custom applications they are building. Learn more to create and view web maps A web map is a map stored as a JSON object that defines properties such as the basemap layer, data layers, layer styles, and pop-up styles. Its JSON structure is defined by the web map specification. Learn more . Use the Map Viewer Map Viewer is a browser-based mapping tool that can view, create, and save web maps. It can also perform mapping, visualization, and spatial analysis operations. Learn more to identify the web map item ID An item ID is a unique identifier representing a single item stored, managed, and accessed in a portal, such as a web map, hosted layer, or file. Learn more . This item ID will be used later in the tutorial.

1. Go to the LA Trails and Parks web map in the Map Viewer in ArcGIS Online ArcGIS 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 . This web map displays trails, trailheads and parks in the Santa Monica Mountains.
2. Make a note of the item ID at the end of the browser’s URL. The item ID should be

   41281c51f9de45edaf1c8ed44bb10e30

Initialize the map using a web map

1. In the project Sources folder of Qt Creator, open the Display_a_map.cpp file.

2. Remove the five classes shown. These are not needed when displaying a web map.

   Display_a_map.cpp

   #include "Display_a_map.h"
   #include "Map.h"
   
   #include "MapTypes.h"
   
   #include "MapQuickView.h"
   
   #include "Point.h"
   #include "Viewpoint.h"
   #include "SpatialReference.h"
   #include <QFuture>

3. Remove the comma after QObject(parent) and then modify the constructor to remove initialization with BasemapStyle and the Map.

   Display_a_map.cpp

   Display_a_map::Display_a_map(QObject* parent /* = nullptr */):
   
       QObject(parent),
   
       m_map(new Map(BasemapStyle::ArcGISTopographic, this))

4. In the setupViewpoint() method, replace the all of the existing code withing the curly brackets with the following. This code creates a QString named item_id and sets it to the item ID An item ID is a unique identifier representing a single item stored, managed, and accessed in a portal, such as a web map, hosted layer, or file. Learn more for the LA Trails and Parks web map. It appends the item ID to the ArcGIS Online base URL and stores it in a QUrl. The new code creates a Map from the web map configuration specified by the item ID.

   Display_a_map.cpp

   MapQuickView* Display_a_map::mapView() const
   {
       return m_mapView;
   }
   
   void Display_a_map::setupViewpoint()
   {
   
       const QString item_id("41281c51f9de45edaf1c8ed44bb10e30");
       const QUrl portal_url(QString("https://arcgis.com/sharing/rest/content/items/" + item_id));
       m_map = new Map(portal_url, this);
       m_mapView->setMap(m_map);
   
   }

Set developer credentials

For the final steps of this tutorial, click the tab below that corresponds to the authentication type (API key authentication or User authentication) that you chose when you completed the Display a map tutorial.

Be sure to also provide the same authentication (API key or user authentication Client ID/Redirect URL) that you used for the Display a map tutorial.

ARCGIS_RUNTIME_VERSION = 200.8.2
include($$PWD/arcgisruntime.pri)

# TODO: You need to replace the <path_to_toolkit_repo> with a valid location where the Qt Toolkit
# resides on your system, example: C:/arcgis-maps-sdk-toolkit-qt/uitools/toolkitcpp/toolkitcpp.pri
# This block determines whether you've cloned your toolkit
PATH_TO_TOOLKIT = "<path_to_toolkit_repo>/uitools/toolkitcpp/toolkitcpp.pri"

exists($${PATH_TO_TOOLKIT}) {
  message("Toolkit found")
  DEFINES += TOOLKIT_FOUND

  # include the toolkitcpp.pri, which contains all the toolkit resources
  include($${PATH_TO_TOOLKIT})

  qtHaveModule(webenginequick) {
    QT += webenginequick
  }
} else {
  message("Toolkit not found in provided path. Either set PATH_TO_TOOLKIT or use an API Key")
}

{

#ifdef TOOLKIT_FOUND

    // Define the Redirect URL string obtained when creating the OAuth credentials.
    // TODO: You need to replace the "REDIRECT_URL" with your own valid string,
    // ex: "urn:ietf:wg:oauth:2.0:oob"
    const auto qStringRedirectUrl = QString{"REDIRECT_URL"};

    // Define the URL of the portal to authenticate with.
    const QUrl qUrlPortal = QUrl{"https://www.arcgis.com/"};

    // Define a unique identifier associated with an application registered with the
    // portal that assists with client/server OAuth authentication.
    // TODO: You need to replace the "CLIENT_ID" with your own valid string.
    const QString qStringClientId = QString{"CLIENT_ID"};

    // Create a new OAuth user configuration using: the Url to mapping web service, the Client ID
    // string, and the Redirect Url string.
    auto* oAuthUserConfiguration = new OAuthUserConfiguration(qUrlPortal, qStringClientId,
                                                              qStringRedirectUrl, this);

    // Call the Toolkit's OAuthUserConfigurationManager static `addConfiguration`
    // method to use the OAuth dialog. This will tell the Authenticator to use OAuth for the provided configuration.
    Toolkit::OAuthUserConfigurationManager::addConfiguration(oAuthUserConfiguration);
#endif // TOOLKIT_FOUND

Press Ctrl + R to run the app.

You will see a map of trails, trailheads and parks in the Santa Monica Mountains. Click, drag, and scroll the mouse wheel on the map view to explore the map.

Option 2: Download the solution

1. Click the Download solution link under Solution and unzip the file to a location on your machine.

2. Open the .pro project file in Qt Creator.

Since the downloaded solution does not contain authentication credentials, you must set up authentication to create the developer credentials and add them to the project.

For the final steps of this tutorial, click the tab below that corresponds to the authentication type (API key authentication or User authentication) that you chose when you completed the Display a map tutorial.

Be sure to also provide the same authentication (API key or user authentication Client ID/Redirect URL) that you used for the Display a map tutorial.

Set developer credentials in the solution

ARCGIS_RUNTIME_VERSION = 200.8.2
include($$PWD/arcgisruntime.pri)

# TODO: You need to replace the <path_to_toolkit_repo> with a valid location where the Qt Toolkit
# resides on your system, example: C:/arcgis-maps-sdk-toolkit-qt/uitools/toolkitcpp/toolkitcpp.pri
# This block determines whether you've cloned your toolkit
PATH_TO_TOOLKIT = "<path_to_toolkit_repo>/uitools/toolkitcpp/toolkitcpp.pri"

exists($${PATH_TO_TOOLKIT}) {
  message("Toolkit found")
  DEFINES += TOOLKIT_FOUND

  # include the toolkitcpp.pri, which contains all the toolkit resources
  include($${PATH_TO_TOOLKIT})

  qtHaveModule(webenginequick) {
    QT += webenginequick
  }
} else {
  message("Toolkit not found in provided path. Either set PATH_TO_TOOLKIT or use an API Key")
}

{

#ifdef TOOLKIT_FOUND

    // Define the Redirect URL string obtained when creating the OAuth credentials.
    // TODO: You need to replace the "REDIRECT_URL" with your own valid string,
    // ex: "urn:ietf:wg:oauth:2.0:oob"
    const auto qStringRedirectUrl = QString{"REDIRECT_URL"};

    // Define the URL of the portal to authenticate with.
    const QUrl qUrlPortal = QUrl{"https://www.arcgis.com/"};

    // Define a unique identifier associated with an application registered with the
    // portal that assists with client/server OAuth authentication.
    // TODO: You need to replace the "CLIENT_ID" with your own valid string.
    const QString qStringClientId = QString{"CLIENT_ID"};

    // Create a new OAuth user configuration using: the Url to mapping web service, the Client ID
    // string, and the Redirect Url string.
    auto* oAuthUserConfiguration = new OAuthUserConfiguration(qUrlPortal, qStringClientId,
                                                              qStringRedirectUrl, this);

    // Call the Toolkit's OAuthUserConfigurationManager static `addConfiguration`
    // method to use the OAuth dialog. This will tell the Authenticator to use OAuth for the provided configuration.
    Toolkit::OAuthUserConfigurationManager::addConfiguration(oAuthUserConfiguration);
#endif // TOOLKIT_FOUND

Run the solution

Press Ctrl + R to run the app.

You will see a map of trails, trailheads and parks in the Santa Monica Mountains. Click, drag, and scroll the mouse wheel on the map view to explore the map.