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 Runtime API for Qt 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 Runtime 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 Runtime 100.11 Qt Quick C++ app project template (or a later version) and click Choose.

    You may have several selections for the ArcGIS project type. Be sure to select ArcGIS Runtime 100.11 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. 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.

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
    41 41 41 41 41 41 41 41 41 41 41 41 41 41 41 41 41 41 41 41 41 41 41 41 41 41 41 41 41 41 41 41 41 41 41 41 41 41 41 41 41 42 43 44 45 46 47 47 47 47 47 47 47
    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
    //   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.
    //
    
    #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
  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
    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 19 19 19 19 19 19 19 19 19 19 18 17 16 15 14 13 12 12 12 12 12 12 12 12 12 12 12 12 11 10 10 10
    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
    //   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();
    }
    

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.

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

//------------------------------------------------------------------------------
  1. 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.

    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
    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 45 46 47 48 49 50 50 50 50 50 50 50 50 50 50 50 50 50 49 48 48 48
    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
    //   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();
    }
    

    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.

  2. Add the following code to call setupMap.

    Display_a_map.cpp
    51 51 51 51 51 51 51 51 51 51 51 51 51 51 51 51 51 51 51 51 51 51 51 51 51 51 51 51 51 51 51 51 51 51 51 51 51 51 51 51 51 51 51 51 51 51 51 51 51 51 51 52 53 54 55 56 57 58 59 60 61 62 63 63 63 63
    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
    //   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. 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 Runtime 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. In the left-most window, under Projects, select ArcGIS.

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

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

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

  5. At the Create in field, browse to where you want to place this project. Click Next.

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

  7. In the Define Project Details dialog, give this app a description or leave as is.

  8. At the ArcGIS Online Basemap drop-down menu, select Topographic. Click Next.

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

    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.

  10. Verify your selections and click Finish.

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.

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

  2. Within the Map object, set the property initialViewpoint toviewpoint (you will create this object in the next step).

    main.qml
    30 30 30 30 30 30 30 30 30 30 30 30 30 30 30 30 30 30 30 30 30 30 30 30 30 30 30 30 30 30 31 32 33 34 35 36 36 36 36 34 32 30 28 26 24 22 20 18 16 15 14 13 12 12 12 12
    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
    //   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.
    //
    
    import QtQuick 2.6
    import QtQuick.Controls 2.2
    import Esri.ArcGISRuntime 100.11
    
    ApplicationWindow {
        id: appWindow
        width: 800
        height: 600
        title: "Display_a_map"
    
        // add a mapView component
        MapView {
            anchors.fill: parent
            // set focus to enable keyboard navigation
            focus: true
    
            // add a map to the mapview
            Map {
                // add the ArcGISTopographic basemap to the map
                initBasemapStyle: Enums.BasemapStyleArcGISTopographic
    
                initialViewpoint: viewpoint
    
            }
    
            ViewpointCenter {
                id: viewpoint
    
                // Specify the center Point
                center: Point {
                    x: -118.80543
                    y: 34.02700
                    spatialReference: SpatialReference {wkid: 4326}
                }
    
            // Specify the scale
            targetScale: 100000.0
            }
    
        }
    
    }
    

Define the viewpoint

