Swift - setting rounded corners to annotation view image

Question

Here is my previous thread, where I set image to annotation view pins

Swift - setting different images from array to annotation pins

Right now I encountered a problem with setting rounded corners on annotation view image.

cannot show callout with clipsToBounds enabled swift

appears that I have to choose between rounded corners or showing callout, I don't really get why these two can't come along. Is there any way to do that? Here is my viewForAnnotation function:

    func mapView(mapView: MKMapView!, viewForAnnotation annotation: MKAnnotation!) -> MKAnnotationView! {
    if !(annotation is RestaurantAnnotation) {
        return nil
    }

    let reuseId = "restaurant"
    var anView = mapView.dequeueReusableAnnotationViewWithIdentifier(reuseId)
    if anView == nil {
        anView = MKAnnotationView(annotation: annotation, reuseIdentifier: reuseId)
        anView.canShowCallout = false
    }
    else {
        anView.annotation = annotation

    }

    let restaurantAnnotation = annotation as RestaurantAnnotation

    if (restaurantAnnotation.image != nil) {

                        anView.image = restaurantAnnotation.image!

                        anView.layer.masksToBounds = true

                        anView.layer.cornerRadius = (anView.frame.size.height)/10.0

    }
    else {
        // Perhaps set some default image
    }

    return anView
}

Thanks in advance for any help!

Answer 1

I found the solution for this and is it quite elegant I think.

Rather than changing the layer of the annotation, create a UIImageView, attach an image to it and add it as view to the annoation.

    let imageView = UIImageView(frame: CGRectMake(0, 0, 25, 25))
    imageView.image = UIImage(named: cpa.imageName);
    imageView.layer.cornerRadius = imageView.layer.frame.size.width / 2
    imageView.layer.masksToBounds = true
    anView.addSubview(imageView)

Let me know if does work for you.

DZ

Answer 2

Just to add to dizzie's great answer:

Adding the image subview works well, but the pin can no longer be clicked. I found that changing the pin's size to match the image's solves this issue.

anView.frame = imageView.frame

You might also want to move the callout, depending on the size of your image.

anView.calloutOffseet = CGPoint(x: 0, y: -10)

Answer 3

Another approach is adding a sublayer instead a imageView like so:

let imageLayer = CALayer()
imageLayer.frame = CGRect(x: 0, y: 0, width: 50, height: 50)
imageLayer.contents = image?.cgImage
imageLayer.cornerRadius = imageLayer.frame.size.width / 2
imageLayer.masksToBounds = true
imageLayer.borderWidth = 4.0
imageLayer.borderColor = UIColor.white.cgColor
anView.layer.addSublayer(imageLayer)
anView.frame = imageLayer.frame