Pin with tappable callout

[gpsaliola]

I'm migrating my app from Xamarin to Maui and Mapsui 5.00.
In Xamarin, I created a custom pin class in which I drew the callout and handled taps (because it didn't work well on iOS, see #1370).
I'd like the following behavior:
If the pin is tapped, the corresponding callout opens/closes, but I'd like to have control over whether the user taps the callout.
What's the best solution for this?
Pin + Callout or PointFeature + CalloutStyle?
Thanks.

[pauldendulk]

The Pin is part of the Xamarin/MAUI specific implementation. Since we are now supporting ten platforms the focus is on building out the cross platform functionality. So it is more future proof work with a PointFeature with CalloutStyle.

[gpsaliola]

Thanks for the reply.
I saw the example and managed to reproduce it, but I don't understand how to intercept the tapped event on the callout (as distinct from the callout on the pin).

[pauldendulk]

You would have to listen to the MapTapped on the Map and in that event check what is tapped. The MapInfo events also contains the styles, so you could check if it tapped the CalloutStyle. So, you need to do some extra work in this setup.

[gpsaliola]

I tried this but there is no way to know if the user tapped on the pin or the callout:

        private static void mapView_MapTapped(object? s, MapEventArgs e)
        {
            var mapInfo = e.GetMapInfo(e.Map.Layers.Where(l => l.Name == AppGeneral.cLayerWpt));
            CalloutStyle calloutStyle = mapInfo.Feature?.Styles.OfType<CalloutStyle>().FirstOrDefault();
            if (calloutStyle is not null)
            {
                calloutStyle.Enabled = !calloutStyle.Enabled;
                mapInfo.Layer?.DataHasChanged(); 
                e.Handled = true;
            }
         }

mapInfo.Feature?.Styles always contains 2 elements: the CalloutStyle and ImageStyle whether the user clicked on the pin or the callout.
You could perhaps figure it out by making the difference between the Y coordinate where you tapped with the Y coordinate of the pin on the map.
If the difference is big enough (to experiment with) then the user has tapped on the callout

            PointFeature feature = (PointFeature)mapInfo.Feature;
            if (feature is not null)
            {
                var pos = e.ScreenPosition;
                var point = feature.Point;
            }

But I don't know how to convert the metric coordinates of feature.Point to pixel coordinates on the map.

[pauldendulk]

How it works is that we go through all the feature/style combinations and check if drawing them would change the pixel where you tapped. The order in which they are returned is with the ones drawn on top first. This means:

• If the CalloutStyle is in the MapInfo it was visible.
• If the CalloutStyle is the first in the list it was on top.

We also return other feature/style combinations that are underneath the visible feature/style because this is useful in some scenarios, but if you are not interested in those just pick the first.

This is something that should be documented.

[gpsaliola]

Thanks for your reply.
I thought of a solution like this: the user taps the pin and the callout opens. If they tap again, either the pin or the callout, the context menus open. If they do a long tap, the callout closes.
I think it's a good compromise between simplicity of code and ease of use.

[pauldendulk]

Yes, this is also what I had have done in some projects. So, this is possible with the setup, right? Or do you still have a problem?

[gpsaliola]

No problem, this way I solved it, thanks.