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. Under Projects, in the display_a_map project, double click Sources > Display_a_map.cpp to open the file.

    3. Replace the string YOUR_API_KEY with the API key from your dashboard.


      Display_a_map.cpp
      Change lineChange line
                                                                               
      //   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))
      
      {
      
        // Note: It is not best practice to store API keys in source code. The API key is referenced here for the convenience of this tutorial.
        const QString api_key = QStringLiteral("YOUR_API_KEY");
      
        ArcGISRuntimeEnvironment::setApiKey(api_key);
      
      }
      
      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();
      }
      

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
    Remove line
    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 31 31 31 31 31 31 31
    //   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))
    
    {
    
      // Note: It is not best practice to store API keys in source code. The API key is referenced here for the convenience of this tutorial.
      const QString api_key = QStringLiteral("YOUR_API_KEY");
    
      ArcGISRuntimeEnvironment::setApiKey(api_key);
    
    }
    
    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
    Change lineChange lineChange lineChange line
    43 43 43 43 43 43 43 43 43 43 43 43 43 43 43 43 43 43 43 43 43 43 43 43 43 43 43 43 43 43 43 43 43 43 43 43 43 43 43 43 43 43 43 44 45 46 47 48 49 50 50 50 50 50 50 50 50 50 50 50 50 50 50 50 50 50
    //   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)
    {
      // Note: it is not best practice to store API keys in source code. The API key is referenced here for the convenience of this tutorial.
      const QString api_key = QStringLiteral("YOUR_API_KEY");
    
      ArcGISRuntimeEnvironment::setApiKey(api_key);
    }
    
    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: