Interactive map design for Web

Jack Freeman


For millennia cartography and map making has been confined to the 2D plane with exploration and utility at the forefront of their design. Yet map making evolved from the purpose of exploration and discovery, with the use of illustrative land marks and visual cues to depict locations – to the introduction of heavy utilisation of paved roads and trade routes which were reduced to a simple line across a page.

This utilitarian approach has been heavily explored within the digital age with the use of google maps and satellite imagery, which both positively and negatively strips out any forms of ambiguity in regards to wayfinding – but in the process, strips out the magic and beauty of the everyday world around us.

At Pixelfish we are fortunate enough to work with clients that are shaping the industry around them and with this comes the challenge of creating truly memorable design & web experiences that are as different as they are. Every journey is a story, and The Longest Road is one like no other. The team came to us an undeniably unique, epic and rousing road trip that took them over 10,000 miles across the UK & Ireland. With heavy emphasis on exploration they knew they wanted to document their journey differently, the google maps aesthetic was just not going to cut it. They needed character, grit and adventure – something that isn’t exactly synonymous with the world of digital design!

With this in mind we worked with them to create an online experience that encapsulated their travels and takes you on the journey with them. We developed an interactive online 3D map that turns modern day map visualisation on its head, harking back to the days of wonder, excitement and discovery. Using a combination of analogue and digital tools, combined with spacial and elevation SRTM data from NASA we created 3D interpretations of mountain topography using Geographic Information System (GIS) mapping software. The focus began to shift from getting to point A to point B, to finding out all the small things that would be on our path along the way!

As designers, in the digital age we typically seek to simplify things down to their most fundamental utilitarian form. In other words a complete absence of ambiguity. Why is it then that when there is complete lack of ambiguity, design plays its most efficient role in the transfer of information and doing so the literal sense of wonder and discovery is lost. At Pixelfish we are seeking to reintroduce ambiguity, where necessary, into the everyday as we think:

the play between the familiar and the surprising is where you create truly memorable experiences.

We have since been expanding on interactive 3D map making for an upcoming project with the purpose of incorporating it into webGL and three.js. Above shows a work in progress and behind the scenes when creating maps and applying 3D elevation data planes in Blender.