Draw text on top of custom pin

Question

I need to draw Text on top of the map Pin. I don't know how to approach the problem. Tried to use canvas to draw but I was unsuccessful

The Code I have:

On Android side:

CustomMapHandler.cs

public class CustomMapHandler : MapHandler
{
    public static readonly IPropertyMapper<IMap, IMapHandler> CustomMapper =
        new PropertyMapper<IMap, IMapHandler>(Mapper)
        {
            [nameof(IMap.Pins)] = MapPins,
        };

    public CustomMapHandler() : base(CustomMapper, CommandMapper)
    {
    }

    public CustomMapHandler(IPropertyMapper? mapper = null, CommandMapper? commandMapper = null) : base(
        mapper ?? CustomMapper, commandMapper ?? CommandMapper)
    {
    }

    public List<Marker> Markers { get; } = new();

    protected override void ConnectHandler(MapView platformView)
    {
        base.ConnectHandler(platformView);
        var mapReady = new MapCallbackHandler(this);
        PlatformView.GetMapAsync(mapReady);
    }

    private static new void MapPins(IMapHandler handler, IMap map)
    {
        if (handler is CustomMapHandler mapHandler)
        {
            mapHandler.Markers.Clear();
            mapHandler.AddPins(map.Pins);
        }
    }

    private void AddPins(IEnumerable<IMapPin> mapPins)
    {
        if (Map is null || MauiContext is null)
        {
            return;
        }

        foreach (var pin in mapPins)
        {
            var pinHandler = pin.ToHandler(MauiContext);
            if (pinHandler is IMapPinHandler mapPinHandler)
            {
                var markerOption = mapPinHandler.PlatformView;
                if (pin is CustomPin cp)
                {
                    cp.ImageSource.LoadImage(MauiContext, result =>
                    {
                        if (result?.Value is BitmapDrawable bitmapDrawable)
                        {
                            markerOption.SetIcon(BitmapDescriptorFactory.FromBitmap(bitmapDrawable.Bitmap));
                        }

                        AddMarker(Map, pin, Markers, markerOption);
                    });
                }
                else
                {
                    AddMarker(Map, pin, Markers, markerOption);
                }
            }
        }
    }

    private static void AddMarker(GoogleMap map, IMapPin pin, List<Marker> markers, MarkerOptions markerOption)
    {
        var marker = map.AddMarker(markerOption);
        pin.MarkerId = marker.Id;
        markers.Add(marker);
    }
}

MapCallbackHandler.cs

class MapCallbackHandler : Java.Lang.Object, IOnMapReadyCallback
{
    private readonly IMapHandler mapHandler;

    public MapCallbackHandler(IMapHandler mapHandler)
    {
        this.mapHandler = mapHandler;
    }

    public void OnMapReady(GoogleMap googleMap)
    {
        mapHandler.UpdateValue(nameof(IMap.Pins));
    }
}

CustomPin.cs

public class CustomPin : Pin
{
    public static readonly BindableProperty ImageSourceProperty =
        BindableProperty.Create(nameof(ImageSource), typeof(ImageSource), typeof(CustomPin));

    public ImageSource? ImageSource
    {
        get => (ImageSource?)GetValue(ImageSourceProperty);
        set => SetValue(ImageSourceProperty, value);
    }
}

MainPage.xaml.cs

void insertOnMap()
{
    var customPinFromResource = new CustomPin()
    {
       
        Label = "From Resource",
        Location = new Location(48.95049, 2.62891),
        Address = "Address3",
        ImageSource = ImageSource.FromFile("map_large_vertical_stopped_marker.png"),
        Map = map
    };
    map.Pins.Add(customPinFromResource);
    map.MoveToRegion(new MapSpan(new Location(48.95049, 2.62891), 48.95049, 2.62891));

}

MainPage.Xaml

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
              xmlns:maps="clr-namespace:Microsoft.Maui.Controls.Maps;assembly=Microsoft.Maui.Controls.Maps"
             xmlns:charts="clr-namespace:TestMap.Charts"
             x:Class="TestMap.MainPage">
    
        <VerticalStackLayout>
            <Map x:Name="map" HeightRequest="400" MapType="Street" IsVisible="true"/>
        
    </VerticalStackLayout>
    

</ContentPage>

What I have

What I need

Everything tried after the code above didn't work at all

What you said: "I need to draw Text on top of the map Pin. Is it similar to Callouts?" You can check the thread: [Relocate and Resize Mapsui Callouts in .NET Maui](https://stackoverflow.com/questions/74788261/relocate-and-resize-mapsui-callouts-in-net-maui) if the answer in it helps you. — Zack, Mar 14 '23 at 02:05
@DongzhiWang-MSFT I edited the original post, I need the details onclick. Here my problem is how to draw inside the image and then put it on the map as a pin. Thanks for the reply — Frederico Nicola, Mar 14 '23 at 09:15
Maybe you can try to add the text into the map Pin's image. You can refer to this case about [writing text on an image xamarin android](https://learn.microsoft.com/en-us/answers/questions/322155/write-text-on-an-image-xamarin-android). — Liyun Zhang - MSFT, Mar 15 '23 at 06:16
@LiyunZhang-MSFT Thanks for your help, with that case I solved the problem for android. Now if you kindly could refer me to a similar case on IOS/Mac side it would be awsome. Because I have the same problem, Do you know if there is a possible solution to this problem with a multiplatform approach? — Frederico Nicola, Mar 15 '23 at 17:28

score 1 · Accepted Answer · answered Mar 16 '23 at 09:17

It seems there is no a such solution can resolve this problem with a multiplatform approach. In you case, the control is a pin in the map, not a image view. So your problem is more like adding the text in to the image.

So, you need to call the platform native code to do that. For the android, you can refer to this case about writing text on an image xamarin android. And for the ios, you can refer to this case about Xamarin.iOS Image on Image Watermark. What you need to do is change the the image watermark as text watermark.

In addition, you can also google how to add text in the image in the native ios or mac. Such as how do I add text to an image in iOS Swift. You can convert the native code to the C# code because you can also find the corresponding api in the maui.

Draw text on top of custom pin

1 Answers1