What are vector tiles and why you should care

Published in

MapTiler Blog

4 min readFeb 7, 2019

Vector tiles are becoming a new trend and most likely the future of map publishing. What is the technology behind and how can you adopt it already today?

Raster tiles, vector tiles and what is the difference

Traditionally, web maps were based on raster tiles technology. It was a set of squared images placed next to each other, each with a fixed geographical area and scale. Together they were creating the whole world, but only tiles you were actually browsing were shown and the rest was delivered to your browser when you changed the position or zoom.

A more detailed guide about raster tiles can be found in this document.

Vector tiles, which were introduced later, also deliver data which are divided into roughly squared tiles. But there are no raster images, only pre-generated vector data which are present on the requested area (those map element which overflows current tile are cut with a certain offset, which is essential when connecting tiles together). Vector tiles are rendered on the client side with a style, which is a small text file saying which defines map elements look (e.g. the road should be a solid red line, which should be placed on top of all map elements). The style also says if the map element should be rendered, what font should be used for a label and in which language this label should be rendered. This gives more opportunity to change the map on-the-fly with minimum resources.

Vector tiles are transferred over the web in the form of packed geographic data in vector format split into squared tiles.

Because of this flexibility and a possibility to render raster tiles from pre-generated vector tiles on-request if needed, most of the big players in the mapping industry already switched.

Vector tiles

Pros:

Smaller data size and therefore lower disk space requirement
Lower bandwidth consumption
Faster generating time
Better user experience — smooth zooming
No need for zoom levels — users zoom and pan throughout all scales
De-facto mobile standard
Easy customization — with one small text file, you define how the map should look like, what font should be used, language for map labels and even hide specific map elements — everything on-the-fly

Cons:

The map is rendering on the client‘s side and requires a bit more powerful hardware
Data are generalized and therefore not suitable for direct edits

Raster tiles

Pros:

Suitable for raster data like satellite/aerial imagery
Lower requirements for end-users hardware
Still a bit better support in web JavaScript libraries and desktop GIS software

Cons:

A bigger size of each tile and data on servers
Takes more time to generate
Slower loading disrupts the user experience when moving around the map

It is possible to mix raster tiles with vector tiles and make the best usage of both, e.g., satellite map (raster tiles) with an overlay of streets with labels available in many languages (vector tiles)

Satellite map of Europe with Korean labels — the same tiles can be used with any other language — without a need to render tiles again. There is only a need to make a small change in the style, which is a one-line change in the text file. This change can also be done on-the-fly from a drop-down menu. Test it on MapTiler.com homepage.

Generate own vector tiles

If you have any data in vector formats, you can easily generate vector tiles out of them using MapTiler Desktop. This functionality is available since the 10 version which was released recently.

You simply drag and drop your data in Shapefile, GeoJSON or another vector format into MapTiler Desktop, adjust final map properties if you like to and select output format. The map can be created in MBTiles or Folder structure designed for quick serving on the web without the need for additional server software. The whole process is described in this how-to.

You can try it with sample data of New York City subway stations and subway lines.

Supported web frontend libraries and mobile SDKs

Despite a relative novelty of vector tiles, they are already supported by many JavaScript libraries:

Mapbox GL JS
OpenLayers with vector tiles
Leaflet GL

Mobile SDKs are supported as well as loading vector tiles in desktop GIS software like QGIS, ArcGIS and others. Read this article for an exhaustive list of supported applications.