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;
+ }
+}
diff --git a/examples/side-by-side.html b/examples/side-by-side.html
new file mode 100644
index 0000000000..73b6ce7fa4
--- /dev/null
+++ b/examples/side-by-side.html
@@ -0,0 +1,19 @@
+---
+layout: example.html
+title: Shared Views
+shortdesc: Two maps share view properties
+docs: >
+ 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
+---
+
+
diff --git a/examples/side-by-side.js b/examples/side-by-side.js
new file mode 100644
index 0000000000..31596fee95
--- /dev/null
+++ b/examples/side-by-side.js
@@ -0,0 +1,37 @@
+import Map from '../src/ol/Map.js';
+import View from '../src/ol/View.js';
+import TileLayer from '../src/ol/layer/Tile.js';
+import BingMaps from '../src/ol/source/BingMaps.js';
+
+const roadLayer = new TileLayer({
+ source: new BingMaps({
+ key: 'As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5',
+ imagerySet: 'RoadOnDemand',
+ maxZoom: 19
+ })
+});
+
+const aerialLayer = new TileLayer({
+ source: new BingMaps({
+ key: 'As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5',
+ imagerySet: 'Aerial',
+ maxZoom: 19
+ })
+});
+
+const view = new View({
+ center: [-6655.5402445057125, 6709968.258934638],
+ zoom: 13
+});
+
+const map1 = new Map({
+ target: 'roadMap',
+ layers: [roadLayer],
+ view: view
+});
+
+const map2 = new Map({
+ target: 'aerialMap',
+ layers: [aerialLayer],
+ view: view
+});