Add a point, line, and polygon

Learn how to display point, line, and polygon graphics in a map.

You typically use graphics to display geographic data that is not connected to a database and that is not persisted, like highlighting a route between two locations, displaying a search buffer around a point, or tracking the location of a vehicle in real-time. Graphics are composed of a geometry, symbol, and attributes.

In this tutorial, you display points, lines, and polygons on a map as graphics.

Prerequisites

Open the project in Qt Creator

1. To start this tutorial, complete the Display a map tutorial or download and unzip the solution.

2. Open the Display_a_map project in Qt Creator.

3. If you downloaded the solution, get an access token and set the API key.

   Instructions to set the API Key

   An API Key gives your app access to secure resources used in this tutorial.

   1. Go to the Create an API key tutorial to obtain a new API key access token. Ensure that the following privilege is enabled: Location services > Basemaps > Basemap styles service. Copy the access token as it will be used in the next step.

   2. In the Projects window, in the Sources folder, open the main.cpp file.

   3. Modify the code to set the API key to the copied access token. Save and close the file.

      main.cpp

      Expand

      Use dark colors for code blocks

      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 long-lived access token that gives your application access to
          // ArcGIS location services. Go to the tutorial at https://links.esri.com/create-an-api-key.
          // Copy the API Key access token.
      
          const QString accessToken = QString("");
      

      Expand

Add GraphicsOverlay class, declare member function

GraphicsOverlay is a container for temporary graphics to display on your map view. The graphics drawn in graphics overlays are created at runtime and are not persisted when your application closes. Learn more about GraphicsOverlay.

1. In the display_a_map project, double click Headers > Display_a_map.h to open the file. Add the GraphicsOverlay class to the namespace ArcGISRuntime declaration.

   Display_a_map.h

   Use dark colors for code blocks

   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
   class Map;
   class MapQuickView;
   
   class GraphicsOverlay;
   }
   

2. Add the createGraphics private member function declaration. Then save and close the header file.

   Display_a_map.h

   Expand

   Use dark colors for code blocks

   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();
   
       void createGraphics(Esri::ArcGISRuntime::GraphicsOverlay* overlay);
   

   Expand

Create a graphics overlay

A graphics overlay is a container for graphics. It is added to a map view to display graphics on a map. You can add more than one graphics overlay to a map view. Graphics overlays are displayed on top of all the other layers.

1. Double click on Sources > Display_a_map.cpp to open the file. Include the classes shown.

   Display_a_map.cpp

   Use dark colors for code blocks

   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
   81
   82
   83
   84
   85
   86
   87
   88
   89
   90
   91
   92
   93
   94
   95
   96
   97
   98
   99
   100
   101
   102
   103
   104
   105
   106
   107
   108
   109
   110
   111
   112
   113
   114
   115
   116
   117
   118
   119
   120
   121
   122
   123
   124
   #include "Display_a_map.h"
   #include "Map.h"
   #include "MapQuickView.h"
   #include "MapTypes.h"
   #include "Point.h"
   #include "SpatialReference.h"
   #include <QFuture>
   #include "Viewpoint.h"
   
   #include "Graphic.h"
   #include "GraphicListModel.h"
   #include "GraphicsOverlay.h"
   #include "GraphicsOverlayListModel.h"
   #include "PolylineBuilder.h"
   #include "PolygonBuilder.h"
   #include "SimpleFillSymbol.h"
   #include "SimpleLineSymbol.h"
   #include "SimpleMarkerSymbol.h"
   #include "SymbolTypes.h"
   

2. In the Display_a_map::setMapView member function, add three lines of code to create a GraphicsOverlay, call the createGraphics method (implemented in following steps), and append the overlay to the map view.

   Display_a_map.cpp

   Use dark colors for code blocks

   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
   81
   82
   83
   84
   85
   86
   87
   88
   89
   90
   91
   92
   93
   94
   95
   96
   97
   98
   99
   100
   101
   102
   103
   104
   105
   106
   107
   108
   109
   110
   111
   112
   113
   114
   115
   116
   117
   118
   119
   120
   121
   122
   123
   124
   // 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();
   
       GraphicsOverlay* overlay = new GraphicsOverlay(this);
       createGraphics(overlay);
       m_mapView->graphicsOverlays()->append(overlay);
   

