Xamarin GoogleMaps - Acceptable pin/marker colors

Question

I'm using Xamarin.Forms.GoogleMaps in my portable project. it's working pretty well for iOS and Android. right now I'm working on the pin/markers of the googleMap. I'm trying to add pins with different colors, but not all colors are working.

How I'm doing it right now:

    var pin = new Xamarin.Forms.GoogleMaps.Pin();
    pin.Label = ... etc etc etc
    pin.Icon = BitmapDescriptorFactory.DefaultMarker(Color.Azure);

The example above works well. But if I change it to Color.Black , for example, it doesn't work and show the marker with the default red color. And it also have problem with different platforms, in iOS, Black works, in Android don't. (no errors appear, just show the default red instead of Black)

So my question is:
Is there a list of acceptable colors to use as marker/pin color? Does every color should work or just some predefined colors?

Also, how do i change the default icon to another icon image? I tried with "FromBundle", but it throws an error, at least for me.(maybe I did it wrong. It told about image need to be a bitmap)

If possible, I want to avoid custom renderers, because right now it is working very well without any custom render (except some colors as I said).

Answer 1

If you prefer not to use Custom Renderers, Xamarin Forms Map markers/pins only have 300+ colors available to use.

But if you want to represent marker/pins colors as you would like them to be, you would need to implement the Xamarin Forms Custom Renderers to achieve/capture the exact marker/pin color that you want.

After you follow the steps in the Xamarin Forms custom renderer documentation, override the following method:

    protected override MarkerOptions CreateMarker(Pin pin)
    {
        CustomPin customPin = (CustomPin)pin;
        var marker = new MarkerOptions();
        marker.SetPosition(new LatLng(pin.Position.Latitude, pin.Position.Longitude));
        marker.SetTitle(pin.Label);
        marker.SetSnippet(pin.Address);
        marker.SetIcon(GetCustomBitmapDescriptor(customPin.Color));
        return marker;
    }

Then I created the following method that will do the actual changes to marker/pin colors that will be the exact color from your RGB/Hex color code:

    private BitmapDescriptor GetCustomBitmapDescriptor(string text)
    {
        using (Paint paint = new Paint(PaintFlags.AntiAlias))
        {
            using (Rect bounds = new Rect())
            {
                using (Bitmap baseBitmap = BitmapFactory.DecodeResource(Resources, Resource.Drawable.marker))
                {

                    Bitmap resultBitmap = Bitmap.CreateBitmap(baseBitmap, 0, 0, baseBitmap.Width - 1, baseBitmap.Height - 1);
                    Paint p = new Paint();
                    ColorFilter filter = new PorterDuffColorFilter(Android.Graphics.Color.ParseColor(text), PorterDuff.Mode.SrcAtop);
                    p.SetColorFilter(filter);
                    Canvas canvas = new Canvas(resultBitmap);
                    canvas.DrawBitmap(resultBitmap, 0, 0, p);
                    Bitmap scaledImage = Bitmap.CreateScaledBitmap(resultBitmap, 94, 150, false);

                    BitmapDescriptor icon = BitmapDescriptorFactory.FromBitmap(scaledImage);
                    resultBitmap.Recycle(); 
                    return (icon);
                }
            }
        }
    }

NOTES:

• This sample code is just for Android. Not sure for iOS.

• The Resource.Drawable.marker can be any marker that you can use. I just downloaded a generic red map marker online. It will be covered anyway by the GetCustomBitmapDescriptor method anyway.

• The resultBitmap.Recycle(); is VERY important. Because bitmaps takes a lot of memory and the device application might stall so you need to reuse bitmap memory.

• CustomPin is a class extending the Xamarin.Forms.Map.Pin class. I added a string attribute for the string Hex value of the color I want for my marker pin.

See sample image of a map with colors that are customized.