Skip To Content ArcGIS for Developers Sign In Dashboard

ArcGIS Runtime SDK for Qt

Add graphics with renderer

Sample Viewer View Sample on GitHub

A renderer allows you to change the style of all graphics in a graphics overlay by referencing a single symbol style. A renderer will only effect graphics that do not specify their own symbol style.

Use case

A renderer allows you to change the style of all graphics in an overlay by only changing one copy of the symbol. For example, a user may wish to display a number of graphics on a map of parkland which represent trees, all sharing a common symbol.

How to use the sample

Run the sample and view graphics for points, lines, and polygons, which are stylized using renderers.

How it works

  1. Create a GraphicsOverlay and add it to the MapView.
  2. Create a Graphic, specifying only a Geometry.
  3. Create a single Symbol such as a SimpleMarkerSymbol.
  4. Create a Renderer with the Symbol.
  5. Set the renderer on the GraphicsOverlay.

Relevant API

  • Geometry
  • Graphic
  • GraphicsOverlay
  • SimpleFillSymbol
  • SimpleLineSymbol
  • SimpleMarkerSymbol
  • SimpleRenderer

Additional information

To set unique symbols across a number of graphics (e.g. showing graphics of individual landmarks) see "Add graphics with symbols" sample.

Tags

display, graphics, marker, overlay, renderer, symbol

Sample Code

import QtQuick 2.6
import QtQuick.Controls 2.2
import Esri.ArcGISRuntime 100.9

Rectangle {
    width: 800
    height: 600

    // Map view UI presentation at top
    MapView {
        id: mapView

        anchors.fill: parent

        Map {
            BasemapTopographic {}
        }

        GraphicsOverlay {
            id: pointGraphicsOverlay
            // assign a render to the graphics overlay
            renderer: SimpleRenderer {
                symbol: pointSymbol
            }

            Graphic {
                geometry: Point {
                    x: 40e5
                    y: 40e5
                    spatialReference: SpatialReference {
                        wkid: 102100
                    }
                }
            }
        }

        // graphics overlay for the line symbol
        GraphicsOverlay {
            id: lineGraphicsOverlay

            renderer: SimpleRenderer {
                symbol: lineSymbol
            }
        }

        // polygon graphics overlay
        GraphicsOverlay {
            id: polygonGraphicsOverlay

            // default property: renderer
            SimpleRenderer {
                symbol: fillSymbol
            }
        }
    }

    // the symbology for the point graphic
    SimpleMarkerSymbol {
        id: pointSymbol
        style: Enums.SimpleMarkerSymbolStyleDiamond
        color: "red"
        size: 10
    }

    // line symbol for the line graphic
    SimpleLineSymbol {
        id: lineSymbol
        style: Enums.SimpleLineSymbolStyleSolid
        color: "blue"
        width: 5
        antiAlias: true
    }

    // the line graphic
    Graphic {
        id: lineGraphic
    }

    // for the line graphic
    PolylineBuilder {
        id: polylineBuilder
        spatialReference: SpatialReference {
            wkid: 102100
        }
    }

    // symbology for the polygon graphic overlay's renderer
    SimpleFillSymbol {
        id: fillSymbol
        style: Enums.SimpleFillSymbolStyleSolid
        color: Qt.rgba(1, 1, 0, 0.7)
    }

    // the graphic for the polygon graphics overlay
    Graphic {
        id: polygonGraphic
    }

    // geometry for the polygon graphic
    PolygonBuilder {
        id: polygonBuilder
        spatialReference: SpatialReference {
            wkid: 102100
        }
    }

    Component.onCompleted: {
        // create the line by assigning points
        polylineBuilder.addPointXY(-10e5, 40e5);
        polylineBuilder.addPointXY(20e5, 50e5);
        // assign the graphics geometry to the line
        lineGraphic.geometry = polylineBuilder.geometry;
        // add the graphic to the polyline graphic overlay
        lineGraphicsOverlay.graphics.append(lineGraphic);

        // create the polygon by assigning points
        polygonBuilder.addPointXY(-20e5, 20e5);
        polygonBuilder.addPointXY(20e5, 20e5);
        polygonBuilder.addPointXY(20e5, -20e5);
        polygonBuilder.addPointXY(-20e5, -20e5);
        // assign the geometry of the graphic to be the polygon
        polygonGraphic.geometry = polygonBuilder.geometry;
        // add the graphic to the polygon graphics overlay
        polygonGraphicsOverlay.graphics.append(polygonGraphic);
    }
}