Customize OpenLayers Control

Question

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?

Answer 1

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

Further reference: Link.

Answer 2

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.

Answer 3

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.

Answer 4

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.