Skip To Content ArcGIS for Developers Sign In Dashboard

Overview

You will learn: how to create geometries and graphics from coordinates and add them to a map.

Applications can display point, line, and polygon graphics on a map. Graphics are composed of a geometry, a symbol, a set of attributes, and they can display a pop-up when clicked. Graphics are commonly created by interacting with the map or by creating small sets of data manually that you want to display on a map. Graphics can be directly initialized with the Graphic class or with helper classes, and displayed on a map with the GraphicsOverlay class.

In this tutorial, you will build a simple app that draws point, polyline, and polygons graphic near Malibu beach, California.

Before you begin

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

Open the starter app project

If you have already completed the Create a starter app tutorial, start Qt Creator and open your starter app project. Otherwise, download and unzip the starter app project solution, and then open it in Qt Creator.

Steps

Import headers and declare member functions

  1. In Programs, double click on Headers > Create_a_starter_app.h and add the GraphicsOverlay class to the namespace declaration.

    namespace Esri
    {
    namespace ArcGISRuntime
    {
    class Map;
    class MapQuickView;
    
    // *** ADD ***
    class GraphicsOverlay;
    
  2. Add the createGraphics public member function declaration.

    public:
      explicit Create_a_starter_app(QObject* parent = nullptr);
      ~Create_a_starter_app() override;
    
      // *** ADD ***
      void createGraphics(Esri::ArcGISRuntime::GraphicsOverlay* overlay);
    

Add a graphics overlay

  1. In Projects, double click on Sources > Create_a_starter_app.cpp and add the following header file statements.

    #include <QUrl>
    
    // *** ADD ***
    #include "GraphicsOverlay.h"
    #include "PolylineBuilder.h"
    #include "PolygonBuilder.h"
    #include "SimpleMarkerSymbol.h"
    #include "SimpleFillSymbol.h"
    
  2. Comment out the existing code in the constructor.

    Create_a_starter_app::Create_a_starter_app(QObject* parent /* = nullptr */):
      QObject(parent),
      m_map(new Map(Basemap::topographicVector(this), this))
      QObject(parent)
    {
      // *** UPDATE ***
      // const Point center(-118.71511, 34.09042, SpatialReference::wgs84());
      // const Viewpoint viewpoint(center, 300000.0);
      // m_map->setInitialViewpoint(viewpoint);
    }
    
  3. In the Create_a_starter_app::setMapView member function, add the following code to create a graphics overlay right after the map is added to the map view.

    void Create_a_starter_app::setMapView(MapQuickView* mapView)
    {
      if (!mapView || mapView == m_mapView)
      {
        return;
      }
    
      m_mapView = mapView;
      m_mapView->setMap(m_map);
    
      // *** ADD ***
      GraphicsOverlay* overlay = new GraphicsOverlay(this);
      createGraphics(overlay);
      m_mapView->graphicsOverlays()->append(overlay);
    

Create the point, polyline, and polygon graphics

  1. Now add the implementation for Create_a_starter_app::createGraphics right after the Create_a_starter_app::setMapView member function. This centers the map view directly on Malibu, California.

    void Create_a_starter_app::createGraphics(GraphicsOverlay *overlay)
    {
        const Point center(-118.71511, 34.09042, SpatialReference::wgs84());
        m_mapView->setViewpointCenter(center, 100000);
    }
    
Add a point graphic
  1. In the Create_a_starter_app::createGraphics method, add the following code to draw a point graphic with a blue diamond symbol.

    void Create_a_starter_app::createGraphics(GraphicsOverlay *overlay)
    {
        const Point center(-118.71511, 34.09042, SpatialReference::wgs84());
        m_mapView->setViewpointCenter(center, 100000);
    
        // *** ADD ***
        Point point(-118.69333917997633, 34.032793670122885, SpatialReference::wgs84());
    
        SimpleMarkerSymbol* point_symbol = new SimpleMarkerSymbol(SimpleMarkerSymbolStyle::Diamond, QColor(Qt::blue), 10, this);
    
        Graphic* point_graphic = new Graphic(point, point_symbol, this);
    
        overlay->graphics()->append(point_graphic);
    }
    
Add a polyline graphic
  1. Add the following code to the end of the Create_a_starter_app::createGraphics method to draw a polyline graphic.

        overlay->graphics()->append(point_graphic);
    
        // *** ADD ***
        SimpleLineSymbol* line_symbol = new SimpleLineSymbol(SimpleLineSymbolStyle::DashDotDot, QColor(Qt::green), 5, this);
    
        PolylineBuilder* polyline_builder = new PolylineBuilder(SpatialReference::wgs84(), this);
        polyline_builder->addPoint(-118.67999016098526, 34.035828839974684);
        polyline_builder->addPoint(-118.65702911071331, 34.07649252525452);
    
        Graphic* polyline_graphic = new Graphic(polyline_builder->toGeometry(), line_symbol, this);
    
        overlay->graphics()->append(polyline_graphic);
    
Add a polygon graphic
  1. Add the following code to the end of the Create_a_starter_app::createGraphics method to draw a polygon graphic.

        overlay->graphics()->append(polyline_graphic);
    
        // *** ADD ***
        QList<Point> points = {
            Point(-118.70372100524446, 34.03519536420519),
            Point(-118.71766916267414, 34.03505116445459),
            Point(-118.71923322580597, 34.04919407570509),
            Point(-118.71631129436038, 34.04915962906471),
            Point(-118.71526020370266, 34.059921300916244),
            Point(-118.71153226844807, 34.06035488360282),
            Point(-118.70803735010169, 34.05014385296186),
            Point(-118.69877903513455, 34.045182336992816),
            Point(-118.6979656552508, 34.040267760924316),
            Point(-118.70259112469694, 34.038800278306674),
            Point(-118.70372100524446, 34.03519536420519)
        };
    
        PolygonBuilder* polygon_builder = new PolygonBuilder(SpatialReference::wgs84(), this);
        polygon_builder->addPoints(points);
    
        SimpleFillSymbol* fill_symbol = new SimpleFillSymbol(SimpleFillSymbolStyle::Solid, QColor(Qt::yellow), this);
    
        Graphic* fill_graphic = new Graphic(polygon_builder->toGeometry(), fill_symbol, this);
    
        overlay->graphics()->append(fill_graphic);
    
  2. Run the app and you will see the graphics.

Congratulations, you're done!

Your map should load and display a polygon graphic outlining Pepperdine University campus, a point graphic on Malibu beach, and a polyline graphic running from the beach to the mountains. Compare your map with our completed solution project.

Challenge

Add graphics with different symbols and styles

  1. Change the polygon graphic in the tutorial to use a composite symbol. Composite symbols are simply a combination of two or more symbols. To create a composite symbol, first create a new QList of Symbol pointers. Then create a CompositeSymbol object with the non-default CompositeSymbol::CompositeSymbol(const QList<Symbol *> &symbols, QObject *parent = nullptr) constructor.
  2. Add a text symbol. Text symbols are used to display text for graphics and features. For example, you can add a text symbol near the line graphic used in the tutorial by making a text symbol at a point which intersects the line graphic.

Add multiple graphics overlays

Instead of using a single graphics overlay for point, line, and polygons, create three separate graphics overlays with each holding a specific geometry and add them to the map view.