From e6458222c1ab70ffd9a9d704b43d491059e7978d Mon Sep 17 00:00:00 2001
From: mike-000 <49240900+mike-000@users.noreply.github.com>
Date: Fri, 26 Jul 2019 13:32:28 +0100
Subject: [PATCH 1/7] Create side-by-side.html

---
 examples/side-by-side.html | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)
 create mode 100644 examples/side-by-side.html

diff --git a/examples/side-by-side.html b/examples/side-by-side.html
new file mode 100644
index 0000000000..7f57354f77
--- /dev/null
+++ b/examples/side-by-side.html
@@ -0,0 +1,16 @@
+---
+layout: example.html
+title: Shared Views
+shortdesc: Two maps with different renderers share view properties
+docs: >
+  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"
+---
+<div class="half">
+  <h4>Canvas</h4>
+  <div id="canvasMap" class="map"></div>
+</div>
+<div class="half">
+  <h4>WebGL</h4>
+  <div id="webglMap" class="map"></div>
+</div>

From 994655457505cc09ec9f381f933bd92a739897ba Mon Sep 17 00:00:00 2001
From: mike-000 <49240900+mike-000@users.noreply.github.com>
Date: Fri, 26 Jul 2019 13:34:28 +0100
Subject: [PATCH 2/7] Create side-by-side.css

---
 examples/side-by-side.css | 7 +++++++
 1 file changed, 7 insertions(+)
 create mode 100644 examples/side-by-side.css

diff --git a/examples/side-by-side.css b/examples/side-by-side.css
new file mode 100644
index 0000000000..aabe991891
--- /dev/null
+++ b/examples/side-by-side.css
@@ -0,0 +1,7 @@
+@media (min-width: 800px) {
+  .half {
+    padding: 0 10px;
+    width: 50%;
+    float: left;
+  }
+}

From ac9b435a744073fe84839a55d55c186bbdd15863 Mon Sep 17 00:00:00 2001
From: mike-000 <49240900+mike-000@users.noreply.github.com>
Date: Fri, 26 Jul 2019 13:36:51 +0100
Subject: [PATCH 3/7] Create side-by-side.js

---
 examples/side-by-side.js | 31 +++++++++++++++++++++++++++++++
 1 file changed, 31 insertions(+)
 create mode 100644 examples/side-by-side.js

diff --git a/examples/side-by-side.js b/examples/side-by-side.js
new file mode 100644
index 0000000000..dd261df886
--- /dev/null
+++ b/examples/side-by-side.js
@@ -0,0 +1,31 @@
+import Map from '../src/ol/Map.js';
+import WebGLMap from '../src/ol/WebGLMap.js';
+import View from '../src/ol/View.js';
+import TileLayer from '../src/ol/layer/Tile.js';
+import WebGLTileLayer from '../src/ol/layer/WebGLTile.js';
+import OSM from '../src/ol/source/OSM.js';
+
+const layer = new TileLayer({
+  source: new OSM()
+});
+
+const webGLLayer = new WebGLTileLayer({
+  source: new OSM()
+});
+
+const view = new View({
+  center: [0, 0],
+  zoom: 1
+});
+
+const map1 = new Map({
+  target: 'canvasMap',
+  layers: [layer],
+  view: view
+});
+
+const map2 = new WebGLMap({
+  target: 'webglMap',
+  layers: [webGLLayer],
+  view: view
+});

From 8034b72231a826ca3e84273dee09fb795c904ccc Mon Sep 17 00:00:00 2001
From: mike-000 <49240900+mike-000@users.noreply.github.com>
Date: Fri, 26 Jul 2019 14:02:37 +0100
Subject: [PATCH 4/7] Update side-by-side.html

---
 examples/side-by-side.html | 17 ++++++++++-------
 1 file changed, 10 insertions(+), 7 deletions(-)

diff --git a/examples/side-by-side.html b/examples/side-by-side.html
index 7f57354f77..73b6ce7fa4 100644
--- a/examples/side-by-side.html
+++ b/examples/side-by-side.html
@@ -1,16 +1,19 @@
 ---
 layout: example.html
 title: Shared Views
-shortdesc: Two maps with different renderers share view properties
+shortdesc: Two maps share view properties
 docs: >
