Update the side-by-side example

examples/side-by-side.html

@@ -1,10 +1,10 @@
 ---
 layout: example.html
 title: Shared Views
-shortdesc: The three maps, one WebGL, one Canvas, one DOM, share the same center, resolution, rotation and layers.
+shortdesc: Two maps with different renderers share view properties
 docs: >
-  The three maps, one WebGL, one Canvas, one DOM, share the same center, resolution, rotation and layers.
+  Two maps (one with the Canvas renderer, one with the WebGL renderer) share the same center, resolution, rotation and layers.
-tags: "side-by-side, canvas, webgl, dom, canvas, sync, object"
+tags: "side-by-side, canvas, webgl"
 ---
 <h4>Canvas</h4>
 <div id="canvasMap" class="map"></div>
@@ -13,5 +13,3 @@ tags: "side-by-side, canvas, webgl, dom, canvas, sync, object"
 <div id="no-webgl" class="alert alert-danger" style="display: none">
   This map requires a browser that supports <a href="http://get.webgl.org/">WebGL</a>.
 </div>
-<h4>DOM</h4>
-<div id="domMap" class="map"></div>

examples/side-by-side.js

@@ -4,33 +4,27 @@ goog.require('ol.has');
 goog.require('ol.layer.Tile');
 goog.require('ol.source.OSM');
 
-
+var layer = new ol.layer.Tile({
-var map1 = new ol.Map({
+  source: new ol.source.OSM()
-  layers: [
-    new ol.layer.Tile({
-      source: new ol.source.OSM()
-    })
-  ],
-  renderer: 'dom',
-  target: 'domMap',
-  view: new ol.View({
-    center: [0, 0],
-    zoom: 1
-  })
 });
 
-var map2 = new ol.Map({
+var view = new ol.View({
+  center: [0, 0],
+  zoom: 1
+});
+
+var map1 = new ol.Map({
   target: 'canvasMap',
-  layers: map1.getLayers(),
+  layers: [layer],
-  view: map1.getView()
+  view: view
 });
 
 if (ol.has.WEBGL) {
-  var map3 = new ol.Map({
+  var map2 = new ol.Map({
-    renderer: 'webgl',
     target: 'webglMap',
-    layers: map1.getLayers(),
+    renderer: 'webgl',
-    view: map1.getView()
+    layers: [layer],
+    view: view
   });
 } else {
   var info = document.getElementById('no-webgl');