Skip To Content ArcGIS for Developers Sign In Dashboard

Overview

You will learn: how to build a simple app that displays a 2D map.

You can build mapping applications to display geographic data in 2D. This tutorial uses a Qt project template that is pre-configured to display a basemap using the Map class. You can either use a basemap that is hosted in ArcGIS Online or create your own basemap with custom styles. If you want to add data to your map, you can add points, lines, polygons as graphics. For larger datasets, you can learn how to add data to feature layers with the Add layers to a map tutorial. Basemaps can be loaded by URL or by using the static member functions of the Basemap class. The MapView class is responsible for displaying the map and handling user interactions.

In this tutorial you will build a simple app that displays a topographic vector basemap of the Santa Monica Mountains in California. You will use this tutorial as the starting point for most of the other Qt SDK tutorials.

Before you begin

You must have previously installed the ArcGIS Runtime SDK for Qt and set up the development environment for your operating system.

Steps

Create a new ArcGIS Runtime App Qt Creator Project

  1. Start Qt Creator.

  2. Click File > New File or Project and select the ArcGIS project template for ArcGIS Runtime 100.6 Qt Quick C++ app. Give your app a name. This tutorial uses Create_a_starter_app, but feel free to use another filename. Click Continue.

  3. On the Define Project Details dialog, leave the settings as suggested. Click Continue.

  4. On the Kit Selection dialog, check the kits you previously setup when you installed the SDK. Click Continue.

  5. Verify your selections and select Done.

Change the basemap

  1. In the Projects window, double click on the file Sources > Create_a_starter_app.cpp. Update the constructor initialization list to match the code below in order to change the default basemap from a topographic to a topographic vector basemap.

    Create_a_starter_app::Create_a_starter_app(QObject* parent /* = nullptr */):
      QObject(parent),
      // *** UPDATE ***
      // m_map(new Map(Basemap::topographic(this), this))
      m_map(new Map(Basemap::topographicVector(this), this))
    {
    }
    

Change the position of the map

  1. Inside the constructor body, add code to create static Point and Viewpoint objects.

    Create_a_starter_app::Create_a_starter_app(QObject* parent /* = nullptr */):
      QObject(parent),
      m_map(new Map(Basemap::topographicVector(this), this))
    {
      // *** ADD ***
      const Point center(-118.71511, 34.09042, SpatialReference::wgs84());
      const Viewpoint viewpoint(center, 300000.0);
    }
    
  2. Add code to the constructor to set the initial viewpoint of the map.

    Create_a_starter_app::Create_a_starter_app(QObject* parent /* = nullptr */):
      QObject(parent),
      m_map(new Map(Basemap::topographicVector(this), this))
    {
      const Point center(-118.71511, 34.09042, SpatialReference::wgs84());
      const Viewpoint viewpoint(center, 300000.0);
    
      // *** ADD ***
      m_map->setInitialViewpoint(viewpoint);
    }
    
  3. Run your code to view the map.

Congratulations, you're done!

Challenge

Explore basemaps

ArcGIS Online hosts a wide variety of basemaps that you can use in your applications. Pass different basemap enum values to the Map constructor to display different basemaps.

For example, the code below replaces the default topographic basemap with Basemap::streetsVector:

Create_a_starter_app::Create_a_starter_app(QObject* parent /* = nullptr */):
  QObject(parent),
  m_map(new Map(Basemap::streetsVector(this), this))
{
}

Learn how to create and use your own custom basemaps with the Style a vector basemap and Display a styled vector basemap tutorial.

Draw a latitude/longitude grid on the view

When developing your app, it can be useful to superimpose a latitude/longitude grid on top of the view. In the file Sources > Create_a_starter_app.cpp, add the following header.

#include "LatitudeLongitudeGrid.h"

In the Create_a_starter_app::setMapView member function implementation, create a pointer variable for a new LatitudeLongitudeGrid object, and then pass that pointer variable to the setGrid member function of the private m_mapView variable.

  LatitudeLongitudeGrid* latlonGrid = new LatitudeLongitudeGrid(this);
  m_mapView->setGrid(latlonGrid);

Learn more in the Display grid code sample.