Set the initial position of your map

You can set the initial position of your map to show your users a specific city, region, or to focus in on your data. Here’s how to set the initial position with Mapbox Studio, Mapbox GL JS, Mapbox.js, the Mapbox iOS SDK, and the Mapbox Android SDK.

Mapbox Studio

In the Mapbox Studio style editor, zoom to the location you want your map centered and click the bookmark in the bottom right to save that location.

Mapbox GL JS

If you are loading your style with Mapbox GL JS, you can set the center when declaring your map:

var map = new mapboxgl.Map({
  container: 'map', // container id
  style: 'mapbox://styles/mapbox/streets-9', // style location
  center: [-74.50, 40], // starting position
  zoom: 9 // starting zoom
});

You can also add it with the setCenter() method:

map.setCenter([-112, 38]);

Mapbox.js

If you are loading your map with Mapbox.js or Leaflet, you can use the .setView() method to change the initial map position, giving it an array of [latitude, longitude] values and a zoom level:

var map = L.mapbox.map('map', 'mapbox.streets')
    .setView([40, -75], 9);   // latitude 40, longitude -75, zoom level 9

Check out the Mapbox.js examples to learn more.

Mapbox iOS SDK

For iOS, you can set an MGLMapView’s initial latitude, longitude, and zoom level in the Attributes inspector of Interface Builder:

Alternatively, if you’ve created your MGLMapView in code, you can set its centerCoordinate and zoomLevel properties simultaneously using the setCenter(_:zoomLevel:animated:) method in Swift:

let mapView = MGLMapView(frame: view.bounds)

mapView.setCenter(CLLocationCoordinate2D(latitude: 40.7326808,
                                         longitude: -73.9843407),
                  zoomLevel: 12, animated: false)

or the -setCenterCoordinate:zoomLevel:animated: method in Objective-C:

MGLMapView *mapView = [[MGLMapView alloc] initWithFrame:self.view.bounds];

[mapView setCenterCoordinate:CLLocationCoordinate2DMake(40.7326808, -73.9843407)
                   zoomLevel:12
                    animated:NO];

Check out the iOS SDK examples to learn more.

Mapbox Android SDK

For Android, you can set the initial position and zoom in your activity’s layout xml.

<com.mapbox.mapboxsdk.maps.MapView
    android:id="@+id/mapView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    mapbox:mapbox_cameraTargetLat="40.7326808"
    mapbox:mapbox_cameraTargetLng="-73.9843407"
    mapbox:mapbox_styleUrl="@string/mapbox_style_mapbox_streets"
    mapbox:mapbox_cameraZoom="12"/>

Check out the Android SDK examples to learn more.

Next article:

Use Mapbox with AngularJS

Additional questions? Ask our support team or learn more about How Mapbox Works.