Use Mapbox with OpenLayers

You can use Mapbox styles with OpenLayers. Choose the version of OpenLayers and Mapbox tool that you’re working with to get started.

OpenLayers 3.x

You can load your Mapbox Studio Classic, Mapbox Editor, or Mapbox map ID or your Mapbox Studio style or Mapbox style url with OpenLayers 3.x.

Mapbox Studio style or Mapbox style url

To use your Mapbox Studio style or a Mapbox style URL with OpenLayers 3.x, you’ll need to reference the Mapbox Static API. You can replace the style URL mapbox/streets-v9 with your own.

var map = new ol.Map({
  layers: [
    new ol.layer.Tile({
      source: new ol.source.XYZ({
        url: 'https://api.mapbox.com/styles/v1/mapbox/streets-v9/tiles/256/{z}/{x}/{y}?access_token=<your access token here>'
      })
    })
  ],
  target: 'map',
  view: new ol.View({
    center: [0, 0],
    zoom: 2
  })
});

Mapbox Studio Classic, Mapbox Editor, or Mapbox map ID

Note: Mapbox Editor has been deprecated. Your existing projects can be found here. For more information, see our announcement and guide to migrating a Mapbox Editor project.

To use your Mapbox Studio Classic style, Mapbox Editor project map ID, or a Mapbox map ID with OpenLayers 3.x, you’ll need to reference the Mapbox Maps API. You can replace the map ID mapbox.streets with your own.

var map = new ol.Map({
  layers: [
    new ol.layer.Tile({
      source: new ol.source.XYZ({
        url: 'https://api.mapbox.com/v4/mapbox.streets/{z}/{x}/{y}.png?access_token=<your access token here>'
      })
    })
  ],
  target: 'map',
  view: new ol.View({
    center: [0, 0],
    zoom: 2
  })
});

OpenLayers 2.x

For OpenLayers 2.x, use the OpenLayers.Layer.XYZ. You can load your Mapbox Studio Classic, Mapbox Editor, or Mapbox map ID or your Mapbox Studio style or Mapbox style url with OpenLayers 2.x.

Mapbox Studio style or Mapbox style url

To use your Mapbox Studio style or a Mapbox style URL with OpenLayers 2.x, you’ll need to reference the Mapbox Static API. You can replace the style URL mapbox/streets-v9 with your own.

var myLayer = new OpenLayers.Layer.XYZ(
  'My Map Layer',
  ['https://api.mapbox.com/styles/v1/mapbox/streets-v9/tiles/256/{z}/{x}/{y}?access_token=<your access token here>'],
  {
    sphericalMercator: true,
    wrapDateLine: true
  }
);
var map = new OpenLayers.Map({
  div: 'map',
  layers: [myLayer],
  center: [0, 0],
  zoom: 1
});

Mapbox Studio Classic, Mapbox Editor, or Mapbox map ID

Note: Mapbox Editor has been deprecated. Your existing projects can be found here. For more information, see our announcement and guide to migrating a Mapbox Editor project.

To use your Mapbox Studio Classic style, Mapbox Editor project map ID, or a Mapbox map ID with OpenLayers 2.x, you’ll need to reference the Mapbox Maps API. You can replace the map ID mapbox.streets with your own.

var myLayer = new OpenLayers.Layer.XYZ(
  'My Map Layer',
  ['https://a.tiles.mapbox.com/v4/mapbox.streets/{z}/{x}/{y}.png?access_token=<your access token here>'],
  {
    sphericalMercator: true,
    tileSize: new OpenLayers.Size([512, 512]),
    wrapDateLine: true
  }
);
var map = new OpenLayers.Map({
  div: 'map',
  layers: [myLayer],
  center: [0, 0],
  zoom: 1
});
Additional questions? Ask our support team or learn more about How Mapbox Works.