ArcGIS Runtime SDK for .NET

Add graphics and text to graphics overlays

A graphic is a visible item on your map that can be seen as a point, line, polygon, or text. You can add graphics to your map view. These are contained in graphics overlays and are for showing temporary data that's not persisted once the application closes. For example, you may want to display a route between two locations or animate data items that change quickly.

This topic discusses adding graphics to your map in a way that generates a symbol instance for each graphic. If you're drawing a large number of graphics with the same symbology, then you should consider applying a renderer to the graphics overlay instead, which allows you to define the appearance of all the graphics in the overlay. Using renderers to add graphics is discussed in Symbols and renderers.

The image below shows an example of graphics drawn over a gray basemap. The graphics are showing:

  • Red markers showing location of buoys
  • Text symbols adding names to the islands of Craigleith and Bass Rock
  • A green cross hatched polygon showing a Gannet nesting ground on Bass Rock
  • A purple line showing the path of a boat trip.

Screenshot of a map with multiple graphics

For more information on graphics and when to use them, see Features and graphics. For more information on graphics overlays, see Add graphics overlays to your app.

Add point graphics

The following steps show how to create the red buoy markers on the image above.

  1. The location of point graphics is represented by the MapPoint geometry class. The following code shows how the buoy locations are defined:

    // define the buoy locations
    var wgs84 = SpatialReferences.Wgs84;
    var buoy1Loc = new MapPoint(-2.712642647560347, 56.062812566811544, wgs84);
    var buoy2Loc = new MapPoint(-2.6908416959572303, 56.06444173689877, wgs84);
    var buoy3Loc = new MapPoint(-2.6697273884990937, 56.064250073402874, wgs84);
    var buoy4Loc = new MapPoint(-2.6395150461199726, 56.06127916736989, wgs84);

    The points are defined in the WGS84 spatial reference, which is generally the spatial reference you would obtain from a GPS receiver, for example.

    Tip:

    If the spatial reference of the geometry of a graphic is null, then it is assumed the geometry is in the same spatial reference as the map view; if your graphics do not display as expected and have a null spatial reference, check that the coordinates of your geometry use the same spatial reference as the map view. If the spatial reference is set, and is different to that of the map view, geometries are automatically reprojected for display. For maximum efficiency, especially when dealing with large numbers of graphics or moving graphics, geometries of graphics should have the same spatial reference as the map view.

  2. Define what the points look like. Points can be drawn as simple marker symbols (circles, crosses, diamonds, etc.) or picture marker symbols represented by small bitmap images.

    The following code shows how to define a red circle marker symbol.

    // create a marker symbol
    var buoyMarker = new SimpleMarkerSymbol(SimpleMarkerSymbolStyle.Circle, Color.Red, 10);

  3. Create graphics, which are defined by the point geometry and the symbol.

    // create graphics
    var buoyGraphic1 = new Graphic(buoy1Loc, buoyMarker);
    var buoyGraphic2 = new Graphic(buoy2Loc, buoyMarker);
    var buoyGraphic3 = new Graphic(buoy3Loc, buoyMarker);
    var buoyGraphic4 = new Graphic(buoy4Loc, buoyMarker);

  4. Add the graphics to the graphics overlay, which will display them on the map view.

    // Add the graphics to the graphics overlay
    MyGraphicsOverlay.Graphics.Add(buoyGraphic1);
    MyGraphicsOverlay.Graphics.Add(buoyGraphic2);
    MyGraphicsOverlay.Graphics.Add(buoyGraphic3);
    MyGraphicsOverlay.Graphics.Add(buoyGraphic4);

Add line graphics

