Selling localisation through illustrations… and of course a map!

Recreating TV maps effortlessly in TileMill – Part Two

So for this second post on maps from TV, I have looked at the map used in TSB’s ‘The new Plus Account’ advertisement as part of their Local Banking marketing campaign.

2. TSB Plus Account

TSB wish is to be seen to be bringing localisation back to British high street banking. To help them do so, they have employed the services of advertising agency Joint of London who used graphic design and illustration company studio aka to create the illustrations for the current advertising and marketing campaign.

So before the new Plus Account advert, the initial message was sent out in a two-and-a-half minute video known as ‘The Story’. This was a collaboration between Studio AKA’s Marc Craste and Joint’s Damon Collins and was intended to reflect the historic values of the bank’s founder, Rev. Henry Duncan, and his drive to enable ordinary working people to overcome poverty. The aim being to reflect the values of the bank, its historical significance and its relevance today. Joint briefed Studio AKA that they wanted something epic, cinematic and uplifting, and yet because the whole purpose of the bank is to support local communities, it also needed to feel quite intimate.

TSB — The Story

Whilst I could happily discuss the pros and cons of the huge dependancy of the illustrations on the campaign and its message, what I wish to focus on here is the fact that in the TV part of the campaign, the new Plus Account advert, Joint felt the need and/or understood the value of panning out to a map of the country.

You may notice that the video for ‘The Story’ finishes by panning out to a blank canvas. I rather suspect that TSB and the agencies realised afterwards that this did not fully portray the message they wished to give. Indeed an interview the video’s director Marc Craste gave with D and Ad suggests that the intention was for localisation to be seen in the context of the bigger picture. Craste explains, ‘A bit of reading up on the bank’s founder sparked the initial idea, suggesting the picture of a sober, Georgian man at his desk in an empty field, determined to do something for the poor, and the bank subsequently, and quite literally, building around him.’

Maybe I have read to much into it, but to me this suggests the idea of localisation being at the centre of growth. I imagine this to be the reason why in the follow up advertisement for the new Plus Account, they decided that rather than panning out to a vast emptiness, it would be far more meaningful and more in tune with their message, to end by panning out to the country — a picture (or quite literally an illustration) of local life with its own place and importance in the context of a national organisation — thus giving us the ‘map’.

TSB — the new Plus Account

So let’s consider the map. It is a very generalised version of the British land mass with a pattern of trees and people which begin as animations and finish as still illustrations.

Screen capture © Christopher Wesson 2014
© TSB 2014

To recreate this in TileMill would not be at all easy; perhaps not even possible. So instead what I decided to do was to create or obtain the illustrations in Adobe Illustrator to create a set of symbols and to create a generalised land polygon in a GIS. Also in a GIS I created a point layer to act as georeferenced placeholders for the symbols.

To begin with, I downloaded some free vector illustrations from the internet and edited them in Illustrator to serve my needs, e.g. simplifying them, removing unwanted backgrounds, resizing them and generally making them look a bit more like the ones in the original advert. I saved all of the symbols as scalable vector graphics (SVG) files.


The generalisation of Great Britain was a little more problematic. I did try QGIS and this really highlighted its weaknesses and why at work I still do most of my cartographic filtering and geoprocessing with Esri ArcGIS. Generalisation options in QGIS are currently very basic.

So in ArcMap I loaded in a small-scale polygon for Great Britain that I had created from OS OpenData. Although you could perhaps more easily use one from Natural Earth or EuroGlobalMap. I then applied the simplify polygon and smooth polygon tools until I had the shape I was looking for. To give the illusion of perspective as in the original, I simply changed the projection of the shapefile.


Next I manually created a points shapefile, placing the points where I wished the symbols to be centred. I added a field called ‘Type’ and populated this will ‘tree’ or for the other illustrations I used a numbering system from 1 to 6.

I am happy to supply all of the above shapefiles and SVGs on request; Just contact me.

So, opening a new project in TileMill, we can start to write some simple CartoCSS.

