ArcGIS Runtime SDK for Qt

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 Point geometry class. The following code shows how the buoy locations are defined:

    void GraphicsOverlayDemo::populateBuoyLocations(QList<Point>& locations)
    {
      SpatialReference sr(4326);
      locations.clear();
      locations.append(Point(-2.712642647560347, 56.062812566811544, sr));
      locations.append(Point(-2.6908416959572303, 56.06444173689877, sr));
      locations.append(Point(-2.6697273884990937, 56.064250073402874, sr));
      locations.append(Point(-2.6395150461199726, 56.06127916736989, sr));
    }

    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.
  3. Create graphics, which are defined by the point geometry and the symbol, and add the graphics to the graphics overlay, which causes them to display on the map view.

    The following code defines the red circle symbol and creates each graphic, adding each graphic to the graphics overlay.

    // Draw buoys
    SimpleMarkerSymbol* buoySymbol = new SimpleMarkerSymbol(SimpleMarkerSymbolStyle::Circle, QColor(Qt::red), 10);
    QList<Point> buoyLocations;
    
    
    populateBuoyLocations(buoyLocations);
    for (const auto& location : buoyLocations)
    {
      m_graphicsOverlay->graphics()->append(new Graphic(location, buoySymbol, this));
    }

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. This is done with a method named populateBoatRoute.

    Esri::ArcGISRuntime::Polyline GraphicsOverlayDemo::populateBoatRoute()
    {
      SpatialReference sr(4326);
      PolylineBuilder builder(sr);
       builder.addPoint(-2.7184791227926772, 56.06147084563517);
      builder.addPoint(-2.7196807500463924, 56.06147084563517);
      builder.addPoint(-2.722084004553823, 56.062141712059706);
      builder.addPoint(-2.726375530459948, 56.06386674355254);
      builder.addPoint(-2.726890513568683, 56.0660708381432);
      builder.addPoint(-2.7270621746049275, 56.06779569383808);
      builder.addPoint(-2.7255172252787228, 56.068753913653914);
      builder.addPoint(-2.723113970771293, 56.069424653352335);
      builder.addPoint(-2.719165766937657, 56.07028701581465);
      builder.addPoint(-2.713672613777817, 56.070574465681325);
      builder.addPoint(-2.7093810878716917, 56.07095772883556);
      builder.addPoint(-2.7044029178205866, 56.07153261642126);
      builder.addPoint(-2.698223120515766, 56.072394931722265);
      builder.addPoint(-2.6923866452834355, 56.07325722773041);
      builder.addPoint(-2.68672183108735, 56.07335303720707);
      builder.addPoint(-2.6812286779275096, 56.07354465544585);
      builder.addPoint(-2.6764221689126497, 56.074215311778964);
      builder.addPoint(-2.6698990495353394, 56.07488595644139);
      builder.addPoint(-2.6647492184479886, 56.075748196715914);
      builder.addPoint(-2.659427726324393, 56.076131408423215);
      builder.addPoint(-2.654792878345778, 56.07622721075461);
      builder.addPoint(-2.651359657620878, 56.076514616319784);
      builder.addPoint(-2.6477547758597324, 56.07708942101955);
      builder.addPoint(-2.6450081992798125, 56.07814320736718);
      builder.addPoint(-2.6432915889173625, 56.08025069360931);
      builder.addPoint(-2.638656740938747, 56.08044227755186);
      builder.addPoint(-2.636940130576297, 56.078813783674946);
      builder.addPoint(-2.636425147467562, 56.07728102068079);
      builder.addPoint(-2.637798435757522, 56.076610417698504);
      builder.addPoint(-2.638656740938747, 56.07507756705851);
      builder.addPoint(-2.641231656482422, 56.07479015077557);
      builder.addPoint(-2.6427766058086277, 56.075748196715914);
      builder.addPoint(-2.6456948434247924, 56.07546078543464);
      builder.addPoint(-2.647239792750997, 56.074598538729404);
      builder.addPoint(-2.6492997251859376, 56.072682365868616);
      builder.addPoint(-2.6530762679833284, 56.0718200569986);
      builder.addPoint(-2.655479522490758, 56.070861913404286);
      builder.addPoint(-2.6587410821794135, 56.07047864929729);
      builder.addPoint(-2.6633759301580286, 56.07028701581465);
      builder.addPoint(-2.666637489846684, 56.07009538137926);
      builder.addPoint(-2.670070710571584, 56.06990374599109);
      builder.addPoint(-2.6741905754414645, 56.069137194910745);
      builder.addPoint(-2.678310440311345, 56.06808316228391);
      builder.addPoint(-2.682086983108735, 56.06789151689155);
      builder.addPoint(-2.6868934921235956, 56.06760404701653);
      builder.addPoint(-2.6911850180297208, 56.06722075051504);
      builder.addPoint(-2.695133221863356, 56.06702910083509);
      builder.addPoint(-2.698223120515766, 56.066837450202335);
      builder.addPoint(-2.7016563412406667, 56.06645414607839);
      builder.addPoint(-2.7061195281830366, 56.0660708381432);
      builder.addPoint(-2.7100677320166717, 56.065591697864576);
      builder.addPoint(-2.713329291705327, 56.06520838135397);
      builder.addPoint(-2.7167625124302273, 56.06453756828941);
      builder.addPoint(-2.718307461756433, 56.06348340989081);
      builder.addPoint(-2.719165766937657, 56.062812566811544);
      builder.addPoint(-2.7198524110826376, 56.06204587471371);
      builder.addPoint(-2.719165766937657, 56.06166252294756);
      builder.addPoint(-2.718307461756433, 56.06147084563517);
       return builder.toGeometry();
    }

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

  2. Create the graphic from the line geometry and line symbol, and append it to the graphic overlay.

    // Draw boat route
    SimpleLineSymbol* routeSymbol = new SimpleLineSymbol(
          SimpleLineSymbolStyle::Dash, QColor("#FF080008"), 4);
    Esri::ArcGISRuntime::Polyline routeGeometry = populateBoatRoute();
    m_graphicsOverlay->graphics()->append(new Graphic(routeGeometry, routeSymbol, this));

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.

    Esri::ArcGISRuntime::Polygon GraphicsOverlayDemo::populateNestingGrounds()
    {
      SpatialReference sr(4326);
      PolygonBuilder builder(sr);
       builder.addPoint(-2.643077012566659, 56.077125346044475);
      builder.addPoint(-2.6428195210159444, 56.07717324600376);
      builder.addPoint(-2.6425405718360033, 56.07774804087097);
      builder.addPoint(-2.6427122328698127, 56.077927662508635);
      builder.addPoint(-2.642454741319098, 56.07829887790651);
      builder.addPoint(-2.641853927700763, 56.078526395253725);
      builder.addPoint(-2.6409741649024867, 56.078801809192434);
      builder.addPoint(-2.6399871139580795, 56.07881378366685);
      builder.addPoint(-2.6394077579689705, 56.07908919555142);
      builder.addPoint(-2.638764029092183, 56.07917301616904);
      builder.addPoint(-2.638485079912242, 56.07896945149566);
      builder.addPoint(-2.638570910429147, 56.078203080726844);
      builder.addPoint(-2.63878548672141, 56.077568418396);
      builder.addPoint(-2.6391931816767085, 56.077197195961084);
      builder.addPoint(-2.6399441986996273, 56.07675411934114);
      builder.addPoint(-2.6406523004640934, 56.076730169108444);
      builder.addPoint(-2.6406737580933193, 56.07632301287509);
      builder.addPoint(-2.6401802326211157, 56.075999679860494);
      builder.addPoint(-2.6402446055087943, 56.075844000034046);
      builder.addPoint(-2.640416266542604, 56.07578412301025);
      builder.addPoint(-2.6408883343855822, 56.075808073830935);
      builder.addPoint(-2.6417680971838577, 56.076239186057734);
      builder.addPoint(-2.642197249768383, 56.076251161328514);
      builder.addPoint(-2.6428409786451708, 56.07661041772168);
      builder.addPoint(-2.643077012566659, 56.077125346044475);
       return builder.toGeometry();
    }

  2. Create the graphic from the polygon geometry and fill symbol, and add the graphic to the graphic overlay.

    // Draw nesting ground
    SimpleLineSymbol* nestingOutline = new SimpleLineSymbol(
          SimpleLineSymbolStyle::Dash, QColor("#FF000008"), 1);
    SimpleFillSymbol* nestingSymbol = new SimpleFillSymbol(
          SimpleFillSymbolStyle::DiagonalCross, QColor("#FF008000"), nestingOutline);
    Esri::ArcGISRuntime::Polygon nestingGeometry = populateNestingGrounds();
    m_graphicsOverlay->graphics()->append(new Graphic(nestingGeometry, nestingSymbol, this));

Add text

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 for the islands, creates new graphics, and appends the graphics to the graphics overlay.

// Draw island labels
Point bassLocation(-2.640631, 56.078083, SpatialReference::wgs84());
TextSymbol* bassRockSymbol = new TextSymbol(
      "Bass Rock",QColor("#FF0000E6"), 10,
      HorizontalAlignment::Left, VerticalAlignment::Bottom);
m_graphicsOverlay->graphics()->append(new Graphic(bassLocation, bassRockSymbol, this));


Point craigleithLocation(-2.720324, 56.073569, SpatialReference(4326));
TextSymbol* craigleithSymbol = new TextSymbol(
      "Craigleith",QColor("#FF0000E6"), 10,
      HorizontalAlignment::Right, VerticalAlignment::Top);
m_graphicsOverlay->graphics()->append(new Graphic(craigleithLocation, craigleithSymbol, this));

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 setSelected method 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. You can access and modify the list of graphics in a graphics overlay through its graphics property.

Remove graphics

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