Mapbox now supports older browsers like Internet Explorer 9 and the styles you create in Studio are perfectly backwards-compatible. To make this possible, we render vector tiles into raster images with Mapbox GL Native in the cloud and produce tiles compatible with traditional mapping libraries like Mapbox.js, Leaflet, OpenLayers, and even embeddable in emails!

Mapbox Mobile and GL JS dynamically render maps with the speed and smoothness of a video game, using efficient vector tiles for data. But if you want to embed a simple image of a map, keep your Mapbox.js or Leaflet code, or support users who don’t have WebGL, then traditional image tiles and static maps are really useful. Starting today, our Static API and Tiles API support new Studio styles.

The examples below show the same map of trees in New York, in 3 different ways.

Style rendered with Mapbox GL JS


Style rendered with the Tiles API in Mapbox.js


Mapbox GL rendered server side static API

Style rendered as a single image with the Static API

Use with Mapbox.js

Mapbox.js v2.3.0 now supports adding styles from Mapbox Studio, using the styleLayer method.

L.mapbox.styleLayer('mapbox://styles/mapbox/emerald-v8').addTo(map);

Or create a new Mapbox.js map and add a style layer from your account with Mapbox Studio:

Grab the Style URL from Mapbox Studio

// Add your access token
L.mapbox.accessToken = '<your public access token>';

// Create the map
var map = L.mapbox.map('map').setView([38.97416, -95.23252], 15);

// Add the style to your map as image tiles
L.mapbox.styleLayer('mapbox://<style url from studio>').addTo(map);

See the full example in the Mapbox.js documentation.

Mapbox Studio style compatibility in the Static API and Tiles API is available for all Mapbox accounts, starting today: you can now do even more with your maps.