A flexible mapping engine, designed for real-time rendering of 2D and 3D maps.

Tangram is an open source javascript library, powered by Mapzen, that allows you to render 2D or 3D maps in your browser. The resource is powered by WebGL, and draws vector files based on your style preferences, rather than utilizing traditional bitmap files.

To draw a map, Tangram utilizes a scene file in the object based YAML format, wherein users specify data sources, filters and styling rules. One benefit of using the YAML format, according to the tool's creators, "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."

After inputting your data source, you determine how the data is interpreted by applying top level layer filters and lower level feature filters which split the data and allow you to specify styling rules to highlight particular facets of data on the map. For example, this demo filters map data relating to roads so that features like tunnels and highway ramps can be spotlighted using different styling rules.


Image: A screenshot from the demo, indicating road features with different styling rules

An example: Atlantic´s Citylab

Leverging Tangram, the Atlantic´s Citylab project created 3D cityscapes based on OpenStreetMap files. The maps provide moving visions of the city, with extruded buildings and animated traffic, that allow the user to get a sense of the city´s lifeblood.


Image: A screenshot of Manhattan from the Citylab project

View the full Citylab project here.

Visit the Tangram website or check it out on GitHub.