Add graphics to a scene view

You can use graphics to display objects on top of the data in your scene view while your app is running. A graphic is a type of geoelement that has a shape (geometry) and attributes. A graphic can have its own symbol, or can be displayed using a renderer. Graphics are added to a graphics overlay for display in the scene view.

Graphics displayed on a scene view.

Graphics and graphics overlays allow you to do things like:

  • Show updated locations for objects in the scene view, such as moving vehicles.
  • Display results from an analysis, geocoding, or routing operation.
  • Allow the user to draw temporary sketches on top of the scene.
  • Store user input, such as a set of route stops to visit.
  • Show ad hoc text labels to describe things on the scene.

How graphics work

A scene view has a graphics overlay collection that may contain zero or more graphics overlays. Each graphics overlay manages a collection of graphics that display on top of all data inside the scene view. The graphics you add to a graphics overlay can have a mix of geometry types and attribute fields. Because they offer so much flexibility, graphics and graphics overlays are ideal for working with temporary geoelements 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 view or scene view. In either case, the geoview has a collection of graphics overlays that contain a collection of graphics. When working with a scene view, additional 3D properties and symbol types are available that are not applicable when working with a map view.

Additional API and symbols for 3D display are discussed in the Render features and graphics in 3D topic.

  • Layer scene properties: Properties of a layer or graphics overlay that are only evaluated for display in 3D. This includes surface placement, which controls how z-values (elevation or altitude, for example) are evaluated relative to the data in the scene view.
  • Renderer scene properties: Renderer properties that are only evaluated for display in 3D. Use these properties to extract two-dimensional geometries vertically (on the z-axis) or to define heading, pitch, and roll for geoelements.
  • 3D-specific symbols: Create symbols used exclusively for 3D display, such as 3D shapes (for example sphere, cylinder, and cube) and 3D model symbols that provide a realistic display of 3D objects.

Graphics overlays

A GraphicsOverlay is a container for temporary graphics that display in your geoview. Graphics you add to graphics overlays are created at run time and are not persisted when the application closes.

You can give each graphics overlay a ID (string). If the scene view's graphics overlay collection contains several graphics overlays, you can use the ID to find the one you need.

The following code shows how to create a new graphics overlay, assign an ID, then add it to your scene 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
// --- Add graphics to map view ---


// Create a new graphics overlay.
var graphicsOverlay = new GraphicsOverlay
{
    Id = "PointsOfInterestGraphics"
};

// Create a new map point to define the graphic location.
var pierPoint = new MapPoint(-118.4978, 34.0086, SpatialReferences.Wgs84);

// Create a new symbol for the graphic.
var redCircleSymbol = new SimpleMarkerSymbol(SimpleMarkerSymbolStyle.Circle, System.Drawing.Color.Red, 20);

// Create a new graphic.
var santaMonicaPierGraphic = new Graphic(pierPoint, redCircleSymbol);

// Add attribute values (if needed).
santaMonicaPierGraphic.Attributes.Add("Name", "Santa Monica Pier");
santaMonicaPierGraphic.Attributes.Add("type", "pier");

// Add the graphic to the graphics overlay's graphics collection.
graphicsOverlay.Graphics.Add(santaMonicaPierGraphic);

// Add the graphic overlay to the geo view's graphics overlay collection.
MainView.GraphicsOverlays.Add(graphicsOverlay);



// create a new graphics overlay, give it an ID
var graphicsOverlay = new GraphicsOverlay();
graphicsOverlay.Id = "PointsOfInterestGraphics";

// Add the overlay to the view's graphics overlay collection.
MainView.GraphicsOverlays.Add(graphicsOverlay);



// Get the points-of-interest graphics overlay using its ID.
var poiGraphicsOverlay = MainView.GraphicsOverlays["PointsOfInterestGraphics"];



// Create a point to define text location (anchor point).
var labelPoint = new MapPoint(-118.4978, 34.0086, 500, SpatialReferences.Wgs84);

// Create a text symbol to define the text, color, size, angle, alignment, and offsets.
var textSymbol = new TextSymbol
{
    Text = "Santa Monica Pier",
    Angle = -45,
    Color = System.Drawing.Color.Red,
    HaloColor = System.Drawing.Color.White,
    Size = 20,
    VerticalAlignment = Esri.ArcGISRuntime.Symbology.VerticalAlignment.Bottom,
    OffsetX = -40,
    OffsetY = 15
};

// Create a graphic with the geometry and symbol.
var labelGraphic = new Graphic(labelPoint, textSymbol);



MainView.GeoViewTapped += async (s, e) =>
{
    // Get the points of interest graphics overlay.
    var pointsOfInterestOverlay = MainView.GraphicsOverlays["PointsOfInterestGraphics"];
    if (pointsOfInterestOverlay == null) { return; }

    // Identify graphics in the points-of-interest overlay using the screen tap.
    Point screenPoint = e.Position;
    var resultGraphics = await MainView.IdentifyGraphicsOverlayAsync(pointsOfInterestOverlay, screenPoint, 10, false);

    // Show name attribute value in a callout for the first graphic identified (if any).
    if (resultGraphics != null && resultGraphics.Graphics.Count > 0)
    {
        var poiGraphic = resultGraphics.Graphics.FirstOrDefault();
        var callout = new CalloutDefinition(poiGraphic)
        {
            Text = "Point of Interest",
            DetailText = poiGraphic.Attributes["name"].ToString()
        };
        // Assuming that all POI graphics are points.
        MapPoint calloutAnchor = poiGraphic.Geometry as MapPoint;
        MainView.ShowCalloutAt(calloutAnchor, callout);
    }
};



