topic Re: Popups in ArcGIS Runtime SDK for .NET in .NET Maps SDK Questions

Popups in ArcGIS Runtime SDK for .NET

MichaelStruk — Thu, 09 Feb 2017 16:29:19 GMT

Are popups available in the ArcGIS Runtime SDK for .NET 100.0?

If popups are available, how we can use them?

Thank you

Re: Popups in ArcGIS Runtime SDK for .NET

AnttiKajanus1 — Sat, 11 Dec 2021 14:55:14 GMT

I was just writing a simple popup today so here is what I did.

        <esri:MapView x:Name="MyMapView">
            <esri:MapView.Overlays>
                <esri:OverlayItemsControl>
                    <Grid x:Name="popup" 
                          esri:MapView.ViewOverlayAnchor="{Binding Geometry}" 
                          IsHitTestVisible="False" HorizontalAlignment="Right" VerticalAlignment="Top" MaxWidth="200">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="*" />
                            <RowDefinition Height="20" />
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="20" />
                            <ColumnDefinition Width="*" />
                        </Grid.ColumnDefinitions>
                        <Border Background="#CC000000" BorderThickness="1,1,1,0" Margin="0,0,0,-1" BorderBrush="White" Grid.ColumnSpan="2">
                            <StackPanel Margin="20">
                                <TextBlock FontWeight="Bold" Foreground="White">
                                    <Run Text="ObjectId = "></Run>
                                    <Run Text="{Binding Attributes[objectid]}"></Run>
                                </TextBlock>
                            </StackPanel>
                        </Border>
                        <Path StrokeThickness="1" Fill="#CC000000" Stroke="White" Stretch="Fill" HorizontalAlignment="Left" Data="M0,0 L0,1 1,0" Grid.Row="1" />
                        <Path StrokeThickness="1" Fill="#CC000000" Stroke="White" Stretch="Fill" VerticalAlignment="Top" Data="M0,0 L1,0" Grid.Row="1" Grid.Column="1" />
                    </Grid>
                </esri:OverlayItemsControl>
            </esri:MapView.Overlays>
        </esri:MapView>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

And in your code you can do following

        private ArcGISFeature _selectedFeature;

        private async void OnGeoviewTapped(object sender, GeoViewInputEventArgs e)
        {
            try
            {
                // Clear all selected features
                foreach (var featureLayer in MyMapView.Map.OperationalLayers.OfType<FeatureLayer>())
                {
                    featureLayer.ClearSelection();
                }

                // Identify all features
                var results = await MyMapView.IdentifyLayersAsync(e.Position, 2, false, 1);
                if (results.Any())
                {
                    // Get first result and get feature and layer from it
                    var result = results.First();
                    var feature = result.GeoElements.First() as ArcGISFeature;
                    await feature.LoadAsync(); // Load feature to get all attributes
                    var layer = result.LayerContent as FeatureLayer;

                    // Check if we already have clicked this feature 
                    // if yes, then close popup
                    // if no, show the popup
                    var objectIdField = (layer.FeatureTable as ArcGISFeatureTable).ObjectIdField;
                    if (_selectedFeature?.Attributes[objectIdField]?.ToString() == 
                        feature.Attributes[objectIdField]?.ToString())
                    {
                        popup.Visibility = Visibility.Collapsed;
                        popup.DataContext = null;
                        _selectedFeature = null;
                    }
                    else
                    {
                        // Select feature
                        layer.SelectFeature(feature);
                        // Set selected feature to the popups datacontext
                        popup.DataContext = feature;
                        popup.Visibility = Visibility.Visible;
                        _selectedFeature = feature;
                    }
                }
                else
                {
                    popup.Visibility = Visibility.Collapsed;
                    popup.DataContext = null;
                }
             
            }
            catch (Exception ex)
            {
                MessageBox.Show("An error occurred. " + ex.ToString(), "Sample error");
            }
        }
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Note that the implementation might differ depending what you want to do. In my case I want to show a callout when clicking a feature isn't currently selected. If the feature is currently selected, then I want to hide the callout and if nothing is located where I click, I want to reset the map.

Re: Popups in ArcGIS Runtime SDK for .NET

MarkBennett — Fri, 24 Feb 2017 16:36:15 GMT

