How to Display Pop Up when the Polygon is clicked in Xamarin Forms

Question

I'm using WEB API to retrieve coordinates and display them as polygons on my Map. Now I want to make those Polygons when they clicked to display a pop with more information from the API. My Xaml:

  <maps:Map x:Name="map">
            <x:Arguments>
                <maps:MapSpan>
                    <x:Arguments>
                        <maps:Position>
                            <x:Arguments>
                                <x:Double>-30.241943</x:Double>
                                <x:Double>25.771944</x:Double>
                            </x:Arguments>
                        </maps:Position>
                        <x:Double>
                            20
                        </x:Double>
                        <x:Double>
                            20
                        </x:Double>
                    </x:Arguments>
                </maps:MapSpan>
            </x:Arguments>
            <maps:Map.MapElements>
            </maps:Map.MapElements>
        </maps:Map>
    </StackLayout>

then my C# code for adding Polygons:

foreach (var tempList in AlertsList)
{
    string alertType = tempList.AlertType;
    if (alertType == "Advisory")
    {
    polygon = new Polygon();
    polygon.StrokeColor = Color.FromHex("ffff00");
    polygon.FillColor = Color.FromHex("ffff00");
    polygon.StrokeWidth = 5f;

    foreach (var Poly in tempList.Polygon)
    {
        float Lat = float.Parse(Poly[0]);
        float Long = float.Parse(Poly[1]);
        polygon.Geopath.Add(new Position(Lat, Long));
    }
    // add to map
    map.MapElements.Add(polygon);
    }
}

Answer 1

Add Gesture recognizer to your view and display the popup based on your requirement. You can add Gestures to any view in Xamarin Forms.

var tapGestureRecognizer = new TapGestureRecognizer();
tapGestureRecognizer.Tapped += (s, e) => {
    // handle the tap to display the popup here
};
[YourView].GestureRecognizers.Add(tapGestureRecognizer);

If you want to display a simple alert dialog then you can use the DisplayAlert in Xamarin forms to achieve the result. Refer the documentation here for more details.

If you wish to display customized popup based on your UI requirements, then there is an excellent open source plugin ( Rg.Plugins.Popup ) available for it. You can download the NuGet here . It has various examples as well for you to achieve what you want.

I hope that helps you.