// Get all graphics with a "type" attribute of "pier".
var pierGraphics = poiGraphicsOverlay.Graphics
    .Where(g => g.Attributes["type"].ToString() == "pier");

// Select them all.
foreach (var g in pierGraphics)
{
    g.IsSelected = true;
}



// Get the current location (point) of the graphic.
var currentPosition = boatGraphic.Geometry as MapPoint;

// Define new x and y coordinates by applying an offset.
var newX = currentPosition.X + deltaX;
var newY = currentPosition.Y + deltaY;

// Update the point with the new coordinates (graphic will update to show new location).
var updatedPosition = new MapPoint(newX, newY);
boatGraphic.Geometry = updatedPosition;


// --- Add graphics to scene view ---


// Create a new graphics overlay.
var graphicsOverlay = new GraphicsOverlay
{
    Id = "PointsOfInterestGraphics"
};

// Create a new map point to define the graphic location.
var pierPoint = new MapPoint(-118.4978, 34.0086, SpatialReferences.Wgs84);

// Create a new symbol for the graphic.
var redSphereSymbol = new SimpleMarkerSceneSymbol(SimpleMarkerSceneSymbolStyle.Sphere,
                                                  System.Drawing.Color.Red,
                                                  500, 500, 500,
                                                  SceneSymbolAnchorPosition.Center);

// Create a new graphic.
var santaMonicaPierGraphic = new Graphic(pierPoint, redSphereSymbol);

// Add attribute values (if needed).
santaMonicaPierGraphic.Attributes.Add("Name", "Santa Monica Pier");
santaMonicaPierGraphic.Attributes.Add("type", "pier");

// Add the graphic to the graphics overlay's graphics collection.
graphicsOverlay.Graphics.Add(santaMonicaPierGraphic);

// Add the graphic overlay to the geo view's graphics overlay collection.
MainView.GraphicsOverlays.Add(graphicsOverlay);

Later, you can access it from the scene view's graphics overlay collection using its ID.

                                                                                                                                                  
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
// --- Add graphics to map view ---


// Create a new graphics overlay.
var graphicsOverlay = new GraphicsOverlay
{
    Id = "PointsOfInterestGraphics"
};

// Create a new map point to define the graphic location.
var pierPoint = new MapPoint(-118.4978, 34.0086, SpatialReferences.Wgs84);

// Create a new symbol for the graphic.
var redCircleSymbol = new SimpleMarkerSymbol(SimpleMarkerSymbolStyle.Circle, System.Drawing.Color.Red, 20);

// Create a new graphic.
var santaMonicaPierGraphic = new Graphic(pierPoint, redCircleSymbol);

// Add attribute values (if needed).
santaMonicaPierGraphic.Attributes.Add("Name", "Santa Monica Pier");
santaMonicaPierGraphic.Attributes.Add("type", "pier");

// Add the graphic to the graphics overlay's graphics collection.
graphicsOverlay.Graphics.Add(santaMonicaPierGraphic);

// Add the graphic overlay to the geo view's graphics overlay collection.
MainView.GraphicsOverlays.Add(graphicsOverlay);



// create a new graphics overlay, give it an ID
var graphicsOverlay = new GraphicsOverlay();
graphicsOverlay.Id = "PointsOfInterestGraphics";

// Add the overlay to the view's graphics overlay collection.
MainView.GraphicsOverlays.Add(graphicsOverlay);



// Get the points-of-interest graphics overlay using its ID.
var poiGraphicsOverlay = MainView.GraphicsOverlays["PointsOfInterestGraphics"];



// Create a point to define text location (anchor point).
var labelPoint = new MapPoint(-118.4978, 34.0086, 500, SpatialReferences.Wgs84);

// Create a text symbol to define the text, color, size, angle, alignment, and offsets.
var textSymbol = new TextSymbol
{
    Text = "Santa Monica Pier",
    Angle = -45,
    Color = System.Drawing.Color.Red,
    HaloColor = System.Drawing.Color.White,
    Size = 20,
    VerticalAlignment = Esri.ArcGISRuntime.Symbology.VerticalAlignment.Bottom,
    OffsetX = -40,
    OffsetY = 15
};

// Create a graphic with the geometry and symbol.
var labelGraphic = new Graphic(labelPoint, textSymbol);



