Add graphics to a map

1221
5
Jump to solution
02-06-2020 10:26 AM
ViníciusCosta
New Contributor III

Hello,

I've been looking into a javascript example that add graphics features on a map as you draw them: Add graphics to a map | ArcGIS API for JavaScript 3.31 

Is it possible to do the same thing in Qt or QML? I want to draw a retangular shape by mouse drag to select multiple features at once and haven't found a similar example.

Any help is appreciated. Thanks!

Tags (3)
0 Kudos
1 Solution

Accepted Solutions
LucasDanzinger
Esri Frequent Contributor

You should be able to do this still. Here is some code that should get you on the right track:

import QtQuick 2.6
import QtQuick.Controls 2.2
import QtQuick.Layouts 1.3
import Esri.ArcGISRuntime 100.7

ApplicationWindow {
    id: appWindow
    width: 800
    height: 600
    title: "Untitled123"

    property bool mouseAccepted: !freePanButton.checked
    property var startPoint
    property var endPoint

    // add a mapView component
    MapView {
        anchors.fill: parent
        // set focus to enable keyboard navigation
        focus: true

        GraphicsOverlay {
            Graphic {
                id: graphic
            }
            SimpleRenderer {
                SimpleFillSymbol {
                    outline: SimpleLineSymbol {
                        color: "red"
                        width: 2
                    }
                    color: "transparent"
                }
            }
        }

        onMousePressed: {
            mouse.accepted = mouseAccepted;
            startPoint = mouse.mapPoint;
        }

        onMousePositionChanged: {
            mouse.accepted = mouseAccepted;
            endPoint = mouse.mapPoint;
            envBuilder.setCorners(startPoint, endPoint);
            graphic.geometry = envBuilder.geometry
        }

        // add a map to the mapview
        Map {
            id: map
            // add the BasemapTopographic basemap to the map
            BasemapTopographic {}
        }
    }

    EnvelopeBuilder {
        id: envBuilder
        spatialReference: map.spatialReference
    }

    ColumnLayout {
        RadioButton {
            id: freePanButton
            checked: true
            text: qsTr("Free Pan")
        }
        RadioButton {
            text: qsTr("Draw Rectangle")
        }
    }
}

View solution in original post

5 Replies
LucasDanzinger
Esri Frequent Contributor

The JavaScript sample is showing the "SketchEditor". This is something we don't yet have in Runtime but plan on adding. We do have samples that show how to create graphics, but you'll need to do it programmatically - arcgis-runtime-samples-qt/ArcGISRuntimeSDKQt_QMLSamples/DisplayInformation/GOSymbols at master · Esr... 

ViníciusCosta
New Contributor III

Thank you!

So, right now, there's no way to do it with a mouse drag?

In the geodesic operations example I've seen that a line is draw by a mouse click. Would it be possible to adapt it to draw some sort of shape and them select the features inside it?

0 Kudos
LucasDanzinger
Esri Frequent Contributor

You should be able to do this still. Here is some code that should get you on the right track:

import QtQuick 2.6
import QtQuick.Controls 2.2
import QtQuick.Layouts 1.3
import Esri.ArcGISRuntime 100.7

ApplicationWindow {
    id: appWindow
    width: 800
    height: 600
    title: "Untitled123"

    property bool mouseAccepted: !freePanButton.checked
    property var startPoint
    property var endPoint

    // add a mapView component
    MapView {
        anchors.fill: parent
        // set focus to enable keyboard navigation
        focus: true

        GraphicsOverlay {
            Graphic {
                id: graphic
            }
            SimpleRenderer {
                SimpleFillSymbol {
                    outline: SimpleLineSymbol {
                        color: "red"
                        width: 2
                    }
                    color: "transparent"
                }
            }
        }

        onMousePressed: {
            mouse.accepted = mouseAccepted;
            startPoint = mouse.mapPoint;
        }

        onMousePositionChanged: {
            mouse.accepted = mouseAccepted;
            endPoint = mouse.mapPoint;
            envBuilder.setCorners(startPoint, endPoint);
            graphic.geometry = envBuilder.geometry
        }

        // add a map to the mapview
        Map {
            id: map
            // add the BasemapTopographic basemap to the map
            BasemapTopographic {}
        }
    }

    EnvelopeBuilder {
        id: envBuilder
        spatialReference: map.spatialReference
    }

    ColumnLayout {
        RadioButton {
            id: freePanButton
            checked: true
            text: qsTr("Free Pan")
        }
        RadioButton {
            text: qsTr("Draw Rectangle")
        }
    }
}
ViníciusCosta
New Contributor III

Thank you!

I've managed to do a little prototype based on your code.

0 Kudos
AbhijeetSatam
New Contributor III

Hi Vinicius,

I am working with arcgis 100.8 and qt 5.14.2. I am developing my application in cpp. I intend to add drag and draw feature to my application for simple shapes like a line and simple polygons like in this example: https://developers.arcgis.com/javascript/3/jssamples/graphics_add.html . I want to use purely cpp and no qml components. 

Can you share details regarding how you achieved the same. It would be of great help.

0 Kudos