From 5c2e92191a99f2ce51d90021f3bf4ac854980e55 Mon Sep 17 00:00:00 2001
From: mike-000 <49240900+mike-000@users.noreply.github.com>
Date: Fri, 13 Sep 2019 13:20:55 +0100
Subject: [PATCH 1/3] Update CSS to work outside the examples template

The existing CSS doesn't work in CodeSandBox etc where ol/ol.css is imported in the JavaScript
---
 examples/overviewmap-custom.css | 18 +++++++++++-------
 1 file changed, 11 insertions(+), 7 deletions(-)

diff --git a/examples/overviewmap-custom.css b/examples/overviewmap-custom.css
index 2a5d5bf07b..2b3e9a749e 100644
--- a/examples/overviewmap-custom.css
+++ b/examples/overviewmap-custom.css
@@ -1,32 +1,36 @@
-.ol-custom-overviewmap,
-.ol-custom-overviewmap.ol-uncollapsible {
+.mapcontainer {
+  position: relative;
+}
+
+div.ol-custom-overviewmap,
+div.ol-custom-overviewmap.ol-uncollapsible {
   bottom: auto;
   left: auto;
   right: 0;
   top: 0;
 }
 
-.ol-custom-overviewmap:not(.ol-collapsed)  {
+div.ol-custom-overviewmap:not(.ol-collapsed)  {
   border: 1px solid black;
 }
 
-.ol-custom-overviewmap .ol-overviewmap-map {
+div.ol-custom-overviewmap div.ol-overviewmap-map {
   border: none;
   width: 300px;
 }
 
-.ol-custom-overviewmap .ol-overviewmap-box {
+div.ol-custom-overviewmap div.ol-overviewmap-box {
   border: 2px solid red;
 }
 
-.ol-custom-overviewmap:not(.ol-collapsed) button{
+div.ol-custom-overviewmap:not(.ol-collapsed) button{
   bottom: auto;
   left: auto;
   right: 1px;
   top: 1px;
 }
 
-.ol-rotate {
+div.ol-rotate {
   top: 170px;
   right: 0;
 }

From 763cc15c52a938737d0139674af8d6a233811c3f Mon Sep 17 00:00:00 2001
From: mike-000 <49240900+mike-000@users.noreply.github.com>
Date: Fri, 13 Sep 2019 13:34:07 +0100
Subject: [PATCH 2/3] Add container div for CSS and a rotate checkbox

Wrap the map div in a container to facilitate CSS and add a Rotate with view checkbox
---
 examples/overviewmap-custom.html | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/examples/overviewmap-custom.html b/examples/overviewmap-custom.html
index b84174f2f7..852b11366b 100644
--- a/examples/overviewmap-custom.html
+++ b/examples/overviewmap-custom.html
@@ -10,4 +10,7 @@ cloak:
     value: Your API key from http://www.thunderforest.com/docs/apikeys/ here
 
 ---
-<div id="map" class="map"></div>
+<div class="mapcontainer">
+  <div id="map" class="map"></div>
+</div>
+<div><input type="checkbox" id="rotateWithView">Rotate with view</div>

From ae132643c7daf2d1d8fc63491bcf1ab25cef2355 Mon Sep 17 00:00:00 2001
From: mike-000 <49240900+mike-000@users.noreply.github.com>
Date: Fri, 13 Sep 2019 13:41:45 +0100
Subject: [PATCH 3/3] Add Rotate with view option

Use a checkbox to demonstrate the rotateWithView option
---
 examples/overviewmap-custom.js | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/examples/overviewmap-custom.js b/examples/overviewmap-custom.js
index abf6dae5d1..e82ff9ceb4 100644
--- a/examples/overviewmap-custom.js
+++ b/examples/overviewmap-custom.js
@@ -6,6 +6,8 @@ import TileLayer from '../src/ol/layer/Tile.js';
 import OSM from '../src/ol/source/OSM.js';
 
 
+const rotateWithView = document.getElementById('rotateWithView');
+
 const overviewMapControl = new OverviewMap({
   // see in overviewmap-custom.html to see the custom CSS used
   className: 'ol-overviewmap ol-custom-overviewmap',
@@ -22,6 +24,10 @@ const overviewMapControl = new OverviewMap({
   collapsed: false
 });
 
+rotateWithView.addEventListener('change', function() {
+  overviewMapControl.setRotateWithView(this.checked);
+});
+
 const map = new Map({
   controls: defaultControls().extend([
     overviewMapControl