The Underground Biography

.map {
width:100%;
height:100%;
}

https://tom-alexander.squarespace.com/s/ol.js

var pixelProjection = new ol.proj.Projection({
code: ‘pixel’,
units: ‘pixels’,
extent: [0, 0, 2012, 1423]
});
var map = new ol.Map({
controls: ol.control.defaults().extend([
new ol.control.FullScreen()
]),

interactions: ol.interaction.defaults().extend([
new ol.interaction.DragRotateAndZoom()
]),
layers: [
new ol.layer.Image({
source: new ol.source.ImageStatic({
url: ‘https://tom-alexander.squarespace.com/s/mytubemap49.svg’,
imageSize: [2012, 1423],
projection: pixelProjection,
imageExtent: pixelProjection.getExtent()
})
})
],
target: ‘map’,
view: new ol.View({
projection: pixelProjection,
center: ol.extent.getCenter(pixelProjection.getExtent()),
zoom: 1
})
});

Click+drag to move, mouse wheel to zoom, Alt+Shift+click/drag to rotate. Full screen recommended. 

Notes

The Underground Biography is a series of interconnected personal anecdotes based on and around the London Underground. It is a development and expansion of an earlier typographical piece called Northern Line, which had a more straightforward timeline (although the branching structure is perhaps used more effectively).

I have been a life-long resident of London and have many memories connected to the tube. It was only when I started putting what I thought was going to be placeholder text into the design that I realised just how much of my life has been spent underground. Each line inspired a different memory and seemed to flow very easily onto the page.

Although it wasn’t intentional, the themes of love and sex come up time and again. Perhaps it’s because of trains and tunnels, either way it struck me as sort of funny. For a while, I was toying with the idea of calling it “Lay-Lines”, but I didn’t have enough related anecdotes for every branch of the network. Call it a work in progress.

The initial mapping happened very quickly, but there’s been a lot of tweaking since then. The process of writing to fill a particular amount of space (combined with a desire to make station names match up with their approximate location on the real London tube map) meant there was a lot of editing, tweaking of curves and minutes adjustments to kerning. There are still lots of rough edges but it’s at least in a state where I could leave it alone for a while.

The other delay was finding the right presentation method. The up-down-all-around nature of the text makes it difficult to read when it’s locked to one orientation (as it would be as a regular image on a computer screen). I considered turning it into a spoken word / moving image piece, but it (or I) felt too self-conscious.

What I really wanted was for the reader to be able to explore the map in their own way and thought that being able to drag, rotate and zoom around the text would be the best method to accomplish this. I’m not really a programmer, but figured there would be a simple method to accomplish this in a web page. After all, Google does it all the time in their maps, so how hard could it be?

I soon found out. One of the problems with not being a programmer is that when you want something programmed you don’t necessarily know where to start. I tried Processing for a while, thinking that I could use the processing.js library to put it on the web. I could see that this was a roundabout method, but Processing seemed geared to interactive visuals and I knew at least a little bit about how it works. But a little knowledge is a dangerous thing and while I was able to pan, rotate and zoom the image, I couldn’t get all three things working at the same time.

I also tried timeline based systems like Hype and Adobe Edge Animate because I’m more comfortable with a GUI and a timeline than I am with a blank code window. Again, I could get some of the elements working, but not all of them at once and not in a manner that was satisfactory.

Eventually, I found OpenLayers 3, which is a Javascript library for open-source mapping on the internet. After a lot of Googling and consulting a Javascript reference book I bought, I had a version that worked well enough. This tends to be how my relationship with the technical side of creativity works – I learn just enough to do the task at hand and no more. It leads to a lot of frustration.

More pertinently, the Underground Biography was the start of a distinct phase in which I explored more personal themes through a combination of typography, design and non-fiction writing.

Other things worth noting while we’re on the subject: it was all laid out in Illustrator, using text on paths and exported as an SVG. It uses the P22 Underground typeface, which was purchased from Typekit. Obviously, there’s a massive debt to Harry Beck and his successors, who designed the tube map, as well as Edward Johnston and subsequent typographers.

The tube map is always changing and the version this work is based on doesn’t exist any more. The Circle Line now has a terminus at Hammersmith, but didn’t when the events detailed here took place.

Thanks to Tim & Tom at Codecircus for their technical help.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s