Take the 2-minute tour ×
Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. It's 100% free, no registration required.

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
add comment

2 Answers

up vote 5 down vote accepted

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

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

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
add comment

Your Answer

 
discard

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.