Popups in Xamarin Android

[JimFiddes]

Hey there

I've asked this question within a thread that is flagged as assumed answered and I'm guessing the question is being over looked. We are using v100 and have the pop up example working in our windows project using the idea that antti.kajanus-esri-fi-esridist‌ provided but am struggling with how to implement a similar idea on the droid side. The MapView has an Overlay property but it is expecting a droid widget where the windows side is expecting an ESRI OverlayControl. Is there any examples or thoughts on how we can dynamically create a control to display attributes within, when a user touches a graphic?

Thanks,

Jim

[GregDeStigter · Accepted solution]

The GeoView.Overlays collection doesn't exist on the Xamarin side. The Overlay object you see in Android is from the base Android.Views.View class and not really related to MapView overlays.

In the newly released Runtime API v100.1, you can use the new Callout capability to show a simple callout UI for a feature or graphic. This is similar to a map overlay but with a smaller and less intrusive UI suitable for smaller devices. This should work on all platforms including Xamarin. The GeoView has two new methods ShowCalloutForGeoElement and ShowCalloutAt to show a callout.

Here's some basic Android code for a start:

public class MainActivity : Activity
{
    private readonly Envelope TestExtent = new Envelope(-129, 50, -64, 24, SpatialReferences.Wgs84);
    private readonly Uri UsCitiesUri = new Uri("http://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer/0");
    private MapView _mapView;
    private FeatureLayer _features;

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

        _mapView = new MapView(this);
        _mapView.Map = new Map(Basemap.CreateTopographic())
        {
            InitialViewpoint = new Viewpoint(TestExtent)
        };
        _features = new FeatureLayer(UsCitiesUri);
        _mapView.Map.OperationalLayers.Add(_features);
        _mapView.CalloutStyle = new CalloutStyle()
        {
            BorderColor = Color.Black,
            BorderWidth = 1
        };
        _mapView.GeoViewTapped += MapView_GeoViewTapped;

        SetContentView(_mapView);
    }

    private async void MapView_GeoViewTapped(object sender, GeoViewInputEventArgs e)
    {
        var idResult = await _mapView.IdentifyLayerAsync(_features, e.Position, 5d, false);
        var feature = idResult.GeoElements.FirstOrDefault();
        if (feature != null)
        {
            var def = new CalloutDefinition(feature);
            _mapView.ShowCalloutForGeoElement(feature, e.Position, def);
        }
        else
        {
            _mapView.DismissCallout();
        }
    }
}
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[JimFiddes]

I love the look of the new call out, a question that does come up from this is how does this work in the .net side. There is no CalloutStyle that can be set the same way. All the other methods of the mapview appear to be there including the CalloutDefinition but documentation wise, it is unclear how to control the look of the call out on the windows side.

[GregDeStigter]

As a UI view / control, the Callout is platform-specific. On Xamarin platforms we provide the CalloutStyle class to control the look of a callout on the GeoView. In WPF and UWP we use the standard XAML based mechanisms for updating control styles which is a richer and more natural way to style the UI.

To change the style of a callout, add a new style to your XAML page that declares the MapView - something like this:

<Style TargetType="{x:Type esri:Callout}">
    <Setter Property="Padding" Value="24" />
    <Setter Property="Background" Value="LightBlue" />
    <Setter Property="BorderBrush" Value="DarkBlue" />
    <Setter Property="BorderThickness" Value="4" />
</Style>‍‍‍‍‍‍

You can also override the Callout's ControlTemplate:

<Style TargetType="{x:Type esri:Callout}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="esri:Callout">
                <Border Background="LightGreen" BorderBrush="Green" BorderThickness="4"
                        CornerRadius="30" Padding="20">
                    <ContentPresenter />
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>
‍‍‍‍‍‍‍‍‍‍‍‍

I hope this helps. Also note that we'll be working on filling out our Callout samples in the coming weeks so you'll have a clearer picture of how they're best used.