How to use ol-ext - 10 common examples

element = ol_ext_element.create('DIV', {
      className: (options.className || "ol-mapzone") +' ol-unselectable ol-control ol-collapsed'
    });
    var bt = ol_ext_element.create('BUTTON', {
      type: 'button',
      on: {
        'click': function() {
          element.classList.toggle("ol-collapsed");
          maps.forEach(function (m) {
            m.updateSize();
          });
        }.bind(this)
      },
      parent: element
    });
    ol_ext_element.create('I', {
      parent: bt
    });
  }

  // Parent control
  ol_control_Control.call(this, {
    element: element,
    target: options.target
  });
  
  // Create maps
  var maps = [];
  options.zones.forEach(function(z) {
    var view = new ol_View({ zoom: 6, center: [0,0], projection: options.projection });
    var extent = ol_proj_transformExtent(z.extent, 'EPSG:4326', view.getProjection());
    console.log(extent, z.extent)

}.bind(this)
    });
    var layer = new options.layer.constructor({
      source: options.layer.getSource()
    });
    var map = new ol_Map({
      target: div,
      view: view,
      controls: [],
      interactions:[],
      layers: [layer]
    });
    maps.push(map);
    view.fit(extent);
    // Nmae
    ol_ext_element.create('P', {
      html: z.title,
      parent: div
    });
  }.bind(this));

this.media = options.media;

  if (options.loop) this.setLoop(options.loop);

  // Dispatch media event as ol3 event
  this.media.addEventListener( 'canplaythrough', function() {
    self.dispatchEvent({ type:'ready' });
  }, false);
  for (var event in { load:1, play:1, pause:1, ended:1 }) {
    this.media.addEventListener( event, function(e){
      self.dispatchEvent({ type:e.type });
    }), false;
  }
};
ol_ext_inherits (ol_media_Media, ol_Object);