MainView.GeoViewTapped += async (s, e) =>
{
    // Get the points of interest graphics overlay.
    var pointsOfInterestOverlay = MainView.GraphicsOverlays["PointsOfInterestGraphics"];
    if (pointsOfInterestOverlay == null) { return; }

    // Identify graphics in the points-of-interest overlay using the screen tap.
    Point screenPoint = e.Position;
    var resultGraphics = await MainView.IdentifyGraphicsOverlayAsync(pointsOfInterestOverlay, screenPoint, 10, false);

    // Show name attribute value in a callout for the first graphic identified (if any).
    if (resultGraphics != null && resultGraphics.Graphics.Count > 0)
    {
        var poiGraphic = resultGraphics.Graphics.FirstOrDefault();
        var callout = new CalloutDefinition(poiGraphic)
        {
            Text = "Point of Interest",
            DetailText = poiGraphic.Attributes["name"].ToString()
        };
        // Assuming that all POI graphics are points.
        MapPoint calloutAnchor = poiGraphic.Geometry as MapPoint;
        MainView.ShowCalloutAt(calloutAnchor, callout);
    }
};



// Get all graphics with a "type" attribute of "pier".
var pierGraphics = poiGraphicsOverlay.Graphics
    .Where(g => g.Attributes["type"].ToString() == "pier");

// Select them all.
foreach (var g in pierGraphics)
{
    g.IsSelected = true;
}



// Get the current location (point) of the graphic.
var currentPosition = boatGraphic.Geometry as MapPoint;

// Define new x and y coordinates by applying an offset.
var newX = currentPosition.X + deltaX;
var newY = currentPosition.Y + deltaY;

// Update the point with the new coordinates (graphic will update to show new location).
var updatedPosition = new MapPoint(newX, newY);
boatGraphic.Geometry = updatedPosition;


// --- Add graphics to scene view ---


// Create a new graphics overlay.
var graphicsOverlay = new GraphicsOverlay
{
    Id = "PointsOfInterestGraphics"
};

// Create a new map point to define the graphic location.
var pierPoint = new MapPoint(-118.4978, 34.0086, SpatialReferences.Wgs84);

// Create a new symbol for the graphic.
var redSphereSymbol = new SimpleMarkerSceneSymbol(SimpleMarkerSceneSymbolStyle.Sphere,
                                                  System.Drawing.Color.Red,
                                                  500, 500, 500,
                                                  SceneSymbolAnchorPosition.Center);

// Create a new graphic.
var santaMonicaPierGraphic = new Graphic(pierPoint, redSphereSymbol);

// Add attribute values (if needed).
santaMonicaPierGraphic.Attributes.Add("Name", "Santa Monica Pier");
santaMonicaPierGraphic.Attributes.Add("type", "pier");

// Add the graphic to the graphics overlay's graphics collection.
graphicsOverlay.Graphics.Add(santaMonicaPierGraphic);

// Add the graphic overlay to the geo view's graphics overlay collection.
MainView.GraphicsOverlays.Add(graphicsOverlay);

Unlike a feature layer, which always contains features of a single geometry type, a graphics overlay can contain graphics 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 attributes), 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 geocode candidates, routes, results from analysis 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 scene 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. In the scene view, when the graphics overlay is displayed in dynamic rendering mode, display order of the graphics is determined by the distance from the camera rather than by z-index. In a scene view, the z-index is only applied when the graphics overlay is displayed in static rendering mode, where graphics are draped on the surface of the scene.

If using static rendering mode in a scene view and the z-index is not set, the graphics will render in the order in which they were added to the graphics overlay, 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 scene view.

Work with graphics

Because they are both geoelements, you can work with graphics in much the same way as you would with features. 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 overlay, add a single graphic, and add the overlay to a scene view.

  1. Create a new GraphicsOverlay.

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

  3. Create a symbol to display the graphic.

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

    • Optionally, you can define a set of attributes for the graphic.
  5. Add the graphic to the graphics overlay.

  6. Add the graphics overlay to the scene 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
// --- Add graphics to map view ---


// Create a new graphics overlay.
var graphicsOverlay = new GraphicsOverlay
{
    Id = "PointsOfInterestGraphics"
};

// Create a new map point to define the graphic location.
var pierPoint = new MapPoint(-118.4978, 34.0086, SpatialReferences.Wgs84);

// Create a new symbol for the graphic.
var redCircleSymbol = new SimpleMarkerSymbol(SimpleMarkerSymbolStyle.Circle, System.Drawing.Color.Red, 20);

// Create a new graphic.
var santaMonicaPierGraphic = new Graphic(pierPoint, redCircleSymbol);

// Add attribute values (if needed).
santaMonicaPierGraphic.Attributes.Add("Name", "Santa Monica Pier");
santaMonicaPierGraphic.Attributes.Add("type", "pier");

// Add the graphic to the graphics overlay's graphics collection.
graphicsOverlay.Graphics.Add(santaMonicaPierGraphic);

// Add the graphic overlay to the geo view's graphics overlay collection.
MainView.GraphicsOverlays.Add(graphicsOverlay);



// create a new graphics overlay, give it an ID
var graphicsOverlay = new GraphicsOverlay();
graphicsOverlay.Id = "PointsOfInterestGraphics";

// Add the overlay to the view's graphics overlay collection.
MainView.GraphicsOverlays.Add(graphicsOverlay);



// Get the points-of-interest graphics overlay using its ID.
var poiGraphicsOverlay = MainView.GraphicsOverlays["PointsOfInterestGraphics"];



