Andr谩s T贸th‘s professional blog
banditoth.net

Hey there 馃憢, I’m banditoth a .NET MAUI developer from Hungary.
I write about software development with .NET technologies.

You can find me on:
LinkedIn | Github | StackOverflow | X / Twitter | Threads

Customizing .NET MAUI Map’s pin Z-Order, Rotation, and Anchor point – Android

This post will build upon the excellent tutorial on customizing map pins in .NET MAUI by Vladislav Antonyuk, and focus on adding these specific adjustments for Android.

  • Z-order:聽This determines the drawing order of the pins. Pins with higher Z-order values appear on top of those with lower values.
  • Rotation:聽Controls the rotation angle of the pin in degrees.
  • Anchor:聽Defines the point on the pin image that corresponds to the pin’s location on the map. The anchor is defined in terms of a normalized coordinate system where聽(0, 0)聽is the top-left corner and聽(1, 1)聽is the bottom-right corner of the image.

Define the Anchor Points enum, get a method to return anchor floats

We start by defining an enum to represent the different anchor points. A helper method, GetAnchorPoint, will return the appropriate anchor coordinates based on the chosen enum value.

public enum AnchorPointType
{
    TopLeft,
    TopCenter,
    TopRight,
    Center,
    BottomLeft,
    BottomCenter,
    BottomRight,
    LeftCenter,
    RightCenter
}

This method returns the normalized coordinates for each anchor point, which can then be applied to the pin’s icon.

private static (float, float) GetAnchorPoint(AnchorPointType anchor)
{
    return anchor switch
    {
        AnchorPointType.TopLeft => (0.0f, 0.0f),
        AnchorPointType.TopCenter => (0.5f, 0.0f),
        AnchorPointType.TopRight => (1.0f, 0.0f),
        AnchorPointType.Center => (0.5f, 0.5f),
        AnchorPointType.BottomLeft => (0.0f, 1.0f),
        AnchorPointType.BottomCenter => (0.5f, 1.0f),
        AnchorPointType.BottomRight => (1.0f, 1.0f),
        AnchorPointType.LeftCenter => (0.0f, 0.5f),
        AnchorPointType.RightCenter => (1.0f, 0.5f),
        _ => (0.5f, 0.5f)  // Default to center if undefined
    };
}

Modifications to the Custom Map Handler

Now, let’s focus on the custom map handler, where you’ll need to modify how each pin is added to the map. Following the setup from Vladislav’s tutorial, you only need to adjust the following parts in the OnMapReady method for Android:

cp.ImageSource.LoadImage(MauiContext, result =>
{
    if (result?.Value is BitmapDrawable bitmapDrawable)
    {
        var originalBitmap = bitmapDrawable.Bitmap;

        // Set the custom icon for the pin
        markerOption.SetIcon(BitmapDescriptorFactory.FromBitmap(originalBitmap));

        // Set the rotation of the pin
        markerOption.SetRotation((float)cp.Rotation);

        // Set the anchor of the pin based on the chosen AnchorPointType
        var anchor = GetAnchorPoint(cp.Anchor);
        markerOption.Anchor(anchor.Item1, anchor.Item2);

        // Set the Z-order to bring this pin to the top
        markerOption.InvokeZIndex(cp.ZOrder);
    }

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

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.