MKMapView: Instead of Annotation Pin, a custom view

Question

I want to display an image in my MKMapView instead of little rock pin.

Can someone please put some helpful code here, or tell the way how to do it?

-(MKAnnotationView *)mapView:(MKMapView *)mV viewForAnnotation:
    (id <MKAnnotation>)annotation {
    MKPinAnnotationView *pinView = nil; 
    if(annotation != mapView.userLocation) 
    {
        static NSString *defaultPinID = @"com.invasivecode.pin";
        pinView = (MKPinAnnotationView *)[mapView dequeueReusableAnnotationViewWithIdentifier:defaultPinID];
        if ( pinView == nil ) pinView = [[MKPinAnnotationView alloc]
                                          initWithAnnotation:annotation reuseIdentifier:defaultPinID];

        pinView.pinColor = MKPinAnnotationColorGreen; 
        pinView.canShowCallout = YES;
        pinView.animatesDrop = YES;
        pinView.image = [UIImage imageNamed:@"pinks.jpg"]; //as suggested by Squatch
    } 
    else {
        [mapView.userLocation setTitle:@"I am here"];
    }
    return pinView;
}

I am expecting my image pinks.jpg to be on the map, pinning the location instead of default pin view (rock pin shaped). But still I am getting the default image of the pin.

