CODEWITHSUNDEEP
swiftmapkitmapkitannotation
user9883052
user9883052

Reputation: 17

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

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()

    }

}

}

MapKit default annotation

Mapkit custom annotations

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.

Upvotes: 1

Views: 3802

Answers (3)

Mohit Kumar
Mohit Kumar

Reputation: 3086

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)

Upvotes: 1

Tyler Wanta
Tyler Wanta

Reputation: 195

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.

Upvotes: 3

Chandra Agus Tatianto
Chandra Agus Tatianto

Reputation: 21

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

Upvotes: 0

Related Questions