Skip to end of metadata
Go to start of metadata

Purpose: help developers who would like to create a new button for the mapbuilder library.

Discuss plans with developers

It is best to discuss your planned extensions with Mapbuilder developers before beginning your work. Your ideas may have been discussed or implimented before or someone may have a better idea for implimentation. And you are more likely to get your improvements incorporated into the codebase if they have been discussed beforehand.

Raise issue in JIRA

Create a "New Feature" issue in .  We use JIRA to track what features and bugs have been addressed between releases.

Impement Button

Buttons are the widget icons you can press on the Mapbuilder display, like the ZoomIn, ZoomOut, Reset to original extent.

There are different classes of buttons:

  • RadioButton - When the button is selected, all other buttons in the same ButtonBar are deselected.  Pan, ZoomIn, ZoomOut are all RadioButtons.
  • Button - A simple fire and foget button.  After this button is selected, it automatically becomes deselected.  The Reset button is of this class.

Later, we may also implement a two state button, but we have not had a need for it yet.

Properties for a button are defined in the config.xml file - for example, mapbuilder/demos/basic/config.xml . 

The best way to build a new button is to copy then modify a existing similar button, eg DragPan.js or Reset.js.

There are three functions which you will probably want to change:


This function is called to create the control for the button. The control has to inherit from OpenLayers.Control. If there is already a control in OpenLayers that does what you want, you can use it directly (like e.g. ZoomToMaxExtent in Reset.js). The function has to return the control class (not an instance).


If this function is present, it will be called instead of just calling new Control(). 


This function is called when the button is clicked. active will be true if it is about to be activated, and false if it is about to be deactivate. You usually want to register/unregister OpenLayers events in this function. If you just need to do something when you click on the map, have a look at GetFeatureInfoWSR.js on how to do that.

Update the schema

After you have created a widget, make sure you update mapbuilder/lib/schema/config.xsd with your new widget. The schema is used to build Mapbuilder'sComponent Register documentation.

Update the translations

Do not forget to add new texts for your new button to the widgetText files.

More on OpenLayers controls

Refer to to see how OpenLayers controls work.

  • No labels