OpenLayers PanZoom control customization

Question

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.

Answer 1

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.

Theming

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

Answer 2

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?