diff --git a/examples/side-by-side.html b/examples/side-by-side.html
index aadcb3c856..4defaff50b 100644
--- a/examples/side-by-side.html
+++ b/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.
-tags: "side-by-side, canvas, webgl, dom, canvas, sync, object"
+ 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"
---
Canvas
@@ -13,5 +13,3 @@ tags: "side-by-side, canvas, webgl, dom, canvas, sync, object"
This map requires a browser that supports
WebGL.
-DOM
-
diff --git a/examples/side-by-side.js b/examples/side-by-side.js
index 056a95ce13..43a03a3d4c 100644
--- a/examples/side-by-side.js
+++ b/examples/side-by-side.js
@@ -4,33 +4,27 @@ goog.require('ol.has');
goog.require('ol.layer.Tile');
goog.require('ol.source.OSM');
-
-var map1 = new ol.Map({
- layers: [
- new ol.layer.Tile({
- source: new ol.source.OSM()
- })
- ],
- renderer: 'dom',
- target: 'domMap',
- view: new ol.View({
- center: [0, 0],
- zoom: 1
- })
+var layer = new ol.layer.Tile({
+ source: new ol.source.OSM()
});
-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(),
- view: map1.getView()
+ layers: [layer],
+ view: view
});
if (ol.has.WEBGL) {
- var map3 = new ol.Map({
- renderer: 'webgl',
+ var map2 = new ol.Map({
target: 'webglMap',
- layers: map1.getLayers(),
- view: map1.getView()
+ renderer: 'webgl',
+ layers: [layer],
+ view: view
});
} else {
var info = document.getElementById('no-webgl');