Style-optimized vector tiles

Sam Matthews
Tue, 11 Oct 2016 00:00:00 -0400

We’re introducing a new feature for optimizing your vector tiles to give you more control over their size! Style-optimized vector tiles are smaller, served over-the-wire, and a great way to reduce the size of offline caches. This new feature of our Maps API removes any layers or features in the tile that are not represented by a Mapbox Style.

Say, for instance, you have a Mapbox Style that references a tileset with four layers: campsites, mountains, forestland, and buildings. The final map includes icons for campsites, a pattern for forests, and a pattern for blue mountains, but does not use buildings.

In an normal GL map, the tiles loaded include all four layers even though they aren’t all needed. A style-optimized vector tile includes just campsites, forestland, and blue mountains. It removes unused layers and features based on attributes and zoom levels.

Style-optimized vector tiles are available now in the most recent version of Mapbox GL JS (0.24.0) and will come to GL Native SDKs soon. These tools allow you to specify optimize=true to your style ID, which tells our tile service to return a style-optimized tile instead of a regular tile. Here’s what this looks like in Mapbox GL JS:

var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v9?optimize=true' // optimize=true
});

We are excited to see how you use these optimized tiles! Check out the updated documentation to learn more about style-optimized vector tiles and say hi on Twitter if you have any questions.