Create a static map snapshot
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.7.0, in the Maps SDK documentation.
import Mapbox
class StaticSnapshotExample: UIViewController, MGLMapViewDelegate {
var mapView: MGLMapView!
var button: UIButton!
var imageView: UIImageView!
override func viewDidLoad() {
super.viewDidLoad()
mapView = MGLMapView(frame: CGRect(x: 0, y: 0, width: view.bounds.width, height: view.bounds.height / 2), styleURL: MGLStyle.satelliteStreetsStyleURL)
mapView.autoresizingMask = [.flexibleHeight, .flexibleWidth]
// Center map on the Giza Pyramid Complex in Egypt.
let center = CLLocationCoordinate2D(latitude: 29.9773, longitude: 31.1325)
mapView.setCenter(center, zoomLevel: 14, animated: false)
view.addSubview(mapView)
// Create a button to take a map snapshot.
button = UIButton(frame: CGRect(x: mapView.bounds.width / 2 - 40, y: mapView.bounds.height - 40, width: 80, height: 30))
button.layer.cornerRadius = 15
button.backgroundColor = UIColor(red: 0.96, green: 0.65, blue: 0.14, alpha: 1.0)
button.setImage(UIImage(named: "camera"), for: .normal)
button.addTarget(self, action: #selector(createSnapshot), for: .touchUpInside)
view.addSubview(button)
// Create a UIImageView that will store the map snapshot.
imageView = UIImageView(frame: CGRect(x: 0, y: view.bounds.height / 2, width: view.bounds.width, height: view.bounds.height / 2))
imageView.backgroundColor = .black
imageView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
self.view.addSubview(imageView)
}
@objc func createSnapshot() {
// Use the map's style, camera, size, and zoom level to set the snapshot's options.
let options = MGLMapSnapshotOptions(styleURL: mapView.styleURL, camera: mapView.camera, size: mapView.bounds.size)
options.zoomLevel = mapView.zoomLevel
// Add an activity indicator to show that the snapshot is loading.
let indicator = UIActivityIndicatorView(frame: CGRect(x: self.imageView.center.x - 30, y: self.imageView.center.y - 30, width: 60, height: 60))
view.addSubview(indicator)
indicator.startAnimating()
// Create the map snapshot.
var snapshotter: MGLMapSnapshotter? = MGLMapSnapshotter(options: options)
snapshotter?.start { (snapshot, error) in
if error != nil {
print("Unable to create a map snapshot.")
} else if let snapshot = snapshot {
// Add the map snapshot's image to the image view.
indicator.stopAnimating()
self.imageView.image = snapshot.image
}
}
}
}
#import "ViewController.h"
@import Mapbox;
@interface ViewController ()
@property MGLMapView *mapView;
@property UIButton *button;
@property UIImageView *imageView;
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
_mapView = [[MGLMapView alloc] initWithFrame:CGRectMake(0, 0, self.view.bounds.size.width, self.view.bounds.size.height / 2) styleURL:[MGLStyle satelliteStreetsStyleURL]];
_mapView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
// Center map on the Giza Pyramid Complex in Egypt.
CLLocationCoordinate2D center = CLLocationCoordinate2DMake(29.9773, 31.1325);
[_mapView setCenterCoordinate:center zoomLevel:14 animated:NO];
[self.view addSubview:_mapView];
// Create a button to take a map snapshot.
_button = [[UIButton alloc] initWithFrame:CGRectMake(_mapView.bounds.size.width / 2 - 15, _mapView.bounds.size.height - 40, 80, 30)];
_button.layer.cornerRadius = 15;
_button.backgroundColor = [UIColor colorWithRed:0.96f green:0.65f blue:0.14f alpha:1];
[_button setImage:[UIImage imageNamed:@"camera"] forState:UIControlStateNormal];
[_button addTarget:self action:@selector(createSnapshot) forControlEvents:UIControlEventTouchUpInside];
[self.view addSubview:_button];
// Create a UIImageView that will store the map snapshot.
_imageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, self.view.bounds.size.height / 2, self.view.bounds.size.width, self.view.bounds.size.height / 2)];
_imageView.backgroundColor = [UIColor blackColor];
_imageView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
[self.view addSubview:_imageView];
}
- (void)createSnapshot {
// Use the map's style, camera, size, and zoom level to set the snapshot's options.
MGLMapSnapshotOptions *options = [[MGLMapSnapshotOptions alloc] initWithStyleURL:_mapView.styleURL camera:_mapView.camera size:_mapView.bounds.size];
options.zoomLevel = _mapView.zoomLevel;
// Add an activity indicator to show that the snapshot is loading.
UIActivityIndicatorView *indicator = [[UIActivityIndicatorView alloc] initWithFrame:CGRectMake(_imageView.center.x - 30, _imageView.center.y - 30, 60, 60)];
[self.view addSubview:indicator];
[indicator startAnimating];
// Create the map snapshot.
MGLMapSnapshotter *snapshotter = [[MGLMapSnapshotter alloc] initWithOptions:options];
[snapshotter startWithCompletionHandler:^(MGLMapSnapshot * _Nullable snapshot, NSError * _Nullable error) {
if (error != nil) {
NSLog(@"Unable to create a map snapshot.");
} else if (snapshot != nil) {
// Add the map snapshot's image to the image view.
[indicator stopAnimating];
self.imageView.image = snapshot.image;
}
}];
}
@end