// Create a point to define text location (anchor point).
var labelPoint = new MapPoint(-118.4978, 34.0086, 500, SpatialReferences.Wgs84);

// Create a text symbol to define the text, color, size, angle, alignment, and offsets.
var textSymbol = new TextSymbol
{
    Text = "Santa Monica Pier",
    Angle = -45,
    Color = System.Drawing.Color.Red,
    HaloColor = System.Drawing.Color.White,
    Size = 20,
    VerticalAlignment = Esri.ArcGISRuntime.Symbology.VerticalAlignment.Bottom,
    OffsetX = -40,
    OffsetY = 15
};

// Create a graphic with the geometry and symbol.
var labelGraphic = new Graphic(labelPoint, textSymbol);



MainView.GeoViewTapped += async (s, e) =>
{
    // Get the points of interest graphics overlay.
    var pointsOfInterestOverlay = MainView.GraphicsOverlays["PointsOfInterestGraphics"];
    if (pointsOfInterestOverlay == null) { return; }

    // Identify graphics in the points-of-interest overlay using the screen tap.
    Point screenPoint = e.Position;
    var resultGraphics = await MainView.IdentifyGraphicsOverlayAsync(pointsOfInterestOverlay, screenPoint, 10, false);

    // Show name attribute value in a callout for the first graphic identified (if any).
    if (resultGraphics != null && resultGraphics.Graphics.Count > 0)
    {
        var poiGraphic = resultGraphics.Graphics.FirstOrDefault();
        var callout = new CalloutDefinition(poiGraphic)
        {
            Text = "Point of Interest",
            DetailText = poiGraphic.Attributes["name"].ToString()
        };
        // Assuming that all POI graphics are points.
        MapPoint calloutAnchor = poiGraphic.Geometry as MapPoint;
        MainView.ShowCalloutAt(calloutAnchor, callout);
    }
};



// Get all graphics with a "type" attribute of "pier".
var pierGraphics = poiGraphicsOverlay.Graphics
    .Where(g => g.Attributes["type"].ToString() == "pier");

// Select them all.
foreach (var g in pierGraphics)
{
    g.IsSelected = true;
}



// Get the current location (point) of the graphic.
var currentPosition = boatGraphic.Geometry as MapPoint;

// Define new x and y coordinates by applying an offset.
var newX = currentPosition.X + deltaX;
var newY = currentPosition.Y + deltaY;

// Update the point with the new coordinates (graphic will update to show new location).
var updatedPosition = new MapPoint(newX, newY);
boatGraphic.Geometry = updatedPosition;


// --- Add graphics to scene view ---


// Create a new graphics overlay.
var graphicsOverlay = new GraphicsOverlay
{
    Id = "PointsOfInterestGraphics"
};

// Create a new map point to define the graphic location.
var pierPoint = new MapPoint(-118.4978, 34.0086, SpatialReferences.Wgs84);

// Create a new symbol for the graphic.
var redSphereSymbol = new SimpleMarkerSceneSymbol(SimpleMarkerSceneSymbolStyle.Sphere,
                                                  System.Drawing.Color.Red,
                                                  500, 500, 500,
                                                  SceneSymbolAnchorPosition.Center);

// Create a new graphic.
var santaMonicaPierGraphic = new Graphic(pierPoint, redSphereSymbol);

// Add attribute values (if needed).
santaMonicaPierGraphic.Attributes.Add("Name", "Santa Monica Pier");
santaMonicaPierGraphic.Attributes.Add("type", "pier");

// Add the graphic to the graphics overlay's graphics collection.
graphicsOverlay.Graphics.Add(santaMonicaPierGraphic);

// Add the graphic overlay to the geo view's graphics overlay collection.
MainView.GraphicsOverlays.Add(graphicsOverlay);

Symbolize

ArcGIS Runtime provides a comprehensive API for creating and modifying symbols for every type of geometry. 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. You can use any of the 2D symbols to display graphics in a scene view as well as symbols designed exclusively for display in 3D.

There are two ways to symbolize a graphic.

  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 renderer 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 attribute 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 scene 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
// --- Add graphics to map view ---


// Create a new graphics overlay.
var graphicsOverlay = new GraphicsOverlay
{
    Id = "PointsOfInterestGraphics"
};

// Create a new map point to define the graphic location.
var pierPoint = new MapPoint(-118.4978, 34.0086, SpatialReferences.Wgs84);

// Create a new symbol for the graphic.
var redCircleSymbol = new SimpleMarkerSymbol(SimpleMarkerSymbolStyle.Circle, System.Drawing.Color.Red, 20);

// Create a new graphic.
var santaMonicaPierGraphic = new Graphic(pierPoint, redCircleSymbol);

// Add attribute values (if needed).
santaMonicaPierGraphic.Attributes.Add("Name", "Santa Monica Pier");
santaMonicaPierGraphic.Attributes.Add("type", "pier");

// Add the graphic to the graphics overlay's graphics collection.
graphicsOverlay.Graphics.Add(santaMonicaPierGraphic);

// Add the graphic overlay to the geo view's graphics overlay collection.
MainView.GraphicsOverlays.Add(graphicsOverlay);



