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
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:
// Add your access tokenL.mapbox.accessToken='<your public access token>';// Create the mapvarmap=L.mapbox.map('map').setView([38.97416,-95.23252],15);// Add the style to your map as image tilesL.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.