Vector Tiles

If you’ve ever zoomed in and out of a map quickly, you probably noticed little blank squares that filled in like a mosaic. This is a map tile. Most interactive electronic maps are constructed from tiles, which are then stitched together to form a complete interactive map.

Map tiles for interactive maps come in two main flavors: raster and vector. Raster tiles have been around for decades, but are gradually being replaced by a vector tiles, a newer format which has unique advantages for most applications.

Whether you’re a seasoned developer looking to improve your maps or planning your first maps integration from scratch, this guide is for you. Let’s get started!

Looking to migrate your Maps to vector?

​

Background

​

What are raster tiles?

As we mentioned in the intro, map tiles can be broadly classified as either raster or vector. Raster tiles are the simplest to understand, as they are just PNG or JPG images that get stitched together in a grid, so we’ll start here.

​

Advantages

Raster tiles have been around for a long time, and even today, they have a number of unique advantages.

• Simplicity - Just about every device can render a PNG or JPG image, and it’s very easy to build a performant renderer around these. Additionally, raster tiles don’t require any other resources (such as fonts or icons) or special logic to render.
• Specificity - Map tiles simplify a lot of data into a form that’s useful for the user. If you are working with a minimalist map style (like our Alidade Smooth family), raster tiles can be more bandwidth efficient, as they only contain the raw visible pixels.

​

Limitations

While raster tiles are battle tested and supported pretty much everywhere, they also have some inherent limitations.

• Inflexibility - You cannot change much about raster tiles. If you want to hide a certain layer, change the language of labels, or do just about anything else to alter the appearance of the tiles, you’re out of luck.
• Scalability - Raster map tiles cannot be scaled up and down, meaning you need to send 4x as many pixels over the network for your maps to look good on modern “high DPI” displays. This problem also shows up when zooming in to a raster map as the tiles become blurry until the new ones are loaded.

​

What are vector tiles?

Vector tiles are a newer development, and are broadly viewed as the future of digital interactive maps. Rather than pixels, vector tiles contain a mathematical description of the geometry as well as structured data about each feature on the map.

​

Advantages

• Flexibility - Vector tiles aren’t just raw pixels; the actual data is preserved in the tile. This means that you can seamlessly change the language of text labels, change the color scheme to suit your brand, or even switch styles dynamically based on the time of day or the user’s device preferences. You can even completely change the camera angle for a 3D perspective.
• Scalability - Since vector shapes are expressed in mathematical terms, they can be scaled up and down smoothly. For example, when the user zooms in, they’ll get a smooth scale-in without any pixelation. This is especially relevant on mobile devices, where users are used to continuous zoom for most applications rather than discrete steps.
• Cost - Many vendors, including Stadia Maps, charge per tile request. Switching to vector tiles can mean significant savings, as vector tiles cover a larger area. On average, we see users switching to vector making approximately 60% fewer tile requests.

​

Limitations

• Complexity - While vector tiles provide a lot of flexibility, this comes at the cost of complexity. Tiles need to be rendered client-side, and this may create performance concerns for older or embedded applications. Additionally, since vector maps require additional resources to be present, the initial map load typically involves a greater number of network requests.
• Size - For applications only requiring a low level of detail that don’t utilize any of the 3D perspective features of vector tiles, the vector tiles can weigh a bit more. However, this is somewhat offset since all zooming past level 14 can use the information in the z14 tile.

​

Which should I use?

We’ve covered a lot of ground. To summarize, vector tiles offer greater flexibility, look great on any screen, and typically reduce costs by around 60%. However, if your application is targeting older devices or doesn’t need a high level of detail (for example, our Alidade Smooth and Alidade Smooth Dark styles), raster tiles are not necessarily a bad option.

Now, let’s dive into some practical tips on switching to vector tiles.

​

How can I switch to vector tiles?

Switching is easy. The first step is to select a style from our gallery (you can also build your own). You’ll want to copy the vector style URL. Let’s dive into using vector styles with the most popular frameworks!

​

Switching to MapLibre

MapLibre provides the greatest flexibility and feature support when it comes to vector tile rendering. If you want the best looking maps, a 3D camera, or dynamic styling, MapLibre is the way to go.