Skip To Content ArcGIS for Developers Sign In Dashboard

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 AppStudio for ArcGIS.

Open the starter app project

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

Steps

  1. Run 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.

       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.

         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.

         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.

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.

         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.

         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.

        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.

         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.

Challenge

Add graphics with different symbols and styles

  1. Add a text symbol. Text symbols are used to display text for graphics and features. For example, you can add a text symbol near the line graphic used in the tutorial by making a text symbol at a point which intersects the line graphic.

         TextSymbol {
             id:textSymbol
             text: "Malibu Beach"
             color: "black"
             size: 12.0
             horizontalAlignment: Enums.HorizontalAlignmentCenter
             verticalAlignment: Enums.VerticalAlignmentMiddle
         }
    
  2. Change the polygon graphic in the tutorial to use a composite symbol. Composite symbols are a combination of two or more symbols. To create a composite symbol, first create a CompositeSymbol and Graphic that references that symbol.

         CompositeSymbol {
             id:compositeSymbol
         }
    
         Graphic {
             id: compositeGraphic
             symbol: compositeSymbol
         }
    

    Append the symbols to compositeSymbol. Note how each vertex of the polygon will use the point symbol and the text will be centered inside the polygon.

             compositeSymbol.symbols.append(fillSymbol);
             compositeSymbol.symbols.append(pointSymbol);
             compositeSymbol.symbols.append(textSymbol);
             compositeGraphic.geometry = polygonBuilder.geometry;
             graphicsOverlay.graphics.append(compositeGraphic);
    

Add multiple graphics overlays

Instead of using a single graphics overlay for point, line, and polygons, create three separate graphics overlays with each holding a specific geometry and add them to the map view.

     GraphicsOverlay {
         id: pointsGraphicsOverlay
     }

     GraphicsOverlay {
         id: linesGraphicsOverlay
     }

     GraphicsOverlay {
         id: polygonsGraphicsOverlay
     }