Mapbox Studio styles are a lot more than meets the eye. Under the hood, everymap relies on a set of APIs and performance-tuned standards working in concert.
Vector rendering has spawned a new approach to cartography: instead of relyingon flattened images as the lingua franca of web maps, we now think deeplyabout maps as dynamic mixtures of ingredients. The finished product you seeis 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 importanttype is vector tiles. Unlikeconventional vector formats like GeoJSON and KML, vector tiles are efficientenough 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’sformat.
Unlike a vector image format like SVG, vector tiles are pure data. They definegeometries and properties, but never anything about style. This means that thesame vector tiles can be used to generate maps of varying styles - a nighttimestyle can use the same data as a light style for visualization. The screenshotabove 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, likelines 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 rendererwhich 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 vectortiles and load geometries into memory, rendering can be extremely fast. MapboxGL includes several novel algorithms to perfect tasks likerendering anti-aliased lineswith 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. Thereare two popular techniques to work around this limitation: renderingindividual letters in text as polygons,or using a 2D Canvas and usingthe 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-encodedpackages 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 fullrange of unicode characters, so using them alone would leave your mapsblank in non-English-speaking countries. Using a combination of beautifulbut limited-coverage fonts with comprehensive fallback fonts like Arial Unicodeensures 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 symbolfor every language along with your map would be expensive and slow, sowe split the unicode range by 256 character chunks. This way, if you loada map in Washington DC, only the necessary characters to display Englishare loaded, and if you pan to Moscow, the map will load the necessary Cyrilliccharacters, on the fly.
Symbols
Symbols, whether they’re used as icons for points of interest, line markersfor road direction, or textures for landuse classifications, are one of theessential elements mapmakers use to establish a visual identity.
Mapbox Studio includes a powerful new way to interact with symbols. Much likefonts, our approach to symbols needed to hit a high level of visual polishbut also be incredibly fast for downloading and rendering.
Mapbox Studio uses a new Sprites API that accepts SVG images as input and generatesspritesheets - anothertrick borrowed from game design. Below the surface, this API usesspritezero, a marriage of bin packingand Mapnik image compositinginto an incredibly fast & accurate package.
This API accepts only SVG inputs, so that we can render the map at anypixel density, from 1x, to retina displays, and in the future, high-resolutionprint 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 definitionat the core, optimized data as tiles, and a well-tuned system of APIs toprovide supporting assets.
And it’s just as easy to use a Mapbox Studiostyle with Mapbox GL JS orthe Mapbox iOS SDK as it is to usea legacy style with Mapbox.js: all you need is a style ID and an accesstoken, and you’ve got a map.
أكثر...
Vector rendering has spawned a new approach to cartography: instead of relyingon flattened images as the lingua franca of web maps, we now think deeplyabout maps as dynamic mixtures of ingredients. The finished product you seeis 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 importanttype is vector tiles. Unlikeconventional vector formats like GeoJSON and KML, vector tiles are efficientenough 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’sformat.
Unlike a vector image format like SVG, vector tiles are pure data. They definegeometries and properties, but never anything about style. This means that thesame vector tiles can be used to generate maps of varying styles - a nighttimestyle can use the same data as a light style for visualization. The screenshotabove 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, likelines 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 rendererwhich 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 vectortiles and load geometries into memory, rendering can be extremely fast. MapboxGL includes several novel algorithms to perfect tasks likerendering anti-aliased lineswith 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. Thereare two popular techniques to work around this limitation: renderingindividual letters in text as polygons,or using a 2D Canvas and usingthe 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-encodedpackages 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 fullrange of unicode characters, so using them alone would leave your mapsblank in non-English-speaking countries. Using a combination of beautifulbut limited-coverage fonts with comprehensive fallback fonts like Arial Unicodeensures 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 symbolfor every language along with your map would be expensive and slow, sowe split the unicode range by 256 character chunks. This way, if you loada map in Washington DC, only the necessary characters to display Englishare loaded, and if you pan to Moscow, the map will load the necessary Cyrilliccharacters, on the fly.
Symbols
Symbols, whether they’re used as icons for points of interest, line markersfor road direction, or textures for landuse classifications, are one of theessential elements mapmakers use to establish a visual identity.
Mapbox Studio includes a powerful new way to interact with symbols. Much likefonts, our approach to symbols needed to hit a high level of visual polishbut also be incredibly fast for downloading and rendering.
Mapbox Studio uses a new Sprites API that accepts SVG images as input and generatesspritesheets - anothertrick borrowed from game design. Below the surface, this API usesspritezero, a marriage of bin packingand Mapnik image compositinginto an incredibly fast & accurate package.
This API accepts only SVG inputs, so that we can render the map at anypixel density, from 1x, to retina displays, and in the future, high-resolutionprint 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 definitionat the core, optimized data as tiles, and a well-tuned system of APIs toprovide supporting assets.
And it’s just as easy to use a Mapbox Studiostyle with Mapbox GL JS orthe Mapbox iOS SDK as it is to usea legacy style with Mapbox.js: all you need is a style ID and an accesstoken, and you’ve got a map.
أكثر...