Where has MapIcon gone in Windows MAUI Maps ?

Question

Hi team.

I try to migrate a custom renderer for Maps from Xamarin to MAUI.

I need to show a custom icon on the Map in Windows platform (found multiple examples how to do that in IOs and Droid)

In Xamarin there was a MapIcon class , derived from MapElement

public sealed class MapIcon : MapElement, IMapIcon, IMapIcon2	

I could assign an image and add the MapIcon as Element to the Map

 mapIcon.Image = RandomAccessStreamReference.CreateFromUri(new Uri(pin.IconURL));
nativeMap.MapElements.Add(mapIcon);

It seems that this is not possible any more or not yet ?

I would be very gracefull to get any ideas how to continue.

Thank you

best regards

Andreas

Answer 1

In .NET MAUI, the process for adding custom icons to maps on the Windows platform is different from Xamarin.Forms. While MAUI does support map functionality, the specific API for handling custom map icons might not be as straightforward as it was in Xamarin.

Here are some steps and ideas to help you migrate your custom renderer from Xamarin to .NET MAUI for the Windows platform:

Step-by-Step Migration Process

1. Create a Custom Renderer in .NET MAUI:
   • MAUI uses handlers instead of custom renderers, but for advanced customizations, you might still need to create a custom map handler.
2. Define the Custom Handler:
   • You will need to create a custom handler for your map that allows adding custom icons.
3. Utilize WinUI Components:
   • On the Windows platform, MAUI maps utilize WinUI components. You can use the MapIcon class from the WinUI API to add custom icons to the map.

Example Code for Custom Handler in .NET MAUI

Define the Custom Map Control

First, create a custom map control in your shared project:

// CustomMap.cs (in your shared project)
public class CustomMap : Map
{
    public CustomMap()
    {
    }
}

Create the Custom Handler for Windows

Next, create a custom handler for Windows platform to handle the custom icon addition:

// Platforms/Windows/Handlers/CustomMapHandler.cs
using Microsoft.Maui.Handlers;
using Microsoft.UI.Xaml.Controls.Maps;
using Windows.Devices.Geolocation;
using Windows.Storage.Streams;
public partial class CustomMapHandler : MapHandler
{
    protected override void ConnectHandler(MapControl platformView)
    {
        base.ConnectHandler(platformView);
        // Custom initialization if needed
    }
    public void AddCustomIcon(MapControl mapControl, string iconUri, Geopoint location)
    {
        var mapIcon = new MapIcon
        {
            Image = RandomAccessStreamReference.CreateFromUri(new Uri(iconUri)),
            Location = location,
            NormalizedAnchorPoint = new Windows.Foundation.Point(0.5, 1.0), // Adjust anchor point as needed
            ZIndex = 0
        };
        mapControl.MapElements.Add(mapIcon);
    }
}

Use the Custom Handler in MAUI

Register the custom handler in your MAUI project:

// MauiProgram.cs
using Microsoft.Maui;
using Microsoft.Maui.Controls.Hosting;
using Microsoft.Maui.Hosting;
using YourNamespace.Handlers;
public static class MauiProgram
{
    public static MauiApp CreateMauiApp()
    {
        var builder = MauiApp.CreateBuilder();
        builder
            .UseMauiApp<App>()
            .ConfigureMauiHandlers(handlers =>
            {
#if WINDOWS
                handlers.AddHandler<CustomMap, CustomMapHandler>();
#endif
            });
        return builder.Build();
    }
}

Using the Custom Map in Your XAML or Code

Finally, use your custom map in your XAML or code-behind:

<!-- MainPage.xaml -->
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="YourNamespace.MainPage">
    <ContentPage.Content>
        <StackLayout>
            <local:CustomMap x:Name="customMap" />
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

// MainPage.xaml.cs
public partial class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();
#if WINDOWS
        var handler = customMap.Handler as CustomMapHandler;
        var location = new Geopoint(new BasicGeoposition { Latitude = 47.6097, Longitude = -122.3331 });
        handler?.AddCustomIcon(handler.PlatformView, "https://example.com/icon.png", location);
#endif
    }
}

I hope this example and the snippets can help and provide a clear solution to your doubts. have a nice day!