iOS MapKit custom callout with image and text on top of a pin programmatically using swift

Question

I am trying to show a custom call out on top of pin in the map. It is required that I show an image with some text on top of pin as my call out. The code I wrote produces the following output.

However, my desired output looks like this:

How can I achieve my desired output ? Please note that the bubble is an image asset which has to be used, I know how to draw a bubble using CAShapeLayer but that does not accomplish what I want. Here is the code so far.

// methods for Custom annotations

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

        let annotationView = MKAnnotationView(annotation: pin, reuseIdentifier: "UserLocation")
        annotationView.image = UIImage(named: "marker")
        annotationView.canShowCallout = true
        configureDetailView(annotationView: annotationView)

        return annotationView

    }


    func configureDetailView(annotationView: MKAnnotationView) {
        let width = 300
        let height = 200

        let calloutView = UIView()
        calloutView.translatesAutoresizingMaskIntoConstraints = false

        let views = ["calloutView": calloutView]

        calloutView.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "H:[calloutView(300)]", options: [], metrics: nil, views: views))
        calloutView.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "V:[calloutView(200)]", options: [], metrics: nil, views: views))


        let imageView = UIImageView(frame: CGRect(x: 0, y: 0, width: width, height: height))
        imageView.image = UIImage(named: "address_back")

        calloutView.addSubview(imageView)

        annotationView.detailCalloutAccessoryView = calloutView
    }

Please note: I have already seen this post : Customize MKAnnotation Callout View? but it does not accomplish what I want as it draws the bubble instead of using my bubble image. The following repository will give you sample project to work with (draws the shape on the map instead of using image, when you run the project on the bottom right corner you see "Drop pin" tap on that then tap on the pin to see the drawn bubble).

Ready skeleton to use: https://github.com/robertmryan/CustomMapViewAnnotationCalloutSwift

Blitz

Bad language? For me asking a question? – Tiercel

Out of curiosity, why not use the drawn bubble rather than the image? It seems like it’s more flexible. If you want to make the bubble a constant size regardless of content (which, itself, seems weird), you can do that... – Bang

@Bang I agree with you drawing the shape is much more flexible, however it is actually the design specs. I am trying to re-implement a live app(sliced designs are provided and I can only meet the requirement if I use the image bubble). Is this even possible to achieve ? – Blitz

@Bang It was actually lot easier than I thought. I finally managed to solve the problem. I just had to set annotationView.canShowCallout = false and the rest was easy, just like designing a normal view. I had to triple read your original post. – Blitz

Excellent. Sorry for not getting to this, but I’ve been buried, but I’m glad you solved it on your own... – Bang

Please forgive the unrelated observation, but I would recommend setting the centerOffset of your annotation view. If you notice, your annotation view is not symmetric (you have that shadow off to the right, i.e. the “pointy bit” of the annotation view is not in the center), which is why the default callout appears to be pointing a bit to the right of your annotation view (because the annotation view, itself, is off to the left a bit). – Bang

You can check the answer here – Hebe