{"id":13905146,"url":"https://github.com/tangrams/tron-style","last_synced_at":"2025-09-07T11:34:58.116Z","repository":{"id":81690428,"uuid":"61731561","full_name":"tangrams/tron-style","owner":"tangrams","description":"Tron 2.0","archived":false,"fork":false,"pushed_at":"2020-05-02T17:22:36.000Z","size":11258,"stargazers_count":62,"open_issues_count":24,"forks_count":14,"subscribers_count":7,"default_branch":"gh-pages","last_synced_at":"2025-06-06T15:06:49.337Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://tangrams.github.io/tron-style","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tangrams.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2016-06-22T15:47:09.000Z","updated_at":"2024-06-12T12:57:06.000Z","dependencies_parsed_at":null,"dependency_job_id":"9655ae07-e1c7-4382-8103-d8772ec61d6e","html_url":"https://github.com/tangrams/tron-style","commit_stats":null,"previous_names":[],"tags_count":10,"template":false,"template_full_name":null,"purl":"pkg:github/tangrams/tron-style","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tangrams%2Ftron-style","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tangrams%2Ftron-style/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tangrams%2Ftron-style/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tangrams%2Ftron-style/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tangrams","download_url":"https://codeload.github.com/tangrams/tron-style/tar.gz/refs/heads/gh-pages","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tangrams%2Ftron-style/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265692365,"owners_count":23812197,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-06T23:01:10.799Z","updated_at":"2025-07-18T02:32:51.180Z","avatar_url":"https://github.com/tangrams.png","language":"HTML","funding_links":[],"categories":["HTML"],"sub_categories":[],"readme":"## TRON 2.0\n\nWelcome to TRON 2.0 by [Geraldine Sarmiento](https://twitter.com/sensescape) and [Patricio Gonzalez Vivo](https://twitter.com/patriciogv). Rebuilt from the ground up to take advantage of the latest features of [Tangram (JS and ES)](https://mapzen.com/products/tangram/) graphics engine and conventions. \n\nTRON is an exploration of scale transformations in the visual language of TRON with the use of Tangram [blocks](http://tangrams.github.io/blocks/). On this new version, visual forms and elements transform per zoom, revealing new cartographic details and a new experience of scale. \n\nBeside 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.\n\n## How it works? \n\nThe main elements are:\n\n- [`tron-style.yaml`](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.\n\n- [`layers/` folder](layers/): [layers on Tangram](https://mapzen.com/documentation/tangram/Filters-Overview/) 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](https://twitter.com/sensescape) and [Nathaniel V. KELSO](https://twitter.com/kelsosCorner). 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).](https://twitter.com/patriciogv) Shaders are not a simple thing, but at [Mapzen](https://mapzen.com) 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.\n\n- [`styles/` folder](styles): 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](https://mapzen.com/documentation/tangram/Shaders-Overview/) \"extends\" from [blocks](http://tangrams.github.io/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](http://tangrams.github.io/blocks/).\n\n- [`components/` folder](components): This folders holds some of the global resources use in the scene, like [`fonts`](components/fonts.yaml) and [`images/`](components/images). Also there you can find the [`globals.yaml`](components/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**.\n\n## Bundling\n\nHaving 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.\n\nTo use it you will:\n\n- first to clone locally the repository:\n\n```bash\ngit clone https://github.com/tangrams/tron-style.git\ncd tron\n```\n\n- Load the [Tangram Blocks](http://tangrams.github.io/blocks/) submodule:\n\n```bash\ngit submodule update --init --recursive\n```\n\n- Install some Python modules:\n\n```bash\npip install pyyaml\n```\n\n- Then finally run the script\n\n```bash\npython \u003c(curl -s https://raw.githubusercontent.com/tangrams/bundler/master/bundler.py) \n```\n\n## Edit\n\nOne of the nice things of running a local instance of a [Tangram](https://mapzen.com/products/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:\n\n```bash\npython -m SimpleHTTPServer 8000\n```\n\nAlthought we also have been working on a way to edit [Tangram](https://mapzen.com/products/tangram/) scene files and see it change inmediatly. The project is call [TangramPlay](https://mapzen.com/tangram/play/) and can be found [here](https://mapzen.com/tangram/play/).\n\nA 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:\n\n1. [Click here to open Tron in TangramPlay](https://mapzen.com/tangram/play/?scene=https%3A%2F%2Fgist.githubusercontent.com%2Fanonymous%2F14f1c7495dde62cf831427dc9be89ec9%2Fraw%2F0b25fc8a0e90115090c90928d0fefa4423106b9b%2Fscene.yaml#8/40.574/-74.051)\n\n2. Once you finish you can download it or copy it back to your local file, but **remember** to take out the first line `import`.\n\n## About the process\n\nHere are some resource we share and sketch  [Geraldine Sarmiento](https://twitter.com/sensescape) and [I](https://twitter.com/patriciogv) during the development of TRON2.0. We hope you enjoy it.\n\n- [Inspiration Pintboard](https://www.pinterest.com/patriciogonzv/tron-20/)\n\n[![](http://thebookofshaders.com/log/160726003844.png) Generative Tron Palette](http://player.thebookofshaders.com/?log=160726003844)\n[![](http://thebookofshaders.com/log/160726010850.png) Glow lines ](http://player.thebookofshaders.com/?log=160726010850)\n[![](http://thebookofshaders.com/log/161011181616.png) Highways](http://player.thebookofshaders.com/?log=161011181616)\n[![](http://thebookofshaders.com/log/160706191515.png) Grid animation](http://player.thebookofshaders.com/?log=160706191515)\n[![](http://thebookofshaders.com/log/160705205611.png) Grid animation](http://player.thebookofshaders.com/?log=160705205611)\n[![](http://thebookofshaders.com/log/160229221706.png) Stripes](http://player.thebookofshaders.com/?log=160229221706)\n[![](http://thebookofshaders.com/log/160705204919.png) Stripes animation](http://player.thebookofshaders.com/?log=160705204919)\n[![](http://thebookofshaders.com/log/160313020334.png) Simplex Grid animation](http://player.thebookofshaders.com/?log=160313020334)\n[![](http://thebookofshaders.com/log/160621211003.png) Dots pattern](http://player.thebookofshaders.com/?log=160621211003)\n[![](http://thebookofshaders.com/log/160622150357.png) Mosaic-dots transition](http://player.thebookofshaders.com/?log=160622150357)\n[![](http://thebookofshaders.com/log/160621210032.png) Stripes](http://player.thebookofshaders.com/?log=160621210032)\n[![](http://thebookofshaders.com/log/160621170831.png) Stripes-char transition](http://player.thebookofshaders.com/?log=160621170831)\n[![](http://thebookofshaders.com/log/160626213924.png) Contours](http://player.thebookofshaders.com/?log=160626213924)\n[![](http://thebookofshaders.com/log/160705083231.png) Hill Shading](http://player.thebookofshaders.com/?log=160705083231)\n[![](http://thebookofshaders.com/log/160707203604.png) Buildings window](http://player.thebookofshaders.com/?log=160707203604)\n[![](http://thebookofshaders.com/log/160805190306.png) Generative Icons](http://player.thebookofshaders.com/?log=160805190306)\n[![](http://thebookofshaders.com/log/160805194757.png) Animated Icons](http://player.thebookofshaders.com/?log=160805194757)\n[![](http://thebookofshaders.com/log/160818140257.png) Animating Icons w POIs SDF's](http://player.thebookofshaders.com/?log=160818140257)\n[![](http://thebookofshaders.com/log/160817211857.png) Animating Icons w POIs SDF's](http://player.thebookofshaders.com/?log=160817211857)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftangrams%2Ftron-style","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftangrams%2Ftron-style","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftangrams%2Ftron-style/lists"}