How to set a different image for each pin?

DonCB2BDonCB2B USMember ✭✭✭

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.

Best Answer

Answers

  • XamEnXamEn USMember ✭✭

    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;
    
  • DonCB2BDonCB2B USMember ✭✭✭

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

  • DaveHuntDaveHunt USMember ✭✭✭✭✭

    @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;
    
  • DonCB2BDonCB2B USMember ✭✭✭

    @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.

  • DaveHuntDaveHunt USMember ✭✭✭✭✭

    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];
    
  • DonCB2BDonCB2B USMember ✭✭✭
    edited 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;
    }
    
    
  • DonCB2BDonCB2B USMember ✭✭✭

    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.

  • ShamnadShamnad USMember ✭✭✭

    @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

Sign In or Register to comment.