Vector tiles introduction
A Vector tile is the vector data equivalent of raster image tiles for web mapping. Vector tiles contain all the strengths of tiling: optimized for caching, scaling, and serving map imagery rapidly, allowing you to make huge maps quickly while offering full design flexibility.
This guide describes how vector tiles work in web maps.
But why use vector tiles over raster tiles?
The two main reasons vector tiles may be useful for your implementation are as follows:
- Efficiency, especially with large data sets
- Smoother animations from user interactions
Vector tiles scale infinitely and allow users to zoom in and out of maps without having to render new sets of images and risk their map's fidelity as a user roams around the map.
This allows for smoother animations and faster load times, because your map is using more light weight data. The style is calculated and rendered directly into your browser, as opposed to storing and rendering images, allowing you to use and store less data in your implementations.
For example, vector tiles would store data points instead of large image files, allowing you to create a similar environment without using expensive tactics.
Why not to use vector tiles?
If you need realistic maps, for example, showcasing satellite data or to render specific images instead of calculated routes and maps, we would recommend you use raster images instead.
Here is a side by side comparison of the two methods:
Vector Tileset
Raster Tileset
How web maps work
Traditionally, maps are created from image tiles. Like for instance this PNG image tile depicting the corner of lower Manhattan with roads, building footprints, and parks:
To get the underlying vector tile data that makes up this image, you can request it specifically:
http://a.tiles.mapbox.com/v4/mapbox.mapbox-streets-v8/14/4823/6160.mvt?access_token=YOUR_MAPBOX_ACCESS_TOKEN
As the name suggests, vector tiles contain vector data instead of the rendered image. They contain geometries and metadata — like road names, place names, house numbers — in a compact, structured format. Vector tiles are rendered only when requested by a client, like a web browser or a mobile app. Rendering happens either in the client (Mapbox GL JS, Mapbox iOS SDK, Mapbox Android SDK) or dynamically on the server (map API). Read the Mapbox Vector Tile Specification to learn more.
See the Map design guide for more information on how map styles work. All our template map styles are created using some combination of our Mapbox tilesets, which are described below.
Benefits of vector tiles
Vector tiles offer several important advantages over fully rendered image tiles:
- Dynamic styling. As vectors, tiles can be styled when requested, allowing for many map styles on global data. Using Mapbox GL JS or the Mapbox Maps SDKs for Android and iOS, you can adjust your map's appearance dynamically, without having to download new tiles.
-
Size and speed. Vector tiles are really small, enabling global high resolution maps, fast map loads, and efficient caching. The Mapbox cartographers responsible for Mapbox-provided vector tilesets worked to balance between level of detail and performance.
-
Smooth interactions. Because all your map data is loaded in the map client, you can re-render the map quickly, enabling smooth zooming, tilt, and rotation.
-
Dynamically querying. You can use this feature to access your map data's properties right from your vector tileset.
Mapbox Streets, our global basemap, is entirely made of vector tiles.
Open standard
Vector tiles are an open standard under a Creative Commons Attribution 3.0 US License. We support vector tiles across our products and there is a large list of vector tile implementation by other vendors.
Read the Mapbox Vector Tile Spec on GitHub and get in touch with us there with feedback and improvements.