Merge pull request #9931 from mike-000/patch-4

Custom Overview Map CSS fix and rotateWithView option

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;
 }

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>

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