Tangram: WebGL for OpenStreetMap

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.

Quickstart

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)

Demos

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

Vector Tiles

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.

Support

For documentation, see the Tangram Documentation wiki.

For questions, comments, suggestions, or to report a bug, please open a new issue.

Development

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.

Testing

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

Lint

We're using jshint to maintain code quality.

make lint

smileliaohua/tangram