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 Graphics
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
- 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
-
In the Qt Creator Projects window, double-click MyApp.qml to open it in the editor.
-
In the code editor, scroll down to the
Map
declaration. Before theView Map
declaration, add aGraphics
property.Overlay Graphics
is a container for temporary graphics to display on your map view. TheOverlay Graphic
s 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
Map
supports a collection of graphics overlays, using theView graphics
list model, similar to how operational layers are managed.Overlays Use dark colors for code blocks Copy 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
-
After the
Graphics
declaration, declare aOverlay Point
andSimple
and use them to create a new pointMarker Symbol Graphic
.Point graphics support a number of symbol types such as
Simple
,Marker Symbol Picture
andMarker Symbol Text
. Learn more about the symbols in the ArcGIS Runtime SDK for Qt documentation for QML.Symbol Use dark colors for code blocks Copy 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 }
-
Define a
Component.on
handler and append the point graphic to the graphics overlay.Completed Use QML's
Component.on
signal to append the graphic to the graphics overlay once theCompleted Map
component and all its children are instantiated.View Use dark colors for code blocks Copy Graphic { id: pointGraphic symbol: pointSymbol geometry: pointDume } // *** ADD *** Component.onCompleted: { // add a point graphicsOverlay.graphics.append(pointGraphic); }
-
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
-
After the point graphic code, add code to create a new polyline
Graphic
with theSimple
andLine Symbol Polyline
QML type.Builder Add these components to the
Map
, at the same level as theView Simple
previously added.Marker Symbol 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
Polyline
.Builder Polyline graphics support a number of symbol types such as
Simple
andLine Symbol Text
. They are called polylines because they support multiple, disjointed line segments as one geometry.Symbol Use dark colors for code blocks Copy 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 } }
-
Add code to the
Component.on
handler to use theCompleted Polyline
QML type to dynamically create the line geometry and append it to the graphics overlay.Builder Use dark colors for code blocks Copy 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);
-
Run the app and you should see a line along Westward Beach.
Add a polygon graphic
-
After the polyline graphic code, create a new polygon
Graphic
with theSimple
QML type.Fill Symbol Polygon graphics support a number of symbol types such as
Simple
,Fill Symbol Picture
,Fill Symbol Simple
, andMarker Symbol Text
.Symbol Use dark colors for code blocks Copy 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 } }
-
Add code to the
Component.on
hander to use theCompleted Polygon
QML type to dynamically create the polygon geometry and append it to the graphics overlay.Builder Use dark colors for code blocks Copy 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);
-
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.