Display a map

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

display a map

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:

  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 Maps SDK for Qt, version 200.3.0 or later is installed.
  4. The Qt 6.5.1 software development framework is installed.

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.

  1. Start Qt Creator.

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

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

  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. Leave the 3D project box unchecked. At the ArcGIS Online Basemap dropdown menu, select Topographic. Then click Next.

  8. 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.

  9. 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.

  1. 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.cpp
    Expand
    Use dark colors for code blocks
    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
        // 2. API key authentication: Get 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 = QString("");
    
    Expand

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 setupViewpoint(); under private:. Then save and close the file.

    Display_a_map.h
    Expand
    Use dark colors for code blocks
    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
    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
    private:
        Esri::ArcGISRuntime::MapQuickView* mapView() const;
        void setMapView(Esri::ArcGISRuntime::MapQuickView* mapView);
    
        void setupViewpoint();
    
    Expand
  3. In the Projects window, open the Sources folder. Open the display_a_map.cpp file.

  4. Add the following #include statements.

    Display_a_map.cpp
    Use dark colors for code blocks
    12 12 12 12 12 12 12 12 12 12 12 12 13 14 15 16 17 18 19 20 21 21 21 21 21 21 21 21 20 19 19 19 19 19 19 19 19 19 19 19 19 19 18 17 16 15 14 13 12 11 10 10 10 10 10 10 10 10 10 10 10 10 10 10 9 8 8 8
    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
    #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>
    

Create the view point

  1. Add code to implement the setupViewpoint 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 asynchronously sets the initial Map viewpoint.

    Display_a_map.cpp
    Use dark colors for code blocks
    37 37 37 37 37 37 37 37 37 37 37 37 37 37 37 37 37 37 37 37 37 37 37 37 37 37 37 37 37 37 37 37 37 37 37 37 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 51 51 51 51 51 51 51 51 51 51 51 51 51 50 49 49 49
    Add line.Add line.Add line.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
    MapQuickView* Display_a_map::mapView() const
    {
        return m_mapView;
    }
    
    void Display_a_map::setupViewpoint()
    {
    
        const Point center(-118.80543, 34.02700, SpatialReference::wgs84());
        const Viewpoint viewpoint(center, 100000.0);
        m_mapView->setViewpointAsync(viewpoint);
    
    }
    
    
  2. Add the following line of code to call setupViewpoint.

    Display_a_map.cpp
    Expand
    Use dark colors for code blocks
    52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 53 54 55 56 57 58 59 60 61 62 63 64 65 65 65 65
    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
    // 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);
    
        setupViewpoint();
    
    Expand
  3. 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:

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