Add graphics to a map view

You can use graphicsA graphic is a visual element composed of a geometry, symbol, and attributes that is displayed on a map or scene.Learn more to display objects on top of the data in your map viewA map view is a user interface that displays map layers and graphics in 2D. It controls the area (extent) of the map that is visible and supports user interactions such as pan and zoom.Learn more while your app is running. A graphic is a type of geoelementA geoelement refers to any geographic element in a map or map view that can be identified by its location to return attribute information.Learn more that has a shape (geometry) and attributesAttributes are fields and values for a single feature or non-spatial record. They are typically stored in a database or service such as a feature service.Learn more. A graphic can have its own symbolA symbol defines the properties used to display a geometry or text.Learn more, or can be displayed using a rendererA renderer is a collection of rules and symbols used to display the data in a layer.Learn more. Graphics are added to a graphics overlayA graphics overlay is a client-side, temporary container of graphics to display on a map view or scene view.Learn more for display in the map view.

Graphics and graphics overlays allow you to do things like:

• Show updated locations for objects in the map view, such as moving vehicles.
• Display results from an analysisAnalysis is a systematic examination of a problem that provides new information.Learn more, geocodingGeocoding is the process of converting text for an address or place to a complete address with a location.Learn more, or routingA route is a polyline that defines the best path between two or more points in a street network.Learn more operation.
• Allow the user to draw temporary sketches on top of the map.
• Store user input, such as a set of route stopsA stop is a single point along a route: it can be the origin, an intermediate stop, or destination.Learn more to visit.
• Show ad hoc text labels to describe things on the map.

How graphics work

A map view has a graphics overlay collection that may contain zero or more graphics overlaysA graphics overlay is a client-side, temporary container of graphics to display on a map view or scene view.Learn more. Each graphics overlay manages a collection of graphicsA graphic is a visual element composed of a geometry, symbol, and attributes that is displayed on a map or scene.Learn more that display on top of all data inside the map view. The graphics you add to a graphics overlay can have a mix of geometry types and attributeAttributes are fields and values for a single feature or non-spatial record. They are typically stored in a database or service such as a feature service.Learn more fields. Because they offer so much flexibility, graphics and graphics overlays are ideal for working with temporary geoelementsA geoelement refers to any geographic element in a map or map view that can be identified by its location to return attribute information.Learn more that you need to display as your app runs.

Graphics in map views and scene views

The pattern for working with graphics is the same whether in a map viewA map view is a user interface that displays map layers and graphics in 2D. It controls the area (extent) of the map that is visible and supports user interactions such as pan and zoom.Learn more or scene viewA scene view is a user interface that displays scene layers and graphics in 3D. It uses a camera to control the visible area of the scene and supports user interactions such as pan, zoom, tilt, and rotate.Learn more. In either case, the geoviewA geoview is a base class for a map view and a scene view in ArcGIS Maps SDKs for Native Apps.Learn more has a collection of graphics overlaysA graphics overlay is a client-side, temporary container of graphics to display on a map view or scene view.Learn more that contain a collection of graphicsA graphic is a visual element composed of a geometry, symbol, and attributes that is displayed on a map or scene.Learn more. When working with a scene view, additional 3D properties and symbol types are available that are not applicable when working with a map view.

For more information about working with graphics in 3D, see Add graphics to a scene view.

Graphics overlays

A GraphicsOverlay is a container for temporary graphicsA graphic is a visual element composed of a geometry, symbol, and attributes that is displayed on a map or scene.Learn more that display in your geoviewA geoview is a base class for a map view and a scene view in ArcGIS Maps SDKs for Native Apps.Learn more. Graphics you add to graphics overlaysA graphics overlay is a client-side, temporary container of graphics to display on a map view or scene view.Learn more are created at run time and are not persisted when the application closes.

The following code shows how to create a new graphics overlay and add it to your map view.

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
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
// Create a graphics overlay.
final graphicsOverlay = GraphicsOverlay();

// Set the map to the map view controller.
mapViewController.arcGISMap = map;

// Add graphics overlay to the map view controller.
mapViewController.graphicsOverlays.add(graphicsOverlay);

Unlike a feature layerA feature layer (client-side) is a data layer that can access and display features from a feature service that has the same type of geometry and attribute fields.Learn more, which always contains featuresA feature is a single record, also known as a row, that represents a real-world entity. It typically contains a geometry (point, multipoint, polyline, or polygon) and attributes but it can also contain just attributes.Learn more of a single geometryA geometry is a geometric shape, such as a point, polyline, or polygon, that contains one or more coordinates and a spatial reference.Learn more type, a graphics overlayA graphics overlay is a client-side, temporary container of graphics to display on a map view or scene view.Learn more can contain graphicsA graphic is a visual element composed of a geometry, symbol, and attributes that is displayed on a map or scene.Learn more with a variety of geometry types (a mix of points, lines, and polygons, in other words). A feature layer has a consistent schema (the same set of attributesAttributes are fields and values for a single feature or non-spatial record. They are typically stored in a database or service such as a feature service.Learn more), while graphics in a graphics overlay can each have a distinct set of attributes.

