Add graphics to a map

ViníciusCosta

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!

LucasDanzinger

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

<SPAN class="keyword token">import</SPAN> QtQuick <SPAN class="number token">2.6</SPAN>
<SPAN class="keyword token">import</SPAN> QtQuick<SPAN class="punctuation token">.</SPAN>Controls <SPAN class="number token">2.2</SPAN>
<SPAN class="keyword token">import</SPAN> QtQuick<SPAN class="punctuation token">.</SPAN>Layouts <SPAN class="number token">1.3</SPAN>
<SPAN class="keyword token">import</SPAN> Esri<SPAN class="punctuation token">.</SPAN>ArcGISRuntime <SPAN class="number token">100.7</SPAN>

ApplicationWindow <SPAN class="punctuation token">{</SPAN>
    id<SPAN class="punctuation token">:</SPAN> appWindow
    width<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">800</SPAN>
    height<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">600</SPAN>
    title<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"Untitled123"</SPAN>

    property bool mouseAccepted<SPAN class="punctuation token">:</SPAN> <SPAN class="operator token">!</SPAN>freePanButton<SPAN class="punctuation token">.</SPAN>checked
    property <SPAN class="keyword token">var</SPAN> startPoint
    property <SPAN class="keyword token">var</SPAN> endPoint

    <SPAN class="comment token">// add a mapView component</SPAN>
    MapView <SPAN class="punctuation token">{</SPAN>
        anchors<SPAN class="punctuation token">.</SPAN>fill<SPAN class="punctuation token">:</SPAN> parent
        <SPAN class="comment token">// set focus to enable keyboard navigation</SPAN>
        focus<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">true</SPAN>

        GraphicsOverlay <SPAN class="punctuation token">{</SPAN>
            Graphic <SPAN class="punctuation token">{</SPAN>
                id<SPAN class="punctuation token">:</SPAN> graphic
            <SPAN class="punctuation token">}</SPAN>
            SimpleRenderer <SPAN class="punctuation token">{</SPAN>
                SimpleFillSymbol <SPAN class="punctuation token">{</SPAN>
                    outline<SPAN class="punctuation token">:</SPAN> SimpleLineSymbol <SPAN class="punctuation token">{</SPAN>
                        color<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"red"</SPAN>
                        width<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">2</SPAN>
                    <SPAN class="punctuation token">}</SPAN>
                    color<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"transparent"</SPAN>
                <SPAN class="punctuation token">}</SPAN>
            <SPAN class="punctuation token">}</SPAN>
        <SPAN class="punctuation token">}</SPAN>

        onMousePressed<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
            mouse<SPAN class="punctuation token">.</SPAN>accepted <SPAN class="operator token">=</SPAN> mouseAccepted<SPAN class="punctuation token">;</SPAN>
            startPoint <SPAN class="operator token">=</SPAN> mouse<SPAN class="punctuation token">.</SPAN>mapPoint<SPAN class="punctuation token">;</SPAN>
        <SPAN class="punctuation token">}</SPAN>

        onMousePositionChanged<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
            mouse<SPAN class="punctuation token">.</SPAN>accepted <SPAN class="operator token">=</SPAN> mouseAccepted<SPAN class="punctuation token">;</SPAN>
            endPoint <SPAN class="operator token">=</SPAN> mouse<SPAN class="punctuation token">.</SPAN>mapPoint<SPAN class="punctuation token">;</SPAN>
            envBuilder<SPAN class="punctuation token">.</SPAN><SPAN class="token function">setCorners</SPAN><SPAN class="punctuation token">(</SPAN>startPoint<SPAN class="punctuation token">,</SPAN> endPoint<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
            graphic<SPAN class="punctuation token">.</SPAN>geometry <SPAN class="operator token">=</SPAN> envBuilder<SPAN class="punctuation token">.</SPAN>geometry
        <SPAN class="punctuation token">}</SPAN>

        <SPAN class="comment token">// add a map to the mapview</SPAN>
        Map <SPAN class="punctuation token">{</SPAN>
            id<SPAN class="punctuation token">:</SPAN> map
            <SPAN class="comment token">// add the BasemapTopographic basemap to the map</SPAN>
            BasemapTopographic <SPAN class="punctuation token">{</SPAN><SPAN class="punctuation token">}</SPAN>
        <SPAN class="punctuation token">}</SPAN>
    <SPAN class="punctuation token">}</SPAN>

    EnvelopeBuilder <SPAN class="punctuation token">{</SPAN>
        id<SPAN class="punctuation token">:</SPAN> envBuilder
        spatialReference<SPAN class="punctuation token">:</SPAN> map<SPAN class="punctuation token">.</SPAN>spatialReference
    <SPAN class="punctuation token">}</SPAN>

    ColumnLayout <SPAN class="punctuation token">{</SPAN>
        RadioButton <SPAN class="punctuation token">{</SPAN>
            id<SPAN class="punctuation token">:</SPAN> freePanButton
            checked<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">true</SPAN>
            text<SPAN class="punctuation token">:</SPAN> <SPAN class="token function">qsTr</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"Free Pan"</SPAN><SPAN class="punctuation token">)</SPAN>
        <SPAN class="punctuation token">}</SPAN>
        RadioButton <SPAN class="punctuation token">{</SPAN>
            text<SPAN class="punctuation token">:</SPAN> <SPAN class="token function">qsTr</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"Draw Rectangle"</SPAN><SPAN class="punctuation token">)</SPAN>
        <SPAN class="punctuation token">}</SPAN>
    <SPAN class="punctuation token">}</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>