Nice, will give a try! Thanks for sharing!

Ming

Re: Popups in ArcGIS Runtime SDK for .NET

Marcelo_Cesar_AugustoTorres — Sun, 12 Mar 2017 07:43:04 GMT

This example works with Xamarin.Forms???

Re: Popups in ArcGIS Runtime SDK for .NET

JimFiddes — Tue, 27 Jun 2017 20:11:49 GMT

Was a solution for Xamarin ever identified for creating a control? The MapView on the droid side only has an Overlay property where the windows side has a Overlays property and it is specific to ESRI.

Re: Popups in ArcGIS Runtime SDK for .NET

JimFiddes — Tue, 27 Jun 2017 20:14:17 GMT

Hey Antti

Any input on how to do this within Xamarin? I've implemented this idea within our UWP and am now attempting the droid side and not sure how to proceed.

Re: Popups in ArcGIS Runtime SDK for .NET

AnttiKajanus1 — Wed, 12 Jul 2017 10:25:55 GMT

It seems that this got answered in https://community.esri.com/thread/197650-popups-in-xamarin-android topic.

Re: Popups in ArcGIS Runtime SDK for .NET

KayugaSolution — Wed, 09 Aug 2017 00:10:11 GMT

Could you post the entire solution? If you have it for WPF, that would be great. Thanks!

Re: Popups in ArcGIS Runtime SDK for .NET

dotMorten_esri — Thu, 24 Aug 2017 21:12:58 GMT

It might be worth mentioning that with v100.1, we greatly simplified this common workflow. The above method is great if you want full control of every pixel that's presented. If not, try the new callout api:

            mapView.ShowCalloutAt(
                new MapPoint(0, 0, SpatialReferences.Wgs84),
                new UI.CalloutDefinition("Center of the world"));

Re: Popups in ArcGIS Runtime SDK for .NET

JoeHershman — Fri, 25 Aug 2017 21:05:49 GMT

mnielsen-esristaff‌ the new callout behavior of having the callout move if it goes out of the visible area (which we were not able to do) is really nice. Also not needing the whole SetAnchorPoint. The problem I am having is that there is the white edge of the default Callout around our custom Popup UI. I would like to use this because of the move behavior, but the outline makes it a no-go. Any way to get rid of that, I don't see any properties that would take care of it?

Thanks

-Joe

Re: Popups in ArcGIS Runtime SDK for .NET

dotMorten_esri — Sat, 11 Dec 2021 14:55:17 GMT

You can override the Callout style like this:

<esri:MapView>
    <esri:MapView.Resources>
        <Style TargetType="esri:Callout">
            <Setter Property="BorderBrush" Value="Red" />
            <Setter Property="BorderThickness" Value="5" />
        </Style>
    </esri:MapView.Resources>
</esri:MapView>
‍‍‍‍‍‍‍‍

There's a lot of properties to override, but you might have to adapt your layout to the callout's style (ie make the background the same blue color, and remove your own border, reduce padding/margins etc.

For reference here's the full callout style defined:

    <Style TargetType="{x:Type local:Callout}">
        <Setter Property="MinWidth" Value="75" />
        <Setter Property="Padding" Value="10" />
        <Setter Property="Background" Value="#E6FFFFFF" />
        <Setter Property="Foreground" Value="Black" />
        <Setter Property="BorderBrush" Value="LightGray" />
        <Setter Property="BorderThickness" Value="1" />
        <Setter Property="HorizontalContentAlignment" Value="Center" />
        <Setter Property="VerticalContentAlignment" Value="Center" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type local:Callout}">
                    <Grid x:Name="RootElement">
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="EntranceTransitions">
                                <VisualState x:Name="Show">
                                    <Storyboard>
                                        <DoubleAnimation Duration="0:0:0.1" From="0" To="1" Storyboard.TargetName="RootElement" Storyboard.TargetProperty="Opacity" >
                                            <DoubleAnimation.EasingFunction>
                                                <CubicEase />
                                            </DoubleAnimation.EasingFunction>
                                        </DoubleAnimation>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Hide">
                                    <Storyboard>
                                        <DoubleAnimation Duration="0:0:0" To="0" Storyboard.TargetName="RootElement" Storyboard.TargetProperty="Opacity" />
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="Visibility">
                                <VisualState x:Name="Visible">
                                    <Storyboard>
                                        <DoubleAnimation Duration="0:0:0.25" To="1" Storyboard.TargetName="RootElement" Storyboard.TargetProperty="Opacity" />
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="HiddenByElevation">
                                    <Storyboard>
                                        <DoubleAnimation Duration="0:0:0.25" To=".3" Storyboard.TargetName="RootElement" Storyboard.TargetProperty="Opacity" />
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Path x:Name="PART_Border" Fill="{TemplateBinding Background}" Stretch="None" Stroke="{TemplateBinding BorderBrush}" 
                              DataContext="{TemplateBinding BorderThickness}" StrokeThickness="{Binding Left}" HorizontalAlignment="Center" VerticalAlignment="Center" />
                        <Grid x:Name="PART_ContentArea" HorizontalAlignment="Left" VerticalAlignment="Top">
                            <ContentPresenter Margin="{TemplateBinding Padding}" 
                                          HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                          VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                           />
                        </Grid>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Popups in ArcGIS Runtime SDK for .NET

