Controls affect the display or behavior of the map. They allow everything from panning and zooming to displaying a scale indicator. Controls by default are added to the map they are contained within however it is possible to add a control to an external div by passing the div in the options parameter.
Example
The following example shows how to add many of the common controls to a map.
var map = new OpenLayers.Map('map', { controls: [] });
map.addControl(new OpenLayers.Control.PanZoomBar());
map.addControl(new OpenLayers.Control.MouseToolbar());
map.addControl(new OpenLayers.Control.LayerSwitcher({'ascending':false}));
map.addControl(new OpenLayers.Control.Permalink());
map.addControl(new OpenLayers.Control.Permalink('permalink'));
map.addControl(new OpenLayers.Control.MousePosition());
map.addControl(new OpenLayers.Control.OverviewMap());
map.addControl(new OpenLayers.Control.KeyboardDefaults());
The next code fragment is a quick example of how to intercept shift-mouse click to display the extent of the bounding box dragged out by the user. Usually controls are not created in exactly this manner. See the source for a more complete example:
var control = new OpenLayers.Control();
OpenLayers.Util.extend(control, {
draw: function () {
// this Handler.Box will intercept the shift-mousedown
// before Control.MouseDefault gets to see it
this.box = new OpenLayers.Handler.Box( control,
{"done": this.notice},
{keyMask: OpenLayers.Handler.MOD_SHIFT});
this.box.activate();
},
notice: function (bounds) {
OpenLayers.Console.userError(bounds);
}
});
map.addControl(control);
Summary
OpenLayers.Control | Controls affect the display or behavior of the map. |
Properties | |
id | {String} |
map | {OpenLayers.Map} this gets set in the addControl() function in OpenLayers.Map |
div | {DOMElement} |
type | {OpenLayers.Control.TYPES} Controls can have a ‘type’. |
allowSelection | {Boolean} By deafault, controls do not allow selection, because it may interfere with map dragging. |
displayClass | {string} This property is used for CSS related to the drawing of the Control. |
title | {string} This property is used for showing a tooltip over the Control. |
active | {Boolean} The control is active. |
handler | {OpenLayers.Handler} null |
eventListeners | {Object} If set as an option at construction, the eventListeners object will be registered with OpenLayers.Events.on. |
events | {OpenLayers.Events} Events instance for triggering control specific events. |
Constants | |
EVENT_TYPES | {Array(String)} Supported application event types. |
Constructor | |
OpenLayers.Control | Create an OpenLayers Control. |
Functions | |
destroy | The destroy method is used to perform any clean up before the control is dereferenced. |
setMap | Set the map property for the control. |
draw | The draw method is called when the control is ready to be displayed on the page. |
moveTo | Sets the left and top style attributes to the passed in pixel coordinates. |
activate | Explicitly activates a control and it’s associated handler if one has been set. |
deactivate | Deactivates a control and it’s associated handler if any. |