Customize map pins in .NET MAUI

[giscus[bot]]

Customize map pins in .NET MAUI

Customize map pins in .NET MAUI.

https://vladislavantonyuk.github.io/articles/Customize-map-pins-in-.NET-MAUI/

[VinShen]

Good work Vladislav Antonyuk.

I tried the custom image on the Map Pins. It works but if Pin count is 120 or more, the Map loading takes lot of time on Android. It's in Minutes.
iOS is little better.
What can we increase Map loading with more custom Image Pins?
Please suggest. Thanks

[VladislavAntonyuk]

We add event listeners here: https://github.com/VladislavAntonyuk/MauiSamples/blob/main/MauiMaps/Platforms/Android/MapCallbackHandler.cs#L18

and look for the pin here:
https://github.com/VladislavAntonyuk/MauiSamples/blob/main/MauiMaps/Platforms/Android/CustomMarkerClickListener.cs#L17

You can debug and check if pin is found on click

[VinShen]

Hi Vladislav Antonyuk.

I confirmed public bool OnMarkerClick(Android.Gms.Maps.Model.Marker marker) of CustomMarkerClickListener.cs does fire and Proper Pin is found at L17.

When I use
public ObservableCollection MyPins { get; } = new();
at MainPage.xaml.cs the
var myPin = new CustomPin();
MyMap.Pins.Add(myPin);
myPin.MarkerClicked += async (s, e) =>
{
e.HideInfoWindow = true;
Pin pin = (Pin)s;
string pinName = pin.Label;
await Toast.Make($"{pinName}").Show();
};
does work properly.

But when I use
public ObservableCollection MyPins { get; } = new();
at MainPageViewModel.cs and bind it with xaml map as ItemsSource="{Binding MyPins}"

var myPin = new CustomPin();
MyPins.Add(myPin)
myPin.MarkerClicked += async (s, e) => .....

does not work.

Please note that with earlier implementation of CustomMapHandler (without pinsToAdd, pinsToRemove, ...) this (MainPageViewModel implementation) was also working properly.

Am I missing something?

[VinShen]

Hi Vladislav Antonyuk.

Sorry !!

It was my mistake. I was using map from my own class CMap derived from Microsoft.Maui.Controls.Maps.Map

I used the CMap instead of IMap in CustomMapHandler and MapCallbackHandler.

Now Map, CustomPins, Click Events every thing is working fine and fast even for 200+ pins for Android.

Thank you for the code and support. You saved my App. Great job !!

[OpenSoftsrl]

Hi VinShen, can you share your CMap class?

[Ducvu1996]

I have the same problem, my project have 1000 pins, but it takes a lot of time, if I dont use handle for IOS, it is quite fast, but i need to handle to show the marker in Pin on IOS, because the default pin show the marker under, I need it show in the top, any one have suggestion for me, thank you so much.

[Suhailbsth]

i have tried this code. but the "MauiMKMapView" shows error. is there any nuget package to be installed for this to work?

[VladislavAntonyuk]

No, make sure you use it in iOS file.

[bdgza]

Hi, trying to port maps with custom pins form XF to MAUI with .NET 8. When I copy your Android code for CustomMapHandler I get an error on the line:
var mapReady = new MapCallbackHandler(this);
because MapCallbackHandler is inaccessible. Perhaps this is something that changed with .NET 8. I am not able to find what the alternative is supposed to be.

[VladislavAntonyuk]

you are looking for this file: https://github.com/VladislavAntonyuk/MauiSamples/blob/35981ed61bd831c9cdb9c60ef7e3d21688df7a99/MauiMaps/Platforms/Android/MapCallbackHandler.cs

[bdgza]

Thank you!

[Brosten]

Thanks for sharing!
Anyone has a working example for Windows? Is it even possible, since it's using webView+BingMaps?

[VladislavAntonyuk]

WinUI 1.5 sdk brings native platform instead of webview. Most likely MAUI team will implement it in .NET 9

[GJungstedt]

Thank you! Is it okay if i use this code for my own project?

[VladislavAntonyuk]

Yes. If it’s open source, I would appreciate if you leave a link to the repo. Thank you

[GJungstedt]

Thank you again, here is the repo https://github.com/GurraBern/PloggingApp

[Ducvu1996]

Hi Vladislav Antonyuk. I tried the custom image on the Map Pins. My project have 1000 pins, I have no problem with Xamarin but when I change to MAUI, the Map loading takes lot of time on both IOS and Android.
please suggest. Thanks.

[VladislavAntonyuk]

Hello, the suggestion is adding only markers that are visible on the screen area. I am not sure if all 1000 pins are useful for the user.

I hope one day MAUI team will add Pin Icon API, because now we recreate each pin multiple times.

[NKJRao]

