The documentation mentions that the rotate button is always hidden, when the rotation of the view is 0: https://openlayers.org/en/latest/apidoc/module-ol_control_Rotate-Rotate.html

A .ol-hidden css selector is added to the button when the rotation is 0.

After searching for hours, I wonder if OpenLayers offers any way to make this button always visible?

I know how to override CSS and I also know how I could use vanilla JS. But before doing so, I would like to make sure that I haven't overseen anything in the docu.


According to the first answer, the configuration is done on the map object on its control param.

// Vue
import { defaults as defaultControls } from 'ol/control'
export default {
  mounted() {
    this.olMap = new Map({
      controls: defaultControls({
        rotateOptions: { autoHide: false }

That works. But how is "autoHide: false" as a configuration option for the control implemented, as the first part of the answer suggests?


The first half of the first answer refers to a situation, where ONLY a rotate button is supposed to be included. In that case the code would look like this:

// No need to import "default" controls...
import Rotate from 'ol/control/Rotate'
export default {
  mounted() {
    this.olMap = new Map({
      // "controls" expects an array:
      controls: [new Rotate({ autoHide: false })]

The second solution as shown, hover, does not display any other buttons (e.g. zoom) but the rotate button. They would have to be implemented separately in the same way as the rotate button.

  • 2
    autoHide: false in the control options or defaultControls({ rotateOptions: { autoHide: false} }) – Mike Mar 20 at 22:10
  • Thank you! I updated the question - would you mind to have another look? And could I motivate you to post your answer as a real answer, so I can upvote it? – Robert Wildling Mar 21 at 11:18

Use autoHide: false in the control options or defaultControls({ rotateOptions: { autoHide: false} }).

When autoHide is false the code to set the hidden css class on the element is never called https://github.com/openlayers/openlayers/blob/main/src/ol/control/Rotate.js#L171

Here is an example (from another question) of using autoHide: false with a custom label https://codesandbox.io/s/rotation-forked-pmgb2

  • Above you write: "autoHide: false in the control options" – I still do not understand how to configure the "control options". I tried control: [ { autohide: false } ], but that throws an error. I also updated the question again hoping to clarify my problem in understanding a bit better. Any chance you could provide an example? (The link you posted shows a solution for defaultOptions - that one is clear.) – Robert Wildling Mar 21 at 12:54
  • If you wanted only a rotate control without the other defaults you would use new Rotate({autoHide: false}) – Mike Mar 21 at 13:00
  • And that would be on the controls param, so controls: new Rotate({ ... })? – Robert Wildling Mar 21 at 13:01
  • 1
    controls expects an array, so controls: [new Rotate({ ... })] – Mike Mar 21 at 13:03
  • ...and an import! Now it works! Thank you! I will update the question with your answer. – Robert Wildling Mar 21 at 13:05

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.