В этой статья мы рассмотри пример реализации кастомных пинов для карты xamarin. Пины будут обладать тем видом, который вам нужен. Так же мы рассмотрим часть кода xamarin.maps, отвечающий за создание, отрисовку и отображение пинов.

Благо исходники xamarin.forms представлены на github, и мы можем увидеть весь код:

xamarin/Xamarin.Forms: Xamarin.Forms Official Home (github.com)

Рассматривать мы будем эти файлы с гита:

iOs.MapRenderer Xamarin.Forms/MapRenderer.cs at 5.0.0 · xamarin/Xamarin.Forms (github.com)
Android.MapRenderer Xamarin.Forms/MapRenderer.cs at 5.0.0 · xamarin/Xamarin.Forms (github.com)

Для воспроизведения туториала у вас должны быть установлены пакеты Xamarin.Maps во все проекты, и соответственно настроен по гайду от xamarin:

Так же должен быть установлен пакет SkiaSharp и SkiaSharp.Views.Forms в основной проект (не специфичный для платформ):

Для начала реализуем тип, который станет базой для пинов, и карту, которая будет наследоваться от нативной, и обрабатывать наш пин, в основном проекте [ProjectName]:

Код CustomPin - база нашего пина

public abstract class CustomPin : Pin
    {
        public class MapMarkerInvalidateEventArgs
        {
            public double Width { get; }
            public double Height { get; }

            internal MapMarkerInvalidateEventArgs(CustomPin marker)
            {
                Width = marker.Width;
                Height = marker.Height;
            }
        }
        
        public event EventHandler<MapMarkerInvalidateEventArgs> RequestInvalidate;

// Bindable properties
        public static readonly BindableProperty WidthProperty = BindableProperty.Create(nameof(Width), typeof(double), typeof(CustomPin), 32.0, propertyChanged: OnDrawablePropertyChanged);
        public static readonly BindableProperty HeightProperty = BindableProperty.Create(nameof(Height), typeof(double), typeof(CustomPin), 32.0, propertyChanged: OnDrawablePropertyChanged);
        public static readonly BindableProperty AnchorXProperty = BindableProperty.Create(nameof(AnchorX), typeof(double), typeof(CustomPin), 0.5);
        public static readonly BindableProperty AnchorYProperty = BindableProperty.Create(nameof(AnchorY), typeof(double), typeof(CustomPin), 0.5);
        public static readonly BindableProperty IsVisibleProperty = BindableProperty.Create(nameof(IsVisible), typeof(bool), typeof(CustomPin), true);
        public static readonly BindableProperty ClickableProperty = BindableProperty.Create(nameof(Clickable), typeof(bool), typeof(CustomPin), true);

// Ширина пина
        public double Width
        {
            get { return (double)GetValue(WidthProperty); }
            set { SetValue(WidthProperty, value); }
        }

// Высота пина
        public double Height
        {
            get { return (double)GetValue(HeightProperty); }
            set { SetValue(HeightProperty, value); }
        }

// Расположение пина относительно точки на карте по X
        public double AnchorX
        {
            get { return (double)GetValue(AnchorXProperty); }
            set { SetValue(AnchorXProperty, value); }
        }

// Расположение пина относительно точки на карте по Y
        public double AnchorY
        {
            get { return (double)GetValue(AnchorYProperty); }
            set { SetValue(AnchorYProperty, value); }
        }

// Виден ли пин
        public bool IsVisible
        {
            get { return (bool)GetValue(IsVisibleProperty); }
            set { SetValue(IsVisibleProperty, value); }
        }

// Интерактивен ли пин
        public bool Clickable
        {
            get { return (bool)GetValue(ClickableProperty); }
            set { SetValue(ClickableProperty, value); }
        }

        private static void OnDrawablePropertyChanged(BindableObject bindable, object oldValue, object newValue)
        {
            CustomPin marker = bindable as CustomPin;

            marker.Invalidate();
        }

        public void Invalidate()
        {
            RequestInvalidate?.Invoke(this, new MapMarkerInvalidateEventArgs(this));
        }

// Метод, который будет перезаписан в дочернем классе, в нем будет происходить отрисовка пина
        public abstract void DrawPin(SKSurface surface);
    }

Код CustomMap - наша карта с поддержкой CustomPin

public class CustomMap : Map
{
}

Простой код, большего нам и не нужно.

И так, для начала рассмотрим рендер под Android, а именно - нас интересует метод CreateMarker на 248 строке, вот так он выглядит в оригинале:

protected virtual MarkerOptions CreateMarker(Pin pin)
{
  var opts = new MarkerOptions();
  opts.SetPosition(new LatLng(pin.Position.Latitude, pin.Position.Longitude));
  opts.SetTitle(pin.Label);
  opts.SetSnippet(pin.Address);

  return opts;
}

Этот метод отвечает за создание пина, важным элементом здесь, как нетрудно догадаться, является "MarkerOptions opts", тип MarkerOptions содержит метод SetIcon(BitmapDescriptor), которое мы и используем для отрисовывания пина. Для этого необходимо создать дочерний класс к этому отрисовщику в проекте [ProjectName].Android, рекомендую создать в нем папку Renderers:

Код заготовки класса отрисовщика будет выглядеть следующим образом:

[assembly: Xamarin.Forms.ExportRenderer(typeof(CustomMap), typeof(CustomMapRenderer))]
namespace [ProjectName].Droid.Renderers
{
    public class CustomMapRenderer : MapRenderer
    {
        public CustomMapRenderer(Context context) : base(context){}

        protected override MarkerOptions CreateMarker(Pin pin)
        {
            return base.CreateMarker(pin);
        }
    }
}

Пока что он никак не меняет логику поведения класса родителя. Давайте добавим обработку нашего CustomPin, результирующий код будет выглядеть следующим образом:

[assembly: Xamarin.Forms.ExportRenderer(typeof(CustomMap), typeof(CustomMapRenderer))]
namespace [ProjectName].Droid.Renderers
{
    public class CustomMapRenderer : MapRenderer
    {
        public CustomMapRenderer(Context context) : base(context){}

        protected override MarkerOptions CreateMarker(Pin pin)
        {
        // Получаем настроенный в базовом классе MarkerOptions
            var opts = base.CreateMarker(pin);
				// Если наш маркер - кастомный...
            if(pin is CustomPin cpin)
            {
            // ... то получаем SKPixmap с изображением пина
                SKPixmap markerBitmap = DrawMarker(cpin);
						// Задаем изображение пина и видимость
                opts.SetIcon(BitmapDescriptorFactory.FromBitmap(markerBitmap.ToBitmap()))
                       .Visible(cpin.IsVisible);
            // Выставляем якоря
                opts.Anchor((float)cpin.AnchorX, (float)cpin.AnchorY);
            }

            return opts;
        }

        private SKPixmap DrawMarker(CustomPin skPin)
        {
        // Считаем размер изображения пина согласно Density устройства
            double bitmapWidth = skPin.Width * Context.Resources.DisplayMetrics.Density;
            double bitmapHeight = skPin.Height * Context.Resources.DisplayMetrics.Density;
        // Создаем сурфейс для отрисовки
            SKSurface surface = SKSurface.Create(new SKImageInfo((int)bitmapWidth, (int)bitmapHeight, SKColorType.Rgba8888, SKAlphaType.Premul));
				// Заливаем сурфейс цветом Transparent
            surface.Canvas.Clear(SKColor.Empty);
        // Просим пин отрисовать изображение на сурфейс
            skPin.DrawPin(surface);
				// Получаем пиксели, которые можно перевести в BitMap
            return surface.PeekPixels();
        }
    }
}

Отлично, для Android мы все сделали, теперь попробуем проверить наше решение при помощи такого кастомного тестового пина (Создавать его нужно в основном проекте [ProjectName]):

