Display a map

Learn how to create and display a map with a basemap layer.

A map contains layers of geographic data. A map contains a basemap layer and, optionally, one or more data layers. You can display a specific area of a map by using a map view and setting the location and zoom level.

In this tutorial, you create and display a map of the Santa Monica Mountains in California using the topographic basemap layer.

The map and code will be used as the starting point for other 2D tutorials.

Prerequisites

Steps

Create a new ArcGIS Runtime Qt Creator Project

Use Qt Creator to create app that displays a Map centered on the Santa Monica Mountains.

1. Start Qt Creator.

2. Click File > New File or Project. Under Projects, select ArcGIS.

3. Select the ArcGIS Runtime 100.10 Qt Quick C++ app project template (or a later version) and click Choose.

   More info

   You may have several selections for the ArcGIS project type. Be sure to select ArcGIS Runtime 100.10 Qt Quick C++ app (or a later version).

4. In the Project Location dialog, name your project Display_a_map. Click Next.

5. In the Define Build System dialog, select qmake for your build system. Click Next.

6. In the Define Project Details dialog, give this app a description or leave as is. Leave the rest of this dialog as is.

7. On the Kit Selection dialog, check the kit(s) you previously set up when you installed the API. You should select a Desktop kit to run this tutorial. Click Next.

   More info

   The option to Add as a subproject to root project is only available if you have already created a root project. Ignore for this tutorial.

8. Verify your selections and click Finish.

Add a map

Use the map view to display a map centered on the Santa Monica Mountains in California. The map will contain a layer built from the ArcGISTopographic BasemapStyle.

1. In the Projects window, open the Headers folder. Double-click the file Display_a_map.h to open it.

2. Add the declaration void setupMap(); under private:. Then save and close the file.

   Display_a_map.h

   Show more lines

   Add line.

   40 40 40 40 40 40 40 40 40 40 40 40 40 40 40 40 40 40 40 40 40 40 40 40 40 40 40 40 40 40 40 40 40 40 40 40 40 40 40 40 41 42 43 44 45 46 46 46 46 46 46 46 46

   //   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.i
   
   #ifndef DISPLAY_A_MAP_H
   #define DISPLAY_A_MAP_H
   
   namespace Esri
   {
   namespace ArcGISRuntime
   {
   class Map;
   class MapQuickView;
   }
   }
   
   #include <QObject>
   
   class Display_a_map : public QObject
   {
     Q_OBJECT
   
     Q_PROPERTY(Esri::ArcGISRuntime::MapQuickView* mapView READ mapView WRITE setMapView NOTIFY mapViewChanged)
   
   public:
     explicit Display_a_map(QObject* parent = nullptr);
     ~Display_a_map() override;
   
   signals:
     void mapViewChanged();
   
   private:
     Esri::ArcGISRuntime::MapQuickView* mapView() const;
     void setMapView(Esri::ArcGISRuntime::MapQuickView* mapView);
   
     void setupMap();
   
   
   
     Esri::ArcGISRuntime::Map* m_map = nullptr;
     Esri::ArcGISRuntime::MapQuickView* m_mapView = nullptr;
   };
   
   #endif // DISPLAY_A_MAP_H

   Show more lines

3. In the Projects window, open the Sources folder. Open the Display_a_map.cpp file.

4. Add the following #include statement.

   Display_a_map.cpp

   Show more lines

   Add line.

   14 14 14 14 14 14 14 14 14 14 14 14 14 14 15 16 17 18 19 20 21 21 21 21 21 21 21 21 21 21 20 19 19 19 18 17 16 15 14 14 14 14 14 14 14 14 14 14 14 14 13 12 11 10 9 8 7 7 7 7 7 7 7 7 7 7 7 7 6 5 5 5 5

   //   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();
   }
   

   Show more lines

5. Change the constructor initialization list to match the following code. This will create a new Map using a BasemapStyle set to ArcGISTopographic.

   Display_a_map.cpp

   Show more lines

   Change 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 30 29 28 27 26 26 26 26 26 26 26 26 26 26 26 26 25 24 23 22 21 20 19 19 19 19 19 19 19 19 19 19 19 19 18 17 17 17 17

   //   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();
   }
   

   Show more lines

Set your API key

An API key is required to enable access to services, web maps, and web scenes hosted in ArcGIS Online.

If you haven't already, 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.

1. Inside the constructor, add the following code to set the API key. Replace the string YOUR_API_KEY with the key from your dashboard.

   Display_a_map.cpp

   Show more lines

   Add line.Add line.Add line.Add 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 32 33 34 35 36 37 38 39 40 40 40 40 40 40 40 40 40 40 40 39 38 37 36 35 34 33 33 33 33 33 33 33 33 33 33 33 33 32 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();
   }
   

   Show more lines

2. Add code to implement the setupMap method. This method creates a center Point based on a SpatialReference along with longitude and latitude. It also creates a Viewpoint based on center and sets scale. Lastly, it sets the initial Map viewpoint.

   More info

   The center Point and scale value keep the initial Viewpoint centered and focused on the Santa Monica Mountains. The scale value sets the level of detail to focus on the area of interest.

   The spatial reference created above is set to use World Geodetic System 1984 (WGS84), the spatial reference commonly used for GPS, and it has the well known id 4326. To learn more, see Spatial References in the ArcGIS Runtime Qt SDK Guide.

   Display_a_map.cpp

   Show more lines

   Add line.Add line.Add line.Add line.Add line.Add line.

   45 45 45 45 45 45 45 45 45 45 45 45 45 45 45 45 45 45 45 45 45 45 45 45 45 45 45 45 45 45 45 45 45 45 45 45 45 45 45 45 45 45 45 45 45 46 47 48 49 50 51 52 53 54 55 56 56 56 56 56 56 56 56 56 56 56 56 56 55 54 54 54 54

   //   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();
   }
   

   Show more lines
   More info

   The setMapView method appearing later in this file gets a handle to the MapView object that was declared in QML code and sets the Map on the MapView for display. This code is installed by the templates that ArcGIS provides when creating a new project in Qt. You should not modify it.

3. Add the following code to call setupMap.

   Display_a_map.cpp

   Show more lines

   Add line.

   57 57 57 57 57 57 57 57 57 57 57 57 57 57 57 57 57 57 57 57 57 57 57 57 57 57 57 57 57 57 57 57 57 57 57 57 57 57 57 57 57 57 57 57 57 57 57 57 57 57 57 57 57 57 57 57 57 58 59 60 61 62 63 64 65 66 67 68 69 69 69 69 69

   //   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();
   }
   

   Show more lines

4. Press <Ctrl+R> to run the app.

You should see a map with the topographic basemap layer centered on the Santa Monica Mountains in California. Zoom in and out, and drag 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:

• Add a point, line, and polygon
• Add a feature layer
• Search for an address
• Find a route and directions
• Display a web map
• Display a scene