Customise Map Pins

[losh99]

Hello,

Sorry if this has already been covered, I'm trying to customise the map pins and struggling to find out how.

I've tried to append to the MapPinHandler like so:

MapPinHandler.Mapper.AppendToMapping("CustomMapPinHandler", (handler, pin) =>
{
    if (pin is CustomMapPin customPin && customPin.PinType == CustomPinType.User)
        handler.SetVirtualView(new Image() { Source = "map_user.pin.png" });
    else
        handler.SetVirtualView(new CustomMapPinView());
});

The CustomMapPinView is just a border containing a label, the label text is bound to the Label property of Pin.

I've also tried deriving from MapPinHandler similar to how I've seen the MapHandler set up in the toolkit:

builder
    .UseMauiApp<App>()
    .UseMauiCommunityToolkitMaps(key)
    .UseMauiCommunityToolkit()
    .ConfigureFonts(fonts =>
    {
        fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
        fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
    })
    .ConfigureMauiHandlers(handlers =>
    {
        handlers.AddHandler<Pin, CustomMapPinHandler>();
    });

internal partial class CustomMapPinHandler : MapPinHandler
{
    protected override object CreatePlatformElement()
    {
        return new CustomMapPinView();
    }
}

Neither makes a difference to how the pin appears. Could anyone point out where I've gone wrong?

Thanks

[losh99]

Another option I'm looking at is making a change in a local copy of the CommunityToolkit.Maps source code and setting the pin icon in the map javascript. This is in MapHandlerWindows.GetMapHtmlPage(string):

function addPin(latitude, longitude, label, address, id)
{
				var location = new Microsoft.Maps.Location(latitude, longitude);
				var pin = new Microsoft.Maps.Pushpin(location, {
				                   title: label,
						   subTitle: address,
                                                   icon: 'Resources\Images\map_pin.png'
				        });

				pin.markerId = id;
				map.entities.push(pin);

The problem I'm running into here is that I don't think it's finding the image at the path I supply. When I'm setting the path to Icon the pin no longer has the default image, but it's just blank and only has the label.

Any suggestions?

[losh99]

As a solution I've gone for setting the icon of the pin with inline SVG as shown here https://learn.microsoft.com/en-us/bingmaps/v8-web-control/map-control-concepts/pushpins/custom-inline-svg-pushpin-example

I also made a little change to the original code and I set the label text to the text property instead of the title property. The text is rendered in the centre of the pin. For my scenario the label text is a single character that ties the map pin to an item in a list that sits alongside the map.

var pin = new Microsoft.Maps.Pushpin(location, {
            text: label,
            icon: '<svg xmlns=""http://www.w3.org/2000/svg"" width=""32"" height=""32""><circle cx=""16"" cy=""13"" r=""12"" stroke=""black"" stroke-width=""1"" fill=""red"" /></svg>',
            anchor: new Microsoft.Maps.Point(16,16)
        });

A nice to have would be if text, icon, and anchor could be supported as properties on the Pin object so this customisation could be done without having to branch from main. Maybe something for another day. Hope this helps someone.