// create a new graphics overlay, give it an ID
var graphicsOverlay = new GraphicsOverlay();
graphicsOverlay.Id = "PointsOfInterestGraphics";

// Add the overlay to the view's graphics overlay collection.
MainView.GraphicsOverlays.Add(graphicsOverlay);



// Get the points-of-interest graphics overlay using its ID.
var poiGraphicsOverlay = MainView.GraphicsOverlays["PointsOfInterestGraphics"];



// Create a point to define text location (anchor point).
var labelPoint = new MapPoint(-118.4978, 34.0086, 500, SpatialReferences.Wgs84);

// Create a text symbol to define the text, color, size, angle, alignment, and offsets.
var textSymbol = new TextSymbol
{
    Text = "Santa Monica Pier",
    Angle = -45,
    Color = System.Drawing.Color.Red,
    HaloColor = System.Drawing.Color.White,
    Size = 20,
    VerticalAlignment = Esri.ArcGISRuntime.Symbology.VerticalAlignment.Bottom,
    OffsetX = -40,
    OffsetY = 15
};

// Create a graphic with the geometry and symbol.
var labelGraphic = new Graphic(labelPoint, textSymbol);



MainView.GeoViewTapped += async (s, e) =>
{
    // Get the points of interest graphics overlay.
    var pointsOfInterestOverlay = MainView.GraphicsOverlays["PointsOfInterestGraphics"];
    if (pointsOfInterestOverlay == null) { return; }

    // Identify graphics in the points-of-interest overlay using the screen tap.
    Point screenPoint = e.Position;
    var resultGraphics = await MainView.IdentifyGraphicsOverlayAsync(pointsOfInterestOverlay, screenPoint, 10, false);

    // Show name attribute value in a callout for the first graphic identified (if any).
    if (resultGraphics != null && resultGraphics.Graphics.Count > 0)
    {
        var poiGraphic = resultGraphics.Graphics.FirstOrDefault();
        var callout = new CalloutDefinition(poiGraphic)
        {
            Text = "Point of Interest",
            DetailText = poiGraphic.Attributes["name"].ToString()
        };
        // Assuming that all POI graphics are points.
        MapPoint calloutAnchor = poiGraphic.Geometry as MapPoint;
        MainView.ShowCalloutAt(calloutAnchor, callout);
    }
};



// Get all graphics with a "type" attribute of "pier".
var pierGraphics = poiGraphicsOverlay.Graphics
    .Where(g => g.Attributes["type"].ToString() == "pier");

// Select them all.
foreach (var g in pierGraphics)
{
    g.IsSelected = true;
}



// Get the current location (point) of the graphic.
var currentPosition = boatGraphic.Geometry as MapPoint;

// Define new x and y coordinates by applying an offset.
var newX = currentPosition.X + deltaX;
var newY = currentPosition.Y + deltaY;

// Update the point with the new coordinates (graphic will update to show new location).
var updatedPosition = new MapPoint(newX, newY);
boatGraphic.Geometry = updatedPosition;


// --- Add graphics to scene view ---


// Create a new graphics overlay.
var graphicsOverlay = new GraphicsOverlay
{
    Id = "PointsOfInterestGraphics"
};

// Create a new map point to define the graphic location.
var pierPoint = new MapPoint(-118.4978, 34.0086, SpatialReferences.Wgs84);

// Create a new symbol for the graphic.
var redSphereSymbol = new SimpleMarkerSceneSymbol(SimpleMarkerSceneSymbolStyle.Sphere,
                                                  System.Drawing.Color.Red,
                                                  500, 500, 500,
                                                  SceneSymbolAnchorPosition.Center);

// Create a new graphic.
var santaMonicaPierGraphic = new Graphic(pierPoint, redSphereSymbol);

// Add attribute values (if needed).
santaMonicaPierGraphic.Attributes.Add("Name", "Santa Monica Pier");
santaMonicaPierGraphic.Attributes.Add("type", "pier");

// Add the graphic to the graphics overlay's graphics collection.
graphicsOverlay.Graphics.Add(santaMonicaPierGraphic);

// Add the graphic overlay to the geo view's graphics overlay collection.
MainView.GraphicsOverlays.Add(graphicsOverlay);

Identify

A graphic can contain descriptive information in the form of attributes. Attributes are a collection of pairs of keys (field names) and values that are defined when you create a graphic. Your app can identify 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 callout, pop-up, or dialog.

The following example shows how you can identify a graphics overlay in response to a tap on the scene view. An attribute (name) is shown in a callout next to the identified graphic.

                                                                                                                                                  
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
// --- Add graphics to map view ---


// Create a new graphics overlay.
var graphicsOverlay = new GraphicsOverlay
{
    Id = "PointsOfInterestGraphics"
};

// Create a new map point to define the graphic location.
var pierPoint = new MapPoint(-118.4978, 34.0086, SpatialReferences.Wgs84);

// Create a new symbol for the graphic.
var redCircleSymbol = new SimpleMarkerSymbol(SimpleMarkerSymbolStyle.Circle, System.Drawing.Color.Red, 20);

// Create a new graphic.
var santaMonicaPierGraphic = new Graphic(pierPoint, redCircleSymbol);

