Mapbox Studio styles are a lot more than meets the eye. Under the hood, every map relies on a set of APIs and performance-tuned standards working in concert.
Vector rendering has spawned a new approach to cartography: instead of relying on flattened images as the lingua franca of web maps, we now think deeply about maps as dynamic mixtures of ingredients. The finished product you see is a combination of small, optimized components, like tiles, fonts, and icons, assembled in realtime.
Here’s a map. Let’s look at it layer-by-layer.
Mapbox Vector Tiles
The core of every map is data. Mapbox GL JS supports a variety of data sources, including GeoJSON, image tiles, video, and static images, but the most important type is vector tiles. Unlike conventional vector formats like GeoJSON and KML, vector tiles are efficient enough to contain all the data you see in a map - including streets, buildings, and terrain. Our vector tile specification is built on the space-savingprotocol buffers format, and inspired by many existing efforts, like OpenScienceMap’s format.
Unlike a vector image format like SVG, vector tiles are pure data. They define geometries and properties, but never anything about style. This means that the same vector tiles can be used to generate maps of varying styles - a nighttime style can use the same data as a light style for visualization. The screenshot above is generated by Mapbox Studio’s X-Ray mode, which makes it easier to select data: it auto-generates styles for ‘invisible’ layers of data.
Polygons & Lines
From vector tiles alone, Mapbox Studio can render geometric shapes, like lines and polygons. The styles for these shapes are defined in theMapbox GL Style Specification: for instance, the buildings layer is controlled by this style:
{"id": "building","type": "fill","source": "mapbox-streets","source-layer": "building","minzoom": 15,"paint": {"fill-outline-color": "#c0c0c0","fill-opacity": {"base": 1,"stops": [[15, 0], [16.5, 1]]
},"fill-antialias": true,"fill-color": "#cbcbcb"
}
}The layer’s source and source-layer properties tell the renderer
which set of vector tiles (mapbox-streets) and which subset of their data (building)
the layer should read from.
WebGL & OpenGL excel at rendering shapes like these: once we parse the vector tiles and load geometries into memory, rendering can be extremely fast. Mapbox GL includes several novel algorithms to perfect tasks likerendering anti-aliased lines with high quality and high performance.
Text
Rendering shapes is in WebGL’s wheelhouse, but rendering text isn’t. Unlike HTML, SVG, and Canvas, GL has no built-in text-rendering methods. There are two popular techniques to work around this limitation: rendering individual letters in text as polygons, or using a 2D Canvas and using the result as an image.
Maps require text at multiple sizes and orientations, and with customizable halos, so the commonplace techniques don’t cut it. Instead, Mapbox’s APIs process all fonts into SDF-encoded packages of character ranges. We have a few improvements - notably advanced text shaping - on the horizon, but the approach already incorporates some advanced ideas:
Multilingual by default
The API takes a font stack as its parameter, rather than a single font. Many beautiful fonts don’t include the full range of unicode characters, so using them alone would leave your maps blank in non-English-speaking countries. Using a combination of beautiful but limited-coverage fonts with comprehensive fallback fonts like Arial Unicode ensures that maps are usable everywhere.
Character set efficiency
The English alphabet fits comfortably within 128 different symbols, but other languages use thousands of detailed characters. Loading every symbol for every language along with your map would be expensive and slow, so we split the unicode range by 256 character chunks. This way, if you load a map in Washington DC, only the necessary characters to display English are loaded, and if you pan to Moscow, the map will load the necessary Cyrillic characters, on the fly.
Symbols
Symbols, whether they’re used as icons for points of interest, line markers for road direction, or textures for landuse classifications, are one of the essential elements mapmakers use to establish a visual identity.
Mapbox Studio includes a powerful new way to interact with symbols. Much like fonts, our approach to symbols needed to hit a high level of visual polish but also be incredibly fast for downloading and rendering.
Mapbox Studio uses a new Sprites API that accepts SVG images as input and generatesspritesheets - another trick borrowed from game design. Below the surface, this API usesspritezero, a marriage of bin packing and Mapnik image compositing into an incredibly fast & accurate package.
This API accepts only SVG inputs, so that we can render the map at any pixel density, from 1x, to retina displays, and in the future, high-resolution print output. And you can use open source icon sets, like maki orgeomicons, or design them yourself in Illustrator, Sketch, Inkscape, or any SVG-supporting vector graphics editor.
In everyday usage
Mapbox Studio styles are actually a lot of things: a style definition at the core, optimized data as tiles, and a well-tuned system of APIs to provide supporting assets.
And it’s just as easy to use a Mapbox Studio style with Mapbox GL JS or the Mapbox iOS SDK as it is to use a legacy style with Mapbox.js: all you need is a style ID and an access token, and you’ve got a map.