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
_______________________________________________
Users mailing list
us...@lists.osgeo.org
http://lists.osgeo.org/mailman/listinfo/openlayers-users