// Add attribute values (if needed).
santaMonicaPierGraphic.Attributes.Add("Name", "Santa Monica Pier");
santaMonicaPierGraphic.Attributes.Add("type", "pier");

// Add the graphic to the graphics overlay's graphics collection.
graphicsOverlay.Graphics.Add(santaMonicaPierGraphic);

// Add the graphic overlay to the geo view's graphics overlay collection.
MainView.GraphicsOverlays.Add(graphicsOverlay);



// create a new graphics overlay, give it an ID
var graphicsOverlay = new GraphicsOverlay();
graphicsOverlay.Id = "PointsOfInterestGraphics";

// Add the overlay to the view's graphics overlay collection.
MainView.GraphicsOverlays.Add(graphicsOverlay);



// Get the points-of-interest graphics overlay using its ID.
var poiGraphicsOverlay = MainView.GraphicsOverlays["PointsOfInterestGraphics"];



// Create a point to define text location (anchor point).
var labelPoint = new MapPoint(-118.4978, 34.0086, 500, SpatialReferences.Wgs84);

// Create a text symbol to define the text, color, size, angle, alignment, and offsets.
var textSymbol = new TextSymbol
{
    Text = "Santa Monica Pier",
    Angle = -45,
    Color = System.Drawing.Color.Red,
    HaloColor = System.Drawing.Color.White,
    Size = 20,
    VerticalAlignment = Esri.ArcGISRuntime.Symbology.VerticalAlignment.Bottom,
    OffsetX = -40,
    OffsetY = 15
};

// Create a graphic with the geometry and symbol.
var labelGraphic = new Graphic(labelPoint, textSymbol);



MainView.GeoViewTapped += async (s, e) =>
{
    // Get the points of interest graphics overlay.
    var pointsOfInterestOverlay = MainView.GraphicsOverlays["PointsOfInterestGraphics"];
    if (pointsOfInterestOverlay == null) { return; }

    // Identify graphics in the points-of-interest overlay using the screen tap.
    Point screenPoint = e.Position;
    var resultGraphics = await MainView.IdentifyGraphicsOverlayAsync(pointsOfInterestOverlay, screenPoint, 10, false);

    // Show name attribute value in a callout for the first graphic identified (if any).
    if (resultGraphics != null && resultGraphics.Graphics.Count > 0)
    {
        var poiGraphic = resultGraphics.Graphics.FirstOrDefault();
        var callout = new CalloutDefinition(poiGraphic)
        {
            Text = "Point of Interest",
            DetailText = poiGraphic.Attributes["name"].ToString()
        };
        // Assuming that all POI graphics are points.
        MapPoint calloutAnchor = poiGraphic.Geometry as MapPoint;
        MainView.ShowCalloutAt(calloutAnchor, callout);
    }
};



// Get all graphics with a "type" attribute of "pier".
var pierGraphics = poiGraphicsOverlay.Graphics
    .Where(g => g.Attributes["type"].ToString() == "pier");

// Select them all.
foreach (var g in pierGraphics)
{
    g.IsSelected = true;
}



// Get the current location (point) of the graphic.
var currentPosition = boatGraphic.Geometry as MapPoint;

// Define new x and y coordinates by applying an offset.
var newX = currentPosition.X + deltaX;
var newY = currentPosition.Y + deltaY;

// Update the point with the new coordinates (graphic will update to show new location).
var updatedPosition = new MapPoint(newX, newY);
boatGraphic.Geometry = updatedPosition;


// --- Add graphics to scene view ---


// Create a new graphics overlay.
var graphicsOverlay = new GraphicsOverlay
{
    Id = "PointsOfInterestGraphics"
};

// Create a new map point to define the graphic location.
var pierPoint = new MapPoint(-118.4978, 34.0086, SpatialReferences.Wgs84);

// Create a new symbol for the graphic.
var redSphereSymbol = new SimpleMarkerSceneSymbol(SimpleMarkerSceneSymbolStyle.Sphere,
                                                  System.Drawing.Color.Red,
                                                  500, 500, 500,
                                                  SceneSymbolAnchorPosition.Center);

// Create a new graphic.
var santaMonicaPierGraphic = new Graphic(pierPoint, redSphereSymbol);

// Add attribute values (if needed).
santaMonicaPierGraphic.Attributes.Add("Name", "Santa Monica Pier");
santaMonicaPierGraphic.Attributes.Add("type", "pier");

// Add the graphic to the graphics overlay's graphics collection.
graphicsOverlay.Graphics.Add(santaMonicaPierGraphic);

// Add the graphic overlay to the geo view's graphics overlay collection.
MainView.GraphicsOverlays.Add(graphicsOverlay);

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 an IsSelected property that is either true or false.

The following example finds all graphics in the points of interest 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
// --- Add graphics to map view ---


// Create a new graphics overlay.
var graphicsOverlay = new GraphicsOverlay
{
    Id = "PointsOfInterestGraphics"
};

// Create a new map point to define the graphic location.
var pierPoint = new MapPoint(-118.4978, 34.0086, SpatialReferences.Wgs84);

