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, v10.5.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)