I would like to disable the zoom in button if a user tries to zoom in past a certain level. I would like to disable the zoom out button if a user tries to zoom out past a certain level.

I see that there are minZoom, zoom and maxZoom properties in a View object. Those do correctly prevent a user from zooming past where they should go. However the zoom in and zoom out buttons still look like they work because they are not disabled.

Does anyone have a code snippet, or could point to an example of how buttons on the ol map can be programmatically disabled?

closed as off-topic by ahmadhanb, whyzar, Jochen Schwarze, xunilk, LaughU Feb 21 at 6:54



  • Just curious: Why put question on hold when it already has accepted answwer? – TomazicM Feb 21 at 13:59

Since the behaviour of the zoom buttons are already the way you want them to, you can just set the style of the buttons, for instance via its css background-color (grey seems like a fitting choice).

The view fires the 'change:resolution' event whenever the zoom changes, so you could do something like this (pseudocode, not tested):

  map.getView().on('change:resolution', function(resolution) {
    var view = this; 
    var zoom = view.getZoom(); 
    if (zoom <=  view.getMinZoom || zoom >= view.getMaxZoom) {
      // set css of button here
    } else {
      // reset css of button to its original

the css-classes of the zoom buttons you want to change are ol-zoom-in and ol-zoom-out

  • Thanks for the insight. It looks like getZoomForResolution is now getZoom. – ekjcfn3902039 Feb 20 at 15:15
  • Ah, yes in this case it's the same. Both methods exist, but .getZoom() gets the current zoom, which, of course, is the same as view.getZoomForResolution(resolution), if the resolution is the current resolution. – Rob Feb 20 at 15:24
