Display a web map

Learn how to create and display a map from a web map stored in ArcGIS.

display a web map

A web map contains the definition of a map. Web maps are created interactively in the Map Viewer or in ArcGIS Pro and are used to share maps in ArcGIS. Applications and APIs can read, write, and display web maps. All web maps are stored in ArcGIS as an item with an item ID.

In this tutorial, you use a web map's item ID to display a map of trails, trailheads and parks in the Santa Monica Mountains. The web map is hosted in ArcGIS Online.

Prerequisites

The following are required for this tutorial:

  1. An ArcGIS account to access API keys. If you don't have an account, sign up for free.
  2. Your system meets the system requirements.
  3. The ArcGIS Runtime API for Qt is installed.

Steps

Open the project in Qt Creator

  1. To start this tutorial, complete the Display a map tutorial or download and unzip the solution.

  2. Open the display_a_map project in Qt Creator.

  3. If you downloaded the Display a map solution, set your API key.

    An API Key enables access to services, web maps, and web scenes hosted in ArcGIS Online.

    1. Go to your developer dashboard to get your API key. For these tutorials, use your default API key. It is scoped to include all of the services demonstrated in the tutorials.

    2. In the Projects window, in the Sources folder, open the main.cpp file.

    3. Modify the code to set the API key. Paste the API key, acquired from your dashboard, between the quotes. Then save and close the file.

      main.cpp
      39 39 39 39 39 39 39 39 39 39 39 39 39 39 39 39 39 39 39 39 39 39 39 39 39 39 39 39 39 39 39 39 39 39 39 39 39 39 39 40 41 42 43 44 44 44 44 44 44 44 44 44 44 44 44 44 44 44 44 44 44 44 44 44 44 44 44 44 44 44 44 44 44 44 44 44 44 44 44 44
      Add line.Add line.Add line.Add line.Add line.
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      29
      30
      31
      32
      33
      34
      35
      36
      37
      38
      39
      40
      41
      42
      43
      44
      45
      46
      47
      48
      49
      50
      51
      52
      53
      54
      55
      56
      57
      58
      59
      60
      61
      62
      63
      64
      65
      66
      67
      68
      69
      70
      71
      72
      73
      74
      75
      76
      77
      78
      79
      80
      //   Copyright 2020 Esri
      //   Licensed under the Apache License, Version 2.0 (the "License");
      //   you may not use this file except in compliance with the License.
      //   You may obtain a copy of the License at
      //
      //   https://www.apache.org/licenses/LICENSE-2.0
      //
      //   Unless required by applicable law or agreed to in writing, software
      //   distributed under the License is distributed on an "AS IS" BASIS,
      //   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
      //   See the License for the specific language governing permissions and
      //   limitations under the License.
      //
      
      #include "Display_a_map.h"
      
      #include "ArcGISRuntimeEnvironment.h"
      #include "MapQuickView.h"
      
      #include <QDir>
      #include <QGuiApplication>
      #include <QQmlApplicationEngine>
      
      //------------------------------------------------------------------------------
      
      using namespace Esri::ArcGISRuntime;
      
      int main(int argc, char *argv[])
      {
          QGuiApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
          QGuiApplication app(argc, argv);
      
          // Use of Esri location services, including basemaps and geocoding, requires
          // either an ArcGIS identity or an API key. For more information see
          // https://links.esri.com/arcgis-runtime-security-auth.
      
          // 1. ArcGIS identity: An ArcGIS named user account that is a member of an
          // organization in ArcGIS Online or ArcGIS Enterprise.
      
          // 2. API key: A permanent key that gives your application access to Esri
          // location services. Create a new API key or access existing API keys from
          // your ArcGIS for Developers dashboard (https://links.esri.com/arcgis-api-keys).
      
          const QString apiKey = QStringLiteral("");
      
          if (apiKey.isEmpty())
          {
              qWarning() << "Use of Esri location services, including basemaps, requires "
                            "you to authenticate with an ArcGIS identity or set the API Key property.";
          }
          else
          {
              ArcGISRuntimeEnvironment::setApiKey(apiKey);
          }
      
          // Production deployment of applications built with ArcGIS Runtime requires you to
          // license ArcGIS Runtime functionality. For more information see
          // https://links.esri.com/arcgis-runtime-license-and-deploy.
      
          // ArcGISRuntimeEnvironment::setLicense("Place license string in here");
      
          // Register the map view for QML
          qmlRegisterType<MapQuickView>("Esri.display_a_map", 1, 0, "MapView");
      
          // Register the Display_a_map (QQuickItem) for QML
          qmlRegisterType<Display_a_map>("Esri.display_a_map", 1, 0, "Display_a_map");
      
          // Initialize application view
          QQmlApplicationEngine engine;
      
          // Add the import Path
          engine.addImportPath(QDir(QCoreApplication::applicationDirPath()).filePath("qml"));
      
          // Set the source
          engine.load(QUrl("qrc:/qml/main.qml"));
      
          return app.exec();
      }
      
      //------------------------------------------------------------------------------

