Tangram is a library for rendering 2D & 3D maps with WebGL. It is tuned for OpenStreetMap data, but supports any tiled source of GeoJSON/TopoJSON or binary vector tiles.
- Clone or download this repository:
- clone in a terminal window with
git clone https://github.com/tangrams/tangram.git
- or download a zip directly: https://github.com/tangrams/tangram/archive/master.zip
- or use Bower:
bower install tangram
- Start a webserver in the repository's directory:
- in a terminal window, enter:
python -m SimpleHTTPServer 8000
- if that doesn't work, try:
python -m http.server
- View the map at http://localhost:8000 (or whatever port you started the server on)
tangram-demo - A minimal demo showing the basic setup
gui-demo - Control styles in real-time with a gui
shaders-demo - More complex glsl shaders
highways-demo - Zoom-dependent styles and contextual filtering rules
Instead of using traditional image tiles, we render from vector tiles that contain the underlying source geometry for each tile's bounding box.
Mapzen provides a free vector tile service that can be used with Tangram for OpenStreetMap base layer data, with worldwide coverage updated daily. There is also an OSM.US-hosted alternative.
Tangram currently supports GeoJSON/TopoJSON tiles as well as the mapnik binary format, both of which can be generated by the Mapzen vector tile service.
Here's an example GeoJSON tile.
The library also includes a Leaflet plugin, Tangram.LeafletLayer
, to provide basic web map pan/zoom functionality.
For documentation, see the Tangram Documentation wiki.
For questions, comments, suggestions, or to report a bug, please open a new issue.
If you'd like to contribute to the project or make changes to the source code for fun, you'll need to install development requirements and build the library:
npm install
make
The library will be minified in dist/
, and index.html
provides an example for rendering from different sources and simple Leaflet integration.
Tests are included to ensure that the code functions as expected. To run all of the tests:
npm test
Every time this runs, an new browser instance is created. If you wish to have a single browser instance and run the test suite against that instance do the following,
make karma-start
And then run the tests with,
make run-tests
We're using jshint to maintain code quality.
make lint