How to set a different image for each pin?

DonCB2B · November 2016

I use code in https://developer.xamarin.com/guides/xamarin-forms/custom-renderer/map/

In the iOS,
if (annotationView == null) { annotationView = new CustomMKAnnotationView (annotation, customPin.Id); annotationView.Image = UIImage.FromFile ("pin.png"); annotationView.CalloutOffset = new CGPoint (0, 0); annotationView.LeftCalloutAccessoryView = new UIImageView (UIImage.FromFile ("monkey.png")); annotationView.RightCalloutAccessoryView = UIButton.FromType (UIButtonType.DetailDisclosure); ((CustomMKAnnotationView)annotationView).Id = customPin.Id; ((CustomMKAnnotationView)annotationView).Url = customPin.Url; }

annotationView.Image will set all the pin to an identical image. I wonder how to set a different image to each pin.

Any ideas, help. I really appreciate it.

DaveHunt · December 2016

If you just change:

annotationView.Image = UIImage.FromFile ("pin.png");

to:

annotationView.Image = customPin.Image; // or whatever you called your image property

or:

annotationView.Image = UIImage.FromFile (customPin.Image); // if Image is a filename

then that should do it.

Given how obvious that is, I sense there's something in your question that I don't understand. As we've shown in multiple examples now, if you change the line that assigns a hard-coded image file so that it uses a property in your custom pin, then you'll get a different image. Is there something more to your question that we're not getting?

XamEn · December 2016

Hi,

Try with below code which works,

//if (annotationView == null)
//{
// annotationView = new CustomMKAnnotationView(annotation, customPin.Id);

        //    if (customPin.Id == "Origin")
        //    {
        //        annotationView.Image = UIImage.FromFile("AppIcon/OriginPin.png");
        //    }
        //    else
        //    {
        //        if (customPin.Id == "Destination")
        //        {
        //            annotationView.Image = UIImage.FromFile("AppIcon/DestinationPin.png");
        //        }
        //        else
        //        {
        //            if (customPin.Id == "Upcoming")
        //            {
        //                annotationView.Image = UIImage.FromFile("AppIcon/UpcomingPin.png");
        //            }
        //            else
        //            {
        //                annotationView.Image = UIImage.FromFile("AppIcon/CompletedPin.png");
        //            }
        //        }
        //    }

        //    annotationView.CalloutOffset = new CGPoint(0, 0);
        //}
        //annotationView.CanShowCallout = true;

DonCB2B · December 2016

@VarunBabu I believe this will set all the pins to same image right? How to show different pins on map at the same time?

DaveHunt · December 2016

@DonCB2B said:
@VarunBabu I believe this will set all the pins to same image right? How to show different pins on map at the same time?

No. That code will use a different image based on the value of customPin.Id, though it could be simplified a bit:

if (annotationView == null)
{
    annotationView = new CustomMKAnnotationView(annotation, customPin.Id);

    switch (customPin.Id)
    {
        case "Origin":
            annotationView.Image = UIImage.FromFile("AppIcon/OriginPin.png");
            break;
        case "Destination":
            annotationView.Image = UIImage.FromFile("AppIcon/DestinationPin.png");
            break;
        case "Upcoming":
            annotationView.Image = UIImage.FromFile("AppIcon/UpcomingPin.png");
            break;
        default:
            annotationView.Image = UIImage.FromFile("AppIcon/CompletedPin.png");
            break;
    }

    annotationView.CalloutOffset = new CGPoint(0, 0);
}
annotationView.CanShowCallout = true;

DonCB2B · December 2016

@DaveHunt In my case, I have a lot of pins on the map, and each pin icon need show the the price of this place. So every pin is almost unique. Currently, I can generate each pin images, but I don't know how to sign each images to each pins.

DaveHunt · December 2016

You'll need to use a pin ID for each price. Then use the pin ID to assign an image just like the code above does. You could store the id<->image associations in a dictionary (say pinToImage) and use something like:

