Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. It's 100% free, no registration required.

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

So I've created a map in openlayers and I am setting it up so that there are only certain zoom levels a user can see. I have the code created to handle forcing a user to the next acceptable zoom level when they attempt to zoom in/out. I have been able to create listener for handling double-clicks (see code below) but for the life of me I cannot figure out how to capture mousewheel events.

The documentation makes it seem like it should be straightforward but I've been banging my head against a wall for more than a day trying to figure this out. All my googling has turned up plenty of results for disabling the mousewheel but nothing for capturing wheel events.

function init() {
    map = new OpenLayers.Map('map_canvas',mapSettings);

    var click = new OpenLayers.Control.Click();

OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control, {
    defaultHandlerOptions: {
    'single': false,
    'double': true,
    'pixelTolerance': 0,
    'stopSingle': false,
    'stopDouble': false

    initialize: function(options) {
        this.handlerOptions = OpenLayers.Util.extend(
        {}, this.defaultHandlerOptions
        this, arguments
        this.handler = new OpenLayers.Handler.Click(
        this, {
        'dblclick': this.trigger
        }, this.handlerOptions

    trigger: function(e) {
        var lonlat = map.getLonLatFromViewPortPx(e.xy);
        curZoom = map.getZoom();
        var newZoom = stepZoomIn(map.getZoom());

share|improve this question
up vote 2 down vote accepted

I was able to accomplish this by defining my own control derived from Navigation control.

var NavigationControl = OpenLayers.Class(OpenLayers.Control.Navigation, {
  wheelDown: function(evt, delta) {
    if (canZoomOut()) {
      return OpenLayers.Control.Navigation.prototype.wheelDown.apply(this,arguments);
    } else {
      console.log('Blocked user of zooming out');

map.addControl(new NavigationControl());

This of course will work only as long as Navigation control defines wheelDown - function. If Navigation control is modified in later OpenLayers version then this will brake as well.

share|improve this answer

OpenLayers has a mousewheel handler. You might want to check it out.

share|improve this answer
Thanks for the link/response. I have actually read through the docs a bunch of times and spent hours trying to use it but just cannot seem to wrap my brain around it. I've tried googling as well but that got me nowhere. Case in point, my gis.SE question shows up - for me - as the 6th result when searching for "openlayers mousewheel handler" The first 4 results are to documentation and the 5th is how to make a custom build of OL. – malonso Feb 12 '12 at 14:59

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

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