Hi,
This map handler is based on .net 6, when we use this in 8 or 9 then there are lot's of big changes is there can anyone provide map handler for latest one please.

Nishant

[pagirre]

What do you mean? Which aspects of CustomMapHandler would you update?

[Ducvu1996]

I am using Maps in .NET 8. It is ok if you just handler for about 100 pins load in once.

[pagirre]

My problem is as follows: I am using .net8 and I want to load dynamically 1000 pins approximately. I have already coded it. But it is unusable. Anyone any suggestion?

Based on the comment from @NKJRao I thought the improvements/updates expected would help in performance but there has been no response.

[ncson8920]

it's nice! but how to I customize InfoWindow of Pin?

[Ducvu1996]

It is easy, I have done, if you need, contact me

[ncson8920]

yes, please! I try to customize InfoWindow in few day but it stay in 0

[Ducvu1996]

johnducvu1996@gmail.com this is my email.

[Midnayt]

Nice!
What about changing pin image dynamically?
for example, last pin must be one image and other pins - with different. and when new position is added, change pin source image for new pin and previous?

[ncson8920]

with customPin, you add IsLast property default true . When you add new Pin, search the last Pin and update IsLast property to false and after add new Pin. In AddPins function of CustomMapHandler, check if IsLast is true SetIcon image1 if false SetIcon image2. Hope it can help you!

[Midnayt]

problem in CustomMapHandler - how I can change icon for previous pin? if it is already exist?

[VladislavAntonyuk]

You need to remove and add a pin with a new image. Pin is immutable

[Ducvu1996]

is it possible if I custom annotation?, I want the annotation show in the top instead of below like default. [VladislavAntonyuk] please.

[VladislavAntonyuk]

I don’t remember the specific setting for that. It displays annotation in the free space.

[GenCodeInc]

Good afternoon Vladislav,

When I call SendMarkerClick();; the InfoWindow does not pop up, Im tryin to fix it but so far no luck :(

private async void OnClickAirportButtonClicked(object sender, EventArgs e)
{
    foreach (var pin in MainMap.Pins.ToList())
    {
        if (pin is CustomPin)
        {
            if (pin.Label.Contains("Miami"))
            {
                ((CustomPin)pin).SendMarkerClick();
                break;
            }
        }
    }
}

[VladislavAntonyuk]

Hello @GenCodeInc, could you please provide a small repro sample?
For now make sure SendMarkerClick is called at all.

[GenCodeInc]

sure, made this public, click the button at top it goes to Miami but the InfoWindow does not popup.
https://github.com/GenCodeInc/Airports

[prashanth742]

Hi The custom pins are working fine but when using this, The direction and map links are not showing up. Is there a wayto add them back?

[AngeloLazzari]

Hello, great post Vladislav!
We are now using your code in our app, that is great! Thank you very much for share your knowhow.

We would like to change the pin in runtime, when a user clicks a pin it has to change the imagesource, how can we do it in IOS and ANDROID?

Actually we tried to use the MarkerClicked method of the pin changing runtime the imagesource but the pin is not change the image.

thank you very much

[VladislavAntonyuk]

Hello, @AngeloLazzari ! Thank you for the feedback. It is not possible on Android. The only way to change pin image is recreate the pin. As for iOS, I don’t remember, but it should work.

[AngeloLazzari]

ok thank you I will investigate and I will update you about how it will go.. thank you!!!!

[PauchardThomas]

Hi,

on iOS when I customize a Pin with an ImageSource, all the others are no longer displayed. Any idea ?

[PauchardThomas]

My bad, justed updated this line : if (pin is CustomPin cp && cp.ImageSource != null) and it's working fine now.

[AngeloLazzari]

Great job man!

[rajeshangappan]

How can i create MAP for travel. I have start and end point location i need a route info in my app.

[VladislavAntonyuk]

for now it is only available in native app: https://learn.microsoft.com/en-us/dotnet/maui/user-interface/controls/map?view=net-maui-9.0#launch-the-map-app-with-directions
or you can manually draw it using a polyline: https://learn.microsoft.com/en-us/dotnet/maui/user-interface/controls/map?view=net-maui-9.0#create-a-polyline
or you can try this sdk: https://developers.arcgis.com/net/maui/sample-code/find-route/

[jaroslavic]

On iOS, adding many polylines to the map seems to cause freezing. Is there any way to improve this, or perhaps an alternative component we could consider?

[VladislavAntonyuk]

It's a bad practice to add all pins to the map; a better approach is to analyze the visible area and add only the necessary pins there. Also, you can limit the zoom feature.
Alternatively, you can see how I implemented it for my app: https://github.com/VladislavAntonyuk/WorldExplorer/tree/main/src/Client/Client/Controls/WorldExplorerMap