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 tutorial, 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 the development environment for your operating system.

Steps

Open the starter app project

  1. If you have already completed the Create a starter app tutorial, start Qt Creator and open your starter app project. Otherwise, download and unzip the starter app project solution, and then open it in Qt Creator.

Add a point graphic

  1. Open the main.qml code file in your project (Resources > qml > qml.qrc > /qml > main.qml). You will update the ApplicationWindow QML component to display a graphics overlay.

  2. Add a graphics overlay to the MapView. The graphics overlay contains the graphics drawn on the map.

    GraphicsOverlay {
      id: graphicsOverlay
    }
    
  3. Add to the ApplicationWindow QML component a point symbol that will display a red diamond on a point on the map at a location you specify later in this tutorial. 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 in the Santa Montica Mountains.

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

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.82543, 34.02700);
        polylineBuilder.addPointXY(-118.83543, 34.22700);
        lineGraphic.geometry = polylineBuilder.geometry;
        graphicsOverlay.graphics.append(lineGraphic);
    }
    
  3. Run the app and you will see the line graphic.

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.87653, 34.05121);
        polygonBuilder.addPointXY(-118.8446, 34.05462);
        polygonBuilder.addPointXY(-118.82915, 34.04439);
        polygonBuilder.addPointXY(-118.83327, 34.02279);
        polygonBuilder.addPointXY(-118.85318, 34.00972);
        polygonBuilder.addPointXY(-118.86486, 34.01625);
        polygonBuilder.addPointXY(-118.88653, 34.05121);
        polygonGraphic.geometry = polygonBuilder.geometry;
        graphicsOverlay.graphics.append(polygonGraphic);
    }
    
  3. Run the app and you will see the polygon graphic.

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 tutorial 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 tutorial. For more information on Text Symbols, see here
  3. Rotate the symbol: Rotate the SimpleMarkerSymbol used in the tutorial 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.