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; } 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 --- -
+
+
+
+
Rotate with view
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