Border out (not IN) of custom annotation swift when tapped

Question

When custom my annotation view (Pin) in MapView was tapped, I need in white border OUT of my annotation.

Also I need in shadow, when tapped. But how could I make it? (when I deselect annotation have to stay right style). If I make it with:

var newFrame: CGRect = view.frame; newFrame = newFrame.insetBy(dx: -borderWidth, dy: -borderWidth); view.frame = newFrame; in mapView(_ mapView: MKMapView, didSelect view: MKAnnotationView) method and set border - my image will enlarge too, but it isn't right.

// My custom annotation
class CustomPointAnnotation: NSObject, MKAnnotation {
    var coordinate: CLLocationCoordinate2D
    var restoInfo: Restaurant?

    init(resto: Restaurant) {
        self.coordinate = resto.coordinate!
        self.restoInfo = resto
    }
}

// And func adding custom annotation on MapView
var restorationPin: CustomPointAnnotation!
func mapView(_ mapView: MKMapView, viewFor annotation: MKAnnotation) -> MKAnnotationView?
{
    let cpa = annotation as? CustomPointAnnotation
    if cpa?.restoInfo == nil {
        return nil
    }

    let annotationView = MKAnnotationView(annotation: restorationPin, reuseIdentifier: "id")

    let icon = cpa?.restoInfo?.encodeBase64toImage(base64: (cpa?.restoInfo?.logoMap)!)

    annotationView.image = icon
    annotationView.layer.masksToBounds = true
    annotationView.contentMode = .scaleAspectFill
    annotationView.frame.size = CGSize(width: 45, height: 45)
    annotationView.layer.cornerRadius = 22.5
    return annotationView
}

Have you looked into mapView didSelect and didDeselect MKAnnotationView methods from MKMapViewDelegate? — Miket25

Miket25 Miket25 · Accepted Answer · 2018-01-09T03:08:53

If you implement the following two methods to detect when an annotation is selected/deselected, you can draw/remove a white circle as a UIView beneath your annotation. First in your view controller, set the mapView's delegate.

self.mapView.delegate = self

Beneath are the two methods to detect when an annotation is clicked.

func mapView(_ mapView: MKMapView, didSelect view: MKAnnotationView) {
    /*Make a white circle*/
    let whiteBackground = UIView(frame: CGRect(x: -27, y: -55, width: 80, height: 80))
    whiteBackground.backgroundColor = UIColor.white
    whiteBackground.layer.cornerRadius = 40

    /*Set circle's tag to 1*/
    whiteBackground.tag = 1
    /*Add the circle beneath the annotation*/
    view.insertSubview(whiteBackground, at: 0)
}

func mapView(_ mapView: MKMapView, didDeselect view: MKAnnotationView) {
    /*Removing the white circle*/
    view.viewWithTag(1)?.removeFromSuperview()
}

Explanation. When an annotation is clicked, the didSelect method is called, and a white circle is created from a UIView. This white circle view has a tag of 1 for convenience when it needs to be removed. Then this view will be inserted as a subview having the annotation's view as the superview at index zero to make it be shown behind the annotation. The didDeselect method removes the circle by referencing the tag.

Personally, you're better off just inserting a white circle as an UIImageView instead of making a circle from a UIView, as it's less hack-ish.

Demo

Border out (not IN) of custom annotation swift when tapped

1 Answers