Display a web map

Display a web map by accessing a portal and requesting the map's item ID. Load and display 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 basemap, extent, layers, styles, pop-ups, and labels. Web maps are stored as items in ArcGIS Online or ArcGIS Enterprise. All of the settings are applied to the map and layers when the item is loaded, saving you effort from having to set them up yourself.

  1. In Projects, double-click Sources > Display_a_map.cpp to open the file.

  2. Remove the line of code in the constructor that initializes m_map.

    Display_a_map.cpp
    27 27 27 27 27 27 27 27 27 27 27 27 27 27 27 27 27 27 27 27 27 27 27 27 27 27 27 28 29 30 31 31 31 31 31 31 31 31 31 31 31 31 31 31 31 31 31 31 31 31 31 31 31 31 31 31 31 31 31 31 31 31 31 31 31 31
    Remove line
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    //   Copyright 2020 Esri
    //   Licensed under the Apache License, Version 2.0 (the "License");
    //   you may not use this file except in compliance with the License.
    //   You may obtain a copy of the License at
    //
    //   https://www.apache.org/licenses/LICENSE-2.0
    //
    //   Unless required by applicable law or agreed to in writing, software
    //   distributed under the License is distributed on an "AS IS" BASIS,
    //   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    //   See the License for the specific language governing permissions and
    //   limitations under the License.
    //
    
    #include "Display_a_map.h"
    
    #include "ArcGISRuntimeEnvironment.h"
    
    #include "Basemap.h"
    #include "Map.h"
    #include "MapQuickView.h"
    
    
    #include <QUrl>
    
    using namespace Esri::ArcGISRuntime;
    
    Display_a_map::Display_a_map(QObject* parent /* = nullptr */):
        QObject(parent),
    
        m_map(new Map(BasemapStyle::ArcGISTopographic, this))
    
    {
    }
    
    Display_a_map::~Display_a_map()
    {
    }
    
    MapQuickView* Display_a_map::mapView() const
    {
        return m_mapView;
    }
    
    void Display_a_map::setupMap()
    {
      const Point center(-118.80543, 34.02700, SpatialReference::wgs84());
      const Viewpoint viewpoint(center, 100000.0);
      m_mapView->setViewpoint(viewpoint);
    }
    
    // Set the view (created in QML)
    void Display_a_map::setMapView(MapQuickView* mapView)
    {
        if (!mapView || mapView == m_mapView)
        {
            return;
        }
    
        m_mapView = mapView;
        m_mapView->setMap(m_map);
    
        setupMap();
    
        emit mapViewChanged();
    }
    
  3. In the setupMap() method, replace all of the existing code with the code shown, since the web map will perform this configuration for you. This new code creates a QString named item_id and sets it to the value specified for the desired map. It then creates a QUrl named portal_url that references ArcGIS Online, and appends item_id to it. The new code creates a new Map from the web map configuration specified by the item ID and sets it to m_map.

    Display_a_map.cpp
    36 36 36 36 36 36 36 36 36 36 36 36 36 36 36 36 36 36 36 36 36 36 36 36 36 36 36 36 36 36 36 36 36 36 36 36 37 38 39 40 41 42 43 44 45 46 47 48 48 48 48 48 48 48 48 48 48 48 48 48 48 48 48 48
    Change lineChange lineChange lineChange line
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    // Copyright 2020 ESRI
    //
    // Licensed under the Apache License, Version 2.0 (the "License");
    // you may not use this file except in compliance with the License.
    // You may obtain a copy of the License at
    //
    // https://www.apache.org/licenses/LICENSE-2.0
    //
    // Unless required by applicable law or agreed to in writing, software
    // distributed under the License is distributed on an "AS IS" BASIS,
    // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    // See the License for the specific language governing permissions and
    // limitations under the License.
    //
    #include "Display_a_map.h"
    #include "ArcGISRuntimeEnvironment.h"
    
    #include "Basemap.h"
    #include "Map.h"
    #include "MapQuickView.h"
    
    
    #include <QUrl>
    
    using namespace Esri::ArcGISRuntime;
    
    Display_a_map::Display_a_map(QObject* parent /* = nullptr */):
        QObject(parent),
        m_map(new Map(BasemapStyle::ArcGISTopographic, this))
    {
    }
    
    Display_a_map::~Display_a_map()
    {
    }
    
    MapQuickView* Display_a_map::mapView() const
    {
        return m_mapView;
    }
    
    void Display_a_map::setupMap()
    {
    
      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 the view (created in QML)
    void Display_a_map::setMapView(MapQuickView* mapView)
    {
      if (!mapView || mapView == m_mapView)
      {
        return;
      }
    
      m_mapView = mapView;
      m_mapView->setMap(m_map);
      setupMap();
    
      emit mapViewChanged();
    }
    
  4. Press <Ctrl+R> to run the app.

You should see a map of

. Click, drag, and scroll the mouse wheel on the map view to explore the map.

What's next?

Learn how to use additional API features, ArcGIS platform services, and ArcGIS tools in these tutorials:

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.