Implementing a new control:

• requires:
  • draw
  • Tool types (have state)
    • activate()
    • deactivate()
  • Button Types
    • trigger
  • properties:
    • displayClass (a la olControlName) or CLASS_NAME (OpenLayers.Control.Name)

Simplest control that could possibly work (designed for a toolbar):

ZoomOut = function() { };
ZoomOut.prototype = {
    displayClass: 'mbControlZoomOut',
    type: 1, // constant from OpenLayers.Control
    setMap: function(map) {
        this.map = map;
    },
    draw: function() {
    },
    trigger: function() {
        this.map.zoomOut();
    }
}

How to style this:

.olControlPanel { 
  top: 100px;
  left: 10px;
}

.olControlPanel div {
  margin:5px;
  width:20px;
  height:20px;
  background-color:red;
}  

.olControlPanel .mbControlZoomOutItemActive {
  background-color:orange;
}

.olControlPanel .mbControlZoomOutItemInactive {
  background-color:blue;
}

How to write it in code:

var panel = new OpenLayers.Control.Panel();
panel.addControls([new ZoomOut()]);
map.addControl(panel);

• Old Style Controls
  • MouseDefaults
  • MouseToolbar
  • Can't be turned off, only added to the map
  • Control of display is difficult
  • Not designed to be used with other tools
• New style controls
  • have activate/deactivate methods which turn handlers on/off
  • When activated, goes to front of event queue and handles events
  • when deactivated, removes event handlers
  • uses handler classes for most 'hard' work -- box, drag, etc. are done via callbacks
  • Support for 'button' types, which just have a 'trigger' method which causes an action to happen instantly.
  • examples
    • Navigation.js
    • NavToolbar.js