-  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"
+  Two maps (one Road, one Aerial) share the same center, resolution and rotation.
+tags: "side-by-side, bing, bing-maps"
+cloak:
+  - key: As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5
+    value: Your Bing Maps Key from http://www.bingmapsportal.com/ here
 ---
 <div class="half">
-  <h4>Canvas</h4>
-  <div id="canvasMap" class="map"></div>
+  <h4>Road</h4>
+  <div id="roadMap" class="map"></div>
 </div>
 <div class="half">
-  <h4>WebGL</h4>
-  <div id="webglMap" class="map"></div>
+  <h4>Aerial</h4>
+  <div id="aerialMap" class="map"></div>
 </div>

From 1e1a6d0939aae29e19cfcbfe4c9fea294e5aca7f Mon Sep 17 00:00:00 2001
From: mike-000 <49240900+mike-000@users.noreply.github.com>
Date: Fri, 26 Jul 2019 14:17:42 +0100
Subject: [PATCH 5/7] Update side-by-side.js

---
 examples/side-by-side.js | 28 +++++++++++++++++-----------
 1 file changed, 17 insertions(+), 11 deletions(-)

diff --git a/examples/side-by-side.js b/examples/side-by-side.js
index dd261df886..47efa84e3c 100644
--- a/examples/side-by-side.js
+++ b/examples/side-by-side.js
@@ -1,16 +1,22 @@
 import Map from '../src/ol/Map.js';
-import WebGLMap from '../src/ol/WebGLMap.js';
 import View from '../src/ol/View.js';
 import TileLayer from '../src/ol/layer/Tile.js';
-import WebGLTileLayer from '../src/ol/layer/WebGLTile.js';
-import OSM from '../src/ol/source/OSM.js';
+import BingMaps from '../src/ol/source/BingMaps.js';
 
-const layer = new TileLayer({
-  source: new OSM()
+const roadLayer = new TileLayer({
+  source: new BingMaps({
+    key: 'As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5',
+    imagerySet: 'RoadOnDemand',
+    maxZoom: 19
+  })
 });
 
-const webGLLayer = new WebGLTileLayer({
-  source: new OSM()
+const aerialLayer = new TileLayer({
+  source: new BingMaps({
+    key: 'As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5',
+    imagerySet: 'Aerial',
+    maxZoom: 19
+  })
 });
 
 const view = new View({
@@ -19,13 +25,13 @@ const view = new View({
 });
 
 const map1 = new Map({
-  target: 'canvasMap',
-  layers: [layer],
+  target: 'roadMap',
+  layers: [roadLayer],
   view: view
 });
 
 const map2 = new WebGLMap({
-  target: 'webglMap',
-  layers: [webGLLayer],
+  target: 'aerialMap',
+  layers: [aerialLayer],
   view: view
 });

From 576fc6a82ea905e871a6820d445de0de81517418 Mon Sep 17 00:00:00 2001
From: mike-000 <49240900+mike-000@users.noreply.github.com>
Date: Fri, 26 Jul 2019 14:23:49 +0100
Subject: [PATCH 6/7] Update side-by-side.js

---
 examples/side-by-side.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/examples/side-by-side.js b/examples/side-by-side.js
index 47efa84e3c..807766e29e 100644
--- a/examples/side-by-side.js
+++ b/examples/side-by-side.js
@@ -30,7 +30,7 @@ const map1 = new Map({
   view: view
 });
 
-const map2 = new WebGLMap({
+const map2 = new Map({
   target: 'aerialMap',
   layers: [aerialLayer],
   view: view

From c66347c365366c8f96d244c3fcdaae63873e6437 Mon Sep 17 00:00:00 2001
From: mike-000 <49240900+mike-000@users.noreply.github.com>
Date: Fri, 26 Jul 2019 16:31:20 +0100
Subject: [PATCH 7/7] Update side-by-side.js

---
 examples/side-by-side.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/examples/side-by-side.js b/examples/side-by-side.js
index 807766e29e..31596fee95 100644
--- a/examples/side-by-side.js
+++ b/examples/side-by-side.js
@@ -20,8 +20,8 @@ const aerialLayer = new TileLayer({
 });
 
 const view = new View({
-  center: [0, 0],
-  zoom: 1
+  center: [-6655.5402445057125, 6709968.258934638],
+  zoom: 13
 });
 
 const map1 = new Map({