The following steps show how to create the purple, dashed line representing the boat trip in the image near the top of this topic.

  1. The geometry for the boat trip is represented by the Polyline class. This is built with a collection of points used to define the vertices of the line.

    //  use a polyline builder to create the new polyline from a collection of points
    var boatPositions = new PolylineBuilder(SpatialReferences.Wgs84);
    
    
    //  add positions to the builder
    boatPositions.AddPoint(new MapPoint(-2.7184791227926772, 56.06147084563517));
    boatPositions.AddPoint(new MapPoint(-2.7196807500463924, 56.06147084563517));
    boatPositions.AddPoint(new MapPoint(-2.722084004553823, 56.062141712059706));
    boatPositions.AddPoint(new MapPoint(-2.726375530459948, 56.06386674355254));
    // ... more points here ...
    boatPositions.AddPoint(new MapPoint(-2.7167625124302273, 56.06453756828941));
    boatPositions.AddPoint(new MapPoint(-2.718307461756433, 56.06348340989081));
    boatPositions.AddPoint(new MapPoint(-2.719165766937657, 56.062812566811544));
    boatPositions.AddPoint(new MapPoint(-2.7198524110826376, 56.06204587471371));
    boatPositions.AddPoint(new MapPoint(-2.719165766937657, 56.06166252294756));
    boatPositions.AddPoint(new MapPoint(-2.718307461756433, 56.06147084563517));
    
    
    // get the polyline from the builder
    var boatRoute = boatPositions.ToGeometry();

    For more information on drawing lines using the geometry API, see Geometries.

  2. Define the symbol for the boat trip using the SimpleLineSymbol class.

    // create a simple line symbol to display the polyline
    var lineSymbol = new SimpleLineSymbol(SimpleLineSymbolStyle.Dash, Color.FromArgb(255, 128, 0, 128), 1.0);

  3. Create the graphic from the line geometry and line symbol.

    // create the graphic
    var boatTripGraphic = new Graphic(boatRoute, lineSymbol);

  4. Add the graphic to the graphics overlay.

    // add the polyline graphic
    MyGraphicsOverlay.Graphics.Add(boatTripGraphic);

Add polygon graphics

The following steps show how to create the polygon representing the nesting ground area in the image near the top of this topic.

  1. The geometry for the nesting ground is defined using the Polygon class. The vertices of the polygon are created from a collection of points. For more information on building polygons, see Geometries.

    // use a polygon builder to create a new polygon from a collection of points
    var polygonBuilder = new PolygonBuilder(SpatialReferences.Wgs84);
    
    
    // add points to the polygon builder
    polygonBuilder.AddPoint(new MapPoint(-2.643077012566659, 56.077125346044475));
    polygonBuilder.AddPoint(new MapPoint(-2.6428195210159444, 56.07717324600376));
    polygonBuilder.AddPoint(new MapPoint(-2.6425405718360033, 56.07774804087097));
    polygonBuilder.AddPoint(new MapPoint(-2.6427122328698127, 56.077927662508635));
    polygonBuilder.AddPoint(new MapPoint(-2.642454741319098, 56.07829887790651));
    // ... more points here ...
    polygonBuilder.AddPoint(new MapPoint(-2.6408883343855822, 56.075808073830935));
    polygonBuilder.AddPoint(new MapPoint(-2.6417680971838577, 56.076239186057734));
    polygonBuilder.AddPoint(new MapPoint(-2.642197249768383, 56.076251161328514));
    polygonBuilder.AddPoint(new MapPoint(-2.6428409786451708, 56.07661041772168));
    polygonBuilder.AddPoint(new MapPoint(-2.643077012566659, 56.077125346044475));
    
    
    // get the polygon from the polygon builder
    var nestingGround = polygonBuilder.ToGeometry();

  2. Define a symbol for the polygon. The symbol in the screen shot above is made up of a line symbol for the outline and a fill symbol for the polygon fill.

    // define the polygon outline
    var outlineSymbol = new SimpleLineSymbol(SimpleLineSymbolStyle.Dash, Color.Blue, 1.0);
    
    
    // define the fill symbol
    var fillSymbol = new SimpleFillSymbol(SimpleFillSymbolStyle.DiagonalCross, Color.FromArgb(255, 0, 80, 0), outlineSymbol);

  3. Create the graphic from the polygon geometry and fill symbol.

    // create the graphic
    var nestingGraphic = new Graphic(nestingGround, fillSymbol);

  4. Add the polygon graphic to the graphics overlay.

    // add the polygon graphic
    MyGraphicsOverlay.Graphics.Add(nestingGraphic);

