Relocate and Resize Mapsui Callouts in .NET Maui

Question

I am currently using Mapsui in my .NET Maui project. I have gotten to the point of building out my callouts and displaying one at a time, but they are anchored to the pins for the locations (seen here):

I was wondering if there was a way to make these callouts "float" (similar to Google Maps implementation shown below):

Is there a way to do this with the callouts, or am I going to need to build another layer and have it visible/hidden based on the ClickEvents?

Answer 1

My solution for this was similar to @Poulpynator's suggestion. Using Mopups I was able to rewrite my existing code so that instead of displaying a Mapsui Callout on POI click, it would call a POI Mopup (mopups:PopupPage). In doing this I was able to create an element that was dismissable and able to display only one at a time.

Answer 2

There are samples available on the github of Mapsui : PinSample.cs

The position of the callout is defined by Callout.Anchor, you can base it on the size of the pin :

pin.Callout.Anchor = new Point(0, pin.Height * pin.Scale);

Oops just see it is not what you asked for, I am currently doing something similar by using another element on top of the map. XAML :

<Grid VerticalOptions="FillAndExpand">
    <mapsui:MapView x:Name="mapView" 
        VerticalOptions="FillAndExpand"
        HorizontalOptions="Fill"/>
    <Border 
        x:Name="mapContext"
        IsVisible="false"
        Padding="10"
        Margin="5"
        HorizontalOptions="Center"
        VerticalOptions="Start">
        <Border.StrokeShape>
            <RoundRectangle CornerRadius="10" />
        </Border.StrokeShape>
        <Label
            Text="Some content"
            BackgroundColor="White"></Label>
    </Border>
</Grid>

You can use the events to close / open it :

public MapTest()
{
    InitializeComponent();

    mapView.MapClicked += OnMapClicked;
    mapView.PinClicked += OnPinClicked;
}

private void OnPinClicked(object sender, PinClickedEventArgs e)
{
    mapContext.IsVisible = true;
}

private void OnMapClicked(object sender, MapClickedEventArgs e)
{
    mapContext.IsVisible = false;
}

You can also change the content based on the PinClickedEventArgs.Pin.