Sounds like you want a custom annotation. Check [this tutorial](http://shawnsbits.com/blog/2011/04/12/custom-map-pins-for-mapkit/) out. Googling for a custom annotation tutorial will also get you going if that one doesn't suit you. — Squatch, Mar 22 '12 at 01:34
I guess Annotation is just the _note_ that is put to tell information about the _pinned_ location. But I want to customize the pin, that change its image to a company logo. — turtle, Mar 22 '12 at 01:39
I have also tried you _tutorial_ way, seems it's not worked out for me. Tutorial is setting `image` property of `MKAnnotationView` object to some `UIImage`. This I have tested, doesn't change the _pinView_ to my assigned image. — turtle, Mar 22 '12 at 01:49
@turtle, can you post the code you tried, what happens and what you expected? — , Mar 22 '12 at 02:05
@AnnaKarenina : I have edited my question, you may look at the code. Thanks.. — turtle, Mar 22 '12 at 02:17

score 119 · Accepted Answer · edited May 23 '17 at 11:47

When you want to use your own image for an annotation view, you should create an MKAnnotationView instead of an MKPinAnnotationView.

MKPinAnnotationView is a subclass of MKAnnotationView so it has an image property but it generally overrides that and draws a pin image (that's what it's for).

So change the code to:

-(MKAnnotationView *)mapView:(MKMapView *)mV viewForAnnotation:(id <MKAnnotation>)annotation 
{
    MKAnnotationView *pinView = nil; 
    if(annotation != mapView.userLocation) 
    {
        static NSString *defaultPinID = @"com.invasivecode.pin";
        pinView = (MKAnnotationView *)[mapView dequeueReusableAnnotationViewWithIdentifier:defaultPinID];
        if ( pinView == nil ) 
            pinView = [[MKAnnotationView alloc]
                                         initWithAnnotation:annotation reuseIdentifier:defaultPinID];

        //pinView.pinColor = MKPinAnnotationColorGreen; 
        pinView.canShowCallout = YES;
        //pinView.animatesDrop = YES;
        pinView.image = [UIImage imageNamed:@"pinks.jpg"];    //as suggested by Squatch
    } 
    else {
        [mapView.userLocation setTitle:@"I am here"];
    }
    return pinView;
}

Notice that animatesDrop is also commented out since that property only exists in MKPinAnnotationView.

If you still want your image annotations to drop, you'll have to do the animation yourself. You can search Stack Overflow for "animatesdrop mkannotationview" and you'll find several answers. Here are the first two:

Hi Anna, I just want to add an event on click of this pin Image. How can I do that? — turtle, May 25 '12 at 05:23
Hi Anna, do you have any idea in your mind for the following question http://stackoverflow.com/questions/27489898/image-annotation-on-ios — casillas, Dec 15 '14 at 18:05
@Anna please help me on this http://stackoverflow.com/questions/35647839/show-dynamic-annotation-pin-in-mapview — Bhavin Ramani, Feb 26 '16 at 09:54
Anna, you need an `else` clause to your `if` statement, otherwise reused pins will not use the `annotation`. E.g., `if ( pinView == nil ) { ... } else { pinView.annotation = annotation; }`. — Rob, Dec 17 '16 at 03:57

Andrey Gordeev · Answer 2 · 2016-09-14T07:23:23.737

Here's an answer on Swift 3. It dequeues annotation view if possible or creates a new one if not:

func mapView(_ mapView: MKMapView, viewFor annotation: MKAnnotation) -> MKAnnotationView? {
    // Don't want to show a custom image if the annotation is the user's location.
    guard !(annotation is MKUserLocation) else {
        return nil
    }

    // Better to make this class property
    let annotationIdentifier = "AnnotationIdentifier"

    var annotationView: MKAnnotationView?
    if let dequeuedAnnotationView = mapView.dequeueReusableAnnotationView(withIdentifier: annotationIdentifier) {
        annotationView = dequeuedAnnotationView
        annotationView?.annotation = annotation
    }
    else {
        annotationView = MKAnnotationView(annotation: annotation, reuseIdentifier: annotationIdentifier)
        annotationView?.rightCalloutAccessoryView = UIButton(type: .detailDisclosure)
    }

    if let annotationView = annotationView {
        // Configure your annotation view here
        annotationView.canShowCallout = true
        annotationView.image = UIImage(named: "yourImage")
    }

    return annotationView
}

Swift 2.2:

func mapView(mapView: MKMapView, viewForAnnotation annotation: MKAnnotation) -> MKAnnotationView? {
    // Don't want to show a custom image if the annotation is the user's location.
    guard !annotation.isKindOfClass(MKUserLocation) else {
        return nil
    }

    // Better to make this class property
    let annotationIdentifier = "AnnotationIdentifier"

    var annotationView: MKAnnotationView?
    if let dequeuedAnnotationView = mapView.dequeueReusableAnnotationViewWithIdentifier(annotationIdentifier) {
        annotationView = dequeuedAnnotationView
        annotationView?.annotation = annotation
    }
    else {
        let av = MKAnnotationView(annotation: annotation, reuseIdentifier: annotationIdentifier)
        av.rightCalloutAccessoryView = UIButton(type: .DetailDisclosure)
        annotationView = av
    }

    if let annotationView = annotationView {
        // Configure your annotation view here
        annotationView.canShowCallout = true
        annotationView.image = UIImage(named: "yourImage")
    }

    return annotationView
}

Thank you. Why do you call `annotationView?.annotation = annotation`? I thought that the annotation and the view are linked automatically? — Andrej, Apr 29 '17 at 10:41
They are not linked automatically. You're dequeueing a reusable annotation view. If it was used before it probably has another `annotation` linked. — Andrey Gordeev, May 02 '17 at 08:03

Dushko Cizaloski · Answer 3 · 2017-03-22T18:57:54.023

I agree with with answer of the Anna and i like to show how will look that in swift3.This answer it's with many other options.Like a resize the image, get a list of images from array and ect.

func mapView(_ mapView: MKMapView, viewFor annotation: MKAnnotation) -> MKAnnotationView? {
        if let annotation = annotation as? PetrolStation {
            let identifier = "pinAnnotation"
            var view: MKAnnotationView
            if let dequeuedView = mapView.dequeueReusableAnnotationView(withIdentifier: identifier)
                as? MKPinAnnotationView { // 2
                dequeuedView.annotation = annotation
                view = dequeuedView
            } else {
                // 3
                view = MKAnnotationView(annotation: annotation, reuseIdentifier: identifier)
                view.canShowCallout = true

                //here We put a coordinates where we like to show bubble with text information up on the pin image
                view.calloutOffset = CGPoint(x: -7, y: 7)


                //Here this is a array of images
                let pinImage = PetrolItem[activePlace].imgPetrol?[activePlace]

                //Here we set the resize of the image
                let size = CGSize(width: 30, height: 30)
                UIGraphicsBeginImageContext(size)
                pinImage?.draw(in: CGRect(x: 0, y: 0, width: size.width, height: size.height))
                let resizeImage = UIGraphicsGetImageFromCurrentImageContext()
                UIGraphicsEndImageContext()
                view.image = resizeImage

                //Here we like to put into bubble window a singe for detail Informations
                view.rightCalloutAccessoryView = UIButton(type: .detailDisclosure) as UIView
               //Here we make change of standard pin image with our image
                view.image = resizeImage
            }

            return view
        }
        return nil
    }

MKMapView: Instead of Annotation Pin, a custom view

3 Answers3

Linked

Related