[OpenLayers-Users] Custom openlayers Controls [specially: PanZoomBar]

[Ashok Kumar]

Hi all,

      I work on  to customize the control like panzoombar in the openlayers
2.12. where i found all the controls like pan-left,right,up,down and
zoomin,zoomout,slider,zoombar where images and functions on the images
.okay here i had an issue with zoombar and the slider.The zoombar image i
loaded by editing the ..//img/ directory images in the openlayers.  i gave
the slider size with as i want but when it load it get small size to fit
with the old zoombar with zoomlevel separation[too small]. I tried with the
method subclassing the our own class to the controls for the
customization.here is my code sample.And with reference to this code i
worked on:

var panZoomBar = new OpenLayers.Control.PanZoomBar({
    panIcons: false // my custom option I use to hide the pan buttons
});
OpenLayers.Util.extend(panZoomBar, {
    draw: function(px) {
        // initialize our internal div
        OpenLayers.Control.prototype.draw.apply(this, arguments);
        px = this.position.clone();

        // place the controls
        this.buttons = [];

        var sz = {w: 18, h: 18};
        if (this.panIcons) { // will only draw our pan tools if this option
is configured
            var centered = new OpenLayers.Pixel(px.x+sz.w/2, px.y);
            var wposition = sz.w;

            if (this.zoomWorldIcon) {
                centered = new OpenLayers.Pixel(px.x+sz.w, px.y);
            }

            this._addButton("panup", "north-mini.png", centered, sz);
            px.y = centered.y+sz.h;
            this._addButton("panleft", "west-mini.png", px, sz);
            if (this.zoomWorldIcon) {
                this._addButton("zoomworld", "zoom-world-mini.png",
px.add(sz.w, 0), sz);

                wposition *= 2;
            }
            this._addButton("panright", "east-mini.png", px.add(wposition,
0), sz);
            this._addButton("pandown", "south-mini.png", centered.add(0,
sz.h*2), sz);
            this._addButton("zoomin", "gmaps-zoom-plus-mini.png",
centered.add(0, sz.h*3+5), sz);
            centered = this._addZoomBar(centered.add(0, sz.h*4 + 5));
            this._addButton("zoomout", "gmaps-zoom-minus-mini.png",
centered, sz);
        }
        else {
            this._addButton("zoomin", "gmaps-zoom-plus-mini.png", px, sz);
            centered = this._addZoomBar(px.add(0, sz.h));
            this._addButton("zoomout", "gmaps-zoom-minus-mini.png",
centered, sz);
            if (this.zoomWorldIcon) {
                centered = centered.add(0, sz.h+3);
                this._addButton("zoomworld", "zoom-world-mini.png",
centered, sz);
            }
        }
        // add custom CSS styles
        $(this.slider).find('img').attr('src', media_url +
'OpenLayers-2.12/img/gmaps-slider.png');
        $(this.zoombarDiv).css('background-image', 'url("' + media_url +
'OpenLayers-2.12/img/gmaps-zoombar.png")');
        return this.div;
    }
});

map.addControl(panZoomBar);

please help me out to find out this solutions or is there any other best
method to get our customized panzoombar in the openlayers.





-- 
with Regards,
Ashokkumar
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.osgeo.org/pipermail/openlayers-users/attachments/20130625/a7d6e9e6/attachment.html>