Update example and add tutorials.
Add a video to the quads example.
Add two video quad tutorials; one stand-alone quad and one quad positioned on a map.
MODIFY
examples/quads/main.js
examples/quads/main.js
@@ -116,6 +116,23 @@ $(function () {
quads.draw();
}, 10000);
}
+ if (query.video === 'true') {
+ /* You can render videos on a quad. This is currently only supported on
+ * the canvas renderer. */
+ quadData.push({
+ ul: {x: -128, y: 9},
+ lr: {x: -98, y: -11},
+ video: '../../data/earthquakes-video.webm'
+ });
+ /* Add the same video via a video element and flip it vertically. */
+ var vid = document.createElement('video');
+ vid.src = '../../data/earthquakes-video.webm';
+ quadData.push({
+ ll: {x: -158, y: 9},
+ ur: {x: -128, y: -11},
+ video: vid
+ });
+ }
if (query.warped === 'true') {
/* You can specify quads so that the corners are 'twisted' and the quad
* would be non-convex. In this case, the quads are each rendered as a
@@ -160,6 +177,11 @@ $(function () {
// asked for it not to have been cached to begin with.
this.cacheUpdate(evt.data);
this.draw();
+ // if this is a video element, start it playing
+ if (quads.video(evt.data)) {
+ quads.video(evt.data).currentTime = 0;
+ quads.video(evt.data).play();
+ }
})
.geoOn(geo.event.feature.mouseout, function (evt) {
if (evt.data.orig_opacity === undefined) {

ADD
testing/test-data/earthquakes-video.webm.md5
+44c731584651c5f3eb22b1d67b05f6c6

ADD
testing/test-data/earthquakes-video.webm.url
+https://data.kitware.com/api/v1/file/59fc667c8d777f31ac648c51/download

ADD
tutorials/video_on_map/index.pug
+extends ../common/index.pug
+
+block mainTutorial
+ :markdown-it
+ # Tutorial - Geospatial Video
+ A quad feature can include a video. If this video corresponds to a geospeatial location, it can be placed on a map with the appropriate coordinates and played when a user clicks on the map.
+
+ +codeblock('javascript', 1).
+ var map = geo.map({
+ node: '#map',
+ // start centered near California
+ center: {x: -115, y: 36},
+ zoom: 6
+ });
+ // place a base tile layer on the map
+ map.createLayer('osm');
+ +codeblock_test('map has an osm layer', [
+ 'map.layers().length === 1',
+ 'map.layers()[0] instanceof geo.osmLayer'
+ ])
+
+ :markdown-it
+ The video requires a feature layer that supports video quads.
+
+ +codeblock('javascript', 2).
+ var layer = map.createLayer('feature', {
+ features: ['quad.video']
+ });
+ // create a quad feature
+ var quads = layer.createFeature('quad');
+ // set the data to a single entry
+ quads.data([{
+ // the corners were determined by the creator of the video
+ ul: {x: -129.0625, y: 42.13468456089552},
+ lr: {x: -100.9375, y: 29.348416310781797},
+ // specify a url for the video source
+ video: '../../data/earthquakes-video.webm'
+ }]);
+ quads.draw();
+ +codeblock_test('map has an osm layer and a feature layer', [
+ 'map.layers().length === 2',
+ 'map.layers()[0] instanceof geo.osmLayer',
+ 'map.layers()[1] instanceof geo.featureLayer',
+ 'map.layers()[1].features().length === 1',
+ 'map.layers()[1].features()[0] instanceof geo.quadFeature'
+ ])
+
+ :markdown-it
+ 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.
+
+ +codeblock('javascript', 3, undefined, true).
+ $('#map').on('click.tutorial', function () {
+ // get the HTML Video Element of the first (and only) quad
+ var video = quads.video(0);
+ if (!video) {
+ // the video isn't loaded yet, so do nothing
+ return;
+ }
+ // toggle play/pause
+ if (video.paused) {
+ // always loop the video
+ video.loop = true;
+ video.play();
+ } else {
+ video.pause();
+ }
+ });
+ //- no tests for this code block.

ADD
tutorials/video_on_map/thumb.jpg
tutorials/video_on_map/thumb.jpg
Binary files /dev/null and b/tutorials/video_on_map/thumb.jpg differ

ADD
tutorials/video_on_map/tutorial.json
+{
+ "title": "Geospatial Video",
+ "hideNavbar": true,
+ "level": 1,
+ "about": {
+ "text": "Place a video quad on a map with the correct geospatial location. This shows how to make a video quad and start it playing from a user action."
+ }
+}

ADD
tutorials/video_single/index.pug
+extends ../common/index.pug
+
+block mainTutorial
+ :markdown-it
+ # 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.
+
+ +codeblock('javascript', 1)(htmlvideo=true).
+ // 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();
+ +codeblock_test('map has a single feature layer', [
+ 'map.layers().length === 1',
+ 'map.layers()[0] instanceof geo.featureLayer',
+ 'map.layers()[0].features().length === 1',
+ 'map.layers()[0].features()[0] instanceof geo.quadFeature'
+ ])
+
+ :markdown-it
+ 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.
+
+ +codeblock('javascript', 2, undefined, true).
+ map.node().on('click.tutorial', function () {
+ // get the HTML Video Element of the first (and only) quad
+ var video = quads.video(0);
+ if (!video) {
+ // the video isn't loaded yet, so do nothing
+ return;
+ }
+ // toggle play/pause
+ if (video.paused) {
+ // always loop the video
+ video.loop = true;
+ video.play();
+ } else {
+ video.pause();
+ }
+ });
+ //- no tests for this code block.
+
+ :markdown-it
+ 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.
+
+ +codeblock('javascript', 3)(webgl=true).
+ var polygonLayer = map.createLayer('feature', {
+ features: ['polygon']
+ });
+ // create a polygon feature
+ var polygons = polygonLayer.createFeature('polygon');
+ // set the data to two polygons
+ polygons.data([[
+ {x: 60, y: 10},
+ {x: 100, y: 10},
+ {x: 120, y: 44.64},
+ {x: 100, y: 79.28},
+ {x: 60, y: 79.28},
+ {x: 40, y: 44.64},
+ {x: 60, y: 10}
+ ], [
+ {x: 600, y: 300},
+ {x: 620, y: 330},
+ {x: 580, y: 330}
+ ]]);
+ polygons.style({
+ stroke: true,
+ strokeColor: 'black',
+ strokeWidth: 2,
+ fillColor: 'yellow',
+ fillOpacity: 0.2
+ });
+ polygons.draw();
+ +codeblock_test('map has two feature layers', [
+ 'map.layers().length === 2',
+ 'map.layers()[0] instanceof geo.featureLayer',
+ 'map.layers()[1] instanceof geo.featureLayer',
+ 'map.layers()[1].features().length >= 1',
+ 'map.layers()[1].features()[0] instanceof geo.polygonFeature'
+ ])

ADD
tutorials/video_single/thumb.jpg
tutorials/video_single/thumb.jpg
Binary files /dev/null and b/tutorials/video_single/thumb.jpg differ

ADD
tutorials/video_single/tutorial.json
+{
+ "title": "Single Video",
+ "hideNavbar": true,
+ "level": 1,
+ "about": {
+ "text": "Fill the complete extent of the map with a single video. Draw a polygon on it."
+ }
+}

Update example and add tutorials.

Add a video to the quads example.

Add two video quad tutorials; one stand-alone quad and one quad positioned on a map.