Till Nagel

Border Bumping

by Till Nagel.

Date: Summer 2012

Julian Oliver
Till Nagel
Christopher Pietsch

Border Bumping is a work of dislocative media that situates cellular telecommunications infrastructure as a disruptive force, challenging the integrity of national borders.

When you are crossing a border between two countries, your mobile phone often connects to cell towers of the entering country before or after the actual political border, which results in seemingly distorted border lines. This project records and visualizes these virtual bumps to get an impression of the new digital boundaries of the world.

Together with Christopher Pietsch, I designed and developed the interactive map for Julian Oliver‘s project. The work is commissioned by the Abandon Normal Devices Festival. Full documentation on borderbumping.net.

The map

Each border crossing incident is shown as red circle, whose size represents the signal strength of the cell tower. The black dots mark the the location of the incident. The border is bumped into the origin or entering country depending on which side the incident happened.

Press play to see the animated and interactive map (or watch it on vimeo).

On the right side an overview map is displayed, with a viewfinder showing the current map area. Below, details for each incident are shown with the device name, mobile phone provider, and other data. This list also acts as history users can browse through and revisit incidents.

Check out the dynamic demo map.

The caravan

The work was exhibited in a caravan, traveling to various cities in the UK. Visitors could explore the map on an interactive multitouch screen.

The caravan. Exterior design by Designers Republic.

Interior of the caravan.

Design process

We started sketching with the Unfolding map library, and tried out various algorithms in Processing (see e.g. circle/polyline experiment). After experimenting with Polymaps we decided to use Leaflet for the final implementation. Take a peek in the code, below.

In the following, I am showing some experiments we did on our way.

Distorting polylines

Creating the dynamic bumps was a challenge in two aspects: Firstly, to implement this in an efficient and high performance manner, and secondly, to distort the borders in a natural looking way.

Scribble showing an algorithm experiment in which each vertex is translated towards the incident point (perpendicular to the tangent of the original border path) with a distance based on a (cell tower) circle and the distance between incident and original border point.

Experiment with various distortion settings.

Incident style

We started with hexagons to represent tower cells, but as we did not have the actual geo-positions of the towers, we went with a circular shape.

Various marker styles.

Scribble on printed map.

In the end, we chose a rather traditional style of concentric circles signifying the decreasing signal strength of the cell towers.

Map style

We opted for a simple style with just enough details to give a rough orientation, and with a strong focus on borders.

As we wanted to show the original and the distorted borders, we used the same polygon data both in TileMill and JavaScript. This may sound trivial, but as we chose generalized country borders in order to have manageable vector data, the equally simplified border paths needed to be used for the tiles.

Simplified country borders for background map (light blue) and for vector shapes (gray).

The country border data comes from NaturalEarth, and all other geographic data from OpenStreetMap. The map is styled and generated with TileMill.

Open Source

You can find the source code for the map on GitHub: http://github.com/cpietsch/bumpingBorders. Interesting for other Leaflet developers might be the transitionPoints() method on our method to dynamically manipulate leaflet and SVG paths, and the bumpCountryLayers() method for our simple mechanism to select a subset of vertices of two bordering polygons.

Julian released the source for the smartphone tracking application at http://borderbumping.net/code/.

And finally, grab the CartoCSS source for the map style here.

One comment on ‘Border Bumping’

  1. [...] wrote a nice a documentation on our Design and Programming Progress which describes well our [...]

Leave a Reply