Having to tap outside of an MKAnnotationView for the callout bubble

Question

I'm forced to add an image to MKAnnotationView via subview because apparently I cannot have the image's masksToBounds property set to true without having to set canShowCallout to false. Here's the question that covers this: Swift - setting rounded corners to annotation view image I'm not sure what to configure in order to allow the user to tap the center of the image in order to make the callout bubble appear. I've already messed around with centerOffset, calloutOffset, and anchor point. Here's my code:

extension MapViewController: MKMapViewDelegate {
func mapView(mapView: MKMapView!, viewForAnnotation annotation: MKAnnotation!) -> MKAnnotationView! {
    if let annotation = annotation as? Food {
        if annotation == mapView.userLocation {
            return nil
        }
        let identifier = "pin"
        var view: MKAnnotationView
        if let dequeuedView = mapView.dequeueReusableAnnotationViewWithIdentifier(identifier)
        {
            dequeuedView.annotation = annotation
            view = dequeuedView
        } else {
            view = MKAnnotationView(annotation: annotation, reuseIdentifier: identifier)
            let imageView = UIImageView(frame: CGRectMake(0, 0, 45, 45))
            imageView.image = UIImage(named:"picture")
            imageView.layer.cornerRadius = imageView.layer.frame.size.width / 2

            imageView.layer.borderWidth = 1.5
            imageView.layer.borderColor = UIColor(red: 230/255, green: 39/255, blue: 39/255, alpha: 1).CGColor
            imageView.layer.masksToBounds = true
            view.addSubview(imageView)

            view.canShowCallout = true
            view.calloutOffset = CGPoint(x:  16, y: 16)
            view.layer.anchorPoint = CGPointMake(16 , 16)
            view.rightCalloutAccessoryView = UIButton.buttonWithType(.DetailDisclosure) as! UIView
        }
        return view
    }
    return nil
}
}

Why are you messing with the view's layer's anchor point? Why, in fact, are you messing with an image view as a subview? Why not just write your own MKAnnotationView subclass and give it the ability to draw itself? — matt, Aug 04 '15 at 00:42
Not exactly rocket science... https://github.com/mattneub/Programming-iOS-Book-Examples/blob/master/bk2ch21p744maps/ch34p1008maps/MyAnnotationView.swift — matt, Aug 04 '15 at 03:35
So I can't exactly get what I want without having the subview. I've come full circle back to my original problem... http://stackoverflow.com/questions/28045788/swift-setting-rounded-corners-to-annotation-view-image — Grant Park, Aug 04 '15 at 09:55
Of course you can. All this clips to bounds and image view stuff is unnecessary. Just draw your annotation view. — matt, Aug 04 '15 at 11:37
https://gist.github.com/sungjp/7768ca571bcb7150c8a3 The drawRect function isn't being called for some reason. — Grant Park, Aug 04 '15 at 18:36
The example I pointed you to is a downloadable project. Download it. Run it. `drawRect:` is called. Read my book: http://www.apeth.com/iOSBook/ch34.html#_annotations — matt, Aug 04 '15 at 18:42
Okay it works if I don't set the MKAnnotationView's image. I'm passing the image into the subclass instead now and just using it in drawRect: im.drawInRect(self.bounds.rectByInsetting(dx: 5, dy: 5)). Do you know how I can draw a circle on the image? — Grant Park, Aug 04 '15 at 19:19
Of course, just draw it. That's what I'm telling you to do: draw the contents of your view. — matt, Aug 04 '15 at 19:20
You can mask your image to a circle and draw the border circle right there in `drawRect:`. — matt, Aug 04 '15 at 19:23
Do you not know how to draw? My book teaches you: http://www.apeth.com/iOSBook/ch15.html — matt, Aug 04 '15 at 19:28

score 0 · Accepted Answer · answered Aug 05 '15 at 05:24

While using a subview to implement cornerRadius and callOut, I managed to align the image and touch area by messing around with anchorPoint. The only catch is that the touch radius is like that of the original MKAnnotationPin, so the user has to be precise about where to tap. Otherwise, the best method (and the most tedious) is to subclass MKAnnotationView and override the drawRect method to draw a circular mask for the image. To make life easier, I found a library called Toucans that does this sort of functionality.

imageView.layer.anchorPoint = CGPoint(x: 1, y: 1)

Having to tap outside of an MKAnnotationView for the callout bubble

1 Answers1

Linked