[OpenLayers-Users] Customize controls

[Frank Broniewski]

Ok, this is what I did to achive that. I overloaded some methods of 
OpenLayers.Controls.PanZoomBar. My client wanted reverse order zooming, 
starting with the smallest scale with the slider at top of the zoom tool and 
custom graphics.

I had to overload the following properties and methods:
    OpenLayers.Control.PanZoomBar.prototype.zoomStopWidth = 22
    OpenLayers.Control.PanZoomBar.prototype.zoomStopHeight = 14
    OpenLayers.Control.PanZoomBar.prototype.draw = pzb_draw;
    OpenLayers.Control.PanZoomBar.prototype.zoomBarUp = zoomBarUp;
    OpenLayers.Control.PanZoomBar.prototype.divClick = divClick;
    OpenLayers.Control.PanZoomBar.prototype._addZoomBar = custom_zoombar;
    OpenLayers.Control.PanZoomBar.prototype.moveZoomBar = move_zoom_bar;

Here's the code to share:
function pzb_draw(px) {
    OpenLayers.Control.prototype.draw.apply(this, arguments);
    px = this.position.clone();

    // place the controls
    this.buttons = [];
    var centered = px;

    centered = this._addZoomBar(centered);

    return this.div;
}

function custom_zoombar(centered) {
    var id = this.id + "_" + this.map.id;
    var zoomsToEnd = this.map.getNumZoomLevels() - 1 - this.map.getZoom();
    var slider = OpenLayers.Util.createAlphaImageDiv(id,
                   centered.add(11,-4), 
                   new OpenLayers.Size(20,13), 
                   'http://www.gis-hosting.lu/fe09/zoom_slider.png',
                   "absolute");
    this.slider = slider;

    this.sliderEvents = new OpenLayers.Events(this, slider, null, true,
                                        {includeXY: true});
    this.sliderEvents.on({
        "mousedown": this.zoomBarDown,
        "mousemove": this.zoomBarDrag,
        "mouseup": this.zoomBarUp,
        "dblclick": this.doubleClick,
        "click": this.doubleClick
    });

    var sz = new OpenLayers.Size();
    sz.h = 65;
    sz.w = 47;
    var div = null;

    if (OpenLayers.Util.alphaHack()) {
        var id = this.id + "_" + this.map.id;
        div = OpenLayers.Util.createAlphaImageDiv(id, centered,
                                  new OpenLayers.Size(sz.w, 
                                          this.zoomStopHeight),
                                  'http://www.gis-
hosting.lu/fe09/zlevels.png', 
                                  "absolute", null, "crop");
        div.style.height = sz.h + "px";
    } else {
        div = OpenLayers.Util.createDiv(
                    'OpenLayers_Control_PanZoomBar_Zoombar' + this.map.id,
                    centered,
                    sz,
                    'http://www.gis-hosting.lu/fe09/zlevels.png');
    }

    this.zoombarDiv = div;

    this.divEvents = new OpenLayers.Events(this, div, null, true, 
                                            {includeXY: true});
    this.divEvents.on({
        "mousedown": this.divClick,
        "mousemove": this.passEventToSlider,
        "dblclick": this.doubleClick,
        "click": this.doubleClick
    });

    this.div.appendChild(div);

    this.startTop = parseInt(div.style.top);
    this.div.appendChild(slider);

    this.map.events.register("zoomend", this, this.moveZoomBar);

    centered = centered.add(0, 
        this.zoomStopHeight * this.map.getNumZoomLevels());
    return centered; 
}

function move_zoom_bar() {
        var diff = this.map.getZoom();
        var newTop = (diff) * this.zoomStopHeight + this.startTop - 2;
        this.slider.style.top = newTop + "px";
}

function divClick(evt) {
    if (!OpenLayers.Event.isLeftClick(evt)) {
        return;
    }
    var y = evt.xy.y;
    var top = OpenLayers.Util.pagePosition(evt.object)[1];
    var levels = (y - top)/this.zoomStopHeight;

    if(!this.map.fractionalZoom) {
        levels = Math.floor(levels);
    }    

    var zoom = levels; 
    zoom = Math.min(Math.max(zoom, 0), this.map.getNumZoomLevels() - 1);
    this.map.zoomTo(zoom);
    OpenLayers.Event.stop(evt);
}

function zoomBarUp(evt) {
    if (!OpenLayers.Event.isLeftClick(evt)) {
        return;
    }
    if (this.zoomStart) {
        this.div.style.cursor="";
        this.map.events.un({
            "mouseup": this.passEventToSlider,
            "mousemove": this.passEventToSlider,
            scope: this
        });
        var deltaY = (this.zoomStart.y - evt.xy.y) * -1;
        var zoomLevel = this.map.zoom;
        if (this.map.fractionalZoom) {
            zoomLevel += deltaY/this.zoomStopHeight;
            zoomLevel = Math.min(Math.max(zoomLevel, 0), 
                                 this.map.getNumZoomLevels() - 1);
        } else {
            zoomLevel += Math.round(deltaY/this.zoomStopHeight);
        }
        this.map.zoomTo(zoomLevel);
        this.moveZoomBar();
        this.mouseDragStart = null;
        OpenLayers.Event.stop(evt);
    }
}


On Wednesday 08 July 2009 09:17:02 Frank Broniewski wrote:
> Hi list
>
> I am currently trying to modify the control PanZoomBar(). My whish is to
> remove the pan panel but to keep the slider. Unfortunately there is no
> separate control for the slider itself (OpenLayers.Control.ZoomBar), though
> it is sometimes mentioned in the class docs. I tried to follow the
> instructions on http://docs.openlayers.org/library/controls.html, but
> honestly this doesn't help me much. I am probably just to stupid to
> transfer the editing toolbar example to the PanZoomBar. The first example
> in
> http://docs.openlayers.org/library/controls.html is somewhat tricky as the
> two controls in navtoolbar have its own div and css class which is not the
> case for PanZoomBar.
>
> I see that there is a css class for the panzoombar panel and I can control
> position and things like that, but the controls inside panzoombar panel
> don't have a css class attached (firebug tells me so), so I don't know how
> to modify them through css at all as the ids keep changing.
>
> I want to create a very different looking zoom slider and right now my best
> bet is to override the draw method in OpenLayers.Control.PanZoomBar to get
> my desired layout.
>
> Is it possible to remove the pan panel through means of css and style the
> slider? Or is it necessary to override the draw method in order to achieve
> that?
>
> many thanks
>
> Frank


-- 
Frank Broniewski

Metrico s.àr.l. ( http://www.metrico.lu )
36, rue des Romains 
L-5433 Niederdonven 
Luxembourg

Fon: +352 26 74 94 28 
Fax: +352 26 74 94 99