Add text

The following steps show how to add the "Craigleith" and "Bass Rock" text to the graphics overlay.

  1. The geometry for text symbols is a point. The point represents the anchor point for the text. The following code defines the anchor points for the two text symbols in the image at the top of this topic.

    var labelPointBass = new MapPoint(-2.640631, 56.078083, SpatialReferences.Wgs84);
    var labelPointCraigleith = new MapPoint(-2.720324, 56.073569, SpatialReferences.Wgs84);

  2. Create the symbols for the text items.

    // create text symbols
    var textSymBass = new TextSymbol("Bass Rock",
                                     Color.FromArgb(255, 0, 0, 230),
                                     10,
                                     Esri.ArcGISRuntime.Symbology.HorizontalAlignment.Left,
                                     Esri.ArcGISRuntime.Symbology.VerticalAlignment.Bottom);
    var textSymCraigleith = new TextSymbol("Craigleith",
                                     Color.FromArgb(255, 0, 0, 230),
                                     10,
                                     Esri.ArcGISRuntime.Symbology.HorizontalAlignment.Right,
                                     Esri.ArcGISRuntime.Symbology.VerticalAlignment.Top);

  3. Create the graphics from the point and text symbol.

    // create graphics using the points and text symbols
    var graphicBass = new Graphic(labelPointBass, textSymBass);
    var graphicCraigleith = new Graphic(labelPointCraigleith, textSymCraigleith);

  4. Add the text graphics to the graphics overlays.

    // add text graphics to the overlay
    MyGraphicsOverlay.Graphics.Add(graphicBass);
    MyGraphicsOverlay.Graphics.Add(graphicCraigleith);

Identify graphics

In your app, you can add code to allow users to click on a graphic and get more information about it. For example, you may tap or click on a seabird in your graphics overlay to display the name of the bird's species in a dialog box.

The IdentifyGraphicsOverlayAsync method on the map view allows you identify graphics at a point on the map for a given graphics overlay. If you have more than one graphics overlay and want to perform an identify operation on all graphics overlays, use the IdentifyGraphicsOverlaysAsync method. The example below shows how you can perform an identify on a single graphics overlay in response to a tap on the map view.

// identify graphics in the MyGraphicsOverlay overlay using the point tapped
var resultGraphics = await MyMapView.IdentifyGraphicsOverlayAsync(MyGraphicsOverlay, e.Position, 10, false);


// show attribute information for the first graphic identified (if any)
if (resultGraphics != null && resultGraphics.Graphics.Count > 0)
{
    var idGraphic = resultGraphics.Graphics.FirstOrDefault();
   IdentifyResultsPanel.DataContext = idGraphic;
    NameTextBlock.Text = idGraphic.Attributes["Name"].ToString();
}

You can iterate through each result returned from an identify. For example, you can display a list of the attribute values from each result.

// show the name attribute for all the graphics identified (if any)
if (resultGraphics != null && resultGraphics.Graphics.Count > 0)
{
    foreach(var g in resultGraphics.Graphics)
    {
        NameListBox.Items.Add(g.Attributes["Name"]);
    }                
}

Select graphics

Selecting a graphic is a way of bringing it to the attention of a user by drawing a halo around it. Change the selection state of a graphic by using the IsSelected property on the Graphic class.

Screenshot of selected graphic

Update graphics

It's possible to update the geometry or attributes of a graphic by using the graphics collection of the graphics overlay.The following example moves a graphic by assigning delta values to the current location.

// 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;

Remove graphics

To remove graphics you work with the graphics collection and call the Remove method.

MyGraphicsOverlay.Graphics.Remove(graphicBass);
// ... or use RemoveAt to remove a graphic using its index
MyGraphicsOverlay.Graphics.RemoveAt(0);

Related topics