Since the launch of tiled web maps in 2005, there has been an implicit standard in mapping libraries: web maps are made up of many small, square images (known as “map tiles”) at a size of 256x256 pixels. Loading a bunch of small images made maps fast and performant – instead of loading the whole world as one giant image, small images are loaded in the areas that the user is looking at and more images are loaded as the map is panned and zoomed. It takes approximately 15 tiles of this size to cover the average screen.
Two years ago, we took a huge stride in making web maps even faster and more performant with Mapbox GL technology – instead of loading small images on the server and passing them to the browser, we built libraries and SDKs to allow maps to be rendered with vectors in the browser itself. Speed is an understatement here – with Mapbox GL, your map is being re-rendered at a rate of 60 frames per second, enough to overlay video on your web map.
In order to make these maps so fast, we create vector tiles that are passed to the browser to be rendered. These vector tiles are rendered at 512x512 pixels – 4 times as big as the classic raster map tiles that appear on many legacy maps. It takes approximately 4 tiles of this size to cover the average screen.
Supporting raster fallback
While we hope all of our users can migrate to vector maps, we recognize that many web maps are still on the older, raster tile-based infrastructure. So we created a fallback API for our new styles – users can create a style in Mapbox Studio and create raster map tiles to use in Mapbox.js, Leaflet, and other online tools like ArcGIS Online.
By default, we serve these raster tiles at 512x512 pixels. Fast loading 512x512 pixel map tiles are key for both mobile and Retina displays. High resolution displays are more pixel-dense and getting larger, so maps need to scale to ensure fast loading and crisp display. 512x512 pixel tiles also cost fewer bytes in size over the network, allowing your map to render faster on a low bandwidth network.
A request for a 512x512 pixel tile:
https://api.mapbox.com/styles/v1/mapbox/streets-v9/tiles/0/0/0?access_token=access_token
Supporting legacy systems
Some online systems that consume raster map tiles do not support 512x512 pixel tiles, so we have also added support for 256x256 pixel tiles to this API. Now your maps can be integrated seamlessly into online web mapping systems like ArcGIS Online and CartoDB.
A request for a 256x256 pixel tile:
https://api.mapbox.com/styles/v1/mapbox/streets-v9/tiles/256/0/0/0?access_token=access_token
Retina too!
Both of these tile fallback API endpoints also support Retina-quality images, so your maps can be crisp and beautiful on every type of display.
Requests for Retina tiles:
https://api.mapbox.com/styles/v1/mapbox/streets-v9/tiles/256/0/0/0@2x?access_token=access_token
https://api.mapbox.com/styles/v1/mapbox/streets-v9/tiles/0/0/0@2x?access_token=access_token
Try it out!
Check out the documentation on rendering a style as a raster tile. Check out our examples of using raster tile fallback using L.mapbox.styleLayer() with Mapbox.js and using raster tile fallback with Leaflet. For more info on how Mapbox is committing to interoperability, check out Mapbox Esri Connect.