Add Image from custom pin object in Android InfoWindow dynamically in Xamarin.Forms.Maps

Question

I'm trying to add the object's image passed to the custom pin in the InfoWindow to the left of the InfoWindow.

I have an app that calls an API and returns an object that has a name and an image and I want the InfoWindow's left icon to be the object's image but I don't know how to do it.

The left image.

Thank you for your help.

For Cole

CustomMapRenderer

public Android.Views.View GetInfoContents(Marker marker)
    {
        var inflater = Android.App.Application.Context.GetSystemService(Context.LayoutInflaterService) as Android.Views.LayoutInflater;
        if (inflater != null)
        {
            Android.Views.View view;

            var customPin = GetCustomPin(marker);
            if (customPin == null)
            {
                throw new Exception("Custom pin not found");
            }

            view = inflater.Inflate(Resource.Layout.MapInfoWindow, null);


            var infoTitle = view.FindViewById<TextView>(Resource.Id.InfoWindowTitle);
            var infoSubtitle1 = view.FindViewById<TextView>(Resource.Id.InfoWindowSubtitle1);
            ImageView image = view.FindViewById<ImageView>(Resource.Id.image);

            Task.Run(() => {
                URL url = new URL(customPin.Image);
                var mIcon_val = BitmapFactory.DecodeStream(url.OpenConnection().InputStream);
                image.SetImageBitmap(mIcon_val);
            });

            if (infoTitle != null)
            {
                infoTitle.Text = marker.Title;
            }
            if (infoSubtitle1 != null)
            {
                infoSubtitle1.Text = marker.Snippet;
            }

            return view;
        }
        return null;
    }

MapInfoWindow

<?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView
    android:id="@+id/image"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center" />
<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:layout_margin="10dp">
    <TextView
        android:id="@+id/InfoWindowTitle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="InfoWindowTitle"
        android:textColor="@android:color/black"
        android:textStyle="bold" />
    <TextView
        android:id="@+id/InfoWindowSubtitle1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="InfoWindowSubtitle1"
        android:textColor="@android:color/black" />
</LinearLayout>
<ImageButton
    android:id="@+id/InfoWindowButton"
    android:layout_height="match_parent"
    android:layout_width="match_parent"
    android:background="@color/mtrl_btn_transparent_bg_color"
    android:src="@drawable/icon_heart_red_24" />

Answer 1

Create the custom class that has Name and Image property.

public class CustomPin : Pin
{
    public string Name { get; set; }
    public string Image{ get; set; }
}

Populate the custom pin with the data returned by the API , and add the pin into map.Pins.

 CustomPin pin = new CustomPin
    {
        Type = PinType.Place,
        Position = new Position(37.79752, -122.40183),
        Label = "Xamarin San Francisco Office",
        Address = "394 Pacific Ave, San Francisco CA",       
        Url = "http://xamarin.com/about/",
        Name = "xxxxx",
        Image =  "xxxx";
    };
    customMap.CustomPins = new List<CustomPin> { pin };
    customMap.Pins.Add(pin);

Override CreateMarker method

protected override MarkerOptions CreateMarker(Pin pin)
{
    var marker = new MarkerOptions();

    CustomPin pin2 = pin;

    marker.SetPosition(new LatLng(pin2.Position.Latitude, pin2.Position.Longitude));
    marker.SetTitle(pin2.Label);
    marker.SetSnippet(pin2.Address);

    URL url = new URL(pin2.Image);
    Bitmap bmp = BitmapFactory.DecodeStream(url.OpenConnection().InputStream);
    marker.SetIcon(BitmapDescriptorFactory.FromBitmap(bmp));
    return marker;
}

Update

ImageView image  view.FindViewById<ImageView>(Resource.Id.image);

Task.Run(() => {
     URL url = new URL(customPin.Image);
     var mIcon_val = BitmapFactory.DecodeStream(url.OpenConnection().InputStream);

     MainThread.BeginInvokeOnMainThread(()=> {
        image.SetImageBitmap(mIcon_val);
    });
});