Raster tiles – a quick overview

Raster tiles consist of pre-rendered images which are then stitched together on the client side, in a grid arrangement, to show a map at various zoom levels.

Map tiles are typically 256 × 256 pixels, or 512 × 512 for high-res (retina) tiles.

How raster tiles work

Raster tiles are organised in a grid addressed by three numbers: zoom level (z), column (x) and row (y). A mapping library (like Leaflet or OpenLayers) works out which tiles cover the area on screen, then requests each one from a URL built from those numbers. Thunderforest’s Map Tiles API follows the standard Web Mercator tile format:

https://api.thunderforest.com/{style}/{z}/{x}/{y}{scale}.{format}?apikey={apikey}

For example, a standard OpenCycleMap tile is requested like this:

https://api.thunderforest.com/cycle/{z}/{x}/{y}.png?apikey=<insert-your-apikey-here>

Your mapping library fills in the z, x and y values automatically as your customers move the map. You choose the map style and format.

What is the Web Mercator tile format?

Almost all raster tiles, including Thunderforest’s, use the Web Mercator projection (EPSG:3857). It shows the world as a square, which allows it to be divided neatly into tiles. It’s not perfect, but having a standard allows for coherence across different libraries and platforms.

At zoom level 0 the whole world fits on a single tile. Every step up in zoom splits every tile into four. Our raster tiles are available from zoom 0 to 22.

What are high-resolution (retina) tiles?

Standard tiles are 256 × 256 pixels. On high-resolution screens, such as most phones and modern laptops, these can look slightly blurry. High-resolution tiles are 512 × 512 pixels and show exactly the same features and labels, so the map looks sharp. You can request them by setting the scale to @2x.

https://api.thunderforest.com/cycle/{z}/{x}/{y}@2x.png?apikey=<insert-your-apikey-here>

High-resolution tiles are larger files, so it’s best to serve them only to screens that need them. Some mapping libraries, including Leaflet, can detect retina screens and do this automatically.

Key aspects of raster tiles

Here are three benefits of raster tiles, and some of their limitations.

Simple implementation

Raster maps simply show .png files on screen, which requires almost no processing power.

Since every modern mapping library across all front-end languages includes native support for raster maps, you can integrate high-quality visuals without the need for custom programming, complex debugging or heavy battery use.

Here’s a complete example using Leaflet:

const map = L.map('map').setView([52.31, 6.93], 13);

const tileUrl =
  'https://api.thunderforest.com/cycle/{z}/{x}/{y}{r}.png' +
  '?apikey=<insert-your-apikey-here>';

const attribution =
  'Maps © <a href="https://www.thunderforest.com">Thunderforest</a>, ' +
  'Data © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap contributors</a>';

L.tileLayer(tileUrl, {
  maxZoom: 22,
  attribution: attribution
}).addTo(map);

The {r} placeholder tells Leaflet to request @2x tiles automatically on high-resolution screens.

For more detail, see our Leaflet tutorial and the Map Tiles API documentation.

Unmatched detail

Companies that provide raster tiles can incorporate intricate drawing effects and textures that would be intensive for a browser or mobile device to process in real-time.

Our Outdoors style, for example, combines elevation colouring, hillshading and contour lines to make hilly and mountainous terrain easy to read at a glance. You can read more about the thinking behind it from our founder and cartographer, Andy Allan.

Performance stability

Because the heavy lifting happens server-side, the client-side experience remains smooth and consistent across various hardware.

Vector maps, by contrast, are drawn and redrawn continuously on the device, so their performance depends on the hardware they’re running on. Raster maps avoid this: once a tile is loaded it doesn’t need to be redrawn. It can simply be moved around on screen, keeping panning and zooming smooth and battery use low, even on low-powered devices.

Limitations

Raster tiles are pre-rendered for a fixed set of zoom levels, with north at the top. End-users can pan and zoom the map, but the transitions between zoom levels aren’t smooth, and the map can’t be rotated or tilted.

The map’s appearance is fixed on the server, so it can’t be restyled client-side. Switching to a dark mode or changing the label language, for example, needs a separate set of tiles.

Since the tiles are just images, end-users can’t click on the roads, buildings and other features shown in the map. You can still add your own markers and pop-ups on top of it, though.

Are raster tiles the same as map tiles?

Strictly speaking, “map tiles” covers any map that’s split into a grid of tiles, so it includes both raster and vector tiles. In practice, though, “map tiles” usually means raster tiles, since they’ve been around for much longer.

We follow that convention on our site. Our Map Tiles API serves raster tiles, and our vector tiles are available through our Vector Sources API.

Downloading raster tiles

Some tile providers’ terms only allow tiles to be shown while the user is online. The tiles can’t be stored, so the map disappears as soon as the user loses their connection.

Other tile providers, including Thunderforest, allow tiles to be stored for offline use, in two ways.

Caching tiles that have already been viewed

Your app can keep the tiles that a user has already seen, and show them again later when the user is offline.

Bulk downloading

Your app can also download tiles that the user hasn’t seen yet, to prepare areas in advance for offline use. For example, a hiking app could download all the tiles along a planned route before the user sets off.

Thunderforest permits bulk downloading on our Small Business plan and higher.

OpenStreetMap and raster tiles

The standard map on openstreetmap.org is itself made of raster tiles. They’re served by the OpenStreetMap Foundation’s own tile servers, which run largely on donated hardware and hosting, and are intended mainly for OpenStreetMap’s volunteer mappers.

So while you can use the OpenStreetMap tile servers for demos and other light use, they aren’t suitable for commercial projects. For those, you’ll usually need a commercial provider of map tiles. Alternatively, you can run your own tile server, although that’s a significant undertaking.

Raster vs vector – which is better?

Whether you use raster or vector tiles depends on your use case.

If you need smooth zooming, rotation and tilting, or want your customers to be able to click on features in the map, then vector tiles would be best.

If ease of implementation and consistent performance are your priorities, then raster tiles are an excellent choice.

Read our article about vector vs raster maps

Get started today

Test out your ideas with our free plan. Paid plans from $125 per month.