/** Play a media
*	@param {number|undefined} start start time (in seconds) of the audio playback, default start where it has paused.
*/
ol_media_Media.prototype.play = function(start) {
  if (start !== undefined) {
    this.media.pause();
    this.media.currentTime = start;
  }
  var playPromise = this.media.play();
  // If supported check if the sound play automatically or not
  if (playPromise !== undefined) {
    playPromise.then(function() {
      // Automatic playback started!
    }).catch(function() {
      // Automatic playback failed.

// loadTilesWhileAnimating: true,
    pixelRatio: pratio,
    controls: [],
    interactions: [],
    layers: options.layers
  });
  this.offmap.set("pixelRatio", pratio);
  this.setMap(options.map);

  // Canvas
  this.image = this.offmap.getViewport().children[0];
  
  this.canvas = document.createElement('canvas');

};
ol_ext_inherits (ol_Backscreen, ol_Object);

/**	Set the game map
*/
ol_Backscreen.prototype.setMap = function(map) {
  if (this.map) {
    this.map.getTargetElement().removeChild(this.element);
    this.offmap.setView (null);
  }
  if (this._listener) ol_Observable.unByKey(this._listener);
  this._listener = null;

  this.map = map;
  if (this.map) {
    this.map.getTargetElement().appendChild(this.element);
    if (!this.map.getViewport().style["z-index"]) this.map.getViewport().style["z-index"] = 1;
    this._listener = this.map.on("change:size", this.changeSize_.bind(this));

*/
var ol_Collision = function (options) {	
  ol_Object.call(this);

  this.game = options.game;
  this.resample = options.resample || 1;
  
  // Collision canvas
  this.canvas = document.createElement('canvas');
  this.canvas.width = this.canvas.height = 32;

  // 
  this.sprites = options.sprites || [];
  this.targets = options.targets || [];
};
ol_ext_inherits (ol_Collision, ol_Object);

/** Get image used to test the collision
*/
ol_Collision.prototype.getImage = function () {
  return this.canvas;
};

/** Test if a sprite goes out of the current extent
* @param {ol.Sprite} s1 the sprite to test
* @return {N|S|E|W|false} the direction it goes out or false if inside the current extent
*/
ol_Collision.prototype.overflow = function (s1) {
  if (!this.game.frameState) return false;
  var e = this.game.frameState.extent;
  var es = s1.getBBox(this.game.frameState.viewState.resolution);
  if (e[0]>es[0]) return "E";

* @require jQuery
 * @fires ready, load, play, pause, ended
 * 
 * @param {*} options
 *  @param {string} options.source the source file
 *  @param {boolean} options.lop the sound loops
 */
var ol_media_Audio = function (options) {
  options = options || {};

  var a = new Audio(options.source);
  a.load();
  // Create HTML5 audio
  ol_media_Media.call(this, { media: a, loop: options.loop });
};
ol_ext_inherits (ol_media_Audio, ol_media_Media);

/** Use audio context
* /
ol_media_Audio.prototype.getSource = function(b) {
  var AudioCtx = window.AudioContext || window.webkitAudioContext;
  var context = new AudioCtx;
  var source = context.createMediaElementSource(this.media.get(0));
  source.connect(context.destination);
  return source;
};
*/

export default ol_media_Audio

else {
    img = this.img_ = new Image();
    img.crossOrigin = options.crossOrigin || "anonymous";
    img.src = options.src;
  }

  if (options.states) this.states = options.states;

  if (img.width) this.drawImage_();
  else img.onload = function() {
    self.drawImage_();
    // Force change
    //if (self.onload_) self.onload_();
  };
};
ol_ext_inherits (ol_style_Sprite, ol_style_Icon);

ol_style_Sprite.prototype.drawImage_ = function() {
  var ctx = this.getImage().getContext("2d");
  ctx.clearRect(0,0,this.size, this.size);
  ctx.drawImage(this.img_, this.offset[0], this.offset[1], this.size, this.size, 0, 0, this.size, this.size);
};

/** Universal LPC Spritesheet Character
* http://lpc.opengameart.org/
* https://github.com/jrconway3/Universal-LPC-spritesheet
* https://github.com/Gaurav0/Universal-LPC-Spritesheet-Character-Generator
*/
ol_style_Sprite.prototype.states = {
  idle: { line: 2, length: 1 },
  encant_N: { line: 0, length: 7 },
  encant_W: { line: 1, length: 7 },

// loadTilesWhileAnimating: true,
    pixelRatio: pratio,
    controls: [],
    interactions: [],
    layers: options.layers
  });
  this.offmap.set("pixelRatio", pratio);
  this.setMap(options.map);

  // Resample to test collision
  this.resample = options.resample || 1;

  this.canvas = document.createElement('canvas');
  this.canvas.width = this.canvas.height = 32;
};
ol_ext_inherits (ol_Offscreen, ol_Object);

/**	Set the game map
*/
ol_Offscreen.prototype.setMap = function(map) {
  if (this.map) {
    this.map.getViewport().removeChild(this.element);
    this.offmap.setView (null);
  }
  if (this._listener) ol_Observable.unByKey(this._listener);
  this._listener = null;

  this.map = map;
  if (this.map) {
    this.map.getViewport().appendChild(this.element);
    this._listener = this.map.on("change:size", this.changeSize_.bind(this));
    this.offmap.setSize (this.map.getSize());

ol_geom_LineString.prototype.lineRef = function (p) {
  var p0, p1, s;
  var coord = this.getCoordinates();
  var s0 = 0;
  for (var i=1; i=0 && s<=1) {
      var pi = [p0[0] + s*(p1[0]-p0[0]), p0[1] + s*(p1[1]-p0[1])];
      if (ol_coordinate_dist2d(p,pi) < 1e-10) {
        return s0 + s*ol_coordinate_dist2d(p0, p1);
      }
    } else {
      s0 += ol_coordinate_dist2d(p0,p1);
    }
  }
  // Point is not on the linestring
  return false;
};

ol_geom_LineString.prototype.lineRef = function (p) {
  var p0, p1, s;
  var coord = this.getCoordinates();
  var s0 = 0;
  for (var i=1; i=0 && s<=1) {
      var pi = [p0[0] + s*(p1[0]-p0[0]), p0[1] + s*(p1[1]-p0[1])];
      if (ol_coordinate_dist2d(p,pi) < 1e-10) {
        return s0 + s*ol_coordinate_dist2d(p0, p1);
      }
    } else {
      s0 += ol_coordinate_dist2d(p0,p1);
    }
  }
  // Point is not on the linestring
  return false;
};