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.

   More info

   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.

   More info

   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.

   More info

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

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.

   More info

   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.

   More info

   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.

   More info

   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.