Mapzen.js

The easiest way to use Tangram in a web page is via Mapzen.js, which is Mapzen’s JavaScript SDK. Mapzen.js combines web support for a variety of Mapzen services, including Tangram, Mapzen Search, and the Mapzen Basemap Styles.

Script Tag Setup

Tangram JS is a JavaScript library designed for use in Leaflet maps.

The latest release of Tangram can be included in your web page with a script tag:

<script src="https://mapzen.com/tangram/tangram.min.js"></script>

Then, Tangram can be instantiated as a Leaflet layer, passing (at a minimum) the scene URL through the options object:

var map = L.map();

var layer = Tangram.leafletLayer({
    scene: 'scene.yaml'
});

A Tangram map may be de-instantiated, with all associated resources de-allocated, by calling layer.remove() on the leafletLayer.

For a complete manual setup tutorial, see our Tangram Walkthrough.

JavaScript Bundling

Tangram JS may be imported or required as a module in ES6, CommonJS, or AMD (Asynchronous Module Definition). For more information about bundling Tangram, see the Advanced Tangram for Front-End Engineers page on the Tangram Play wiki.

Tangram ES

Tangram ES is the C++ version of Tangram, based on OpenGL ES, designed for mobile and embedded systems. It currently targets five platforms: Android, iOS, Mac OS X, Ubuntu Linux, and Raspberry Pi.

For a complete tutorial for setting up Tangram ES on Android, see our Android Walkthrough.

API keys

To use hosted Mapzen services, including the Mapzen Vector Tile service, you’ll need a free Mapzen API key.