Vector vs Raster Maps
Should you use raster maps or vector maps? How do they compare? Are raster maps outdated technology, and what are the performance characteristics of vector maps?
We’re regularly asked these questions by our customers. So here’s our answers, in detail, based on our own research and experience. We’ll have a look at vector and raster maps, the differences between them, and when you might use one, or the other, or even both.
First, let’s get some technical terms clarified:
- Raster tiles are rendered server side, and delivered over the internet as PNG (or JPG) images
- Raster maps are the end result of using raster map tiles joined together
- Vector tiles are compressed raw map data files, which are delivered over the internet and can then be rendered client-side
- Vector styles are the drawing instructions to turn raw vector tiles into a visible map, and they control the client-side rendering
- Vector maps are the end result of using vector styles to display the data from vector tiles
Can vector and raster maps look the same?
Depending on the exact technology used, it’s almost impossible to make maps made from vector tiles and from raster tiles look exactly the same.
This is rarely discussed, but might be important for your use case. It often means there are decisions to make, and tradeoffs to consider, when choosing between them.
What are raster tiles?
Raster tiles consist of pre-rendered images which are then stitched together on the client side. They can be zoomed and panned but not styled client-side.
Although server-side map tiles like this are less flexible and interactive than vector maps, they have the advantage of being beautifully detailed, something which vector map tiles still find challenging.
We take advantage of extra processing power on the server-side to use additional drawing effects and details on raster maps.
We offer raster tiles through our Map Tiles API.
What are vector tiles?
Vector tiles are a lightweight and flexible way to navigate global and local detail on mobiles or web browsers.
They are delivered as compressed raw data, and rendered on the client side, making them a fast and efficient way to deliver map data over the internet.
Vector map tiles can also be used to build client-side interactivity, making it easy for end-users to zoom, tilt and pan, and click on features shown on the maps.
We offer vector tiles through our Vector Sources API and vector styles through our Vector Styles API.
When would you use vector and raster maps?
Although we’re excited about the new possibilities offered by vector maps, we also see the value of raster maps for most use cases.
As mentioned, it’s currently impossible to make vector and raster maps look exactly the same for any one map.
Performance characteristics of vector maps
One key topic is performance. Vector maps are being drawn and redrawn continuously on the device, within a certain frame rate. This means that the vector styles can only have so many lines and details shown at any one time.
Simple drawing approaches, such as using dashed lines for footpaths, are surprisingly performance-intensive. These limit the choices in cartography.
Text rendering is much more primitive using current vector map rendering libraries. For example, some South-East Asian languages require complex text layouts (known as shaping). It’s not yet possible to do this accurately or in real-time. Even for other languages, there’s no kerning available, so the spacing between letters can look odd.
Drawing translucent lines, and certain other composition effects, are also difficult for vector maps or simply not available. We usually use these effects where it can help provide clarity in our cartography.
Designing what to put inside vector tiles is a fine balancing act between technical performance and user-friendly, practical design. The more information that we put inside the vector tiles, the more details we can show on the maps. However, the larger the data transfers, the slower the rendering. So there are difficult trade-offs to be made here too.
We do our best to maintain curated detail, points of interest and user-friendly design on our vector maps. So we ensure that ponds look like ponds rather than blue squares, while forests have accurate outlines rather than looking like disconnected triangles.
Performance characteristics of raster maps
Raster maps are, of course, not without their own limitations. The most notable of these is that they are only generated for a single viewing direction (i.e. north-at-the-top), and only for a fixed number of zoom levels. Transitioning between zoom levels isn’t smooth, and every zoom level is another set of images to download.
Use cases for vector tiles
Client-side rendering means smooth panning and zooming. It also means end-users can rotate and tilt maps. End users also don’t need to download thousands of high-zoom images for offline mapping.
Mobile apps and web apps
Vector tiles are ideal for end-users who want to spin a map around using the compass or to face their direction. This can be particularly useful for people who are walking/hiking/cycling etc.
Websites with animations
Smooth panning and zooming can make for a better user experience for B2B customers who show maps on sites with animations.
Offline mapping
Vector map tiles can also work well for offline mapping. With raster map tiles, you have to pre-download map images for every zoom level required. To ensure the end-user can see every detail throughout the downloaded area – like at complex junctions, or in busy shopping areas – you might need to pre-download hundreds of megabytes of images. That takes up space on end-user devices.
With client-side rendering, the same vector tiles can be used for a range of zoom levels, allowing users to zoom right in without requiring any additional map data.
Use cases for raster tiles
Server-side rendering has a number of advantages. It’s ideal for providing end-users with detailed maps. It’s also simple to implement. All the work is done server side, so your developers just need to configure their map toolkit to use our API, and everything else works seamlessly.
Simple implementation
Raster tiles are ideal for developers who are looking for a straightforward implementation. Every mapping library available today, in every front-end language, has built-in support for raster maps. There’s no additional programming or debugging involved. Raster tiles are ideal when you want to spend developer time on other features of your project.
Detailed maps
When end-users need to see highly detailed maps, for example for route and journey planning, raster tiles are a good choice. Tasks like these, along with orientation and local area context use-cases, benefit from the extra details shown on raster maps.
Low-powered devices
Raster maps also work well on low-powered devices, providing a consistent performance when panning and zooming. The map images are shown almost instantaneously, and they use less battery power than rendering vector tiles.
Choosing which type of map to use
If your end-users need maps to be interactive, for example, then your choice is straightforward. Vector map tiles provide what you need.
This is also the case if you need maps to be globally accessible, showing labels in the correct languages. Raster map tiles would be your best choice.
However, if you’re not sure which map technology is best for your project, then we’ve got you covered. You’re welcome to sign up for a free Thunderforest account. You can try our raster and vector map tiles in your production environment, and see which works best for you.
You can use either or both. You can change between them at any time.
Thunderforest and maps
Here at Thunderforest, we provide maps, and we’re focussed on providing the best maps for your end-users. As such, we’re agnostic about the technical implementation details, whether that’s raster, vector, or anything else.
You can rely on us for thoughtful, accurate advice.