diff --git a/examples/side-by-side.html b/examples/side-by-side.html
index c116a50b23..ed0323060f 100644
--- a/examples/side-by-side.html
+++ b/examples/side-by-side.html
@@ -53,22 +53,6 @@
side-by-side, canvas, webgl, dom, canvas, sync, object
-
-
Controls
-
- - Pan
- - drag, arrow keys
- - Zoom
- - double-click,
Shift+double-click, mouse wheel, +/- keys; Shift+drag
- - Opacity
- o/O keys
- - Visibility
- v/V keys
- - Reset
- 0 key
-
-
-
diff --git a/examples/side-by-side.js b/examples/side-by-side.js
index a7e9dfdf20..dcef259cf6 100644
--- a/examples/side-by-side.js
+++ b/examples/side-by-side.js
@@ -1,69 +1,37 @@
-goog.require('ol.Collection');
goog.require('ol.Coordinate');
goog.require('ol.Map');
goog.require('ol.RendererHint');
goog.require('ol.View2D');
-goog.require('ol.interaction.Keyboard');
goog.require('ol.layer.TileLayer');
-goog.require('ol.projection');
goog.require('ol.source.MapQuestOpenAerial');
-var LONDON = ol.projection.transform(
- new ol.Coordinate(-0.12755, 51.507222), 'EPSG:4326', 'EPSG:3857');
-var MOSCOW = ol.projection.transform(
- new ol.Coordinate(37.6178, 55.7517), 'EPSG:4326', 'EPSG:3857');
-
-var layer = new ol.layer.TileLayer({
- source: new ol.source.MapQuestOpenAerial()
-});
-
-var view = new ol.View2D({
- center: new ol.Coordinate(0, 0),
- zoom: 1
-});
-
var domMap = new ol.Map({
- layers: new ol.Collection([layer]),
+ layers: [
+ new ol.layer.TileLayer({
+ source: new ol.source.MapQuestOpenAerial()
+ })
+ ],
renderer: ol.RendererHint.DOM,
target: 'domMap',
- view: view
+ view: new ol.View2D({
+ center: new ol.Coordinate(0, 0),
+ zoom: 1
+ })
});
+
var webglMap = new ol.Map({
renderer: ol.RendererHint.WEBGL,
target: 'webglMap'
});
-if (webglMap !== null) {
- webglMap.bindTo('layers', domMap);
- webglMap.bindTo('view', domMap);
-}
+webglMap.bindTo('layers', domMap);
+webglMap.bindTo('view', domMap);
var canvasMap = new ol.Map({
renderer: ol.RendererHint.CANVAS,
target: 'canvasMap'
});
-if (canvasMap !== null) {
- canvasMap.bindTo('layers', domMap);
- canvasMap.bindTo('view', domMap);
-}
-
-var keyboardInteraction = new ol.interaction.Keyboard();
-keyboardInteraction.addCallback('0', function() {
- layer.setOpacity(1);
- layer.setVisible(true);
-});
-keyboardInteraction.addCallback('o', function() {
- layer.setOpacity(layer.getOpacity() - 0.125);
-});
-keyboardInteraction.addCallback('O', function() {
- layer.setOpacity(layer.getOpacity() + 0.125);
-});
-keyboardInteraction.addCallback('r', function() {
- view.setRotation(0);
-});
-keyboardInteraction.addCallback('vV', function() {
- layer.setVisible(!layer.getVisible());
-});
-domMap.getInteractions().push(keyboardInteraction);
+canvasMap.bindTo('layers', domMap);
+canvasMap.bindTo('view', domMap);