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
The following are required for this tutorial:
An ArcGIS account to access API keys. If you don't have an account, sign up for free.
To start this tutorial, complete the Display a map tutorial or download
and unzip the solution.
Open the display_a_map project in Qt Creator.
If you downloaded the Display a map solution, set your API key.
An API Key enables access to services, web maps, and web scenes hosted in ArcGIS Online.
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.
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.
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
// 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 = 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.
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.
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.
Double click on Sources > Display_a_map.cpp to open the file. Include the classes shown.
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.
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.
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.
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
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 = newGraphic(dume_beach, point_symbol, this);
// Add point graphic to the graphics overlay overlay->graphics()->append(point_graphic);
// Create a line PolylineBuilder* polyline_builder = newPolylineBuilder(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 = newSimpleLineSymbol(SimpleLineSymbolStyle::Solid, QColor(Qt::blue), 3, this);
// Create a graphic to display the line with its symbology Graphic* polyline_graphic = newGraphic(polyline_builder->toGeometry(), line_symbol, this);
// Add line graphic to the graphics overlay overlay->graphics()->append(polyline_graphic);
Expand
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.
To start this tutorial, complete the Display a map tutorial or download
and unzip the solution.
Open the display_a_map project in Qt Creator.
If you downloaded the Display a map solution, set your API key.
An API Key enables access to services, web maps, and web scenes hosted in ArcGIS Online.
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.
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.
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
// 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 = QString("");
Expand
Add a GraphicsOverlay
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.
If the main.qml file is not already open, in the Projects window, navigate to Resources > qml\qml.qrc > /qml and open main.qml.
Add the GraphicsOverlay type, giving it the id as shown.
A Point defines a specific location, defined by an x,y coordinate pair, and a SpatialReference. Points represent discrete locations or entities, such as a geocoded house address, the location of a water meter in a water utility network, a moving vehicle, and so on. A point can also be used in a Viewpoint to define the center of the display, as in this tutorial app.
Add the following Point to identify Point Dume Beach.
Create a SimpleMarkerSymbol symbol to display the point. Add the following code to create a small, round, red symbol. Also set the outline property to line_symbol, created in the next step.
Symbols define how graphics and features appear on a map. Different symbols are used with different geometry types. A SimpleMarkerSymbol displays a predefined marker such as circle, cross, and so on. A simple marker symbol can also have an optional outline, defined by a SimpleLineSymbol, as in this tutorial.
A SimpleLineSymbol is used to display a graphic or feature based on polyline geometries. Simple line symbols display predefined line style patterns, such as solid, dash, dot, and so on. Use a simple line symbol to add an outline to a marker symbol or polygon.
Create a SimpleLineSymbol to add an outline to the marker symbol.
Add the Component.onCompleted code shown below. This code executes only after all of the components added to the ApplicationWindow have completed instantiation. This Component.onCompleted code block could be added anywhere as long as it is a child of ApplicationWindow. This first part creates a point graphic (using a function we implement in the next step) and appends it to the graphics overlay.
Add the following createGraphic function to create an ArcGISRuntimeEnvironment Qml Object of type Graphic. This function takes geometry and symbol as property arguments and is called inside of Component.onCompleted to create each of the three graphics in this app.
You should see a point graphic at Point Dume State Beach, California.
Add a polyline graphic
A connected sequence of points defines a polyline. Use a polyline and a line symbol to create a line graphic.
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.
To create a polyline, add the following function to create a JSON object line1, with line segments and a spatial reference, and then call createObject on ArcGISRuntimeEnvironment to create the Qml object.
You should see a point and a line centered around Mahou Riviera in the Santa Monica Mountains.
Add a polygon graphic
Create a polygon graphic using a polygon and a fill symbol. A connected sequence of points that describe a closed boundary defines a polygon.
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.
A PolygonBuilder is a helper QML type used to create polygons. Use polygon_builder in a later step to connect a series of points and create the polygon. Add the following code to instantiate a PolygonBuilder.
The SimpleFillSymbol defines how to fill the interior of a polygon, and can have an optional outline defined by a SimpleLineSymbol. Add a simple fill symbol to fill the polygon with solid yellow, and use a simple line symbol to surround the polygon with a blue outline.
Add the following createPolygon function. It uses polygon_builder to create the polygon, consecutively adding and connecting five points to the polygon.