Skip to main content

Default callout usage

A newer version of the Maps SDK is available

This page uses v6.4.1 of the Mapbox Maps SDK. A newer version of the SDK is available. Learn about the latest version, v11.3.0, in the Maps SDK documentation.

If you are interested in using non-default callout features, see the MGLCalloutView and MGLCalloutDelegate protocols for more information about creating customized callouts.

import Mapbox

class ViewController: UIViewController, MGLMapViewDelegate {
var mapView: MGLMapView!

override func viewDidLoad() {

mapView = MGLMapView(frame: view.bounds)
mapView.autoresizingMask = [.flexibleWidth, .flexibleHeight]


// Remember to set the delegate.
mapView.delegate = self


func addAnnotation() {
let annotation = MGLPointAnnotation()
annotation.coordinate = CLLocationCoordinate2D(latitude: 35.03946, longitude: 135.72956)
annotation.title = "Kinkaku-ji"
annotation.subtitle = "\(annotation.coordinate.latitude), \(annotation.coordinate.longitude)"


// Center the map on the annotation.
mapView.setCenter(annotation.coordinate, zoomLevel: 17, animated: false)

// Pop-up the callout view.
mapView.selectAnnotation(annotation, animated: true, completionHandler: nil)

func mapView(_ mapView: MGLMapView, annotationCanShowCallout annotation: MGLAnnotation) -> Bool {
return true

func mapView(_ mapView: MGLMapView, leftCalloutAccessoryViewFor annotation: MGLAnnotation) -> UIView? {
if (annotation.title! == "Kinkaku-ji") {
// Callout height is fixed; width expands to fit its content.
let label = UILabel(frame: CGRect(x: 0, y: 0, width: 60, height: 50))
label.textAlignment = .right
label.textColor = UIColor(red: 0.81, green: 0.71, blue: 0.23, alpha: 1)
label.text = "金閣寺"

return label

return nil

func mapView(_ mapView: MGLMapView, rightCalloutAccessoryViewFor annotation: MGLAnnotation) -> UIView? {
return UIButton(type: .detailDisclosure)

func mapView(_ mapView: MGLMapView, annotation: MGLAnnotation, calloutAccessoryControlTapped control: UIControl) {
// Hide the callout view.
mapView.deselectAnnotation(annotation, animated: false)

// Show an alert containing the annotation's details
let alert = UIAlertController(title: annotation.title!!, message: "A lovely (if touristy) place.", preferredStyle: .alert)
alert.addAction(UIAlertAction(title: "OK", style: .default, handler: nil))
self.present(alert, animated: true, completion: nil)