Identify graphics

View inC++QMLView on GitHubSample viewer app

Display an alert message when a graphic is clicked.

screenshot

Use case

A user may wish to select a graphic on a map to view relevant information about it.

How to use the sample

Select a graphic to identify it. You will see an alert message displayed.

How it works

  1. Create a GraphicsOverlay and add it to the MapView.
  2. Add a Graphic along with a SimpleFillSymbol to the graphics overlay.
  3. Create a Point from the location clicked on the map view by the user from the mouseClicked signal on the MapView.
  4. Identify the graphic on the map view with identifyGraphicsOverlay(graphicsOverlay, mouse.x, mouse.y, tolerance, returnPopupsOnly, max results).

Relevant API

  • Graphic
  • GraphicsOverlay
  • MapView

Tags

graphics, identify

Sample Code

IdentifyGraphics.qml
Use dark colors for code blocksCopy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
// [WriteFile Name=IdentifyGraphics, Category=DisplayInformation]
// [Legal]
// Copyright 2016 Esri.

// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
// http://www.apache.org/licenses/LICENSE-2.0

// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
// [Legal]

import QtQuick
import QtQuick.Controls
import Esri.ArcGISRuntime

Rectangle {
    width: 800
    height: 600

    // Declare a map view inside the rectangle
    MapView {
        id: mapView
        anchors.fill: parent

        Component.onCompleted: {
            // Set the focus on MapView to initially enable keyboard navigation
            forceActiveFocus();
        }

        // Nest a map inside of the map view
        Map {
            id: map
            // set the basemap
            Basemap {
                initStyle: Enums.BasemapStyleArcGISTopographic
            }
        }

        // Add a graphics overlay to the map view
        GraphicsOverlay {
            id: graphicsOverlay
            // assign a render to the graphics overlay
            renderer: SimpleRenderer {
                symbol: SimpleFillSymbol {
                    style: Enums.SimpleFillSymbolStyleSolid
                    color: Qt.rgba(1, 1, 0, 0.7)
                }
            }
        }

        //! [identify graphics api snippet]
        // Signal handler for mouse click event on the map view
        onMouseClicked: mouse => {
            const tolerance = 22;
            const returnPopupsOnly = false;
            const maximumResults = 1000;
            mapView.identifyGraphicsOverlayWithMaxResults(graphicsOverlay, mouse.x, mouse.y, tolerance, returnPopupsOnly, maximumResults);
        }

        // Signal handler for identify graphics overlay
        onIdentifyGraphicsOverlayStatusChanged: {
            if (identifyGraphicsOverlayStatus === Enums.TaskStatusCompleted) {
                if (identifyGraphicsOverlayResult.graphics.length > 0) {
                    msgDialog.open();
                }
            } else if (identifyGraphicsOverlayStatus === Enums.TaskStatusErrored) {
                console.log("error");
            }
        }
        //! [identify graphics api snippet]
    }

    Dialog {
        id: msgDialog
        modal: true
        x: Math.round(parent.width - width) / 2
        y: Math.round(parent.height - height) / 2
        standardButtons: Dialog.Ok
        property alias text : textLabel.text
        Text {
            id: textLabel
            text: "Tapped on graphic"
        }
    }

    Component.onCompleted: {
        // create the polygon by assigning points
        const polygonBuilder = ArcGISRuntimeEnvironment.createObject("PolygonBuilder", {spatialReference: Factory.SpatialReference.createWebMercator()});
        polygonBuilder.addPointXY(-20e5, 20e5);
        polygonBuilder.addPointXY(20e5, 20e5);
        polygonBuilder.addPointXY(20e5, -20e5);
        polygonBuilder.addPointXY(-20e5, -20e5);
        // assign the geometry of the graphic to be the polygon
        const polygonGraphic = ArcGISRuntimeEnvironment.createObject("Graphic");
        polygonGraphic.geometry = polygonBuilder.geometry;
        // add the graphic to the polygon graphics overlay
        graphicsOverlay.graphics.append(polygonGraphic);
    }
}

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.