Adding a title in front/below a custom annotation mapkit swift 4

Question

In my app, I have a mapkit full of annotations and when one is clicked I want a new view to slide up with details on the annotation. Correct me if I'm wrong but I think you need to create a custom annotation in order to implement the didSelect() method.

The problem is that, by default, the custom annotations that pop up don't have the name of what the annotations is, like the default mapkit annotations do, and since I have around 20 annotations at a time, the user has no way of knowing what they are selecting.

Any idea as to how to add a title or label underneath the custom annotation with the name of the annotation? I don't want to make a call out that pops up above the annotation since I'm having the view slide up, filled with the annotations data.

Here is what I have:

extension ViewController : MKMapViewDelegate {

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

    if annotation is MKUserLocation { return nil }



    var annotationView = mapView.dequeueReusableAnnotationView(withIdentifier: "pin") as? MKPinAnnotationView

    if annotationView == nil {

        annotationView = MKPinAnnotationView(annotation: annotation, reuseIdentifier: "pin")

        annotationView?.animatesDrop = true

        annotationView?.canShowCallout = false

    } else {

        annotationView?.annotation = annotation

    }



    return annotationView

}



func mapView(_ mapView: MKMapView, didSelect view: MKAnnotationView) {

    UIView.animate(withDuration: 0.2) {
        // the view that will hold the annotations data

        self.annotationInfoViewBottomConstraint.constant = 0

        self.view.layoutIfNeeded()

    }

}

}

As you can see the default annotation has the name of the location underneath, which is what I want but I want it under the "pin" looking custom annotations.

It's hard to tell what your actual question is here. You should make it clear with an [edit] what you want to do, what you tried, and what results you got, including any error messages. — , Jun 07 '18 at 18:17

score 3 · Accepted Answer · edited Jun 26 '20 at 18:08

You can create a label like so:

let annotationLabel = UILabel(frame: CGRect(x: -40, y: -35, width: 105, height: 30))
annotationLabel.numberOfLines = 3
annotationLabel.textAlignment = .center
annotationLabel.font = UIFont(name: "Rockwell", size: 10)
// you can customize it anyway you want like any other label

Set the text:

annotationLabel.text = annotation.title!!

And then add to annotation view:

annotationView.addSubview(annotationLabel)

Picture of annotation with label

I also added a background and border by doing:

annotationLabel.backgroundColor = UIColor.white
annotationLabel.layer.cornerRadius = 15
annotationLabel.clipsToBounds = true

You can also change where the label is in respect to the annotation by changing the X and Y when creating the label. Negative is to the left and up, positive right and down.

Mohit Kumar · Answer 2 · 2020-12-09T06:05:53.087

Simple Solution for Name under Marker and color change:

MapKit Delegate Method: (I have used MKMarkerAnnotationView and use markerTintColor to set color)

func mapView(_ mapView: MKMapView, viewFor annotation: MKAnnotation) -> MKAnnotationView? {
        var annotationView = mapView.dequeueReusableAnnotationView(withIdentifier: "pin") as? MKMarkerAnnotationView
        
        guard let annotation = annotation as? PlaceAnnotation else {
            return annotationView
        }
        
        
        if annotationView == nil {
            annotationView = MKMarkerAnnotationView(annotation: annotation, reuseIdentifier: "pin")
        } else {
            annotationView?.annotation = annotation
        }
        
        annotationView?.markerTintColor = annotation.pinTintColor
        
        return annotationView
    }

MKAnnotation Custom Class:

class PlaceAnnotation: NSObject, MKAnnotation  {
    let title: String?
    let locationName: String
    let discipline: String
    let coordinate: CLLocationCoordinate2D
    var pinTintColor: UIColor
    
init(id: String, title: String, locationName: String, discipline: String, coordinate: CLLocationCoordinate2D, pinTintColor: UIColor) {
    self.title = title
    self.locationName = locationName
    self.discipline = discipline
    self.coordinate = coordinate
    self.pinTintColor = pinTintColor
    
    super.init()
    }
}

How to Use:

let place = PlaceAnnotation(title: "My Location", locationName: "", discipline: "", coordinate: CLLocationCoordinate2D(latitude: lat, longitude: lng), pinTintColor: UIColor.systemBlue)
map.addAnnotation(place)

score 0 · Answer 3 · answered Jun 07 '18 at 15:28

0

You'll need to set annotationView.enabled and annotationView.canShowCallout to YES

answered Jun 07 '18 at 15:28

Chandra Agus Tatianto

21
4

I did that and the name of the annotation does not show up underneath it. The callout bubble pops up with the name but that is not what i want since i have a separate view showing all the data. – user9883052 Jun 07 '18 at 15:51

Adding a title in front/below a custom annotation mapkit swift 4

3 Answers3