Custom MKMarkerAnnotationView Like Photos App - swift

Question

I am attempting to do a custom pinView like how the Photos app does it like so:
So far, most resources I can find on SO or here and here show ways to customise the image of the pin or the callout views, but none on a customised view of the marker itself.
Eventually, what I wanna achieve is similar to the Photos app, where each image displayed on the marker itself is a profileImage of the user, but a rounded view. My code so far is very basic:
func mapView(_ mapView: MKMapView, viewFor annotation: MKAnnotation) -> MKAnnotationView? {
var annotationView = mapView.dequeueReusableAnnotationView(withIdentifier: "pin") as? MKMarkerAnnotationView
if annotationView == nil {
annotationView = MKMarkerAnnotationView(annotation: annotation, reuseIdentifier: "pin")
annotationView?.canShowCallout = true
annotationView?.leftCalloutAccessoryView = UIImageView(image: UIImage(named: "profileImage"))
} else {
annotationView?.annotation = annotation
}
return annotationView
}
I hope this post do not get down voted as I've really exhausted my search online for resources. It would be great if someone could point me out in the right direction pls, thanks.

Answer 1

you can implement any custom design you want, you just need to provide a delegate method called viewFor.
func mapView(_ mapView: MKMapView, viewFor annotation: MKAnnotation) -> MKAnnotationView? {
var pinView = mapView.dequeueReusableAnnotationView(withIdentifier: "pin", for: annotation)
pinView = MapPinView(annotation: annotation, reuseIdentifier: "pin")
return pinView
}
In viewDidload method set the mapview delegate to self and of course register your custom view like bellow.
override func viewDidLoad() {
super.viewDidLoad()
mapView.delegate = self
mapView.register(MapPinView.self, forAnnotationViewWithReuseIdentifier: "pin")
}
And a custom view can look like this.
import MapKit
class MapPinView: MKAnnotationView {
private lazy var containerView: UIView = {
let view = UIView(frame: CGRect(x: 0, y: 0, width: 100, height: 100))
view.backgroundColor = .white
view.layer.cornerRadius = 16.0
return view
}()
private lazy var imageView: UIImageView = {
let imageview = UIImageView()
imageview.translatesAutoresizingMaskIntoConstraints = false
imageview.image = UIImage(named: "bg")
imageview.layer.cornerRadius = 8.0
imageview.clipsToBounds = true
return imageview
}()
private lazy var bottomCornerView: UIView = {
let view = UIView()
view.translatesAutoresizingMaskIntoConstraints = false
view.backgroundColor = .white
view.layer.cornerRadius = 4.0
return view
}()
// MARK: Initialization
override init(annotation: MKAnnotation?, reuseIdentifier: String?) {
super.init(annotation: annotation, reuseIdentifier: reuseIdentifier)
setupView()
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
private func setupView() {
containerView.addSubview(bottomCornerView)
bottomCornerView.topAnchor.constraint(equalTo: containerView.bottomAnchor, constant: -15.0).isActive = true
bottomCornerView.centerXAnchor.constraint(equalTo: containerView.centerXAnchor).isActive = true
bottomCornerView.widthAnchor.constraint(equalToConstant: 24).isActive = true
bottomCornerView.heightAnchor.constraint(equalToConstant: 24).isActive = true
let angle = (39.0 * CGFloat.pi) / 180
let transform = CGAffineTransform(rotationAngle: angle)
bottomCornerView.transform = transform
addSubview(containerView)
containerView.addSubview(imageView)
imageView.leadingAnchor.constraint(equalTo: containerView.leadingAnchor, constant: 8.0).isActive = true
imageView.topAnchor.constraint(equalTo: containerView.topAnchor, constant: 8.0).isActive = true
imageView.trailingAnchor.constraint(equalTo: containerView.trailingAnchor, constant: -8.0).isActive = true
imageView.bottomAnchor.constraint(equalTo: containerView.bottomAnchor, constant: -8.0).isActive = true
}
}
And mine looks like this.