Controls are OpenLayers 2 classes which affect the state of the map, or display additional information to the user. Controls are the primary interface for map interactions.

Default Controls

The following controls are default controls on the map:


Control panels allow collections of multiple controls together, as is common in many applications.

Styling Panels

Panels are styled by CSS. The “ItemActive” and “ItemInactive” are added to the control’s displayClass.

All controls have an overridable ‘displayClass’ property which maps to their base CSS class name. This name is calculated by changing the class name by removing all ‘.’ characters, and changing “OpenLayers” to “ol”. So, OpenLayers.Control.ZoomBox changes to olControlZoomBox.

Panel items are styled by combining the style of the Panel with the style of a control inside of it. Using the NavToolbar Panel as an example:

.olControlNavToolbar div {
  width:  28px;
  height: 28px;
  top: 300px;
  left: 6px;
  position: relative;
.olControlNavToolbar .olControlNavigationItemActive {
  background-image: url("img/panning-hand-on.png");
  background-repeat: no-repeat;
.olControlNavToolbar .olControlNavigationItemInactive {
  background-image: url("img/panning-hand-off.png");
  background-repeat: no-repeat;

Here, we say:

  • Div elements displayed inside the toolbar are 28px wide and 28px high. The top of the div should be at 300px, the left side should be at 6px.
  • Then, for the control, we provide two background images: one for active and one for inactive.

For toolbars to go left to right, you can also control them with CSS:

.olControlEditingToolbar div {
    right: 0px;
    height: 30px;
    width: 200px;

Simply set the ‘float: right’ parameter, and give the parent element some

In order to improve the user experience, existing panels like the EditingToolbar use a single background image, and control the icon to display via ‘top’ and ‘left’ parameters, offsetting and clipping the background image. This is not required, but doing this makes it so that when you select a tool, you don’t have to wait for the ‘inactive’ image to display before continuing.

Controls to be used with Panels

Panels can have controls of many ‘types’ inside of them. Each tool in a panel should have a ‘type’ attribute which is one of:

  • OpenLayers.Control.TYPE_TOOL (the default)
  • OpenLayers.Control.TYPE_BUTTON
  • OpenLayers.Control.TYPE_TOGGLE

Customizing an Existing Panel

Several existing panels – like the EditingToolbar or PanPanel – have multiple controls combined, but it is not always desirable to use all those controls. However, it is relatively simple to createa control which mimics the behavior of these controls. For example, if you wish to create an editing toolbar control that only has the ability to draw lines, you could do so with the following code:

var layer = new OpenLayers.Layer.Vector();
var panelControls = [
 new OpenLayers.Control.Navigation(),
 new OpenLayers.Control.DrawFeature(layer,
     {'displayClass': 'olControlDrawFeaturePath'})
var toolbar = new OpenLayers.Control.Panel({
   displayClass: 'olControlEditingToolbar',
   defaultControl: panelControls[0]

There are two things to note here:

  • We are reusing the style of the EditingToolbar by taking its ‘displayClass’ property. This means we will pick up the default icons and so on of the CSS for that toolbar. (For more details, see Styling Panels.)
  • We set the default control to be the Navigation control, but we could just as easily change that.

In this way, you can use any control which works in a panel – including, for example, the SelectFeature control, the ZoomToMaxExtent control, and more, simply by changing the controls which are in the list.

Map Controls


Takes URL arguments, and updates the map.

In order for the ArgParser control to work, you must check that ‘getCenter()’ returns null before centering your map for the first time. Most applications use a setCenter or zoomToMaxExtent call: this call should be avoided if the center is already set.

var map = new OpenLayers.Map('map');
var layer = new OpenLayers.Layer();

// Ensure that center is not set
if (!map.getCenter()) {
    map.setCenter(new OpenLayers.LonLat(-71, 42), 4);

The ArgParser control is enabled by default.


The attribution control will display attribution properties set on any layers in the map in the lower right corner of the map, by default. The style and location of this control can be overridden by overriding the ‘olControlAttribution’ CSS class.

Use of the attribution control is demonstrated in the Attribution example. For API information, see the Attribution API Docs.



The DragPan control implements map dragging interactions.



Display a Navigation control, along with three editing tools: Point, Path, and Polygon. If this does not fit your needs, see Customizing an Existing Panel above.




A planar distance measuring tool.


The ModifyFeature control can be used to edit an existing vector object.

This control causes three different types of events to fire on the layer: * beforefeaturemodified - triggered when a user selects the feature to begin editing. * featuremodified - triggered when a user changes something about the feature. * afterfeaturemodified - triggered after the user unselects the feature.

To register for one of these events, register on the layer:

var layer = new OpenLayers.Layer.Vector("");{
  'beforefeaturemodified': function(evt) {
      console.log("Selected " +  + " for modification");
  'afterfeaturemodified': function(evt) {
      console.log("Finished with " +;

There are several different modes that the ModifyFeature control can work in. These can be combined to work together.

  • RESHAPE – The default. Allos changing the vertices of a feature by dragging existing vertices, creating new vertices by dragging ‘virtual vertices’, or deleting vertices by hovering over a vertice and pressing the delete key.
  • RESIZE – Allows changing the size of a geometry.
  • ROTATE – change the orientation of the geometry
  • DRAG – change the position of the geometry.

When creating the control, you can use a bitwise OR to combine these:

var modifyFeature = new OpenLayers.Control.ModifyFeature(layer, {
  mode: OpenLayers.Control.ModifyFeature.RESIZE | OpenLayers.Control.ModifyFeature.DRAG

For an example of using the ModifyFeature control, see the ModifyFeature example. For API information, see the ModifyFeature API Documentation.

The ModifyFeature control can only be used with a single layer at any given time. To modify multiple layers, use multiple ModifyFeature controls.

Deprecation Warning

As of OpenLayers 2.6, the onModificationStart, onModification and onModificationEnd functions on this control are no longer the recommended way to receive modification events. Instead, use the beforefeaturemodified, featuremodified, and afterfeaturemodified events to handle these cases.




A set of visual buttons for controlling the location of the map. A subclass of Control.Panel, this is easily controlled by styling via CSS. The .olControlPanPanel class, and its internal divs, control the styling of the PanPanel. If you wish to customize the look and feel of the controls in the upper left corner of the map, this control is the one for you.

This control is designed to work with the ZoomPanel control to replicate the functionality of the PanZoom control.







Provides an agent to control snapping vertices of features from one layer to nodes, vertices, and edges of features from any number of layers. The control operates as a toggle - acting as a snapping agent while active and not altering behavior of editing while not active. The control can be configured to allow node, vertex, and or edge snapping to any number of layers (given vector layers with features loaded client side). The tolerance, snapping type, and an optional filter can be configured for each target layer.

Find more detail on the OpenLayers.Control.Snapping page.


Provides an agent for splitting linear features on a vector layer given edits to linear features on any other vector layer or a temporary sketch layer. The control operates in two modes. By default, the control allows for temporary features to be drawn on a sketch layer (managed by the control) that will be used to split eligible features on the target layer. In auto-split mode, the control listens for edits (new features or modifications to existing features) on an editable layer and splits eligible features on a target layer.

The control can be added to a map as with other controls. It has no distinct visual representation but can be connected to a button or other tool to toggle activation with a click. In addition, no GUI elements are provided for control configuration. Collecting user input to configure behavior of the control is an application specific task.

Find more detail on the OpenLayers.Control.Split page.



A set of visual buttons for controlling the zoom of the map. A subclass of Control.Panel, this is easily controlled by styling via CSS. The .olControlZoomPanel class, and its internal divs, control the styling of the PanPanel. If you wish to customize the look and feel of the controls in the upper left corner of the map, this control is the one for you.

This control is designed to work with the PanPanel control to replicate the functionality of the PanZoom control.

Button Classes

These classes have no UI on their own, and are primarily designed to be used inside of a control panel.


Used inside the PanPanel; when triggered, causes the map to pan in a specific direction.


Used inside the PanPanel; when triggered, causes the map to zoom in.


Used inside the PanPanel; when triggered, causes the map to zoom out.


Used inside the PanPanel; when triggered, causes the map to zoomToMaxExtent.

Generic Base Classes

The following classes are used primarily for subclassing, and are not meant to be used directly.


Used inside of Panel controls.


Used as a base for NavToolbar and EditingToolbar controls, as well as others. Gathers up buttons/tools to be used together.

Deprecated Controls


Replaced by the Navigation control.


Replaced by the NavToolbar control.