internal sealed class CirclePin : CustomPin
    {
        // Сохраненный Bitmap
        SKBitmap pinBitmap;

        // Конструктор принимает string - это текст внутри круга
        public CirclePin(string text)
        {
            // Отступ текста от краев круга
            int circleOffset = 10;

            // Минимальный размер круга, при маленьком тексте
            int minSize = 40;

            // Размер шрифта текста
            int textSize = 18;

            // Задание цвета текста
            Color tempColor = Color.White;
            // Перевод из Color в SKColor
            SKColor textColor = new SKColor((byte)(tempColor.R * 255), (byte)(tempColor.G * 255), (byte)(tempColor.B * 255));

            // Задание цвета круга
            tempColor = Color.Black;
            // Перевод из Color в SKColor
            SKColor circleColor = new SKColor((byte)(tempColor.R * 255), (byte)(tempColor.G * 255), (byte)(tempColor.B * 255));

            PrepareBitmap(circleOffset, circleColor, text, textSize, textColor, minSize);
        }

        private void PrepareBitmap(int circleOffset, SKColor circleColor, string text, float textSize, SKColor textColor, int minSize, int iconSize = 28)
        {
            int width;
            float den = (float)DeviceDisplay.MainDisplayInfo.Density;

            // Удваиваем отступ, т.к. он будет с 2-х сторон одинаковый
            circleOffset *= 2;

            using (var font = SKTypeface.FromFamilyName("Arial"))
            using (var textBrush = new SKPaint
            {
                Typeface = font,
                TextSize = textSize * den,
                IsAntialias = true,
                Color = textColor,
                TextAlign = SKTextAlign.Center,
            })
            {
                // Высчитывание размера текста
                SKRect textRect = new SKRect();
                textBrush.MeasureText(text, ref textRect);

                // Ширина текста в dip
                width = Math.Max((int)(Math.Ceiling(textRect.Width) / den) + circleOffset, minSize);

                // Задаем размер пина согласно ширине в dip
                Width = Height = width;

                // Ширина текста в пикселях
                width = (int)Math.Floor(width * den);

                // Создаем Bitmap для отрисовки
                pinBitmap = new SKBitmap(width, width, SKColorType.Rgba8888, SKAlphaType.Premul);

                using (var canvas = new SKCanvas(pinBitmap))
                {
                    using (var circleBrush = new SKPaint
                    {
                        IsAntialias = true,
                        Color = circleColor
                    })
                    {
                        //Отрисовка круга
                        canvas.DrawRoundRect(new SKRoundRect(new SKRect(0, width, width, 0), width / 2f), circleBrush);

                        //Отрисовка текста
                        canvas.DrawText(text, width * 0.5f, width * 0.5f - textRect.MidY, textBrush);

                        canvas.Flush();
                    }
                }
            }

        }

        public override void DrawPin(SKSurface surface)
        {
            // Получаем канвас из сурфейса, для отрисовки
            SKCanvas canvas = surface.Canvas;

            // Отрисовываем на канвас наш сохраненный Bitmap
            canvas.DrawBitmap(pinBitmap, canvas.LocalClipBounds.MidX - pinBitmap.Width / 2f, canvas.LocalClipBounds.MidY - pinBitmap.Height / 2f);
        }
    }

Для проверки я немного изменил код стандартного MainPage.xaml, добавив в него карту, и код MainPage.xaml.cs для добавления проверочного набора пинов:

Код MainPage.xaml

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:xcmpexample="clr-namespace:XCMPExample"
             x:Class="[ProjectName].MainPage">

    <StackLayout>
        <Frame BackgroundColor="#2196F3" Padding="24" CornerRadius="0">
            <Label Text="Welcome to Xamarin.Forms!" HorizontalTextAlignment="Center" TextColor="White" FontSize="36"/>
        </Frame>
      	<!-- Карта -->
        <xcmpexample:CustomMap x:Name="customMap"/>
    </StackLayout>

</ContentPage>

Код MainPage.xaml.cs

public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();

            Random random = new Random();
            for (int i = 0; i < 100; i++)
            {
                string universalFillData = i.ToString();
                customMap.Pins.Add(new CirclePin(universalFillData)
                {
                    Label = universalFillData,
                    Address = universalFillData,
                    Position = new Position(
                    /// Устанавливаем координаты Москвы +-1
                    /// чтобы было проще найти наши пины
                        random.NextDouble() + 55,
                        random.NextDouble() + 37)
                });
            }
        }
    }

Получившийся результат:

Стандартная карта, с той же логикой в xaml.cs, но с Map вместо CustomMap в xaml.

Наша CustomMap

Теперь реализуем это же для iOs, для этого рассмотрим нативный для xamarin отрисовщик на iOs, нас интересует метод CreateAnnotation на 214 строке и метод GetViewForAnnotation на 224 строке. В оригинале эти методы выглядят так:

CreateAnnotation

protected virtual IMKAnnotation CreateAnnotation(Pin pin)
		{
			return new MKPointAnnotation
			{
				Title = pin.Label,
				Subtitle = pin.Address ?? "",
				Coordinate = new CLLocationCoordinate2D(pin.Position.Latitude, pin.Position.Longitude)
			};
		}

GetViewForAnnotation