annotationView.Image = UIImage.FromFile(pinToImage[customPin.Id];

DonCB2B · December 2016

@DaveHunt @VarunR

Thanks, That's real good point. My case is a little bit different. Please, see code.

"List customPins" have all the all pin location as well as image. For example, I have 100 pins in this List, in the annotationView.Image, is the any way sign one pin to one image respectively?
In android, there is marker( same as annotation in iOS), i can sign image to each marker, and add marker to map. I wonder how is that possible in iOS.

link is below:
https://developer.xamarin.com/guides/xamarin-forms/custom-renderer/map/

namespace CustomRenderer.iOS
{
    public class CustomMapRenderer : MapRenderer
    {
        UIView customPinView;
        List<CustomPin> customPins;    // this contain image

        protected override void OnElementChanged (ElementChangedEventArgs<View> e)
        {
            base.OnElementChanged (e);

            if (e.OldElement != null) {
                var nativeMap = Control as MKMapView;
                nativeMap.GetViewForAnnotation = null;
                nativeMap.CalloutAccessoryControlTapped -= OnCalloutAccessoryControlTapped;
                nativeMap.DidSelectAnnotationView -= OnDidSelectAnnotationView;
                nativeMap.DidDeselectAnnotationView -= OnDidDeselectAnnotationView;
            }

            if (e.NewElement != null) {
                var formsMap = (CustomMap)e.NewElement;
                var nativeMap = Control as MKMapView;
               customPins = formsMap.CustomPins;

                nativeMap.GetViewForAnnotation = GetViewForAnnotation;
                nativeMap.CalloutAccessoryControlTapped += OnCalloutAccessoryControlTapped;
                nativeMap.DidSelectAnnotationView += OnDidSelectAnnotationView;
                nativeMap.DidDeselectAnnotationView += OnDidDeselectAnnotationView;
            }
        }
        ...
    }
}

MKAnnotationView GetViewForAnnotation (MKMapView mapView, IMKAnnotation annotation)
{
  MKAnnotationView annotationView = null;

  if (annotation is MKUserLocation)
    return null;

  var anno = annotation as MKPointAnnotation;
  var customPin = GetCustomPin (anno);
  if (customPin == null) {
    throw new Exception ("Custom pin not found");
  }

  annotationView = mapView.DequeueReusableAnnotation (customPin.Id);
  if (annotationView == null) {
    annotationView = new CustomMKAnnotationView (annotation, customPin.Id);
    annotationView.Image = UIImage.FromFile ("pin.png");   //this make all my pin to one image.
    annotationView.CalloutOffset = new CGPoint (0, 0);
    annotationView.LeftCalloutAccessoryView = new UIImageView (UIImage.FromFile ("monkey.png"));
    annotationView.RightCalloutAccessoryView = UIButton.FromType (UIButtonType.DetailDisclosure);
    ((CustomMKAnnotationView)annotationView).Id = customPin.Id;
    ((CustomMKAnnotationView)annotationView).Url = customPin.Url;
  }
  annotationView.CanShowCallout = true;

  return annotationView;
}

DaveHunt · December 2016

If you just change:

annotationView.Image = UIImage.FromFile ("pin.png");

to:

annotationView.Image = customPin.Image; // or whatever you called your image property

or:

annotationView.Image = UIImage.FromFile (customPin.Image); // if Image is a filename

then that should do it.

Given how obvious that is, I sense there's something in your question that I don't understand. As we've shown in multiple examples now, if you change the line that assigns a hard-coded image file so that it uses a property in your custom pin, then you'll get a different image. Is there something more to your question that we're not getting?

DonCB2B · December 2016

Thanks both @DaveHunt @VarunBabu

I am get confused with the way that android did. Yeah, this method can make the each pin in different image.

Shamnad · August 2019

@DaveHunt I tried this way but not working can you help to find my mistake ?

'protected override MKAnnotationView GetViewForAnnotation(MKMapView mapView, IMKAnnotation annotation)
{
MKAnnotationView annotationView = null;

        if (annotation is MKUserLocation)
            return null; 
        var customPin = GetCustomPin(annotation as MKPointAnnotation); 
        var test = "abc";
       // annotationView = new CustomMKAnnotationView(annotation, customPin.image);
        if (annotationView == null)
        {             

                annotationView = new CustomMKAnnotationView(annotation, customPin.image);
                 //annotationView.Image = UIImage.FromFile(customPin.image);

                if (customPin.image == "status.png")
                {
                   annotationView.Image = UIImage.FromFile( " image1.png");
                }
                else
                {
                       annotationView.Image = UIImage.FromFile("image2.png");
                }
                annotationView.CalloutOffset = new CGPoint(0, 0);
                annotationView.LeftCalloutAccessoryView = new UIImageView(UIImage.FromFile("monkey.png"));
                annotationView.RightCalloutAccessoryView = UIButton.FromType(UIButtonType.DetailDisclosure);
            }
            annotationView.CanShowCallout = true;
            return annotationView;   
    }'

this is my code

Xamarin

How to set a different image for each pin?

Best Answer

Answers

Xamarin

Quick Links

How to set a different image for each pin?

Best Answer

Answers