First of all, a new project will by default give you the code for a background fill for your map. So to begin with I simply changed this to white, so your code should looks like this (note that #fff is just CSS shorthand for #FFFFFF, which is the hexidecimal RGB value for white):

Map {
background-color: #fff;

Next, I clicked on the layers button (bottom left of the screen) and browsed to my land polygon shapefile to add.
I called this layer ‘Land’. Then in the code panel, I added the following to fill it with a colour similar to the original (note that polygon-smooth just improved the smoothness of the anti-aliasing, it is not overly important).

#Land {
polygon-fill: #e8e3cc;
polygon-smooth: 0;

Then I added the points shapefile as a layer called ‘Points’. Again use the layer button (bottom-right), name your layer, browse to your points shapefile and click add.

The first line after the bracket in the CartoCSS code is simply to allow the SVG symbols to overlap. Despite cropping my SVGs quite tightly in Illustrator, I found this step in TileMill necessary.

Next we use square brackets to style data based upon a field and attribute. So the square bracket contains your filter or query, for example ‘Type=”tree”‘. Then after this we can set the style inside a pair of curly brackets as usual.

#Points {
point-allow-overlap: true;

[Type = "tree"] { point-file: url(images/blue-tree.svg); point-transform:”translate(10,-20) scale(.225)”; }
[Type = "1"] { point-file: url(images/park01.svg); point-transform:”scale(.09)”; }
[Type = "2"] { point-file: url(images/park02.svg); point-transform:”scale(.09)”; }
[Type = "3"] { point-file: url(images/park03.svg); point-transform:”scale(.07)”; }
[Type = "4"] { point-file: url(images/park04.svg); point-transform:”scale(.1)”; }
[Type = "5"] { point-file: url(images/park05.svg); point-transform:”scale(.09)”; }
[Type = "6"] { point-file: url(images/park06.svg); point-transform:”scale(.09)”; }

Point-file with a url is the easiest way to call an SVG symbol. As in the previous tutorial, it is recommended that rather than full filepaths, it is better to put all of your symbols in a subfolder of your Mapbox project and call this folder images, e.g. C:\Users\Christopher\Documents\MapBox\project\TSB_map\images. This way you can set the url to be a relative path.

The next function I have used is point-transform which is the easiest way to resize your SVGs. I set them all to be roughly the same size in Illustrator by sizing each symbol to fit a common artboard size but this function in TileMill allowed me to refine these sizes by eye to give me the best visual representation.

Point-transform can also be used to offset using the command translate, I needed this for the trees because I had created points for the centre of the tree without thinking to take into account the effect of the shadow on the location of the centre of the symbol.

Before I share my output, I should mention the things that did not work properly.

First of all TileMill refused to honour my reprojection applied in ArcMap, not quite sure why, I suspect a bug because QGIS read it in just fine. Secondly, working with SVG in TileMill, just like SVG in many other software, is not without its problems. I would suggest from my experience that if you are making SVGs in Illustrator then save them as SVG1.0 with Style Attributes as shown below.


TileMill will crash if SVG file sizes are too large. For my tree symbol, I got around this by linking rather then embedding images but as you will see on the final output, it still didn’t manage to read it in correctly, omitting many of the glow effects and rather annoyingly ignoring the tree trunk component of the symbol!

My blue tree SVG as created in Illustrator © Christopher Wesson 2014
My blue tree SVG as created in Illustrator
© Christopher Wesson 2014

So was TileMill the best software for this map? No. While the ability to zoom may be useful, certainly as a static map there were too many limitations and I would have been better off creating it in a graphics package or even a GIS. Anyway, here is the output I did manage to get by using TileMill. What I think it does show is how easy it would be to use simple SVGs as point symbols in TileMill and how by doing this you can quickly add a more powerful visual to your map.

Final TileMill output © Christopher Wesson 2014
Final TileMill output
© Christopher Wesson 2014

More about the TSB advertising campaign:
D and Ad: TSB – The Story
Studio AKA: TSB campaign


Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>


Get every new post on this blog delivered to your Inbox.

Join other followers: