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

This question appears to be off-topic. The users who voted to close gave this specific reason:

  • "When seeking help to debug/write/improve code always provide the desired behavior, a specific problem/error and the shortest code (as formatted text, not pictures) needed to reproduce it in the question body. Providing a clear problem statement and a code attempt helps others to help you." – ahmadhanb, whyzar, Jochen Schwarze, xunilk, LaughU
If this question can be reworded to fit the rules in the help center, please edit the question.

  • 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

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