Custom callout view with xib

Question

I'm trying to set a custom callout view with a xib I created however it doesn't show up.

My xib LocationInfo looks like this

I've created a custom uiview class for the view in my xib to set a background image (not sure if this works since I haven't been able to show the xib)

import Foundation
import UIKit
import MapKit

class AddressView: MKPinAnnotationView{
    override func draw(_ rect: CGRect) {
        super.draw(rect);

        UIGraphicsBeginImageContext(self.frame.size)
        UIImage(named: "Location.Info-background")?.draw(in: self.bounds)
        let image = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()
        self.backgroundColor = UIColor(patternImage: image!)
    }

    override func setSelected(_ selected: Bool, animated: Bool) {
        //todo
    }

    override func hitTest(_ point: CGPoint, with event: UIEvent?) -> UIView? {
        //todo
        return nil
    }
}

My custom annotationpin class is as follows

import Foundation
import MapKit
import UIKit

class MapPin: MKPointAnnotation{
    var name: String
    var street: String
    var type: String
    var postCode: String

    init(name: String, street: String, type: String, postCode: String){
        self.name = name
        self.street = street
        self.type = type
        self.postCode = postCode
    }
}

and I'm trying to use this all as follows in my view controller class

func locationManager(_ manager: CLLocationManager, didUpdateLocations locations: [CLLocation]) {
        CLGeocoder().reverseGeocodeLocation(manager.location!) { (placemarks, error) in
            if (error != nil){
                return
            }
            if placemarks?.count != nil{
                let pm = (placemarks?[0])! as CLPlacemark
                self.displayLocationInfo(placemark: pm)
            }
        }

        let spanX = 0.00725
        let spanY = 0.00725
        locationManager.stopUpdatingLocation()
        let location = locations.last! as CLLocation
        let center = CLLocationCoordinate2D(latitude: location.coordinate.latitude, longitude: location.coordinate.longitude)
        let region = MKCoordinateRegion(center: center, span: MKCoordinateSpan(latitudeDelta: spanX, longitudeDelta: spanY))
        self.MapRSR.setRegion(region, animated: true)
        self.MapRSR.delegate = self

        let mapPin = MapPin(name: "", street: "", type: "", postCode: "")
        mapPin.coordinate = center
        mapPin.title = "test"

        self.MapRSR.addAnnotation(mapPin)
    }


    func mapView(_ mapView: MKMapView, viewFor annotation: MKAnnotation) -> MKAnnotationView? {
        let pin = mapView.dequeueReusableAnnotationView(withIdentifier: "LocationInfo") ?? AddressView(annotation: annotation, reuseIdentifier: "LocationInfo")
        pin.canShowCallout = true
        return pin
    }

It just won't show my xib view. Does anyone know what I'm doing wrong or how I can achieve the effect I want which is something like this.

Answer 1

In didSelectAnnotationView load xib from bundle and add subview to the annotation view. here CustomXibCallout is xib file and CustomCalloutView is MKAnnotationView.

func mapView(mapView: MKMapView, didSelectAnnotationView view: MKAnnotationView) {
    if view.annotation!.isKindOfClass(MKUserLocation){
        return
    }

    //Custom xib
    let customView = (NSBundle.mainBundle().loadNibNamed("CustomXibCallout", owner: self, options: nil))[0] as! CustomCalloutView;

    let calloutViewFrame = customView.frame;

    customView.frame = CGRect(x: -calloutViewFrame.size.width/2.23, y: -calloutViewFrame.size.height-7, width: 315, height: 200)

    view.addSubview(customView)
}

in didDeselectAnnotationView remove the added view

func mapView(mapView: MKMapView, didDeselectAnnotationView view: MKAnnotationView)
{
    for childView:AnyObject in view.subviews{
        childView.removeFromSuperview();
    }
}

Example for CustomCallout