Open Layers Control Modification

Question

function testPanZoom() {
    console.log("test func");
    var newPanZoom = new OpenLayers.Control.PanZoom();

    OpenLayers.Util.extend(newPanZoom, {
        onButtonClick: function(evt) {
            console.log("test button click");
            var btn = evt.buttonElement;
            switch (btn.action) {
                case "panup": 
                    this.map.pan(0, -this.getSlideFactor("h"));
                    break;
                case "pandown": 
                    this.map.pan(0, this.getSlideFactor("h"));
                    break;
                case "panleft": 
                    this.map.pan(-this.getSlideFactor("w"), 0);
                    break;
                case "panright": 
                    this.map.pan(this.getSlideFactor("w"), 0);
                    break;
                case "zoomin": 
                    this.map.zoomIn(); 
                    break;
                case "zoomout": 
                    this.map.zoomOut(); 
                    break;
                case "zoomworld": 
                    this.map.zoomToExtent(new OpenLayers.Bounds(380983.55914508,
                                                                6668932.8432267,
                                                                392057.98129392,
                                                                6674994.9886843)); 
                    break;
                }
        }
    });
    return newPanZoom;
}

map.addControl(new testPanZoom());

however it does not seem to work.The control is added but zoomToExtent for worldicon in switch case does not really change anything.Can you tell me whats wrong ?

Answer 1

For override control's method you should use the following approach:

OpenLayers.Control.PanZoom.prototype.onButtonClick = function(evt) {
    var btn = evt.buttonElement;
    switch (btn.action) {
        case "panup": 
            this.map.pan(0, -this.getSlideFactor("h"));
            break;
        case "pandown": 
            this.map.pan(0, this.getSlideFactor("h"));
            break;
        case "panleft": 
            this.map.pan(-this.getSlideFactor("w"), 0);
            break;
        case "panright": 
            this.map.pan(this.getSlideFactor("w"), 0);
            break;
        case "zoomin": 
            this.map.zoomIn(); 
            break;
        case "zoomout": 
            this.map.zoomOut(); 
            break;
        case "zoomworld": 
            alert("Hello world!");
            break;
    }
}