JoeHershman — Mon, 28 Aug 2017 13:13:41 GMT

Thank you

Re: Popups in ArcGIS Runtime SDK for .NET

RavindraSingh — Thu, 21 Sep 2017 10:54:31 GMT

Hi,

Can you please share the whole code, to get similar kind of output, I also want to create a callout with Table like GUI and close button at the top of the callout.

Thanks.

Re: Popups in ArcGIS Runtime SDK for .NET

dotMorten_esri — Thu, 21 Sep 2017 17:21:25 GMT

On a side note I'd really recommend against this pattern of creating huge popups with lots and lots of contents, as they block the view of the map. A better design approach is to keep the popup small with just a title and an 'edit' or 'info' button. Clicking that brings out a side-panel with the full information. That way part of the map you're looking stays mostly unblocked, and the detailed data you get to work with next to, instead of over the map.

Re: Popups in ArcGIS Runtime SDK for .NET

RavindraSingh — Sat, 23 Sep 2017 10:27:21 GMT

thanks Nielsen,

this is actually what I thought of. I am here kind of confused and stucked. I am developing Cross platform app. which works on both Droid and iOS, with single code base. for that I am working on Xamarin.Form Components.

in ArcGIS runtime SDK 100.1.0 for .NET There are two Namespaces e.g.

Esri.ArcGISRuntime.UI.Controls -->Esri.ArcGISRuntime.UI.Controls.MapView.

This above one has the property - as CalloutStyle.

Esri.ArcGISRuntime.Xamarin.Forms. --> From here I am using, Esri.ArcGISRuntime.Xamarin.Forms.MapView

But this doesn't have it.

Can you please suggest here, or share some sample code to set the Button inside the Callout on Esri.ArcGISRuntime.Xamarin.Forms.MapView's Tap Event.

Best Regards,

Ravindra

Re: Popups in ArcGIS Runtime SDK for .NET

RavindraSingh — Sat, 23 Sep 2017 11:48:48 GMT

Hi,

I have found the solution of my Issue.

Sharing the code here, hope, it may help someone.

using System;
using System.Diagnostics;
using Esri.ArcGISRuntime.Geometry;
using Xamarin.Forms;
using Esri.ArcGISRuntime.Xamarin.Forms;
using Esri.ArcGISRuntime.Data;
using Esri.ArcGISRuntime.Mapping;
using Esri.ArcGISRuntime.Mapping.Popups;
using Esri.ArcGISRuntime.UI;

namespace GitTrial_Sample
{
    public partial class IndexMapPage : ContentPage
    {
        public IndexMapPage()
        {
            InitializeComponent();
            Title = "Show callout";
            Initialize();
        }

        private void Initialize()
        {
            // Create a new basemap using the streets base layer
            Basemap myBasemap = Basemap.CreateStreets();

            // Create a new map based on the streets basemap
            Map myMap = new Map(myBasemap);

            // Assign the map to the MapView
            MyMapView.Map = myMap;

            // Wire up the MapView GeoVewTapped event
            MyMapView.GeoViewTapped += MyMapView_GeoViewTapped;
        }