For more information and a description of when to use each, see the Features and graphics topic.

Graphics

Graphics are created at run time and only persist for as long as the app is running. You can create them to show geocodeGeocoding is the process of converting text for an address or place to a complete address with a location.Learn more candidates, routesA route is a polyline that defines the best path between two or more points in a street network.Learn more, results from analysisAnalysis is a systematic examination of a problem that provides new information.Learn more operations, and so on. They are also commonly used to show input from the user, such as a click or touch on the display.

A Graphic uses the following to represent an object on the map view:

• Geometry: a point, line, or polygon that represents the object's location and shape.
• Attributes: a collection of one or more pairs of fields and values that describe the object.
• Symbol: an object that controls the visual representation of the graphic's geometry on the display.

Draw order (z-index)

A graphic's z-index defines the draw order of that graphic within its graphics overlay. It is primarily intended for use when working with graphics in a 2D map view.

If the z-index is not set, the graphics will render in the order in which they were added to the graphics overlayA graphics overlay is a client-side, temporary container of graphics to display on a map view or scene view.Learn more, the first graphic added is rendered lowermost and subsequent graphics on top. In rare cases, the rendering algorithm may change the display order to provide more efficient rendering. If ordering is important, set the z-index explicitly on each graphic. You can also place graphics of the same geometry type in their own graphics overlay and manage the order of the graphics overlays in the map view.

Work with graphics

Because they are both geoelementsA geoelement refers to any geographic element in a map or map view that can be identified by its location to return attribute information.Learn more, you can work with graphics in much the same way as you would with featuresA feature is a single record, also known as a row, that represents a real-world entity. It typically contains a geometry (point, multipoint, polyline, or polygon) and attributes but it can also contain just attributes.Learn more. Graphics can be symbolized using attribute values, identified using a tap or click from the user, and selected in the display. You can update graphics' geometry to move them on the view and update their attributes to reflect their current state. Unlike features, graphics are not persisted when the app closes.

Add a graphics overlay and a graphic

The following example shows how to create a graphics overlayA graphics overlay is a client-side, temporary container of graphics to display on a map view or scene view.Learn more, add a single graphic, and add the overlay to a map view.

1. Create a new GraphicsOverlay.

2. Create a Geometry to define the graphic's shape and geographic location.

3. Create a symbolA symbol defines the properties used to display a geometry or text.Learn more to display the graphic.

   • You can also do this by defining a Renderer for the graphics overlayA graphics overlay is a client-side, temporary container of graphics to display on a map view or scene view.Learn more. See for more information about symbolizing geoelementsA geoelement refers to any geographic element in a map or map view that can be identified by its location to return attribute information.Learn more.

4. Create a new Graphic using the geometry and symbol.

   • Optionally, you can define a set of attributesAttributes are fields and values for a single feature or non-spatial record. They are typically stored in a database or service such as a feature service.Learn more for the graphicA graphic is a visual element composed of a geometry, symbol, and attributes that is displayed on a map or scene.Learn more.

5. Add the graphic to the graphics overlay.

6. Add the graphics overlay to the map view.

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
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
// Create a graphics overlay.
final graphicsOverlay = GraphicsOverlay();

// Create a map point for the Santa Monica pier.
final pierPoint = ArcGISPoint(
  x: -118.4978,
  y: 34.0086,
  spatialReference: SpatialReference.wgs84,
);

// Create a red circle simple marker symbol.
final redCircleSymbol = SimpleMarkerSymbol(
  style: SimpleMarkerSymbolStyle.circle,
  color: Colors.red,
  size: 10,
);

// Create a graphic from the point and symbol.
var pierGraphic = Graphic(geometry: pierPoint, symbol: redCircleSymbol);

// Add an attribute to the graphic where the key is 'type' and the value
// is 'pier'. Use this attribute in the code below for the Select section.
pierGraphic.attributes['type'] = 'pier';

// Add the new graphic to the graphics overlay.
graphicsOverlay.graphics.add(pierGraphic);

// Add graphics overlay to the map view controller.
mapViewController.graphicsOverlays.add(graphicsOverlay);

Symbolize

A comprehensive API for creating and modifying symbolsA symbol defines the properties used to display a geometry or text.Learn more for every type of geometryA geometry is a geometric shape, such as a point, polyline, or polygon, that contains one or more coordinates and a spatial reference.Learn more is provided. Symbols define properties such as color, size, and style that define how the graphic is displayed. There are specialized symbols for representing objects with text or images and you can create advanced symbols that combine multiple symbol layers^§. See Styles and data visualization to learn about the available symbol types.

There are two ways to symbolize a graphicA graphic is a visual element composed of a geometry, symbol, and attributes that is displayed on a map or scene.Learn more.

