Overview

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

With the ArcGIS Runtime SDK for Qt, it's easy to add graphics to the MapView that represent geographic features. Graphics always live in their own container (graphics overlay) and are commonly positioned on top of all of the other layers. They have a single geometry type (point, line, or polygon) and a unique symbol style. Graphics can be created interactively by listening for mouse or touch events or manually by providing the map coordinates.

In this lab, you will build a simple app that adds a point, line, and polygon feature and then adds them to the graphics overlay in the map view. The shapes will be created directly from latitude and longitude coordinates.

Before you begin

You must have previously installed the ArcGIS Runtime SDK for Qt and set up your development environment. Please review the install and setup instructions if you have not done this.

Steps

Create a new ArcGIS Runtime App Qt Creator Project

  1. Start Qt Creator.

  2. Choose File > New File or Project and select the ArcGIS project template for ArcGIS Runtime 100.0.0 Qt Quick app. Give your app a name. For this lab we chose display-point-line-and-polygon-graphics, but you can choose any name that suits you. Also select the location where your project files should reside on your system. Select Continue.

  3. On the Define Project Details dialog, leave the settings as suggested. Select Continue.

  4. On the Kit Selection dialog, check the kits you previously setup when you installed the SDK. Select Continue.

  5. Verify your selections and select Done.

Add a point graphic

  1. Open the main.qml code file in your project (Resources > qml > qml.qrc > /qml > main.qml). If you followed the prior steps, it should already be open in the IDE. You will update the ApplicationWindow QML component to display a basemap and a graphics overlay. In the definition of the Map object, add an initial viewpoint to center and zoom the map on our area of interest, Griffith Park in Los Angeles.

    Map {
        BasemapTopographic {}
        /* ** ADD ** */
        ViewpointCenter {
            Point {
                x: -118.24368
                y: 34.05293
                SpatialReference { wkid: 4326 }
            }
            targetScale: 300000
        }
    }
    
  2. Add a graphics overlay to the MapView. The graphics overlay will hold the graphics drawn on the map and maintain the proper map location.

        GraphicsOverlay {
            id: graphicsOverlay
        }
    
  3. Add to the ApplicationWindow a point symbol that will display a red diamond on a point on the map at a location you specify later in this lab. In order to associate a point on the map with a graphic symbol, define a Graphic object and link it to the SimpleMarkerSymbol by its id. The PointBuilder is used to dynamically assign a point and copy its geometry.

    SimpleMarkerSymbol {
        id: pointSymbol
        style: Enums.SimpleMarkerSymbolStyleDiamond
        color: Qt.rgba(1, 0, 0, 0.9)
        size: 10
    }
    
    Graphic {
        id: pointGraphic
        symbol: pointSymbol
    }
    
    PointBuilder {
        id: pointBuilder
        spatialReference: SpatialReference.createWgs84()
    }
    
  4. Define the QML onCompleted method on the ApplicationWindow object. This allows you to dynamically assign the point location on the map and assign it to the pointGraphic symbol. The map location used here is inside Griffith Park in Los Angeles.

    Component.onCompleted: {
        pointBuilder.setXY(-118.29507, 34.13501);
        pointGraphic.geometry = pointBuilder.geometry;
        graphicsOverlay.graphics.append(pointGraphic);
    }
    
  5. Run the app and you will see a point graphic on the map in Griffith Park.

Add a line graphic

  1. Add QML code to create a line geometry and line symbol and then assign these to the graphic overlay. Add this code as components to the application.

    SimpleLineSymbol {
        id: lineSymbol
        style: Enums.SimpleLineSymbolStyleSolid
        color:Qt.rgba(0, 0, 1, 0.5)
        width: 5
        antiAlias: true
    }
    
    Graphic {
        id: lineGraphic
        symbol: lineSymbol
    }
    
    PolylineBuilder {
        id: polylineBuilder
        spatialReference: SpatialReference.createWgs84()
    }
    
  2. Update the onCompleted method to position the line. Add this code before the point assignment you did in the prior steps.

    Component.onCompleted: {
        /* ** Add ** */
        polylineBuilder.addPointXY(-118.29026, 34.1816);
        polylineBuilder.addPointXY(-118.26451, 34.09664);
        lineGraphic.geometry = polylineBuilder.geometry;
        graphicsOverlay.graphics.append(lineGraphic);
    }
    
  3. Run the app and you will see the line graphic next to Griffith Park.

Add a polygon graphic

  1. Add QML code to create a polygon geometry and fill symbol and then assign these to the graphic. Use PolygonBuilder to dynamically assign vertices to your polygon. Add the graphic to the graphic overlay.

    SimpleFillSymbol {
        id: fillSymbol
        style: Enums.SimpleFillSymbolStyleSolid
        color: Qt.rgba(1, 1, 0, 0.4)
        SimpleLineSymbol {
                style: Enums.SimpleLineSymbolStyleSolid
                color: Qt.rgba(0, 0, 0, 1)
                width: 1.0
            }
    }
    
    Graphic {
        id: polygonGraphic
        symbol: fillSymbol
    }
    
    PolygonBuilder {
        id: polygonBuilder
        spatialReference: SpatialReference.createWgs84()
    }
    
  2. Update the onCompleted method to position the polygon. Add this code before the line assignment you did in the prior steps.

    Component.onCompleted: {
        /* ** Add ** */
        polygonBuilder.addPointXY(-118.27653, 34.15121);
        polygonBuilder.addPointXY(-118.2446, 34.15462);
        polygonBuilder.addPointXY(-118.22915, 34.14439);
        polygonBuilder.addPointXY(-118.23327, 34.12279);
        polygonBuilder.addPointXY(-118.25318, 34.10972);
        polygonBuilder.addPointXY(-118.26486, 34.11625);
        polygonBuilder.addPointXY(-118.27653, 34.15121);
        polygonGraphic.geometry = polygonBuilder.geometry;
        graphicsOverlay.graphics.append(polygonGraphic);
    }
    
  3. Run the app and you will see the polygon graphic next to Griffith Park.

Congratulations, you're done!

Your map should load and display with the view point centered on Griffith Park in Los Angeles with a point, line, and polygon drawn on the map. Compare your map with our completed solution project.

Challenge

Add graphics with different symbols and styles

  1. Add a composite symbol: Composite symbols are simply a combination of two or more symbols. Change the polygon graphic in the lab to use a composite symbol. For more info on composite symbols, see the documentation
  2. Add a text symbol: Text symbols are used to display text for graphics and features. Add text symbols for the line graphic used in the lab. For more information on Text Symbols, see here
  3. Rotate the symbol: Rotate the SimpleMarkerSymbol used in the lab using its properties defined in the documentation

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.