Postzen
Postzen
Oct 13, 2016 · 3 min read

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
What are the visual qualities and elements of the Tron Universe? Number one: Glow
Two, Primary Shapes
Two, Primary Shapes
Three, Repetition
Three, Repetition
How can we translate this visual vocabulary to express the experience of scale?
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.
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. Transformation from low to high zooms.
Water
Water
Coastlines. Coastlines begin with a single glow line, gradually thickening, then expanding to pulsating waves at high zooms.
Coastlines. Coastlines begin with a single glow line, gradually thickening, then expanding to pulsating waves at high zooms.
Coastlines
Coastlines
Airports. Airports begin as single glow lines transitioning to thick dark lines, revealing runway lights at higher zooms.
Airports. Airports begin as single glow lines transitioning to thick dark lines, revealing runway lights at higher zooms.
Airports
Airports
Runway
Runway
Buildings. Line footprints extruding with translucent textures.
Buildings. Line footprints extruding with translucent textures.
Buildings
Buildings
Highways. Beginning as single glow lines, with each zoom revealing greater levels of detail.
Highways. Beginning as single glow lines, with each zoom revealing greater levels of detail.
Highways
Highways
Icons. Scale.
Icons. Scale.
Park Icon
Park Icon
Spritesheet
Spritesheet

postzen

Mapzen blog archive

Postzen

Written by

Postzen

What happens after Mapzen?

postzen

postzen

Mapzen blog archive

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade