CODEWITHSUNDEEP
swiftmkmapview
Gustulus
Gustulus

Reputation: 33

Link inside annotation bubble in MKMapView

Is there a possibility to have a link inside an annotation in MapKit?

I want a possibility to show more text inside this bubble, shown when clicked on an annotation, by clicking on for example a "Show more" - link (but only when clicked) otherwise it only shows e.g. the title of the annotation.

Upvotes: 2

Views: 469

Answers (1)

AamirR
AamirR

Reputation: 12218

We will use following subclass of MKAnnotationView to add an annotation, like so:

class CustomAnnotation: MKPointAnnotation {
    var isCollapsed = true // current state

    // set true when user taps the link to expand/collapse annotation-view
    var setNeedsToggle = false
}

let annotation = CustomAnnotation()
annotation.coordinate = self.mapView.centerCoordinate
annotation.title = "Annotation Title"
mapView.addAnnotation(annotation)

In viewForAnnotation we make use of detailCalloutAccessoryView and rightCalloutAccessoryView to show description and toggle link, like so:

func mapView(_ mapView: MKMapView, viewFor annotation: MKAnnotation) -> MKAnnotationView? {
    guard let annot = annotation as? CustomAnnotation else { return nil }

    // Initialize AnnotationView
    var annotationView: MKAnnotationView! = mapView.dequeueReusableAnnotationView(withIdentifier: "AnID")
    if (annotationView == nil) {
        annotationView = MKPinAnnotationView(annotation: annotation, reuseIdentifier: "AnID")
        annotationView.canShowCallout = true
    } else {
        annotationView.annotation = annotation
    }

    // Expand/Collapse Button
    let rightButton = UIButton(type: .detailDisclosure)
    rightButton.setImage(UIImage(named: annot.isCollapsed ? "ic_showmore" : "ic_showless"), for: .normal)
    annotationView.rightCalloutAccessoryView = rightButton

    // Description View
    if (annot.isCollapsed) {
        annotationView.detailCalloutAccessoryView = nil
    } else {
        let label = UILabel(frame: CGRect(x: 0, y: 0, width: 200, height: 21))
        label.text = "A longer description in place to be shown when the accessory view is tapped"
        label.font = UIFont.italicSystemFont(ofSize: 14.0)
        label.numberOfLines = 0
        annotationView.detailCalloutAccessoryView = label

        label.widthAnchor.constraint(lessThanOrEqualToConstant: label.frame.width).isActive = true
        label.heightAnchor.constraint(lessThanOrEqualToConstant: 90.0).isActive = true
    }

    return annotationView
}

calloutAccessoryControlTapped event fires when the link is tapped, so we expand/collapse our annotation-view, like so:

func mapView(_ mapView: MKMapView, annotationView view: MKAnnotationView, calloutAccessoryControlTapped control: UIControl) {
    guard let oldAnnot = view.annotation as? CustomAnnotation else { return }

    let annotation = CustomAnnotation()
    annotation.coordinate = oldAnnot.coordinate
    annotation.title = oldAnnot.title
    annotation.setNeedsToggle = true
    if (oldAnnot.isCollapsed) {
        annotation.isCollapsed = false
    }

    mapView.removeAnnotation(oldAnnot)
    mapView.addAnnotation(annotation)
}

Finally we check if setNeedsToggle is true, so we show the expanded/collapsed annotation-view, like so:

func mapView(_ mapView: MKMapView, didAdd views: [MKAnnotationView]) {
    for view in views {
        if let annotation = view.annotation as? CustomAnnotation, annotation.setNeedsToggle {
            mapView.selectAnnotation(annotation, animated: true)
            return
        }
    }
}

Here is the expanded/collapsed views:

enter image description here

enter image description here

Upvotes: 1

Related Questions