What are vector tiles and how are they used?

You can think of a vector tile as a packet of data that contains geographic information about a square-shaped area. Depending on the zoom level, a single vector tile may cover the entire world, or just a cluster of shops. These tiles are sent over the internet from tile servers to be rendered on websites and web applications. Often, a group of tiles is requested at the same time to form a complete map.

Advantages

Historically, raster tiles have been used with geographic information systems (GIS). Just like vector tiles, raster tiles contain geographic information over an area. However, raster tiles are pre-rendered graphics—think, a JPEG image. Raster tiles cannot be manipulated and styled dynamically after they are served by a tile server. Vector tiles are a sort of successor to raster tiles, as they do allow for manipulation after they are served.

Consider the below example comparing vector tiles (left) vs. raster tiles (right), positioned above College Park, Maryland. You will notice that the vector half renders much sharper. Try zooming in on each half of the map. Text and symbols scale smoothly on the vector half. On the raster half, the same text and symbols need to reload at discrete sizes.

Generally, vector tiles bring a number of benefits:

• Size: the data contained in a single vector tile is often much smaller than a fully-rendered graphic, as is the case in a vector tile. The vector data can also more easily be compressed in both storage and transmission, further reducing file size.
• Speed: as a result of the file size reduction, maps using vector tiles often load faster than maps using raster tiles.
• Flexibility: because the graphics themselves are not transmitted within vector tiles, the styling and display of these tiles can be dynamically controlled on the front-end. For example, the font and color may be varied on a web map with the same set of underlying vector tiles. With the prevalence of fast processors and efficient browsers, these manipulations happen instantaneously.

There are some instances where raster tiles have performance benefits. When serving raster data, such as a satellite photo, the raster tiles may themselves be satellite imagery. In fringe scenarios where the client's hardware is very limited, raster tiles may be more effective. However, as Clockwork Micro's services allow for dynamically displaying and styling data, vector tiles are the better choice.

Standards

The dominant standard for vector tiles is the Mapbox Vector Tile specification. This is an open standard, available on GitHub. Within this standard, tiles are packaged in protocol buffers, which is a data format used to efficiently serialize structured data. In the case of vector tiles for a particular map, the data is structured as all tiles contain geographic information as well as a shared set of additional metadata. These tiles generally have a file extension of .mvt or .pbf. All of Clockwork Micro's vector tiles use this specification.

Our tile servers expose vector tiles using the XYZ URL convention: the suffix of the URL is in the form /Z/X/Y.mvt. A combination of Z, X, and Y parameters refers to a (roughly) square-shaped area of the world.

At zoom level 0, the entire world is contained within a single tile. It's important to tile for lower zoom levels to avoid massive network requests when just a small portion of the world is required. The number of tiles representing a single zoom level scales by a factor of four as zoom levels increase, as illustrated in the above graphic.

Thus, as you request more specific regions of the world, the corresponding XYZ URL becomes longer. For example, the URL /17/37492/50144.mvt would reference a very narrow portion of the National Mall in Washington, D.C.

Luckily, client-side libraries exist to aid in automatically constructing these URLs as users pan over web maps. At Clockwork Micro, we use a combination of MapLibre and Leaflet to display vector tiles in our web applications.