Adding missing triangle(tooltip) to callout custom MKAnnotationView subclass - swift

Question

I Create a custom MKAnnotationView, that works fine but it pops as a rectangle, without the triangle (the same one you have in comics when someone is talking), that comes out of the pin.
Is there a way that the triangle will be added automatically?
here is my MKAnnotationView subclass:
class ShikmimAnnotationView: MKAnnotationView{
let selectedLabel:UILabel = UILabel.init(frame:CGRect(x: 0, y: 0, width: 140, height: 40))
override func setSelected(_ selected: Bool, animated: Bool) {
super.setSelected(false, animated: animated)
if(selected)
{
// Do customization, for example:
//let defaults = UserDefaults.standard
selectedLabel.font = UIFont(name: "Heebo-Regular.ttf", size: 18)
selectedLabel.text = "(גדליהו אלון 13, ירושלים\n (3 דק' הגעה"
selectedLabel.numberOfLines = 3
selectedLabel.sizeToFit()
selectedLabel.textColor = UIColor.white
selectedLabel.textAlignment = .center
selectedLabel.backgroundColor = UIColor.darkGray
selectedLabel.layer.borderColor = UIColor.white.cgColor
selectedLabel.layer.borderWidth = 2
selectedLabel.layer.cornerRadius = 5
selectedLabel.layer.masksToBounds = true
selectedLabel.center.x = 0.5 * self.frame.size.width;
selectedLabel.center.y = -0.5 * selectedLabel.frame.height;
self.addSubview(selectedLabel)
self.image = UIImage(named: "map_pin_next_stop-2.png")
}
else
{
selectedLabel.removeFromSuperview()
}
}
}
Here is how I initialize it in my VC:
internal func mapView(_ mapView: MKMapView, viewFor annotation: MKAnnotation) -> MKAnnotationView? {
if let annotation = annotation as? MyLocation {
let identifier = "reuse"
var view: ShikmimAnnotationView
if let dequeuedView = mapView.dequeueReusableAnnotationView(withIdentifier: identifier){
dequeuedView.annotation = annotation
view = dequeuedView as! ShikmimAnnotationView
} else {
view = ShikmimAnnotationView(annotation: annotation, reuseIdentifier: identifier)
view.image = UIImage(named: "map_pin_next_stop-2.png")
view.canShowCallout = false
//view.calloutOffset = CGPoint(x: -5, y: 5)
//view.rightCalloutAccessoryView = UIButton(type: .detailDisclosure) as UIView
}
return view
}
return nil
}

Answer 1

You can draw this triangle with BezierPath. Here's class for this view. You can setup size of view in storyboard or make it programmatically in your ShikmimAnnotationView class.
class TriangleView: UIView {
let shapeLayer = CAShapeLayer()
override func drawRect(rect: CGRect) {
// Get Height and Width
let layerHeight = self.layer.frame.height
let layerWidth = self.layer.frame.width
// Create Path
let bezierPath = UIBezierPath()
// Draw Points
bezierPath.moveToPoint(CGPoint(x: 0, y: 0))
bezierPath.addLineToPoint(CGPoint(x: layerWidth, y: 0))
bezierPath.addLineToPoint(CGPoint(x: layerWidth / 2, y: layerHeight))
bezierPath.addLineToPoint(CGPoint(x: 0, y: 0))
bezierPath.closePath()
// Apply Color
UIColor(red: (2/255), green: (35/255), blue: (73/255), alpha: 1).setFill()
bezierPath.fill()
// Mask to Path
shapeLayer.path = bezierPath.CGPath
self.layer.mask = shapeLayer
}
}