MapKit iOS 9 detailCalloutAccessoryView usage

Question

After watching WWDC video 206 I assumed this would be a trivial task of adding the detail callout view to a mapView annotation view.

So, I assume Im doing something wrong.

With my pin view set up

func mapView(mapView: MKMapView, viewForAnnotation annotation: MKAnnotation) -> MKAnnotationView? {

    let view:MKAnnotationView!

    if let dequed = routeMapView.dequeueReusableAnnotationViewWithIdentifier("pin") {
        view = dequed
    }
    else {
        view = MKPinAnnotationView(annotation: annotation, reuseIdentifier: "pin")
    }

    let x = UIView(frame: CGRectMake(0, 0, 200, 200))
    x.backgroundColor = UIColor.redColor()

    // shows the red
    //view.leftCalloutAccessoryView = x

    // working as no subtitle - but no red view
    view.detailCalloutAccessoryView = x

    view.canShowCallout = true
    return view
}

I only get this

I know the view is working, because if I try it with the leftCalloutAccessoryView I get

I must be missing something. Note, if I just add an image to the detailCalloutAccessoryView like

view.detailCalloutAccessoryView = UIImage(named:"YourImageName")

The image is there, size correctly etc

I just cannot figure out how to put in my own custom view.

Thanks

Klaas · Accepted Answer · 2015-10-02T12:39:44.533

You have to add some constraints for width and height of your view:

func mapView(mapView: MKMapView, viewForAnnotation annotation: MKAnnotation) -> MKAnnotationView? {
    var av = mapView.dequeueReusableAnnotationViewWithIdentifier("id")
    if av == nil {
        av = MKPinAnnotationView(annotation: annotation, reuseIdentifier: "id")
    }

    let myView = UIView()
    myView.backgroundColor = .greenColor()

    let widthConstraint = NSLayoutConstraint(item: myView, attribute: .Width, relatedBy: .Equal, toItem: nil, attribute: .NotAnAttribute, multiplier: 1, constant: 40)
    myView.addConstraint(widthConstraint)

    let heightConstraint = NSLayoutConstraint(item: myView, attribute: .Height, relatedBy: .Equal, toItem: nil, attribute: .NotAnAttribute, multiplier: 1, constant: 20)
    myView.addConstraint(heightConstraint)

    av!.detailCalloutAccessoryView = myView
    av!.canShowCallout = true

    return av!
}

Adding an intrinsicContentSize also works.

I did some testing and found out, that MapKit automagically sets translatesAutoresizingMaskIntoConstraints to false, when you set a view to detailCalloutAccessoryView.

In the WWDC 2015 session "What's New in MapKit" it was told, that "auto layout is supported". I reckon that Apple really means, that you have to use auto layout?!

How do you get rid of the spacing added around the `detailCalloutAccessoryView`? @Klaas — ScottOBot, Nov 11 '15 at 00:09
@ScottOBot never tried that. But it could be possible by using .Top, .Left, .Bottom and .Right constraints instead of .Width and .Height? — Klaas, Nov 11 '15 at 13:08
@Klaas If you were using the .Top, .Left, .Bottom and .Right constraints wouldn't you need a reference to the title and other elements inside the callout? How do you get that while creating the `detailCalloutAccessoryView`? — ScottOBot, Nov 11 '15 at 14:43
"that "auto layout is supported". I reckon that Apple really means, that you have to use auto layout!" -- Typical :) — Manav, Apr 19 '19 at 16:39

score 14 · Answer 2 · answered Sep 23 '15 at 01:36

14

1. Create a UIView and add it to yours maps VC in the Storyboard

Here you can set the size, constraints, add buttons, images, etc - layout how you want. Stack views work perfect in this instance.

2. Create and outlet to your Maps VC

Control drag as per usual, from your custom view.

@IBOutlet var customDetailView: UIView!

3. Set the detailCalloutAccessoryView for your pin

For example

func mapView(mapView: MKMapView, didSelectAnnotationView view: MKAnnotationView) {
    view.detailCalloutAccessoryView = customDetailView
}

Success

answered Sep 23 '15 at 01:36

DogCoffee

19,820
10
87
120

5

This might seem obvious but it caught me for a few minutes... Trying to drag the UIView into open space in storyboard doesn't work. You need to drag it onto the top bar above the UIViewController you wish to use it in. Like next to that yellow circle, red box etc... – Byron Coetsee May 19 '16 at 17:12
1

@ByronCoetsee, that is great, probably as great as the answer. I wonder why the heck Apple does this kind of easter-egg features? – Eduardo Jun 13 '16 at 16:19
Awesome! I was wondering how can I personalize it... Put a button and make it do some action, and custom labels with dynamic text... Can you give some idea? Thanks! – Cleversou Dec 01 '17 at 05:05

score -1 · Answer 3 · answered Sep 20 '15 at 22:17

-1

Use UIImageView

view.detailCalloutAccessoryView = UIImageView(image:UIImage(named:"YourImageName"))

answered Sep 20 '15 at 22:17

user2643679

706
12
18

Making it work with an image and image view is fine. I want to use a custom view. – DogCoffee Sep 21 '15 at 08:08

score -1 · Answer 4 · answered Jul 25 '18 at 13:57

You can use a custom class and override intrinsicContentSize to dynamically size the detail view dependent on its childrens content. (as hinted at by @Klaas in the accepted answer)

This may be especially helpful, if the size of your view is not known beforehand or does change during runtime or you simply do not want to add constraints programmatically.

Here is an example using two labels which are inside a stack view. The intrinsicContentSize is set to equal the size the stack view would take. Setting an instance of the following as the detailAccessoryView should get you a view that reacts to change in the labels text and needs no programmatically added constraints.

class CustomCalloutDetailView : UIView {

    @IBOutlet weak var label1: UILabel!

    @IBOutlet weak var label2: UILabel!

    @IBOutlet weak var mainStack: UIStackView!

    override var intrinsicContentSize: CGSize {
        get {
            return mainStack.systemLayoutSizeFitting(UILayoutFittingCompressedSize)
        }
    }

    public func setLabel1(_ labelText: String) {
        self.label1.text = labelText
        self.invalidateIntrinsicContentSize()
    }
}

MapKit iOS 9 detailCalloutAccessoryView usage

4 Answers4

Linked