3. Create a new method named Display_a_map::createGraphics, right after the Display_a_map::setupViewpoint method.

   Display_a_map.cpp

   Use dark colors for code blocks

   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
   81
   82
   83
   84
   85
   86
   87
   88
   89
   90
   91
   92
   93
   94
   95
   96
   97
   98
   99
   100
   101
   102
   103
   104
   105
   106
   107
   108
   109
   110
   111
   112
   113
   114
   115
   116
   117
   118
   119
   120
   121
   122
   123
   124
   void Display_a_map::setupViewpoint()
   {
       const Point center(-118.80543, 34.02700, SpatialReference::wgs84());
       const Viewpoint viewpoint(center, 100000.0);
       m_mapView->setViewpointAsync(viewpoint);
   }
   
   void Display_a_map::createGraphics(GraphicsOverlay *overlay)
   {
   
   }
   

Add a point graphic

A point graphic is created using a point and a marker symbol. A point is defined with x and y coordinates for longitude and latitude coordinates, and a spatial reference. The spatial reference is WGS84.

1. Create a Point and a SimpleMarkerSymbol. To create the Point, provide longitude (x) and latitude (y) coordinates, and a SpatialReference.

   Point graphics support a number of symbol types such as SimpleMarkerSymbol, PictureMarkerSymbol_qt and TextSymbol. See Symbol in the API documentation to learn more about symbols.

   Display_a_map.cpp

   Use dark colors for code blocks

   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
   81
   82
   83
   84
   85
   86
   87
   88
   89
   90
   91
   92
   93
   94
   95
   96
   97
   98
   99
   100
   101
   102
   103
   104
   105
   106
   107
   108
   109
   110
   111
   112
   113
   114
   115
   116
   117
   118
   119
   120
   121
   122
   123
   124
   void Display_a_map::setupViewpoint()
   {
       const Point center(-118.80543, 34.02700, SpatialReference::wgs84());
       const Viewpoint viewpoint(center, 100000.0);
       m_mapView->setViewpointAsync(viewpoint);
   }
   
   void Display_a_map::createGraphics(GraphicsOverlay *overlay)
   {
   
       // Create a point
       const Point dume_beach(-118.80657463861, 34.0005930608889, SpatialReference::wgs84());
       // Create symbols for the point
       SimpleLineSymbol* point_outline = new SimpleLineSymbol(SimpleLineSymbolStyle::Solid, QColor("blue"), 3, this);
       SimpleMarkerSymbol* point_symbol = new SimpleMarkerSymbol(SimpleMarkerSymbolStyle::Circle, QColor("red"), 10, this);
       point_symbol->setOutline(point_outline);
   
       // Create a graphic to display the point with its symbology
       Graphic* point_graphic = new Graphic(dume_beach, point_symbol, this);
       // Add point graphic to the graphics overlay
       overlay->graphics()->append(point_graphic);
   

2. Press Ctrl + R to run the app.

You should see a point graphic at Point Dume State Beach, California.

Add a polyline graphic

A line graphic is created using a polyline and a line symbol. A polyline is defined as a sequence of points.

Polylines have one or more distinct parts. Each part is defined by two points. To create a continuous line with just one part, use the Polyline constructor. To create a polyline with more than one part, use a PolylineBuilder. Polyline graphics support a number of symbol types, such as SimpleLineSymbol and TextSymbol. See Symbol in the API documentation to learn more about symbols.

1. Create a Polyline and a SimpleLineSymbol.

   To create the Polyline, create a new PointCollection with a SpatialReference and use PolylineBuilder to add a new Point objects to it. Add the highlighted code.

   Display_a_map.cpp

   Use dark colors for code blocks

   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
   81
   82
   83
   84
   85
   86
   87
   88
   89
   90
   91
   92
   93
   94
   95
   96
   97
   98
   99
   100
   101
   102
   103
   104
   105
   106
   107
   108
   109
   110
   111
   112
   113
   114
   115
   116
   117
   118
   119
   120
   121
   122
   123
   124
       // Create a graphic to display the point with its symbology
       Graphic* point_graphic = new Graphic(dume_beach, point_symbol, this);
       // Add point graphic to the graphics overlay
       overlay->graphics()->append(point_graphic);
   
       // Create a line
       PolylineBuilder* polyline_builder = new PolylineBuilder(SpatialReference::wgs84(), this);
       polyline_builder->addPoint(-118.8215, 34.0140);
       polyline_builder->addPoint(-118.8149, 34.0081);
       polyline_builder->addPoint(-118.8089, 34.0017);
       // Create a symbol for the line
       SimpleLineSymbol* line_symbol = new SimpleLineSymbol(SimpleLineSymbolStyle::Solid, QColor(Qt::blue), 3, this);
   
       // Create a graphic to display the line with its symbology
       Graphic* polyline_graphic = new Graphic(polyline_builder->toGeometry(), line_symbol, this);
       // Add line graphic to the graphics overlay
       overlay->graphics()->append(polyline_graphic);
   

2. Press Ctrl + R to run the app.

You should see a point and a line graphic along Westward Beach.

Add a polygon graphic

A polygon graphic is created using a polygon and a fill symbol. A polygon is defined as a sequence of points that describe a closed boundary.

Polygons have one or more distinct parts. Each part is a sequence of points describing a closed boundary. For a single area with no holes, you can use Polygon to create a polygon with just one part. To create a polygon with more than one part, use PolygonBuilder.

Polygon graphics support a number of symbol types such as SimpleFillSymbol, PictureFillSymbol, SimpleMarkerSymbol, and TextSymbol. See Symbol in the API documentation to learn more about symbols.

1. Create a Polygon and a SimpleFillSymbol. To create the Polygon, create a new PointCollection with a SpatialReference and use PolygonBuilder to add new Point objects to it. Add the highlighted code.

   Display_a_map.cpp

   Expand

   Use dark colors for code blocks

   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
   81
   82
   83
   84
   85
   86
   87
   88
   89
   90
   91
   92
   93
   94
   95
   96
   97
   98
   99
   100
   101
   102
   103
   104
   105
   106
   107
   108
   109
   110
   111
   112
   113
   114
   115
   116
   117
   118
   119
   120
   121
   122
   123
   124
       // Create a graphic to display the line with its symbology
       Graphic* polyline_graphic = new Graphic(polyline_builder->toGeometry(), line_symbol, this);
       // Add line graphic to the graphics overlay
       overlay->graphics()->append(polyline_graphic);
   
       // Create a list of points to make up the polygon
       const QList<Point> points = {
           Point(-118.8190, 34.0138),
           Point(-118.8068, 34.0216),
           Point(-118.7914, 34.0164),
           Point(-118.7960, 34.0086),
           Point(-118.8086, 34.0035),
       };
       // Create a polygon using the list of points above
       PolygonBuilder* polygon_builder = new PolygonBuilder(SpatialReference::wgs84(), this);
       polygon_builder->addPoints(points);
       // Create symbols for the polygon
       SimpleLineSymbol* polygon_line_symbol = new SimpleLineSymbol(SimpleLineSymbolStyle::Solid, QColor(Qt::blue), 3, this);
       SimpleFillSymbol* fill_symbol = new SimpleFillSymbol(SimpleFillSymbolStyle::Solid, QColor(Qt::yellow), polygon_line_symbol, this);
       // Create a graphic to display the polygon with its symbology
       Graphic* polygon_graphic = new Graphic(polygon_builder->toGeometry(), fill_symbol, this);
       // Add polygon graphic to the graphics overlay
       overlay->graphics()->append(polygon_graphic);
   

   Expand

2. Press Ctrl + R to run the app.

You should see a point, line, and polygon graphic around Mahou Riviera in the Santa Monica Mountains.

What's next?

Learn how to use additional API features, ArcGIS location services, and ArcGIS tools in these tutorials:

• Add a feature layer
• Search for an address
• Find a route and directions
• Display a web map
• Display a scene