TRON 2.0

Welcome to TRON 2.0 by Geraldine Sarmiento and Patricio Gonzalez Vivo. Rebuilt from the ground up to take advantage of the latest features of Tangram (JS and ES) graphics engine and conventions.

TRON is an exploration of scale transformations in the visual language of TRON with the use of Tangram blocks. On this new version, visual forms and elements transform per zoom, revealing new cartographic details and a new experience of scale.

Beside the design challenges we want to make the source more approachable by dividing the scene file in multiple smaller pieces. So instead of having a single monolitical .yaml scene file you will find smaller modules that focus on a particular aspect of the map scene.

How it works?

The main elements are:

• tron-style.yaml: is the main .yaml file that mix and hold all together. There you will find the definition of the sources, cameras and scene:background:color, together with the imports that glow and conects the layers, styles and components resources.

• layers/ folder: layers on Tangram are the set of rules that filter the data (comming from the sources) into different style rules. Tell how each component on the map should be treat. If it's text, points, lines or polygons. What's the default size and color, etc. In this folder you will find different .yaml scene files that carefully make sense of the data and display it in a cartographical intuitive way. This meticulus work was made by Geraldine Sarmiento and Nathaniel V. KELSO. At the end of each one of this layer-files you will find also a styles secction where the custom shaders are defined and crafted by me (Patricio Gonzalez Vivo). Shaders are not a simple thing, but at Mapzen we are trying to make them more aproachable. Tangram styles can be mix, so for this map style we try to use that property to reduce the complexity and size of the shader by reusing them as much as possible.

• styles/ folder: contain all the styles that are shared across layers. Is defenetly a more abstract layer. This folder sorts the styles by their base geoemtry (points, lines or polygons). Also for those styles common to all the other geometries can be found in common.yaml. You will note that most shader styles "extends" from blocks. As part of the efford on making GLSL Shaders more aproachable in Tangram. I had start a tool box library of shaders snippets that can be mix together, call Tangram Blocks.

• components/ folder: This folders holds some of the global resources use in the scene, like fonts and images/. Also there you can find the globals.yaml. This particular file is very interesting because holds globals variables and JS functions that control the map. From it is possible to customize the map, like turning on or off the animations or changing the language.

Bundling

Having the scene file distributed accross different smaller modules creates more network calls. To solve this you will find in this repository a bundle.py script that construct a ZIP file (tron.zip) that will hold all the files needed.

To use it you will:

• first to clone locally the repository:

git clone https://github.com/tangrams/tron-style.git
cd tron

• Load the Tangram Blocks submodule:

git submodule update --init --recursive

• Install some Python modules:

pip install pyyaml

• Then finally run the script

python <(curl -s https://raw.githubusercontent.com/tangrams/bundler/master/bundler.py) 

Edit

One of the nice things of running a local instance of a Tangram scene is the hability to modify it and learn from it! We defenetly encourage to do it. You can host the style by doing:

python -m SimpleHTTPServer 8000

Althought we also have been working on a way to edit Tangram scene files and see it change inmediatly. The project is call TangramPlay and can be found here.

A quick way to start playing with Tron2.0 is by importing the scene file and inmediatly start editing on top of the scene file. For that:

1. Click here to open Tron in TangramPlay

2. Once you finish you can download it or copy it back to your local file, but remember to take out the first line import.

About the process

Here are some resource we share and sketch Geraldine Sarmiento and I during the development of TRON2.0. We hope you enjoy it.

• Inspiration Pintboard

Generative Tron Palette Glow lines Highways Grid animation Grid animation Stripes Stripes animation Simplex Grid animation Dots pattern Mosaic-dots transition Stripes Stripes-char transition Contours Hill Shading Buildings window Generative Icons Animated Icons Animating Icons w POIs SDF's Animating Icons w POIs SDF's