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.6.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() {
super.viewDidLoad()
mapView = MGLMapView(frame: view.bounds)
mapView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
view.addSubview(mapView)
// Remember to set the delegate.
mapView.delegate = self
addAnnotation()
}
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)"
mapView.addAnnotation(annotation)
// 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)
}
}
#import "ViewController.h"
@import Mapbox;
@interface ViewController () <MGLMapViewDelegate>
@property MGLMapView *mapView;
@end
@implementation ViewController
- (void)viewDidLoad
{
[super viewDidLoad];
self.mapView = [[MGLMapView alloc] initWithFrame:self.view.bounds];
self.mapView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
[self.view addSubview:self.mapView];
// Remember to set the delegate.
self.mapView.delegate = self;
[self addAnnotation];
}
- (void)addAnnotation
{
MGLPointAnnotation *annotation = [[MGLPointAnnotation alloc] init];
annotation.coordinate = CLLocationCoordinate2DMake(35.03946, 135.72956);
annotation.title = @"Kinkaku-ji";
annotation.subtitle = [NSString stringWithFormat:@"%.5f, %.5f", annotation.coordinate.latitude, annotation.coordinate.longitude];
[self.mapView addAnnotation:annotation];
// Center the map on the annotation.
[self.mapView setCenterCoordinate:annotation.coordinate zoomLevel:17 animated:NO];
// Pop-up the callout view.
[self.mapView selectAnnotation:annotation animated:YES completionHandler:nil];
}
- (BOOL)mapView:(MGLMapView *)mapView annotationCanShowCallout:(id<MGLAnnotation>)annotation
{
return true;
}
- (UIView *)mapView:(MGLMapView *)mapView leftCalloutAccessoryViewForAnnotation:(id<MGLAnnotation>)annotation
{
if ([annotation.title isEqualToString:@"Kinkaku-ji"])
{
// Callout height is fixed; width expands to fit its content.
UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 60.f, 50.f)];
label.textAlignment = NSTextAlignmentRight;
label.textColor = [UIColor colorWithRed:0.81f green:0.71f blue:0.23f alpha:1.f];
label.text = @"金閣寺";
return label;
}
return nil;
}
- (UIView *)mapView:(MGLMapView *)mapView rightCalloutAccessoryViewForAnnotation:(id<MGLAnnotation>)annotation
{
return [UIButton buttonWithType:UIButtonTypeDetailDisclosure];
}
- (void)mapView:(MGLMapView *)mapView annotation:(id<MGLAnnotation>)annotation calloutAccessoryControlTapped:(UIControl *)control
{
// Hide the callout view.
[self.mapView deselectAnnotation:annotation animated:NO];
// Show an alert containing the annotation's details
UIAlertController *alert = [UIAlertController alertControllerWithTitle:annotation.title
message:@"A lovely (if touristy) place."
preferredStyle:UIAlertControllerStyleAlert];
[alert addAction:[UIAlertAction actionWithTitle:@"OK" style:UIAlertActionStyleDefault handler:nil]];
[self presentViewController:alert animated:YES completion:nil];
}
@end