The Temporal Map

by Dave Barter on

Why we all need to be playing with vector tiles

Take a look at the map below, nice isn't it, but nothing that you haven't seen before. Now go away for a few hours and then return. I hope you'll notice that the map has changed. As the day's moved on so has the colour scheme with the background becoming darker as the light begins to fade. Also you'll see other features change colour. If you are time pressed simply click "Tour" and you'll see the map cycle through the hours.

(If you been taking any strange substances DO NOT click "Random")

This is a temporal map. A map that changes with time and one that's been inspired by the satnav devices in our cars that switch to night vision mode as darkness encroaches. We like our temporal map and think that it has many applications, changing its view and state as the day moves on.

For example; highlighting coffee shops in the morning and places to stay as the sun moves over the yard arm. Maybe warning us of roads that become busy during rush hours or pointing out areas of high crime as the sun starts to set.

As you can see these temporal maps could be pretty damned useful. So how does one construct such a map, it sounds really hard? Well we did it by getting to grips with vector tiles. Let me tell you a little bit about them.

The vector tiles 101

The maps we view in our browsers are usually made up of tiles. You can see this when your Internet connection is struggling a little and the map loads in rectangular pieces. These are the tiles. In the old days the tiles were simply a set of "pictures" that when stitched together make the whole map. The pictures are pre-rendered on the server and cannot be changed much when viewed in the browser.

Vector tiles work in a similar manner but are massively different. Instead of being pictures they contain coded representations of what you see on the map (features). This code tells us what it is and where to put the bits of it. So a road is a line string and the vector tile contains a list of points that we need to join up to make the line.

This gives us a lot more flexibility than pulling down a pre-rendered picture. We know we have to draw a line but its style is under our control. We can decide locally whether to make it red, green, wide, narrow or even whether to bother drawing it at all. These tiles also attach attributes to the features telling us what they are, so we know the difference between an A road and a cul-de-sac.

Next we can take advantage of something call overzoom. When you zoom into a pre-rendered tile the quality degrades as you are effectively increasing the size of the pixels. The solution is to pull another tile from the server more applicable to the new zoom level, which takes time, bandwidth and removes some smoothness from the process. Vector tiles do not suffer from this restriction as you already have the features so simply re-draw then to fit the zoomed in view. This is called overzoom and significantly improves the performance and user experience of maps taking advantage of vector tiles.

Finally, did I mention speed? Vector tiles are ususally a lot smaller than their pictorial cousins and as a result download a lot quicker. Many devices now have a separate graphics processor (yes even your phone) and technologies such as WebGL allow the rendering to happen in parallel to other computing tasks upon these processors.

Let your journey in vector tiles begin

Now you're starting to see why vector tiles make so much more sense. We have huge control over how the map is rendered and if we attach additional attributes we can make things really groovy. For example; building heights would allow us to render them in 3D.

Making vector tiles can be quite hard if you don't know what you're doing. Fortunately we do and as we're super nice we've open sourced our tile rendering workflow that allows you to do this from good old Ordnance Survey open data.

But if this is slightly out of your comfort zone, just ask and we'll make some for you. We're getting pretty good at it, especially winding in additional data to add value to the display.

Watch this space for our roads-with-traffic-data coming soon.

The Temporal Map

Contact us