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

user_13445783 0
Viewed 197

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.

enter image description here

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" />
xamarin.forms.maps xamarin.forms xamarin c#
1 Answers

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);
    });
});
user_81878000
Related