Show popup

View inAndroidFormsUWPWPFiOSView on GitHub

Show predefined popups from a web map.

Show a popup screenshot

Use case

Many web maps contain predefined popups which are used to display the attributes associated with each feature layer in the map, such as hiking trails, land values, or unemployment rates. You can display text, attachments, images, charts, and web links. Rather than creating new popups to display information, you can easily access and display the predefined popups. The popup viewer control from the ArcGIS Toolkit currently supports label/value displays and plaintext HTML descriptions.

How to use the sample

Tap on the features to prompt a popup that displays information about the feature.

How it works

  1. Create and load a Map using a URL.
  2. Use a 'GeoViewTapped' event for when the user clicks on the map.
  3. Use the IdentifyLayerAsync method to identify the top-most feature.
  4. Create a PopupManager using the Popup from the IdentifyLayerResult.
  5. Use the PopupManager to populate the PopupViewer UI element.

Relevant API

  • IdentifyLayerResult
  • Popup
  • PopupManager

About the data

This sample uses a feature layer that displays reported incidents in San Francisco.

Additional information

This sample uses the PopupViewer UI control from the open source ArcGIS Runtime SDK for .NET Toolkit.

Tags

feature, feature layer, popup, toolkit, web map

Sample Code

ShowPopup.cs
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
// Copyright 2020 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.

using Android.App;
using Android.OS;
using Android.Widget;
using ArcGISRuntime;
using Esri.ArcGISRuntime.Data;
using Esri.ArcGISRuntime.Geometry;
using Esri.ArcGISRuntime.Mapping;
using Esri.ArcGISRuntime.Mapping.Popups;
using Esri.ArcGISRuntime.Toolkit.UI.Controls;
using Esri.ArcGISRuntime.UI.Controls;
using System;
using System.Linq;

namespace ArcGISRuntimeXamarin.Samples.ShowPopup
{
    [Activity(ConfigurationChanges = Android.Content.PM.ConfigChanges.Orientation | Android.Content.PM.ConfigChanges.ScreenSize)]
    [ArcGISRuntime.Samples.Shared.Attributes.Sample(
        name: "Show popup",
        category: "Layers",
        description: "Show predefined popups from a web map.",
        instructions: "Tap on the features to prompt a popup that displays information about the feature.",
        tags: new[] { "feature", "feature layer", "popup", "toolkit", "web map" })]
    [ArcGISRuntime.Samples.Shared.Attributes.AndroidLayout("ShowPopup.xml")]
    public class ShowPopup : Activity
    {
        // Hold references to the UI controls.
        private MapView _myMapView;
        private PopupViewer _popupViewer;
        private TextView _textView;

        protected override void OnCreate(Bundle bundle)
        {
            base.OnCreate(bundle);

            Title = "Show popup";

            CreateLayout();
            Initialize();
        }

        private void Initialize()
        {
            // Load the map.
            _myMapView.Map = new Map(new Uri("https://arcgisruntime.maps.arcgis.com/home/item.html?id=fb788308ea2e4d8682b9c05ef641f273"));
        }

        private async void MapViewTapped(object sender, GeoViewInputEventArgs e)
        {
            try
            {
                // Get the feature layer from the map.
                FeatureLayer incidentLayer = _myMapView.Map.OperationalLayers.First() as FeatureLayer;

                // Identify the tapped on feature.
                IdentifyLayerResult result = await _myMapView.IdentifyLayerAsync(incidentLayer, e.Position, 12, true);

                if (result?.Popups?.FirstOrDefault() is Popup popup)
                {
                    // Remove the instructions label.
                    _textView.Visibility = Android.Views.ViewStates.Gone;
                    _popupViewer.Visibility = Android.Views.ViewStates.Visible;

                    // Create a new popup manager for the popup.
                    _popupViewer.PopupManager = new PopupManager(popup);

                    QueryParameters queryParams = new QueryParameters
                    {
                        // Set the geometry to selection envelope for selection by geometry.
                        Geometry = new Envelope((MapPoint)popup.GeoElement.Geometry, 6, 6)
                    };

                    // Select the features based on query parameters defined above.
                    await incidentLayer.SelectFeaturesAsync(queryParams, SelectionMode.New);
                }
            }
            catch (Exception ex)
            {
                System.Diagnostics.Debug.Print(ex.Message);
            }
        }

        private void CreateLayout()
        {
            // Create a new vertical layout for the app.
            SetContentView(Resource.Layout.ShowPopup);

            _myMapView = FindViewById<MapView>(Resource.Id.MapView);
            _popupViewer = FindViewById<PopupViewer>(Resource.Id.popupViewer);
            _textView = FindViewById<TextView>(Resource.Id.instructionsLabel);

            // Add event handlers.
            _myMapView.GeoViewTapped += MapViewTapped;
        }

        protected override void OnDestroy()
        {
            base.OnDestroy();

            // Unhook event handlers.
            _myMapView.GeoViewTapped -= MapViewTapped;
        }
    }
}

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