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?

Poulpynator · Answer 1 · 2022-12-15T14:06:42.663

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.

While this solution may work. I was hoping not to have to add more components, especially that need to be dynamically updated. Mapsui has a CalloutStyle class which offers a SymbolOffset which offsets the callout from the center of the pin symbol. Would there be a way to dynamically adjust that offset value so the callout spans the bottom of the map no matter where the pin symbol is? — RPBruiser, May 11 '23 at 20:03
@RPBruiser I guess you can use the Pin Location to calculate the offset but that seems to be way more work than just adding some XAML with bindings (to handle the content and visibility). And if you start doing stuff like that what about window resizing ? Or if the pin move ? If you really want to do this you can ask pauldendulk on the Mapsui github, he is really active and open to questions :) — Poulpynator, May 11 '23 at 21:00

score 0 · Accepted Answer · answered Jul 26 '23 at 15:44

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.

Relocate and Resize Mapsui Callouts in .NET Maui

2 Answers2

Linked