Display point, line, and polygon graphics

Overview

You will learn: how to build an app to create geometries and graphics from coordinates and add them to a map.

Applications can display point, line, and polygon graphics on a map. Graphics are composed of a geometry, a symbol, a set of attributes, and they can display a pop-up when clicked. Graphics are commonly created by interacting with the map or by creating small sets of data manually that you want to display on a map. Graphics can be directly initialized with the Graphic QML type and displayed on a map with the GraphicsOverlay class.

In this tutorial, you will build a simple app that draws point, polyline, and polygons graphic near Malibu beach, California.

Before you begin

You must have previously installed ArcGIS AppStudio.

Open the starter app project

If you completed the Create a starter app tutorial, start ArcGIS AppStudio and then open your starter app project. Otherwise, complete the tutorial now and open the project.

Steps

  1. Run ArcGIS AppStudio. Click your Starter app project in the App Gallery, and then click Edit. This will open your project in Qt Creator.

Add a graphics overlay

  1. In the Qt Creator Projects window, double-click MyApp.qml to open it in the editor.

  2. In the code editor, scroll down to the MapView declaration. Before the Map declaration, add a GraphicsOverlay property.

    GraphicsOverlay is a container for temporary graphics to display on your map view. The Graphics drawn in graphics overlays are created at runtime and are not persisted when your application closes. To create data that is persisted, visit the Import data and Create a new dataset tutorials.

    A MapView supports a collection of graphics overlays, using the graphicsOverlays list model, similar to how operational layers are managed.

    Use dark colors for code blocksCopy
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
       MapView {
         id:mapView
    
         property real initialMapRotation: 0
    
         anchors {
             left: parent.left
             right: parent.right
             top: titleRect.bottom
             bottom: parent.bottom
         }
    
         rotationByPinchingEnabled: true
         zoomByPinchingEnabled: true
    
         locationDisplay {
             positionSource: PositionSource {
             }
         }
    
         // *** ADD ***
         GraphicsOverlay {
             id: graphicsOverlay
         }

Add a point graphic

  1. After the GraphicsOverlay declaration, declare a Point and SimpleMarkerSymbol and use them to create a new point Graphic.

    Point graphics support a number of symbol types such as SimpleMarkerSymbol, PictureMarkerSymbol and TextSymbol. Learn more about the symbols in the ArcGIS Runtime SDK for Qt documentation for QML.

    Use dark colors for code blocksCopy
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
         GraphicsOverlay {
             id: graphicsOverlay
         }
    
         // *** ADD ***
         Point {
             id: pointDume
             x: -118.80657463861
             y: 34.0005930608889
             spatialReference: SpatialReference { wkid: 4326 }
         }
    
         SimpleMarkerSymbol {
             id: pointSymbol
             style: Enums.SimpleMarkerSymbolStyleDiamond
             color: "orange"
             size: 10
         }
    
         Graphic {
             id: pointGraphic
             symbol: pointSymbol
             geometry: pointDume
         }
  2. Define a Component.onCompleted handler and append the point graphic to the graphics overlay.

    Use QML's Component.onCompleted signal to append the graphic to the graphics overlay once the MapView component and all its children are instantiated.

    Use dark colors for code blocksCopy
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
      Graphic {
          id: pointGraphic
          symbol: pointSymbol
          geometry: pointDume
      }
    
      // *** ADD ***
      Component.onCompleted: {
          // add a point
          graphicsOverlay.graphics.append(pointGraphic);
      }
  3. In the lower left Sidebar, click Run or press Control-R/Command-R to run the app. You should see an orange diamond in Point Dume State Beach.

    Run the app from within ArcGIS AppStudio by clicking the app in the App Gallery and then clicking the Run icon from the tool pallette.

    In Qt Creator, there are several ways to run the project:

    • Press Control-R/Command-R on the keyboard.
    • In the app menu, click Build > Run.
    • Click the Run button from the tool palette.

Add a polyline graphic

  1. After the point graphic code, add code to create a new polyline Graphic with the SimpleLineSymbol and PolylineBuilder QML type.

    Add these components to the MapView, at the same level as the SimpleMarkerSymbol previously added.

    Note that the code pattern here is similar to the point symbol, graphic, and geometry builder you coded in the prior steps, with the exception of setting the polyline geometry dynamically at runtime using PolylineBuilder.

    Polyline graphics support a number of symbol types such as SimpleLineSymbol and TextSymbol. They are called polylines because they support multiple, disjointed line segments as one geometry.

    Use dark colors for code blocksCopy
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
         Graphic {
             id: pointGraphic
             symbol: pointSymbol
             geometry: pointDume
         }
    
         // *** ADD ***
         SimpleLineSymbol {
             id: lineSymbol
             style: Enums.SimpleLineSymbolStyleSolid
             color: Qt.rgba(0.27, 0.27, 0.98, 0.5)
             width: 3
             antiAlias: true
         }
    
         Graphic {
             id: lineGraphic
             symbol: lineSymbol
         }
    
         PolylineBuilder {
             id: polylineBuilder
             spatialReference: SpatialReference { wkid: 4326 }
         }
  2. Add code to the Component.onCompleted handler to use the PolylineBuilder QML type to dynamically create the line geometry and append it to the graphics overlay.

    Use dark colors for code blocksCopy
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
         Component.onCompleted: {
             // add the point
             graphicsOverlay.graphics.append(pointGraphic);
    
             // *** ADD ***
             // add the polyline
             polylineBuilder.addPointXY(-118.821527826096, 34.0139576938577);
             polylineBuilder.addPointXY(-118.814893761649, 34.0080602407843);
             polylineBuilder.addPointXY(-118.808878330345, 34.0016642996246);
             lineGraphic.geometry = polylineBuilder.geometry;
             graphicsOverlay.graphics.append(lineGraphic);
  3. Run the app and you should see a line along Westward Beach.

Add a polygon graphic

  1. After the polyline graphic code, create a new polygon Graphic with the SimpleFillSymbol QML type.

    Polygon graphics support a number of symbol types such as SimpleFillSymbol, PictureFillSymbol, SimpleMarkerSymbol, and TextSymbol.

    Use dark colors for code blocksCopy
    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
        PolylineBuilder {
            id: polylineBuilder
            spatialReference: SpatialReference { wkid: 4326 }
        }
    
        // *** ADD ***
        SimpleFillSymbol {
            id: fillSymbol
            style: Enums.SimpleFillSymbolStyleSolid
            color: Qt.rgba(1, 1, 0, 0.4)
            SimpleLineSymbol {
                style: Enums.SimpleLineSymbolStyleSolid
                color: "orange"
                width: 1.0
            }
        }
    
        Graphic {
            id: polygonGraphic
            symbol: fillSymbol
        }
    
        PolygonBuilder {
            id: polygonBuilder
            spatialReference: SpatialReference { wkid: 4326 }
        }
  2. Add code to the Component.onCompleted hander to use the PolygonBuilder QML type to dynamically create the polygon geometry and append it to the graphics overlay.

    Use dark colors for code blocksCopy
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
         Component.onCompleted: {
             // add the point
             graphicsOverlay.graphics.append(pointGraphic);
    
             // add the polyline
             polylineBuilder.addPointXY(-118.821527826096, 34.0139576938577);
             polylineBuilder.addPointXY(-118.814893761649, 34.0080602407843);
             polylineBuilder.addPointXY(-118.808878330345, 34.0016642996246);
             lineGraphic.geometry = polylineBuilder.geometry;
             graphicsOverlay.graphics.append(lineGraphic);
             graphicsOverlay.graphics.append(lineGraphic);
    
             // *** ADD ***
             // add the polygon
             polygonBuilder.addPointXY(-118.818984489994, 34.0137559967283);
             polygonBuilder.addPointXY(-118.806796597377, 34.0215816298725);
             polygonBuilder.addPointXY(-118.791432890735, 34.0163883241613);
             polygonBuilder.addPointXY(-118.79596686535, 34.008564864635);
             polygonBuilder.addPointXY(-118.808558110679, 34.0035027131376);
             polygonGraphic.geometry = polygonBuilder.geometry;
             graphicsOverlay.graphics.append(polygonGraphic);
  3. Run the app and you should see a polygon around Mahou Riviera.

Congratulations, you're done!

Your map should load and display the three graphics around Malibu beach. Compare your map with our completed solution project.

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