"A ViewpointCenter defines a map area using a location (point) and a map scale. You can create a new ViewpointCenter to define the initial viewpoint to display when the map loads."

  1. After the closing brace of Map, create an instance of ViewpointCenter with an id of viewpoint. You will initially see an Expected token }' error, however you will add the closing brace when you are done defining the ViewpointCenter.

    main.qml
    30 30 30 30 30 30 30 30 30 30 30 30 30 30 30 30 30 30 30 30 30 30 30 30 30 30 30 30 30 30 31 32 33 34 35 36 37 38 39 40 41 41 39 37 35 33 31 29 27 26 25 24 23 23 23 23
    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
    //   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.
    //
    
    import QtQuick 2.6
    import QtQuick.Controls 2.2
    import Esri.ArcGISRuntime 100.11
    
    ApplicationWindow {
        id: appWindow
        width: 800
        height: 600
        title: "Display_a_map"
    
        // add a mapView component
        MapView {
            anchors.fill: parent
            // set focus to enable keyboard navigation
            focus: true
    
            // add a map to the mapview
            Map {
                // add the ArcGISTopographic basemap to the map
                initBasemapStyle: Enums.BasemapStyleArcGISTopographic
    
                initialViewpoint: viewpoint
    
            }
    
            ViewpointCenter {
                id: viewpoint
    
                // Specify the center Point
                center: Point {
                    x: -118.80543
                    y: 34.02700
                    spatialReference: SpatialReference {wkid: 4326}
                }
    
            // Specify the scale
            targetScale: 100000.0
            }
    
        }
    
    }
    
  2. Set the ViewpointCenter center property to a Point, with x (longitude), y (latitude), and SpatialReference properties set as shown. Be sure to add the closing brace for Point.

    The center property set to Point and targetScale value keep map's 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.

    main.qml
    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 45 46 47 48 48 47 46 45 44 44 44 44
    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
    //   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.
    //
    
    import QtQuick 2.6
    import QtQuick.Controls 2.2
    import Esri.ArcGISRuntime 100.11
    
    ApplicationWindow {
        id: appWindow
        width: 800
        height: 600
        title: "Display_a_map"
    
        // add a mapView component
        MapView {
            anchors.fill: parent
            // set focus to enable keyboard navigation
            focus: true
    
            // add a map to the mapview
            Map {
                // add the ArcGISTopographic basemap to the map
                initBasemapStyle: Enums.BasemapStyleArcGISTopographic
    
                initialViewpoint: viewpoint
    
            }
    
            ViewpointCenter {
                id: viewpoint
    
                // Specify the center Point
                center: Point {
                    x: -118.80543
                    y: 34.02700
                    spatialReference: SpatialReference {wkid: 4326}
                }
    
            // Specify the scale
            targetScale: 100000.0
            }
    
        }
    
    }
    
  3. Set the targetScale property of viewpoint as shown. Add the following code, including the closing brace. This will remove the Expected token }' error.

    main.qml
    42 42 42 42 42 42 42 42 42 42 42 42 42 42 42 42 42 42 42 42 42 42 42 42 42 42 42 42 42 42 42 42 42 42 42 42 42 42 42 42 42 42 43 44 45 46 47 48 49 50 51 52 52 52 52 52
    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
    //   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.
    //
    
    import QtQuick 2.6
    import QtQuick.Controls 2.2
    import Esri.ArcGISRuntime 100.11
    
    ApplicationWindow {
        id: appWindow
        width: 800
        height: 600
        title: "Display_a_map"
    
        // add a mapView component
        MapView {
            anchors.fill: parent
            // set focus to enable keyboard navigation
            focus: true
    
            // add a map to the mapview
            Map {
                // add the ArcGISTopographic basemap to the map
                initBasemapStyle: Enums.BasemapStyleArcGISTopographic
    
                initialViewpoint: viewpoint
    
            }
    
            ViewpointCenter {
                id: viewpoint
    
                // Specify the center Point
                center: Point {
                    x: -118.80543
                    y: 34.02700
                    spatialReference: SpatialReference {wkid: 4326}
                }
    
            // Specify the scale
            targetScale: 100000.0
            }
    
        }
    
    }
    

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.

  2. Modify the code to set the API key. Paste the API key, acquired from your dashboard, between the quotes.

    main.cpp
    34 34 34 34 34 34 34 34 34 34 34 34 34 34 34 34 34 34 34 34 34 34 34 34 34 34 34 34 34 34 34 34 34 34 35 36 37 38 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 39 39
    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
    //   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 <QGuiApplication>
    #include <QQmlApplicationEngine>
    #include <QQuickWindow>
    #include <QDir>
    
    //------------------------------------------------------------------------------
    
    int main(int argc, char *argv[])
    {
        qDebug() << "Initializing application";
    
        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
        {
            QCoreApplication::instance()->setProperty("Esri.ArcGISRuntime.apiKey", 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.
    
        // QCoreApplication::instance()->setProperty("Esri.ArcGISRuntime.license", "licenseString");
    
        // Intialize application window
        QQmlApplicationEngine appEngine;
        appEngine.addImportPath(QDir(QCoreApplication::applicationDirPath()).filePath("qml"));
    
    #ifdef ARCGIS_RUNTIME_IMPORT_PATH_2
        appEngine.addImportPath(ARCGIS_RUNTIME_IMPORT_PATH_2);
    #endif
    
        appEngine.load(QUrl("qrc:/qml/main.qml"));
    
        auto topLevelObject = appEngine.rootObjects().value(0);
        auto window = qobject_cast<QQuickWindow*>(topLevelObject);
        if (!window)
        {
            qCritical("Error: Your root item has to be a Window.");
    
            return -1;
        }
    
        window->show();
    
        return app.exec();
    }
    
  1. 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:

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