{"id":13426305,"url":"https://github.com/tangrams/tangram","last_synced_at":"2025-05-13T18:07:18.572Z","repository":{"id":39579703,"uuid":"13203894","full_name":"tangrams/tangram","owner":"tangrams","description":"WebGL map rendering engine for creative cartography","archived":false,"fork":false,"pushed_at":"2024-12-17T03:11:28.000Z","size":139395,"stargazers_count":2254,"open_issues_count":65,"forks_count":293,"subscribers_count":97,"default_branch":"master","last_synced_at":"2025-04-24T07:15:06.187Z","etag":null,"topics":["leaflet","magic","map","map-renderer","mapzen","raster-tiles","rendering","tangram","vector-graphics","vector-tiles","webgl"],"latest_commit_sha":null,"homepage":"https://tangram.city","language":"JavaScript","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":"CONTRIBUTING.md","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,"publiccode":null,"codemeta":null}},"created_at":"2013-09-30T01:59:45.000Z","updated_at":"2025-04-12T14:14:28.000Z","dependencies_parsed_at":"2025-01-16T14:12:54.558Z","dependency_job_id":"56b02863-ba5e-44ef-bb3b-83010d8a63be","html_url":"https://github.com/tangrams/tangram","commit_stats":{"total_commits":4321,"total_committers":29,"mean_commits":149.0,"dds":"0.23721360796112012","last_synced_commit":"f24f47cdfa825fb4d20b639730ce2f384e2e76c4"},"previous_names":[],"tags_count":89,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tangrams%2Ftangram","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tangrams%2Ftangram/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tangrams%2Ftangram/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tangrams%2Ftangram/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tangrams","download_url":"https://codeload.github.com/tangrams/tangram/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250833866,"owners_count":21494861,"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":["leaflet","magic","map","map-renderer","mapzen","raster-tiles","rendering","tangram","vector-graphics","vector-tiles","webgl"],"created_at":"2024-07-31T00:01:31.427Z","updated_at":"2025-04-25T14:29:45.578Z","avatar_url":"https://github.com/tangrams.png","language":"JavaScript","readme":"Tangram: WebGL Maps for Vector Data\n===\n\n\u003c!-- [![Circle CI](https://circleci.com/gh/tangrams/tangram.png?style=badge\u0026circle-token=2529a88125530794f64ffa1783625b5357456f71)](https://circleci.com/gh/tangrams/tangram) --\u003e\n\n\u003ca href=\"http://tangrams.github.io/tangram\" target=\"_blank\"\u003e\n\u003cimg alt=\"tangram-header\" src=\"https://cloud.githubusercontent.com/assets/459970/7569087/8cd14df6-f7d4-11e4-8360-db31790d2bbf.png\"\u003e\n\u003c/a\u003e\n\nTangram is a JavaScript library for rendering 2D \u0026 3D maps live in a web browser with WebGL. It is tuned for OpenStreetMap but supports any source of GeoJSON/TopoJSON or binary vector data, including tilesets and single files.\n\nHere's a [simple demo](https://tangrams.github.io/simple-demo/) ([repo here](https://github.com/tangrams/simple-demo)) with a basic example of a Tangram map.\n\nTangram is instantiated as a [Leaflet](http://leafletjs.com/) plugin for integration with standard web maps. [Tangram ES](https://github.com/tangrams/tangram-es) is a native mobile version of the Tangram library, written in C++.\n\n## Getting Started\n\nTangram is published in two build flavors: one for current browsers (bundled as an ES module, using modern JS and web platform features), and one for older browsers (specifically IE11, with modern JS transpiled to older ES5 syntax). You can use this snippet to automatically load the best one for your browser, using the [`module`/`nomodule` pattern](https://developers.google.com/web/fundamentals/primers/modules#browser):\n\n```html\n\u003c!-- modern browsers load the optimized .mjs file, older browsers (IE11) load the transpiled .js file --\u003e\n\u003cscript type=\"module\" src=\"https://unpkg.com/tangram/dist/tangram.min.mjs\"\u003e\u003c/script\u003e\n\u003cscript nomodule src=\"https://unpkg.com/tangram/dist/tangram.min.js\"\u003e\u003c/script\u003e\n```\n\n**Note:** Because scripts with the `module` type automatically load in [\"deferred\" mode](https://flaviocopes.com/javascript-async-defer/), you must make sure to **include the `defer` keyword** for any scripts you load that depend on Tangram (so that they won't run until Tangram is finished loading). For example, if your app code is in `index.js`, load it like this (anywhere after the Tangram `\u003cscript\u003e` tag):\n\n`\u003cscript defer src=\"index.js\"\u003e\u003c/script\u003e`\n\nSpecific Tangram library versions can also be loaded with `@version` syntax(see [unpkg](https://unpkg.com/) for details). Versions earlier than v0.16.0 do not use the `module` syntax; use a single script tag to load them instead: `\u003cscript src=\"https://unpkg.com/tangram@0.15.5/dist/tangram.min.js\"\u003e\u003c/script\u003e`.\n\nTangram is [published on NPM](https://www.npmjs.com/package/tangram) and can be [bundled using `import` or `require`](https://github.com/tangrams/tangram-play/wiki/Using-Tangram-with-Bundlers-\u0026-Frameworks).\n\nThe library includes a [Leaflet](http://leafletjs.com) plugin, `Tangram.LeafletLayer`, to provide basic web map pan/zoom functionality.\n\nData sources, layers, and styling rules are written in a *scene file* ([here's an example](https://github.com/tangrams/simple-demo/blob/master/scene.yaml)). Armed with a scene file like `scene.yaml`, you can create a Tangram scene and add it to a Leaflet map like so:\n\n```js\nvar map = L.map('map');\nvar layer = Tangram.leafletLayer({ scene: 'scene.yaml' });\nlayer.addTo(map);\n```\n\nRead on for more info, or see the [documentation](https://tangrams.readthedocs.io/) ([github repo](https://github.com/tangrams/tangram-docs/)).\n\n## Demos\n\n[**simple-demo**](http://github.com/tangrams/tangram-demo) - A minimal demo showing the basic setup\n\n[**highways-demo**](http://github.com/tangrams/highways-demo) - Zoom-dependent styles and contextual filtering rules\n\n[**gui-demo**](http://github.com/tangrams/gui-demo) - Control styles in real-time with a gui\n\n[**shaders-demo**](http://github.com/tangrams/shaders-demo) - Simple glsl shaders\n\n[**Tangram-sandbox**](http://github.com/tangrams/tangram-sandbox) - More complex glsl shaders\n\nMore examples are [available here](https://github.com/tangrams?utf8=%E2%9C%93\u0026q=demo\u0026type=\u0026language=).\n\n## Vector Tiles\n\nInstead of loading traditional bitmap tiles, Tangram draws its own tiles from scratch, based on *vector tiles* that contain the source data.\n\n[Nextzen](https://www.nextzen.org/) provides a free [vector tile service](https://developers.nextzen.org/about.html) based on open data from [OpenStreetMap](https://openstreetmap.org/), [Natural Earth](http://www.naturalearthdata.com/), [Who's On First](https://whosonfirst.org/) and other projects,  with worldwide coverage updated continuously -- [sign up for an API key here](https://developers.nextzen.org/).\n\nTangram currently supports [GeoJSON](http://geojson.org/) \u0026 [TopoJSON](https://github.com/mbostock/topojson)-based tiles, as well as Mapbox's [MVT](https://github.com/mapbox/vector-tile-spec) binary format.\n\n## Styling\n\nThe *scene file* is where you specify data sources and layers, filter the data, and define and apply styles. (In our demos, this file is named scene.yaml.) The rules for doing these things are many and various, but the basics are pretty easy, and they are all meticulously documented in the [Tangram Documentation](https://tangrams.readthedocs.io/).\n\nThe scene file is written in YAML, which is a data-serialization format like JSON, but with less punctuation. Instead, data structures are specified with whitespace, like Python. One neat side benefit is that the format is super friendly to strings, which means you can write inline JavaScript and GLSL code straight into the scene file, without needing to wrap it in quotes or concatenate anything.\n\n## Support\n\nFor technical reference and concept overviews, see the [Tangram Documentation](https://tangrams.readthedocs.io/).\n\nFor questions, comments, suggestions, or to report a bug, please open a [new issue](https://github.com/tangrams/tangram/issues).\n\nYou can also find us in the Tangram-chat gitter room: https://gitter.im/tangrams/tangram-chat\n\n## Browser Support\n\nTangram JS is officially supported and tested on the last two versions of these browsers:\n\n- Mac OS: Chrome, Firefox, and Safari\n- Windows: Chrome, Firefox, IE11, and Edge\n- iOS: Safari\n- Android: Chrome\n\nTangram JS should also run in any browser with WebGL support.\n\n## Contributions Welcome\n\nTangram is open-source, and we eagerly welcome feedback, feature requests, and contributions. We’re especially interested to see your maps, no matter how simple! Post screenshots, links, and any questions to our [gitter chat](https://gitter.im/tangrams/tangram-chat).\n\nFor instructions, see [CONTRIBUTING.md](CONTRIBUTING.md).\n\nTangram JS was created by [Mapzen](https://www.mapzen.com/) and is now a [Linux Foundation Project](https://www.linuxfoundation.org/press-release/2019/01/mapzen-open-source-data-and-software-for-real-time-mapping-applications-to-become-a-linux-foundation-project/).\n","funding_links":[],"categories":["JavaScript","👨‍💻 JavaScript Libraries","others","Clients","Front-end Framework","Web Map Development","Repository","Javascript frontend frameworks and librairies"],"sub_categories":["Mapping","Data Visualization","Map display libraries"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftangrams%2Ftangram","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftangrams%2Ftangram","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftangrams%2Ftangram/lists"}