[OpenLayers-Users] OL 2.6, customized navigation buttons

[Andrea Battisti]

Hi,


I'd like to change the default layout and size of the navigation buttons
(pan + zoom).


I am trying to use OpenLayers.Control.Button to add a few CSS-styled
buttons and connect them to the pan and zoom actions.
As suggested by the docs, I tried:


var panel = new OpenLayers.Control.Panel();
var button = new OpenLayers.Control.Button({
    displayClass: "MyButton", trigger: myFunction
});
panel.addControls([button]);
map.addControl( panel );




As for the CSS :


.olControlPanel div {
  display:block;
  width:  24px;
  height: 24px;
  margin: 5px;
  background-color:red;
}
       
.olControlPanel .MyButtonItemInactive {
  width:  22px; 
  height: 22px;
  background-color: orange;
}



This way I can see the button, but it is overlayed on the map.
How can I control its positioning? Can I place it outside the map?


Also, what would be the best way to connect the buttons to the map
navigation functions?
I tried to set "myFunction" to something like map.zoomIn but didn't make it.



Thanks in advance,

-- 
Andrea Battisti
Applied Coherent Technology Corp.