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
.yamlfile that mix and hold all together. There you will find the definition of the
scene:background:color, together with the imports that glow and conects the
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
polygons. What's the default
color, etc. In this folder you will find different
.yamlscene 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
stylessecction 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
stylescan 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
stylesthat are shared across layers. Is defenetly a more abstract layer. This folder sorts the
polygons). Also for those
stylescommon 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
images/. Also there you can find the
globals.yaml. This particular file is very interesting because holds
globalsvariables 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.
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)
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
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:
Once you finish you can download it or copy it back to your local file, but remember to take out the first line
About the process
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