Customize OpenLayers Control

How can I easily customize OpenLayers map controls? Or at least, how can I minimize the controls' height?

Thank you.

PS. Is there any CSS override开发者_StackOverflow?

You can sub-class any of the openLayers controls. I just made a 'zoom-slider' by sub-classing PanZoomBar (panZoomBar.js), overriding the draw() method and commenting out all the button elements, just leaving the zoom slider.. like this:

function zoomSlider(options) {

    this.control = new OpenLayers.Control.PanZoomBar(options);

    OpenLayers.Util.extend(this.control,{
        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 = new OpenLayers.Size(18,18);
            var centered = new OpenLayers.Pixel(px.x+sz.w/2, px.y);

            this._addButton("zoomin", "zoom-plus-mini.png", centered.add(0, 5), sz);
            centered = this._addZoomBar(centered.add(0, sz.h + 5));
            this._addButton("zoomout", "zoom-minus-mini.png", centered, sz);
            return this.div;
        }
    });
    return this.control;
}

var panel = new OpenLayers.Control.Panel();
panel.addControls([
    new zoomSlider({zoomStopHeight:11}),
    new OpenLayers.Control.LayerSwitcher({'ascending':false}),
]);
map.addControl(panel);

There is a CSS file that comes with can controls all of the CSS commands for within openlayers generally .olZoombar { here} It is probably the easiest way to edit those sorts of things otherwise you can edit the actual .js file for the control.

If you are talking about the PanZoomBar or ZoomBar, as has been mentioned, you need to edit the zoomStopHeight. However, You do not need to edit OpenLayers.js.

new OpenLayers.Control.PanZoomBar({zoomStopHeight: 7})

You could consider trying PanZoom, which has no bar.

To minimize the ZoomBar search for zoomStopHeight in OpenLayers.js and edit it as you wish.

Further reference: Link.

Take a look here - http://geojavaflex.blogspot.com/ I am in the process of showing how to do an involved customization of the LayerSwitcher. This might give you ideas on how to do what you are after.

There is a map on the page that shows how the control works, and subsequent posts will discuss the code in detail.

If you are just interested in code see the source of the page and look for the link to CustomLayerSwitcher.js for the customized version of the switcher.