// Create a new symbol for the graphic.
var redCircleSymbol = new SimpleMarkerSymbol(SimpleMarkerSymbolStyle.Circle, System.Drawing.Color.Red, 20);

// Create a new graphic.
var santaMonicaPierGraphic = new Graphic(pierPoint, redCircleSymbol);

// Add attribute values (if needed).
santaMonicaPierGraphic.Attributes.Add("Name", "Santa Monica Pier");
santaMonicaPierGraphic.Attributes.Add("type", "pier");

// Add the graphic to the graphics overlay's graphics collection.
graphicsOverlay.Graphics.Add(santaMonicaPierGraphic);

// Add the graphic overlay to the geo view's graphics overlay collection.
MainView.GraphicsOverlays.Add(graphicsOverlay);



// create a new graphics overlay, give it an ID
var graphicsOverlay = new GraphicsOverlay();
graphicsOverlay.Id = "PointsOfInterestGraphics";

// Add the overlay to the view's graphics overlay collection.
MainView.GraphicsOverlays.Add(graphicsOverlay);



// Get the points-of-interest graphics overlay using its ID.
var poiGraphicsOverlay = MainView.GraphicsOverlays["PointsOfInterestGraphics"];



// Create a point to define text location (anchor point).
var labelPoint = new MapPoint(-118.4978, 34.0086, 500, SpatialReferences.Wgs84);

// Create a text symbol to define the text, color, size, angle, alignment, and offsets.
var textSymbol = new TextSymbol
{
    Text = "Santa Monica Pier",
    Angle = -45,
    Color = System.Drawing.Color.Red,
    HaloColor = System.Drawing.Color.White,
    Size = 20,
    VerticalAlignment = Esri.ArcGISRuntime.Symbology.VerticalAlignment.Bottom,
    OffsetX = -40,
    OffsetY = 15
};

// Create a graphic with the geometry and symbol.
var labelGraphic = new Graphic(labelPoint, textSymbol);



MainView.GeoViewTapped += async (s, e) =>
{
    // Get the points of interest graphics overlay.
    var pointsOfInterestOverlay = MainView.GraphicsOverlays["PointsOfInterestGraphics"];
    if (pointsOfInterestOverlay == null) { return; }

    // Identify graphics in the points-of-interest overlay using the screen tap.
    Point screenPoint = e.Position;
    var resultGraphics = await MainView.IdentifyGraphicsOverlayAsync(pointsOfInterestOverlay, screenPoint, 10, false);

    // Show name attribute value in a callout for the first graphic identified (if any).
    if (resultGraphics != null && resultGraphics.Graphics.Count > 0)
    {
        var poiGraphic = resultGraphics.Graphics.FirstOrDefault();
        var callout = new CalloutDefinition(poiGraphic)
        {
            Text = "Point of Interest",
            DetailText = poiGraphic.Attributes["name"].ToString()
        };
        // Assuming that all POI graphics are points.
        MapPoint calloutAnchor = poiGraphic.Geometry as MapPoint;
        MainView.ShowCalloutAt(calloutAnchor, callout);
    }
};



// Get all graphics with a "type" attribute of "pier".
var pierGraphics = poiGraphicsOverlay.Graphics
    .Where(g => g.Attributes["type"].ToString() == "pier");

// Select them all.
foreach (var g in pierGraphics)
{
    g.IsSelected = true;
}



// Get the current location (point) of the graphic.
var currentPosition = boatGraphic.Geometry as MapPoint;

// Define new x and y coordinates by applying an offset.
var newX = currentPosition.X + deltaX;
var newY = currentPosition.Y + deltaY;

// Update the point with the new coordinates (graphic will update to show new location).
var updatedPosition = new MapPoint(newX, newY);
boatGraphic.Geometry = updatedPosition;


// --- Add graphics to scene view ---


// Create a new graphics overlay.
var graphicsOverlay = new GraphicsOverlay
{
    Id = "PointsOfInterestGraphics"
};

// Create a new map point to define the graphic location.
var pierPoint = new MapPoint(-118.4978, 34.0086, SpatialReferences.Wgs84);

// Create a new symbol for the graphic.
var redSphereSymbol = new SimpleMarkerSceneSymbol(SimpleMarkerSceneSymbolStyle.Sphere,
                                                  System.Drawing.Color.Red,
                                                  500, 500, 500,
                                                  SceneSymbolAnchorPosition.Center);

// Create a new graphic.
var santaMonicaPierGraphic = new Graphic(pierPoint, redSphereSymbol);

// Add attribute values (if needed).
santaMonicaPierGraphic.Attributes.Add("Name", "Santa Monica Pier");
santaMonicaPierGraphic.Attributes.Add("type", "pier");

// Add the graphic to the graphics overlay's graphics collection.
graphicsOverlay.Graphics.Add(santaMonicaPierGraphic);

// Add the graphic overlay to the geo view's graphics overlay collection.
MainView.GraphicsOverlays.Add(graphicsOverlay);

Move

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 geoelements.

See Follow a graphic in a scene view for more information about following a moving graphic with the camera.

                                                                                                                                                  
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
// --- Add graphics to map view ---


// Create a new graphics overlay.
var graphicsOverlay = new GraphicsOverlay
{
    Id = "PointsOfInterestGraphics"
};

