How to use tangram - 7 common examples

function initTangram(pathToSceneFile, sceneBasePath) {
  // Add Tangram Layer
  tangramLayer = Tangram.leafletLayer({
    scene: pathToSceneFile,
    sceneBasePath,
    events: {
      hover: handleInspectionHoverEvent,
      click: handleInspectionClickEvent,
    },
  });

  tangramLayer.addTo(map);

  tangramLayer.scene.subscribe({
    load(event) {
      // Modify the scene config object here. This mutates the original scene
      // config object directly and will not be returned. Tangram does not expect
      // the object to be passed back, and will render with the mutated object.
      // eslint-disable-next-line no-param-reassign

setUpTangramLayer: function (map) {
    var leafletLayer = Tangram.leafletLayer(this.options).addTo(map);
    var self = this;

    leafletLayer.scene.subscribe({

      // Check for existing API key at load (before scene renders)
      load: function (scene) {
        var keyForTile = self.options.apiKey;
        // If a key has been set (via options.apiKey),
        // inject the key into any scene file calling Mapzen vector tiles.
        // This will overwrite any existing API keys set in the scene file.
        if (keyForTile) {
          self._injectApiKey(scene.config, keyForTile);
          return;
        }

        // If no key has been set, make sure key already exists in scene file

leafletLayer.on('init', function () {
      self.fire('loaded', {
        layer: leafletLayer,
        version: Tangram.version
      });
    });
    return leafletLayer;

initialize: function (opts) {
    this.options = L.Util.setOptions(this, opts);
    this.debug = Tangram.debug;
    this.version = Tangram.version;
    this.hasWebGL = this._hasWebGL();
  },

var LeafletCartoDBWebglLayerGroupView = function (layerGroupModel, opts) {
  opts = opts || {};
  LeafletLayerView.apply(this, arguments);
  var metric = Profiler.metric('tangram.rendering');

  metric.start();

  this.trigger('loading');

  this.tangram = new TC(opts.nativeMap, this.initConfig.bind(this, layerGroupModel), opts.showLimitErrors);

  this.tangram.onLoaded(function () {
    if (metric) {
      this.trigger('load');
      metric.end();
      metric = void 0;

      log.info('Rendered Geometries Count: ', this.tangram.getTotalGeometries());
    }
  }.bind(this));

  this.layerGroupModel = layerGroupModel;
};

var canLayerBeRenderedClientSide = function (layerModel) {
  var cartoCSS = layerModel.get('meta').cartocss;
  var result = TC.getSupportedCartoCSSResult(cartoCSS);
  if (!result.supported) {
    if (result.reason.indexOf('Unsupported CartoCSS') === 0) {
      log.info('[Vector] Unable to render due "' + result.reason + '". Full CartoCSS:\n' + cartoCSS);
    } else {
      log.error(new Error('[Vector] Unable to render due "' + result.reason + '". Full CartoCSS:\n' + cartoCSS));
    }
  }
  return result.supported;
};

initialize: function (opts) {
    this.options = L.Util.setOptions(this, opts);
    this.debug = Tangram.debug;
    this.version = Tangram.version;
    this.hasWebGL = this._hasWebGL();
  },