Updated

master/examples/side-by-side.js

@@ -1,12 +1,15 @@
 goog.require('goog.debug.Console');
 goog.require('goog.debug.Logger');
 goog.require('goog.debug.Logger.Level');
+goog.require('ol.Collection');
 goog.require('ol.Coordinate');
 goog.require('ol.Map');
+goog.require('ol.Projection');
 goog.require('ol.RendererHint');
 goog.require('ol.View2D');
 goog.require('ol.animation');
 goog.require('ol.control.MousePosition');
+goog.require('ol.easing');
 goog.require('ol.interaction.Keyboard');
 goog.require('ol.layer.TileLayer');
 goog.require('ol.source.MapQuestOpenAerial');
@@ -39,12 +42,13 @@ var domMap = new ol.Map({
   view: view
 });
 
-domMap.getControls().push(new ol.control.MousePosition({
+var domMousePosition = new ol.control.MousePosition({
   coordinateFormat: ol.Coordinate.toStringHDMS,
   projection: ol.Projection.getFromCode('EPSG:4326'),
   target: document.getElementById('domMousePosition'),
   undefinedHTML: ' '
-}));
+});
+domMousePosition.setMap(domMap);
 
 var webglMap = new ol.Map({
   renderer: ol.RendererHint.WEBGL,
@@ -55,12 +59,13 @@ if (webglMap !== null) {
   webglMap.bindTo('view', domMap);
 }
 
-webglMap.getControls().push(new ol.control.MousePosition({
+var webglMousePosition = new ol.control.MousePosition({
   coordinateFormat: ol.Coordinate.toStringHDMS,
   projection: ol.Projection.getFromCode('EPSG:4326'),
   target: document.getElementById('webglMousePosition'),
   undefinedHTML: ' '
-}));
+});
+webglMousePosition.setMap(webglMap);
 
 var canvasMap = new ol.Map({
   renderer: ol.RendererHint.CANVAS,
@@ -71,12 +76,13 @@ if (canvasMap !== null) {
   canvasMap.bindTo('view', domMap);
 }
 
-canvasMap.getControls().push(new ol.control.MousePosition({
+var canvasMousePosition = new ol.control.MousePosition({
   coordinateFormat: ol.Coordinate.toStringHDMS,
   projection: ol.Projection.getFromCode('EPSG:4326'),
   target: document.getElementById('canvasMousePosition'),
   undefinedHtml: ' '
-}));
+});
+canvasMousePosition.setMap(canvasMap);
 
 var keyboardInteraction = new ol.interaction.Keyboard();
 keyboardInteraction.addCallback('0', function() {
@@ -107,46 +113,77 @@ keyboardInteraction.addCallback('H', function() {
   layer.setHue(layer.getHue() + (Math.PI / 5));
 });
 keyboardInteraction.addCallback('j', function() {
-  var bounce = ol.animation.createBounce(2 * view.getResolution());
+  var bounce = ol.animation.bounce({
+    resolution: 2 * view.getResolution()
+  });
   domMap.addPreRenderFunction(bounce);
   webglMap.addPreRenderFunction(bounce);
   canvasMap.addPreRenderFunction(bounce);
 });
 keyboardInteraction.addCallback('l', function() {
-  var panFrom = ol.animation.createPanFrom(view.getCenter());
-  domMap.addPreRenderFunction(panFrom);
-  webglMap.addPreRenderFunction(panFrom);
-  canvasMap.addPreRenderFunction(panFrom);
+  var pan = ol.animation.pan({
+    source: view.getCenter(),
+    easing: ol.easing.elastic
+  });
+  domMap.addPreRenderFunction(pan);
+  webglMap.addPreRenderFunction(pan);
+  canvasMap.addPreRenderFunction(pan);
   view.setCenter(LONDON);
 });
 keyboardInteraction.addCallback('L', function() {
-  var start = Date.now();
+  var start = goog.now();
   var duration = 5000;
-  var bounce = ol.animation.createBounce(
-      2 * view.getResolution(), duration, start);
-  var panFrom = ol.animation.createPanFrom(view.getCenter(), duration, start);
-  var spin = ol.animation.createSpin(duration, 2, start);
-  var preRenderFunctions = [bounce, panFrom, spin];
+  var bounce = ol.animation.bounce({
+    resolution: 2 * view.getResolution(),
+    start: start,
+    duration: duration
+  });
+  var pan = ol.animation.pan({
+    source: view.getCenter(),
+    start: start,
+    duration: duration
+  });
+  var rotate = ol.animation.rotate({
+    rotation: 4 * Math.PI,
+    start: start,
+    duration: duration
+  });
+  var preRenderFunctions = [bounce, pan, rotate];
   domMap.addPreRenderFunctions(preRenderFunctions);
   webglMap.addPreRenderFunctions(preRenderFunctions);
   canvasMap.addPreRenderFunctions(preRenderFunctions);
   view.setCenter(LONDON);
 });
 keyboardInteraction.addCallback('m', function() {
-  var panFrom = ol.animation.createPanFrom(view.getCenter(), 1000);
-  domMap.addPreRenderFunction(panFrom);
-  webglMap.addPreRenderFunction(panFrom);
-  canvasMap.addPreRenderFunction(panFrom);
+  var pan = ol.animation.pan({
+    source: view.getCenter(),
+    duration: 1000,
+    easing: ol.easing.bounce
+  });
+  domMap.addPreRenderFunction(pan);
+  webglMap.addPreRenderFunction(pan);
+  canvasMap.addPreRenderFunction(pan);
   view.setCenter(MOSCOW);
 });
 keyboardInteraction.addCallback('M', function() {
-  var start = Date.now();
+  var start = goog.now();
   var duration = 5000;
-  var bounce = ol.animation.createBounce(
-      2 * view.getResolution(), duration, start);
-  var panFrom = ol.animation.createPanFrom(view.getCenter(), duration, start);
-  var spin = ol.animation.createSpin(duration, -2, start);
-  var preRenderFunctions = [bounce, panFrom, spin];
+  var bounce = ol.animation.bounce({
+    resolution: 2 * view.getResolution(),
+    start: start,
+    duration: duration
+  });
+  var pan = ol.animation.pan({
+    source: view.getCenter(),
+    start: start,
+    duration: duration
+  });
+  var rotate = ol.animation.rotate({
+    rotation: -4 * Math.PI,
+    start: start,
+    duration: duration
+  });
+  var preRenderFunctions = [bounce, pan, rotate];
   domMap.addPreRenderFunctions(preRenderFunctions);
   webglMap.addPreRenderFunctions(preRenderFunctions);
   canvasMap.addPreRenderFunctions(preRenderFunctions);
@@ -172,15 +209,21 @@ keyboardInteraction.addCallback('vV', function() {
   layer.setVisible(!layer.getVisible());
 });
 keyboardInteraction.addCallback('x', function() {
-  var spin = ol.animation.createSpin(2000, 2);
-  domMap.addPreRenderFunction(spin);
-  webglMap.addPreRenderFunction(spin);
-  canvasMap.addPreRenderFunction(spin);
+  var rotate = ol.animation.rotate({
+    rotation: 4 * Math.PI,
+    duration: 2000
+  });
+  domMap.addPreRenderFunction(rotate);
+  webglMap.addPreRenderFunction(rotate);
+  canvasMap.addPreRenderFunction(rotate);
 });
 keyboardInteraction.addCallback('X', function() {
-  var spin = ol.animation.createSpin(2000, -2);
-  domMap.addPreRenderFunction(spin);
-  webglMap.addPreRenderFunction(spin);
-  canvasMap.addPreRenderFunction(spin);
+  var rotate = ol.animation.rotate({
+    rotation: -4 * Math.PI,
+    duration: 2000
+  });
+  domMap.addPreRenderFunction(rotate);
+  webglMap.addPreRenderFunction(rotate);
+  canvasMap.addPreRenderFunction(rotate);
 });
 domMap.getInteractions().push(keyboardInteraction);