protected virtual MKAnnotationView GetViewForAnnotation(MKMapView mapView, IMKAnnotation annotation)
		{
			MKAnnotationView mapPin = null;

			// https://bugzilla.xamarin.com/show_bug.cgi?id=26416
			var userLocationAnnotation = Runtime.GetNSObject(annotation.Handle) as MKUserLocation;
			if (userLocationAnnotation != null)
				return null;

			const string defaultPinId = "defaultPin";
			mapPin = mapView.DequeueReusableAnnotation(defaultPinId);
			if (mapPin == null)
			{
				mapPin = new MKPinAnnotationView(annotation, defaultPinId);
				mapPin.CanShowCallout = true;
			}

			mapPin.Annotation = annotation;
			AttachGestureToPin(mapPin, annotation);

			return mapPin;
		}

Логика работы интерфейса на iOs довольно заметно отличается от ее реализации на Android, в частности на iOs используются Annotation и AnnotationView, в кратце это информация и изображение пина соответственно (хотя такой ответ не точный, но информацию об этом можно найти в открытых источниках). В общем, нам нужны собственные Annotation и AnnotationView, создавать мы их будем в [ProjectName].iOs проекте:

CustomPinAnnotation

public class CustomPinAnnotation : MKPointAnnotation
    {
    // Сохраняем ссылку на пин, понадобится в будущем
        public CustomPin SharedPin { get; }

        public CustomPinAnnotation(CustomPin pin)
        {
            SharedPin = pin;

            Title = pin.Label;
            Subtitle = pin.Address;
            // Переводим координаты в CL для iOs
            Coordinate = ToLocationCoordinate(pin.Position);
        }

        public override string Title
        {
            get => base.Title;
            set
            {
                if (Title != value)
                {
                    string titleKey = nameof(Title).ToLower();

                    WillChangeValue(titleKey);
                    base.Title = value;
                    DidChangeValue(titleKey);
                }
            }
        }

        public override string Subtitle
        {
            get => base.Subtitle;
            set
            {
                if (Subtitle != value)
                {
                    string subtitleKey = nameof(Subtitle).ToLower();

                    WillChangeValue(subtitleKey);
                    base.Subtitle = value;
                    DidChangeValue(subtitleKey);
                }
            }
        }

        public override CLLocationCoordinate2D Coordinate
        {
            get => base.Coordinate;
            set
            {
                if (Coordinate.Latitude != value.Latitude ||
                    Coordinate.Longitude != value.Longitude)
                {
                    string coordinateKey = nameof(Coordinate).ToLower();

                    WillChangeValue(coordinateKey);
                    base.Coordinate = value;
                    DidChangeValue(coordinateKey);
                }
            }
        }

        private CLLocationCoordinate2D ToLocationCoordinate(Position self)
        {
            return new CLLocationCoordinate2D(self.Latitude, self.Longitude);
        }
    }

CustomPinAnnotationView

public class CustomPinAnnotationView : MKAnnotationView
    {
    		// Сохраняем название View
        public const string ViewIdentifier = nameof(CustomPinAnnotationView);
				// Сохраняем ссылку на кастомную аннотацию
        private CustomPinAnnotation _SkiaAnnotation => base.Annotation as CustomPinAnnotation;
     		// Токен остановки обновления изображения
        private CancellationTokenSource _imageUpdateCts;
        // Density экрана для высчитывания размера в пикселях
        private nfloat _screenDensity;

        public CustomPinAnnotationView(CustomPinAnnotation annotation) : base(annotation, ViewIdentifier)
        {
            _screenDensity = UIScreen.MainScreen.Scale;
        }

        internal async void UpdateImage()
        {
            CustomPin pin = _SkiaAnnotation?.SharedPin;
            UIImage image;
            CancellationTokenSource renderCts = new CancellationTokenSource();

            _imageUpdateCts?.Cancel();
            _imageUpdateCts = renderCts;

            try
            {
            		// Рисуем пин асинхронно
                image = await RenderPinAsync(pin, renderCts.Token).ConfigureAwait(false);

                renderCts.Token.ThrowIfCancellationRequested();

                Device.BeginInvokeOnMainThread(() =>
                {
                    if (!renderCts.IsCancellationRequested)
                    {
                    		// Задаем полученное изображение синхронно в потоке UI
                        Image = image;
                        Bounds = new CGRect(CGPoint.Empty, new CGSize(pin.Width, pin.Height));
                    }
                });
            }
            catch (OperationCanceledException)
            {
                // Ignore
            }
            catch (Exception e)
            {
                System.Diagnostics.Debug.WriteLine("Failed to render pin annotation: \n" + e);
            }
        }

        private Task<UIImage> RenderPinAsync(CustomPin pin, CancellationToken token = default(CancellationToken))
        {
            return Task.Run(() =>
            {
            		// Высчитываем размеры по аналогии с Android отрисовщиком
                double bitmapWidth = pin.Width * _screenDensity;
                double bitmapHeight = pin.Height * _screenDensity;
								
                // Отрисовываем пин по аналогии с Android отрисовщиком
                using (SKSurface surface = SKSurface.Create(new SKImageInfo((int)bitmapWidth, (int)bitmapHeight, SKColorType.Rgba8888, SKAlphaType.Premul)))
                {
                    surface.Canvas.Clear(SKColor.Empty);
                    pin.DrawPin(surface);

                    return surface.PeekPixels().ToUIImage();
                }
            }, token);
        }

        public void UpdateAnchor()
        {
            CenterOffset = new CGPoint(Bounds.Width * (0.5 - _SkiaAnnotation.SharedPin.AnchorX),
                                       Bounds.Height * (0.5 - _SkiaAnnotation.SharedPin.AnchorY));
        }
    }

