Why you should use vector tiles rather than raster tiles for your maps

Do you need an interactive map but don't know what type of tile to use? In this article we list the three main reasons why it may be more interesting for you to use vector tiles rather than raster tiles.

Better display quality

Raster map (top) vs. vector map (bottom)

Unlike raster, vector tiles are based on vector shapes, which are geometric objects defined by coordinates and properties. These vector shapes can be displayed at different sizes and resolutions without losing quality.

Meaning that they are generally better suited to high-resolution screens and retina display displays because they are rendered in real time by the browser rather than loaded from a still image.

And as you can see in the image above, there is also less data to download, making the map more readable and the display time faster.

Smaller file size and better performance

Raster map representation that takes longer to load

Vector tiles are lighter in file weight than raster tiles because they do not require storing a full image for each zoom level.

Additionally, they do not require additional processing to be displayed at different sizes or zoom levels, making them generally faster to load and display.

For example, from zoom 16 we use something called over-zooming. This method returns live vector data to the browser, allowing it to continue to display vector shapes and data that are more detailed. There is therefore no download delay, unlike raster where you always have to load tiles.

Possibility of customisation

The Style Manager in the Jawg Lab which allows you to customise your maps

Your tiles can be easily customised by changing their style and data layer(s). This allows you to create unique maps tailored to your needs, and choose the colours, fonts, symbols, transparency levels and more that best suit your project.

Once your new style is published, the update will be immediate with vector tiles whereas with raster tiles, changes may take time to appear due to server and browser side caches.

Example of a raster map that has undergone changes but is not updating all tiles at the same time.

It's important to note that raster tiles also have their own benefits, and may be better to use in certain situations.

For example, raster tiles may be more suitable for displaying high-resolution images or large-scale maps because they can store more detail in each tile.

So, what will you choose for your map project? Vector or raster? :)