Tutorial - Single Video

The "map" can contain a single video. This allows panning, zooming, and rotating the video. Additionally, other feature can be placed on top of the video.

// the pixelCoordinateParams function creates the parameters necessary for
// showing an image or video in pixel coordinates rather than in a map
// projection.  The size of the video is needed for this.
var videoWidth = 640, videoHeight = 360;
var params = geo.util.pixelCoordinateParams('#map', videoWidth, videoHeight);
// by default, the video cannot be zoomed any closer than one video pixel
// to one display pixel.  We can change this to allow zooming in on the
// video.
params.map.max += 3;  // allow zooming up to 8x
// create a map with the pixel-space parameters
var map = geo.map(params.map);
// create a feature layer to place a video quad
var layer = map.createLayer('feature', {
  features: ['quad.video']
});
// create a quad feature with just the video.  The quads corners are just
// the dimensions of the video.
var quads = layer.createFeature('quad');
quads.data([{
  ul: {x: 0, y: 0},
  lr: {x: videoWidth, y: videoHeight},
  video: '../../data/earthquakes-video.webm'
}]);
quads.draw();

Step 1

Active

Inactive

Start or stop the video when the user clicks. The video may not be loaded yet, so make sure we do nothing in that case.

Step 2

Active

Inactive

Add another layer with a polygon feature that will appear on top of the video. These polygons don't have any meaning; they are just to demonstrate that the video is visible beneath them.

Step 3

Active

Inactive