Digital mapping’s dynamic makeover (part 1 of the Dynamic Tiling saga)

Over the coming weeks I’ll be talking about a new platform we’re calling the Dynamic Tile Service which delivers our high quality map tiles – in a jiffy.

As its name suggests, the Dynamic Tile Service creates map image tiles at the time when they are requested (dynamically) – rather than returning them from a pre-built cache of tile images. This has allowed us to add some pretty nifty features including the ability to support:

  • Custom styles;
  • Custom datasets; and,
  • A detailed view of thousands of map features right in the browser – instantly.

So what does all this really mean? Well, I’ll break it down for you.

Quickly creating custom map styles and colours

Traditionally map styles have been time consuming to change as tile images need to be re-generated. The Dynamic Tile Service does not have this issue; as it can generate tiles instantly and also apply custom colours and styles in real-time.

Quickly creating custom map styles and colours

Dynamic Tiling supports custom styles for map attributes such as roads or parks, which are applied when the map tile is generated. This means custom colour schemes and/or styles that show only some map attributes (e.g. main roads only) can be applied to tile sets quickly.

So now when you need a clean greyscale map for data visualisation, a map with brand colours to match your website, or a map that only contains certain features such as main roads – the Dynamic Tile Service is up to the task.

Under the hood

This service uses a forked version of TileMill 2, an experimental open source tiling server that utilises a node.js web service, the Mapnik C++ map rendering library, a PostGIS database powered by Shape files, and a new map styling language called CartoCSS which can be applied to the map images at request time.

Under the hood

As we have discussed already, old tile servers will serve tile images from a cache of pre-generated static tile images stored as files. The dynamic tile server generates the image at request time. This is illustrated in the diagrams below.  

Traditional Tile Server Request Flow

Traditional Tile Server Request Flow

Dynamic Tile Server Request Flow

Dynamic Tile Server Request Flow

CartoCSS for styling image tiles in real time

All of these real-time styling changes that I have been discussing (colours, styles, etc.) are applied using CartoCSS style sheets. CartoCSS is a fork of the Cascadenik styling language for the open source mapping library Mapnik. It is read and converted to tile image styles by the Mapnik library. You can read more about it on the CartoCSS github page here:

The syntax for writing these styles looks a bit like CSS which many web developers will be used to. The following example outlines how a style sheet would look for colouring the base map green (#97BF0E) and the countries white (#FFFFFF):

Map snippet 1 Map snippet 2

Because of its simplicity, CartoCSS allows our team to quickly produce custom styles and colours for our maps without the hassle of having to define large XML style sheets or fiddle with complex program dialogues.

So, that‘s a quick overview of the styling capabilities of the new Dynamic Tile Server. In the next post, I’ll be touching on adding custom point, polygon, and polyline datasets to tile images in real-time.

Stay tuned…

In the meantime, if you have any queries regarding this service or would like to know more, please get in touch.

Matt B