Как и на примере отрисовщика, который мы реализовали под Android, необходимо создать такой же в [ProjectName].iOs проекте, заготовка будет выглядеть следующим образом:

[assembly: ExportRenderer(typeof(CustomMap), typeof(CustomMapRenderer))]
namespace [ProjectName].iOS.Renderers
{
    public class CustomMapRenderer : MapRenderer
    {
        protected override IMKAnnotation CreateAnnotation(Pin pin)
        {
            return base.CreateAnnotation(pin);
        }

        protected override MKAnnotationView GetViewForAnnotation(MKMapView mapView, IMKAnnotation annotation)
        {
            return base.GetViewForAnnotation(mapView, annotation);
        }
    }
}

Теперь добавим сюда обработку для наших кастомных пинов, с поддержкой кастомных аннотаций, результируйющий отрисовщик будет следующим:

[assembly: ExportRenderer(typeof(CustomMap), typeof(CustomMapRenderer))]
namespace [ProjectName].iOS.Renderers
{
    public class CustomMapRenderer : MapRenderer
    {
        protected override IMKAnnotation CreateAnnotation(Pin pin)
        {
            if (pin is CustomPin skPin)
            {
                //Если мы обрабатываем наш кастомный пин, то создаем ему специальную аннотацию.
                IMKAnnotation result = new CustomPinAnnotation(skPin);

                skPin.MarkerId = result;

                return result;
            }
            else
                return base.CreateAnnotation(pin);
        }

        protected override MKAnnotationView GetViewForAnnotation(MKMapView mapView, IMKAnnotation annotation)
        {
            if (annotation is CustomPinAnnotation skiaAnnotation)
            {
                // Если мы обрабатываем нашу кастомную аннотацию, то получаем из нее наш пин
                CustomPin skPin = skiaAnnotation.SharedPin;

                // Проверяем на кэшированные аннотации, по совету Xamarin
                CustomPinAnnotationView pinView = mapView.DequeueReusableAnnotation(CustomPinAnnotationView.ViewIdentifier) as CustomPinAnnotationView
                                                    ?? new CustomPinAnnotationView(skiaAnnotation);

                // Добавляем жесты к пину
                base.AttachGestureToPin(pinView, annotation);

                pinView.Annotation = skiaAnnotation;
                // Отрисовываем пин
                pinView.UpdateImage();
                // Обновляем якорь
                pinView.UpdateAnchor();
                pinView.Hidden = !skPin.IsVisible;
                pinView.Enabled = skPin.Clickable;

                return pinView;
            }
            else
                return base.GetViewForAnnotation(mapView, annotation);
        }
    }
}

И на этом в принципе все, мы добавили поддержку кастомных пинов на iOs, теперь мы можем делать абсолютно любые изображения пина при помощи SkiaSharp путем простого наследования от CustomPin, и передавать их в CustomMap.Pins. Буду рад конструктивной критике и отзыву в комментариях!

Проект, который я создал по мере написания статьи можно найти на github:
AlexMorOR/Xamarin-CustomMap-with-CustomPins: Here's a solution to extend the native xamarin map to include custom image pins. (github.com)

P.S.

Статья составлялась на основе кода из проекта, над которым я работаю, поэтому могут быть упущены некоторые свойства, которые нигде не используются. Но если я допустил такое упущение - на работу карты это не повлияет.

Xamarin.Forms: Кастомные пины для xamarin.maps