        private void MyMapView_GeoViewTapped(object sender, GeoViewInputEventArgs e)
        {
            // Get the user-tapped location
            MapPoint mapLocation = e.Location;

            // Project the user-tapped map point location to a geometry
            Geometry myGeometry = GeometryEngine.Project(mapLocation, SpatialReferences.Wgs84);

            // Convert to geometry to a traditional Lat/Long map point
            MapPoint projectedLocation = (MapPoint)myGeometry;

            // Format the display callout string based upon the projected map point (example: "Lat: 100.123, Long: 100.234")
            string mapLocationDescription = string.Format("Lat: {0:F3} Long:{1:F3}", projectedLocation.Y, projectedLocation.X);

            // Create a new callout definition using the formatted string
            CalloutDefinition myCalloutDefinition = new CalloutDefinition("Location:", mapLocationDescription);
            //myCalloutDefinition.DetailText = "This is Detailed text";
            myCalloutDefinition.Text = "Header Line Text";
            RuntimeImage rtImg = new RuntimeImage(new Uri("https://cdn0.iconfinder.com/data/icons/business-finance-vol-14-2/512/69-128.png"));

// Here URI can be any location of the image. I just referred randomly this img.
            rtImg.LoadAsync();
            //myCalloutDefinition.Icon = rtImg;
            myCalloutDefinition.ButtonImage = rtImg;

            Action<object> infoWindowButtonClick_Process = infoWindowBtn_Click_Event;
            myCalloutDefinition.OnButtonClick = infoWindowButtonClick_Process;

            // Display the callout
            MyMapView.ShowCalloutAt(mapLocation, myCalloutDefinition);
        }

        private async  void infoWindowBtn_Click_Event(object message)
        {
            Debug.Print("Info window Button Clicked......");
            //var selectedAction = await DisplayActionSheet("Came from Infor Window", "OK", null, "You Clicked on Info window Button");  // This also Working
            await DisplayAlert("Y=Infor window button clicked", "You came from Info Window on Map","OK");  // This also working
        }
    }
}

------- XAML File-------

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:esri="clr-namespace:Esri.ArcGISRuntime.Xamarin.Forms;assembly=Esri.ArcGISRuntime.Xamarin.Forms"
    xmlns:mapping="clr-namespace:Esri.ArcGISRuntime.Mapping;assembly=Esri.ArcGISRuntime"
    xmlns:esriUI="clr-namespace:Esri.ArcGISRuntime.UI;assembly=Esri.ArcGISRuntime"
    xmlns:local="clr-namespace:GitTrial_Sample" x:Class="GitTrial_Sample.IndexMapPage"
    Title="Welcome to Index Map Page">
    <ContentPage.Padding>
        <OnPlatform x:TypeArguments="Thickness" iOS="0,40,0,0" />
    </ContentPage.Padding>

    <esri:MapView x:Name="MyMapView">

    </esri:MapView>
</ContentPage>

... I prefer to share full code, so that there is no confusion for newbies to free it.

find the is the sc

reenshot..

Re: Popups in ArcGIS Runtime SDK for .NET

DonKang — Fri, 20 Oct 2017 22:25:03 GMT

Hello Joe,

How did you ended up showing all the attribute information.

Coming from Javascript API world, I am finding out working with runtime sdk very challenging.
I would love to display more than just one line of attribute info. I would like to display attributes in tabular format like yours.

Can you please share your code?

thanks

Don

Re: Popups in ArcGIS Runtime SDK for .NET

JoeHershman — Sat, 21 Oct 2017 00:08:52 GMT

We haven't gotten around to using the new parts of the API. But we have the control that is shown above and display using the Overlays collection and call SetAnchorPoint to locate the pin. Our users want a popup that displays more than just a couple attributes, and this seems to be working. I do plan to try to integrate it into the Callout API stuff, but it is a low priority

Re: Popups in ArcGIS Runtime SDK for .NET

TheKenerson — Wed, 16 May 2018 20:39:48 GMT

Novice Question: Can you provide any instruction on creating a side-panel and displaying attribute information?

Re: Popups in ArcGIS Runtime SDK for .NET

shrigupta — Tue, 25 Jun 2019 09:13:21 GMT

I also want same grid view as map callout in xamrin.forms .How it is possibile to customize the web map callout as grid