I try to customize PanZoom control and have some questions.

1) What are OpenLayers.Control.PanZoom.X and OpenLayers.Control.PanZoom.Y constants?

2) Method "draw" takes "px" argument as input. I can not find where this method is called and what value of "px" it is passed?

3) Is it possible to change buttons div size through css? I've discovered that size and filenames of images are hardcoded.

2 Answers 2


Cross posted to http://lists.osgeo.org/pipermail/openlayers-dev/2011-July/007776.html and worth posting Christopher Schmidt's answer here too:

The OpenLayers.Control.PanZoom is an old-style control, which can't be controlled via CSS. It is maintained only for backwards compatibility with older applications (Which is why it continues to be the default).

Instead, you should use the OpenLayers.Control.PanPanel and OpenLayers.Control.ZoomPanel; these are new style 'panels' in OpenLayers, which use CSS for all of their styling. (You can see an example of changing the look + feel entirely with CSS at http://openlayers.org/dev/examples/mobile.html , for example.)

So, the answer is: "There is no good reason, other than history, and that's why we wrote something better" :)

Draw Function

The OpenLayers.Control.PanZoom.draw function is called when the control is added to the map (through the map's addControl function).

// Add the passed over control to the map.  
// Optionally position the control at the given pixel.
addControl: function (control, px)

You can pass in an OpenLayers.Pixel to locate the control exactly where you want.

The PanZoom constants are both set to 4 by default and are used for the offset of the images in the DIV that contains the PanZoom controls.


Filenames are hardcoded, but you can change their location (and the files themselves if you want different sizes).

There is a good introduction to the files needed to OpenLayer themes at http://support.mapbox.com/kb/mapping-101/openlayers-themes

Files in GitHub at https://github.com/developmentseed/openlayers_themes


1) When the PanZoom control gets initialized it uses these constants as the initial values for position

37      initialize: function() {
38          this.position = new OpenLayers.Pixel(OpenLayers.Control.PanZoom.X,
39                                               OpenLayers.Control.PanZoom.Y);
40          OpenLayers.Control.prototype.initialize.apply(this, arguments);
41      },

2) Not sure what you mean when you say you can't find where it's called because you get to call it whenever you want to draw the control in a specific place.

3) You can definately use jquery to replace these images with your own (.replaceWith() or .attr('src','images/mynewimage')) . Are you strictly looking for a CSS solution?

  • Thanks for reply. I'm not strictly looking for CSS solution, but it looks not very consistent to have controls with possibility to configure through CSS and without such functionality.
    – drnextgis
    Commented Jul 16, 2011 at 15:42

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.