Apply a style designed in Mapbox Studio

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.16.1, in the Maps SDK documentation.

Read the Mapbox Studio manual to learn more about creating a custom map style.

Swift

Objective C

ViewController

github View on GitHub

Swift

Objective C

import Mapbox

@objc(StudioStyleExample_Swift)

class StudioStyleExample_Swift: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()

        // Replace the string in the URL below with your custom style URL from Mapbox Studio.
        // Read more about style URLs here: https://www.mapbox.com/help/define-style-url/
        let styleURL = URL(string: "mapbox://styles/mapbox/outdoors-v9")
        let mapView = MGLMapView(frame: view.bounds,
                                 styleURL: styleURL)
        mapView.autoresizingMask = [.flexibleWidth, .flexibleHeight]

        // Set the map’s center coordinate and zoom level.
        mapView.setCenter(CLLocationCoordinate2D(latitude: 45.52954,
                longitude: -122.72317),
                zoomLevel: 14, animated: false)
        view.addSubview(mapView)
    }
}

ViewController

github View on GitHub

Swift

Objective C

#import "ViewController.h"
@import Mapbox;
@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];

    // Replace the string in the URL below with your custom style URL from Mapbox Studio.
    // Read more about style URLs here: https://www.mapbox.com/help/define-style-url/
    NSURL *styleURL = [NSURL URLWithString:@"mapbox://styles/mapbox/outdoors-v9"];
    MGLMapView *mapView = [[MGLMapView alloc] initWithFrame:self.view.bounds
                                                   styleURL:styleURL];

    mapView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;

    // Set the map’s center coordinate and zoom level.
    [mapView setCenterCoordinate:CLLocationCoordinate2DMake(45.52954, -122.72317)
                       zoomLevel:14
                        animated:NO];

    [self.view addSubview:mapView];
}

@end