Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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.

share|improve this question
up vote 6 down vote accepted

Cross posted to 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 , 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

Files in GitHub at

share|improve this answer
+ 1: Thanks for the themes info. – CaptDragon Jul 15 '11 at 16:00

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?

share|improve this answer
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 Jul 16 '11 at 15:42

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

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