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
The following are required for this tutorial:
- An ArcGIS account to access API keys. If you don't have an account, sign up for free.
- Your system meets the system requirements.
- The ArcGIS Maps SDK for Qt, version 200.0.0 or later is installed. ArcGIS Maps SDK for Qt version 200.0.0 and later requires Qt 6.
- The Qt 6 software development framework is installed.
Choose your API
You can do this tutorial in C++ or QML. Make your selection below:
Steps for C++
Create a new ArcGIS Maps Qt Creator Project
Use Qt Creator to create an app that displays a Map
centered on the Santa Monica Mountains.
Start Qt Creator.
Click File > New File or Project. Under Projects, select ArcGIS.
Select the ArcGIS Maps 200.0.0 Qt Quick C++ app project template (or a later version) and click Choose.
In the Project Location dialog, name your project display_a_map. Click Next.
In the Define Build System dialog, select qmake for your build system. Click Next.
In the Define Project Details dialog, give this app a description or leave as is. Leave the rest of this dialog as is.
Leave the 3D project box unchecked. At the ArcGIS Online Basemap dropdown menu, select Topographic. Then click Next.
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. Then click Next.
At the Project Management dialog, the option to Add as a subproject to root project is only available if you have already created a root project. Ignore this dialog for this tutorial. Click Next.
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.
In the Projects window, in the Sources folder, open the main.cpp file. 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.cppUse dark colors for code blocks Add line. Add line. Add line. Add line. Add line.
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
.
- In the Projects window, open the Headers folder. Double-click the file display_a_map.h to open it.
Add the declaration
void setup
underViewpoint(); private:
. Then save and close the file.Display_a_map.hUse dark colors for code blocks Add line. In the Projects window, open the Sources folder. Open the display_a_map.cpp file.
Add the following
#include
statements.Display_a_map.cppUse dark colors for code blocks Add line. Add line. Add line. Add line.
Create the view point
Add code to implement the
setup
method. This method creates aViewpoint center
Point
based on aSpatialReference
along with longitude and latitude. It also creates aViewpoint
based oncenter
and sets scale. Lastly, it asynchronously sets the initialMap
viewpoint.Display_a_map.cppUse dark colors for code blocks Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add the following line of code to call
setup
.Viewpoint Display_a_map.cppUse dark colors for code blocks Add line. 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.
To explore other tutorials, see What's next.
Steps for QML
Create a new ArcGIS Maps Qt Creator Project
Use Qt Creator to create an app that displays a Map
centered on the Santa Monica Mountains.
Start Qt Creator.
Click File > New File or Project. In the left-most window, under Projects, select ArcGIS.
Select the ArcGIS Maps 200.0.0 Qt Quick QML app project template (or a later version) and click Choose.
In the Project Location dialog, name your project Display_a_map.
At the Create in field, browse to where you want to place this project. Click Next.
In the Define Build System dialog, select qmake for your build system. Click Next.
In the Define Project Details dialog, give this app a description or leave as is.
At the ArcGIS Online Basemap drop-down menu, select Topographic. Click Next.
On the Kit Selection dialog, check the kit(s) you previously set up when you installed the API. Select a Desktop kit to run this tutorial. Click Next.
Verify your selections and click Finish.
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.
In the Projects window, in the Sources folder, open the main.cpp file.
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.cppUse dark colors for code blocks Add line.
Update the map
This application will 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
.
If the main.qml file is not already open, in the Projects window, navigate to Resources > qml\qml.qrc > /qml and open the main.qml file.
Within the
Map
object, set the propertyinitial
toViewpoint viewpoint
(you will create this object in the next step).main.qmlUse dark colors for code blocks Add line.
Define the viewpoint
"A ViewpointCenter
defines a map area using a location (point) and a map scale. You can create a new Viewpoint
to define the initial viewpoint to display when the map loads."
After the closing brace of Map, create an instance of
ViewpointCenter
with an id ofviewpoint
. You will initially see anExpected token }'
error, however you will add the closing brace when you are done defining theViewpoint
.Center main.qmlUse dark colors for code blocks Add line. Add line. Set the
ViewpointCenter
center
property to aPoint
, with x (longitude), y (latitude), andSpatialReference
properties set as shown. Be sure to add the closing brace forPoint
.main.qmlUse dark colors for code blocks Add line. Add line. Add line. Add line. Add line. Add line. Set the
target
property ofScale viewpoint
as shown. Add the following code, including the closing brace. This will remove theExpected token }'
error.main.qmlUse dark colors for code blocks Add line. Add line. Add line. 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 location services, and ArcGIS tools in these tutorials: