Identify graphics

View on GitHub

Display an alert message when a graphic is tapped.

Image of identify graphics

Use case

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

How to use the sample

Tap on a graphic to identify it. You will see an alert dialog displayed.

How it works

  1. Create a GraphicsOverlay and add it to the ArcGISMapView.
  2. Add a Graphic along with a SimpleFillSymbol to the graphics overlay.
  3. Identify the location clicked on the map view by the user with a onTap method.
  4. Identify the graphic on the map view with identifyGraphicsOverlay(graphicsOverlay, screenPoint, tolerance, maximumResults).

Relevant API

  • ArcGISMapView
  • Graphic
  • GraphicsOverlay

Tags

graphics, identify

Sample Code

identify_graphics.dart
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
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
// Copyright 2024 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
//
//   https://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.
//

import 'package:arcgis_maps/arcgis_maps.dart';
import 'package:flutter/material.dart';

class IdentifyGraphics extends StatefulWidget {
  const IdentifyGraphics({super.key});

  @override
  State<IdentifyGraphics> createState() => _IdentifyGraphicsState();
}

class _IdentifyGraphicsState extends State<IdentifyGraphics> {
  // Create a controller for the map view.
  final _mapViewController = ArcGISMapView.createController();
  // Graphic to store the polygon.
  late final Graphic _graphic;
  // Graphics overlay to present the graphics for the sample.
  final _graphicsOverlay = GraphicsOverlay();
  // A flag for when the map view is ready and controls can be used.
  var _ready = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          Column(
            children: [
              Expanded(
                // Add a map view to the widget tree and set a controller.
                child: ArcGISMapView(
                  controllerProvider: () => _mapViewController,
                  onMapViewReady: onMapViewReady,
                  onTap: onTap,
                ),
              ),
            ],
          ),
          // Display a progress indicator and prevent interaction until state is ready.
          Visibility(
            visible: !_ready,
            child: const SizedBox.expand(
              child: ColoredBox(
                color: Colors.white30,
                child: Center(child: CircularProgressIndicator()),
              ),
            ),
          ),
        ],
      ),
    );
  }

  void onMapViewReady() async {
    // Create a map with a topographic basemap.
    final map = ArcGISMap.withBasemapStyle(BasemapStyle.arcGISTopographic);
    // Create a polygon geometry.
    final polygonBuilder = PolygonBuilder(
      spatialReference: _mapViewController.spatialReference,
    );
    // Add points to the polygon.
    polygonBuilder.addPointXY(x: -20e5, y: 20e5);
    polygonBuilder.addPointXY(x: 20e5, y: 20e5);
    polygonBuilder.addPointXY(x: 20e5, y: -20e5);
    polygonBuilder.addPointXY(x: -20e5, y: -20e5);
    // Create a graphic with the polygon geometry and a yellow fill symbol.
    _graphic = Graphic(
      geometry: polygonBuilder.toGeometry(),
      symbol: SimpleFillSymbol(
        style: SimpleFillSymbolStyle.solid,
        color: Colors.yellow,
      ),
    );

    // Add the graphics to the graphics overlay.
    _graphicsOverlay.graphics.add(_graphic);
    // Add the graphics overlay to the map view controller.
    _mapViewController.graphicsOverlays.add(_graphicsOverlay);
    // Set the viewpoint to the graphic.
    _mapViewController.setViewpoint(
      Viewpoint.fromTargetExtent(_graphic.geometry!.extent),
    );
    // Set the map to the map view controller.
    _mapViewController.arcGISMap = map;
    // Set the ready state variable to true to enable the sample UI.
    setState(() => _ready = true);
  }

  void onTap(Offset offset) async {
    // Identify the graphics overlay at the tapped point.
    final identifyGraphicsOverlay =
        await _mapViewController.identifyGraphicsOverlay(
      _graphicsOverlay,
      screenPoint: offset,
      tolerance: 12.0,
      maximumResults: 10,
    );
    // Check if the identified graphic is the same as the sample graphic.
    if (identifyGraphicsOverlay.graphics.isNotEmpty) {
      final identifiedGraphic = identifyGraphicsOverlay.graphics.first;
      if (identifiedGraphic == _graphic) {
        if (mounted) {
          showDialog(
            context: context,
            builder: (context) {
              // Display an alert dialog when the graphic is tapped.
              return AlertDialog(
                alignment: Alignment.center,
                content: const Text('Tapped on Graphic'),
                actions: [
                  TextButton(
                    onPressed: () => Navigator.of(context).pop(),
                    child: const Text('OK'),
                  ),
                ],
              );
            },
          );
        }
      }
    }
  }
}

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