Last time we discussed about vector tiles and the benefits of using vector tiles in 2D GIS mapping. Since then, BHSoft has received many requests for further information and insights into this sector.

That is why this article will discuss a more basic point of view on tile and difference between raster tiles and vector tiles.

What is tile?

With many years of experience working with Open Street Map and Google Map APIs, BHSoft is highly aware of the tile concept as well as its role in map structure.

The Maps JavaScript API of Google Maps Platform uses four main coordinate systems: Latitude and longitude values, world coordinates, pixel coordinates and tile coordinates.

This article will only focus on tile coordinates whose role is to build tile map.

A tile map is a map displayed in a browser by joining dozens of individually requested image or vector data files over the internet.

The API cannot load all the map imagery instantly for the higher zoom levels. Instead, at each zoom level, it divides the imagery into a set of map tiles, which are logically put in an order which the application can understand. When a map scrolls to a new location, or to a new zoom level, the API decides which tiles are necessary and translates those values into a set of tiles to retrieve.

Let’s picture it in a very simple way:

Tiles Map Service divides your viewing screen into squares. Each square is assigned its own XYZ coordinates. Those squares form into a map for you to view, for example, to zoom in and zoom out a specific location on the map.

In this picture, each square presents a tile and dozens of tiles will build into a map at the location you are viewing.

Currently, the most popular map tiles are:

  • Raster tile
  • Vector tile

Definition of Raster Tile

Raster tiles are image based. Those maps consist of many map tile (in .png and .jpg form) placed next to each other, usually ordered in pyramid scheme. Open source engine such as Mapnik, in combination with Tile Cache software can produce raster map tiles out of any spatial data.

However, the problem lies in: rendering in real-time.

Rendering raster imagery is CPU and memory consuming. One solution is to render tiles in advance before streaming them from a server. This might work for deploying projects, but not for real-time rendering of  a dynamic GIS map that allows us to create and edit in a browser.

OpenStreetMap renders these tiles for client use. There is also render-on-demand. That means when a tile with a specific co-ordinate is not available yet, the server will have to render that image itself. The speed of rendering process will depend on:

  • Server configuration – This is necessary for rendering as well as performance tuning for map database.
  • Map database

Definition of Vector Tile

Vector tile is tile in vector form (mostly .pbf files). Map Client will use rendering engine to render the map for users to view.

Generally, all vector files have to be rendered before use and archived into a .mbtiles file. Mapbox have been using this method for quite a while.

Comparison between Raster Tile and Vector Tile

Raster Tile

Pros

  • Relatively fast loading, light weight.
  • Integrate with all platforms (both web and mobile).
  • Supported by multiple Map Clients.
  • Easy to cache on CDN (Content Delivery Network).

Cons

  • Doesnot allow dynamical styling. When editing a new style, users have to delete all rendered map tiles and start to render new style.
  • Lack of capability to interact with POIs (Point of interest) on the map.
  • Storage and time consuming in many cases. For example, when assigning language-specific for the map, users have to render another parallel version to do that.
  • Zooming in multiple levels often results in low-quality and broken images.

Vector Tile:

Pros:

  • Flexible with dynamic styling.
  • All information is included in tile.
  • Save time and storage. Vector tiles are only 20% – 50% in file size comparing to raster tiles.
  • Very smooth-zooming with high quality images.
  • No need for zoom levels - users zoom and pan throughout all scales
  • The pre-defined style allows easy customization with one small text file. User can decide the appearance of the map, the font should be used, map labels language, show/ hide map elements directly on-the-fly.

Cons:

  • The map is rendering on the client’s side and requires a bit more powerful hardware.
  • Data are generalized and therefore not suitable for direct edits.

In summary, in this article we have provided readers with the information on what tile really is as well as pros and cons of raster tile and vector tile. We hope you have adequate information to choose which tile will benefit you and serve your own map tiles the best.

Check our portfolio for more marvelous projects!