Tron 2.0 — Creating a Visual Language of Scale

This post was originally published on mapzen.com by Geraldine Sarmiento , Patricio Gonzalez Vivo on 13 October 2016.

Today we introduce TRON version 2 as a fully realized Mapzen house style, rebuilt from the ground up to take advantage of the latest features of the Tangram graphics engine and Tangram blocks. With this new version, visual forms and elements transform per zoom, revealing new cartographic details and a deep exploration of scale transformations.

We’re pushing both the medium and mapping to new extremes with TRON, and it will push your GPU and fan to the limit. We want to let everyone know what is possible in OpenGL and WebGL, and designed it for game developers to remix.

Will autonomous cars dream as they charge overnight? Mapzen’s Tangram lets us imagine! Explore TRON v2 in this interactive map, and keep reading to dive into its visual language of scale.

( Open San Francisco full screen. Or Tokyo! Or Paris! )

What are the visual qualities and elements of the Tron Universe? Number one: Glow
Two, Primary Shapes
Three, Repetition
How can we translate this visual vocabulary to express the experience of scale?
The World View in Stripes. This was our starting point. From here we built on top, adding cartographic detaisl per zoom.
Water. Transformation from low to high zooms.
Water
Coastlines. Coastlines begin with a single glow line, gradually thickening, then expanding to pulsating waves at high zooms.
Coastlines
Airports. Airports begin as single glow lines transitioning to thick dark lines, revealing runway lights at higher zooms.
Airports
Runway
Buildings. Line footprints extruding with translucent textures.
Buildings
Highways. Beginning as single glow lines, with each zoom revealing greater levels of detail.
Highways
Icons. Scale.
Park Icon
Spritesheet