1. Apply a symbol directly to the graphic. Graphics expose a symbol property that you can use to define the symbol.
2. Apply a renderer to the graphics overlay. A rendererA renderer is a collection of rules and symbols used to display the data in a layer.Learn more is a collection of one or more symbols that are applied to all graphics in the graphics overlay. A renderer allows you to do things like control symbology based on attributeAttributes are fields and values for a single feature or non-spatial record. They are typically stored in a database or service such as a feature service.Learn more values.

If you define a renderer for a graphics overlay, you do not need to assign symbols to the individual graphics it contains. Assigning a symbol directly to a graphic overrides the symbology defined by the renderer of the graphics overlay.

Display text

To display text on the map view as a graphic, create a graphic with a point, line, or polygon to define the location for your text. You can then provide a TextSymbol that defines the font, color, size, and text to display.

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
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
// Create a map point for the Santa Monica pier.
final pierPoint = ArcGISPoint(
  x: -118.4978,
  y: 34.0086,
  spatialReference: SpatialReference.wgs84,
);

// Create the text symbol.
final pierTextSymbol = TextSymbol(
  text: 'Santa Monica Pier',
  color: Colors.red,
  size: 10,
  horizontalAlignment: HorizontalAlignment.left,
  verticalAlignment: VerticalAlignment.bottom,
);

// Create a graphic from the point and symbol.
final pierTextGraphic =
    Graphic(geometry: pierPoint, symbol: pierTextSymbol);

// Add an attribute to the graphic where the key is 'type' and the value
// is 'pier'. Use this attribute in the code below for the Select section.
pierTextGraphic.attributes['type'] = 'pier';

// Add new graphic to the graphics overlay.
graphicsOverlay.graphics.add(pierTextGraphic);

Identify

A graphic can contain descriptive information in the form of attributesAttributes are fields and values for a single feature or non-spatial record. They are typically stored in a database or service such as a feature service.Learn more. Attributes are a collection of pairs of keys (field names) and values that are defined when you create a graphic. Your app can identifyIdentify is a query based on a point on a map or scene that is used to find feature, graphic, or raster cell data.Learn more a graphic in the view from a click or tap and return its attributes. You can then display these attributes in a suitable UI element, such as a calloutA callout is a container view that can be added over the map and anchored to a coordinate with a leader.Learn more^§, pop-upA pop-up is a visual element used to display data for features or graphics in a map.Learn more, or dialog.

The following example shows how you can identify a graphics overlay in response to a tap on the map view.

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
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
// Identify the graphics overlay at the tapped location.
// Offset is provided by the onTap callback on the ArcGISMapView widget.
final identifyGraphicsOverlay =
    await mapViewController.identifyGraphicsOverlay(
  graphicsOverlay,
  screenPoint: offset,
  tolerance: 12.0,
  maximumResults: 1,
);

// Check that an identified graphic is tapped.
if (identifyGraphicsOverlay.graphics.isNotEmpty) {
  // Retrieve the identified graphic.
  final identifiedGraphic = identifyGraphicsOverlay.graphics.first;

  if (mounted) {
    showDialog(
      context: context,
      builder: (context) {
        // Display an alert dialog when the graphic is tapped.
        return AlertDialog(
          alignment: Alignment.center,
          content: Column(
            children: [
              const Text('Tapped on Graphic'),
              Text(
                '${identifiedGraphic.attributes['type']}',
              ),
            ],
          ),
        ); // AlertDialog
      },
    ); // showDialog
  }
}

Select

Select graphics to highlight them on the display. You can select zero, one, or several graphics in a graphics overlay. Each graphic's selection state is represented with property that is either true or false.

The following example finds all graphics in the graphics overlay that have a 'type' attribute of 'pier' and selects them on the display.

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
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
// Retrieve all the graphics from the graphics overlay.
final graphics = graphicsOverlay.graphics;

// Select all graphics with a 'type' attribute of 'pier'.
for (final graphic in graphics) {
  if (graphic.attributes['type'] == 'pier') {
    graphic.isSelected = true;
  }
}

Move graphics

To move a graphic, you only need to update its geometry. This is much more efficient than creating a new graphic and replacing the existing one. Updating a graphic's geometry will cause it to immediately display at the new location. Use this technique to animate the display of moving geoelementsA geoelement refers to any geographic element in a map or map view that can be identified by its location to return attribute information.Learn more.

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
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
final currentPosition = boatGraphic.geometry as ArcGISPoint;

const deltaX = -0.01;
const deltaY = -0.01;

// Define new x and y coordinates by applying the deltas.
final newX = currentPosition.x + deltaX;
final newY = currentPosition.y + deltaY;

// Update the point with the new coordinates.
final updatedPosition =
    ArcGISPoint(x: newX, y: newY, spatialReference: SpatialReference.wgs84);

boatGraphic.geometry = updatedPosition;