// Create a new map point to define the graphic location.
var pierPoint = new MapPoint(-118.4978, 34.0086, SpatialReferences.Wgs84);

// Create a new symbol for the graphic.
var redCircleSymbol = new SimpleMarkerSymbol(SimpleMarkerSymbolStyle.Circle, System.Drawing.Color.Red, 20);

// Create a new graphic.
var santaMonicaPierGraphic = new Graphic(pierPoint, redCircleSymbol);

// Add attribute values (if needed).
santaMonicaPierGraphic.Attributes.Add("Name", "Santa Monica Pier");
santaMonicaPierGraphic.Attributes.Add("type", "pier");

// Add the graphic to the graphics overlay's graphics collection.
graphicsOverlay.Graphics.Add(santaMonicaPierGraphic);

// Add the graphic overlay to the geo view's graphics overlay collection.
MainView.GraphicsOverlays.Add(graphicsOverlay);



// create a new graphics overlay, give it an ID
var graphicsOverlay = new GraphicsOverlay();
graphicsOverlay.Id = "PointsOfInterestGraphics";

// Add the overlay to the view's graphics overlay collection.
MainView.GraphicsOverlays.Add(graphicsOverlay);



// Get the points-of-interest graphics overlay using its ID.
var poiGraphicsOverlay = MainView.GraphicsOverlays["PointsOfInterestGraphics"];



// Create a point to define text location (anchor point).
var labelPoint = new MapPoint(-118.4978, 34.0086, 500, SpatialReferences.Wgs84);

// Create a text symbol to define the text, color, size, angle, alignment, and offsets.
var textSymbol = new TextSymbol
{
    Text = "Santa Monica Pier",
    Angle = -45,
    Color = System.Drawing.Color.Red,
    HaloColor = System.Drawing.Color.White,
    Size = 20,
    VerticalAlignment = Esri.ArcGISRuntime.Symbology.VerticalAlignment.Bottom,
    OffsetX = -40,
    OffsetY = 15
};

// Create a graphic with the geometry and symbol.
var labelGraphic = new Graphic(labelPoint, textSymbol);



MainView.GeoViewTapped += async (s, e) =>
{
    // Get the points of interest graphics overlay.
    var pointsOfInterestOverlay = MainView.GraphicsOverlays["PointsOfInterestGraphics"];
    if (pointsOfInterestOverlay == null) { return; }

    // Identify graphics in the points-of-interest overlay using the screen tap.
    Point screenPoint = e.Position;
    var resultGraphics = await MainView.IdentifyGraphicsOverlayAsync(pointsOfInterestOverlay, screenPoint, 10, false);

    // Show name attribute value in a callout for the first graphic identified (if any).
    if (resultGraphics != null && resultGraphics.Graphics.Count > 0)
    {
        var poiGraphic = resultGraphics.Graphics.FirstOrDefault();
        var callout = new CalloutDefinition(poiGraphic)
        {
            Text = "Point of Interest",
            DetailText = poiGraphic.Attributes["name"].ToString()
        };
        // Assuming that all POI graphics are points.
        MapPoint calloutAnchor = poiGraphic.Geometry as MapPoint;
        MainView.ShowCalloutAt(calloutAnchor, callout);
    }
};



// Get all graphics with a "type" attribute of "pier".
var pierGraphics = poiGraphicsOverlay.Graphics
    .Where(g => g.Attributes["type"].ToString() == "pier");

// Select them all.
foreach (var g in pierGraphics)
{
    g.IsSelected = true;
}



// Get the current location (point) of the graphic.
var currentPosition = boatGraphic.Geometry as MapPoint;

// Define new x and y coordinates by applying an offset.
var newX = currentPosition.X + deltaX;
var newY = currentPosition.Y + deltaY;

// Update the point with the new coordinates (graphic will update to show new location).
var updatedPosition = new MapPoint(newX, newY);
boatGraphic.Geometry = updatedPosition;


// --- Add graphics to scene view ---


// Create a new graphics overlay.
var graphicsOverlay = new GraphicsOverlay
{
    Id = "PointsOfInterestGraphics"
};

// Create a new map point to define the graphic location.
var pierPoint = new MapPoint(-118.4978, 34.0086, SpatialReferences.Wgs84);

// Create a new symbol for the graphic.
var redSphereSymbol = new SimpleMarkerSceneSymbol(SimpleMarkerSceneSymbolStyle.Sphere,
                                                  System.Drawing.Color.Red,
                                                  500, 500, 500,
                                                  SceneSymbolAnchorPosition.Center);

// Create a new graphic.
var santaMonicaPierGraphic = new Graphic(pierPoint, redSphereSymbol);

// Add attribute values (if needed).
santaMonicaPierGraphic.Attributes.Add("Name", "Santa Monica Pier");
santaMonicaPierGraphic.Attributes.Add("type", "pier");

// Add the graphic to the graphics overlay's graphics collection.
graphicsOverlay.Graphics.Add(santaMonicaPierGraphic);

// Add the graphic overlay to the geo view's graphics overlay collection.
MainView.GraphicsOverlays.Add(graphicsOverlay);

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.