MapFish toolbar - MapFish Trac

bookmarkalikeInternet and Web Development

Dec 14, 2013 (4 years and 5 months ago)


MapFish toolbar
Author: Bart van den Eijnden,

The MapFish toolbar combines the best of ExtJS and OpenLayers. It consists of the
following three building blocks:
1. mapfish.widgets.toolbar.Toolbar, the main component which extends
Ext.Toolbar. It groups a set of OpenLayers Controls similar to the OpenLayers

Figure 1 An example of a mapfish.widgets.toolbar.Toolbar. In this case
OpenLayers.Control.ZoomBox is the default control.

2. mapfish.widgets.toolbar.MenuItem, a menu item that extends
and associates it with an OpenLayers Control of type BUTTON. It also adds
ExtJS quicktips to the menu item, since this is missing in the ExtJS core;

Figure 2 The lower item (“Zoom naar begin extent”) is an example of a
mapfish.widgets.toolbar.MenuItem. The upper item (“Zoom via muiswiel”) is an example of a

3. mapfish.widgets.toolbar.CheckItem, a menu item with a checkbox, which
makes it possible to turn the handler of an OpenLayers Control on or off.

The toolbar constructor takes a config object with the following parameters next to
the standard ExtJS.Toolbar config:
• map, the OpenLayers.Map;
• configurable: a boolean which determines whether or not the toolbar will have
a configuration button which is coupled to a menu. The user can use the menu
to determine the visibility of buttons in the toolbar. The default value is false.
The state of this is saved in Ext.state.Manager.

Figure 3 An example of a Toolbar which is configurable. The + button on the right of the toolbar will
show a list of the buttons in the toolbar, allowing the user to change the visibility of the buttons. The
state can be stored in a cookie.
The following is a code example of how to use the Toolbar:

// create the toolbar, map is a global in this example
var toolbar = new mapfish.widgets.toolbar.Toolbar({map: map, configurable:
// render the toolbar in a div which has id buttonbar
// add the controls
toolbar.addControl(new OpenLayers.Control.ZoomBox(), {iconCls: 'zoomin',
toggleGroup: 'map'});
toolbar.addControl(new OpenLayers.Control.ZoomOutBox(), {iconCls: 'zoomout',
toggleGroup: 'map'});
toolbar.addControl(new OpenLayers.Control.DragPan({isDefault: true}),
{iconCls: 'pan', toggleGroup: 'map'});
toolbar.addControl(new OpenLayers.Control.ROIRectangle(), {iconCls:
'roirectangle', toggleGroup: 'map'});
toolbar.addControl(new OpenLayers.Control.FeatureInfo({div:
$('featureinfo')}), {iconCls: 'query', toggleGroup: 'map'});
// activate the toolbar once all controls have been added
Using the isDefault property on a Control it can be configured what is the default
control of the Toolbar, this button will be shown pressed in the GUI.

The images of the toolbar are controlled using the iconCls property, which maps to
the following css:
.zoomin {
width: 20px !important;
height: 20px !important;
.zoomout {
width: 20px !important;
height: 20px !important;
.pan {
width: 20px !important;
height: 20px !important;
.roirectangle {
width: 20px !important;
height: 20px !important;
.query {
width: 20px !important;
height: 20px !important;
A mapfish.widgets.toolbar.MenuItem extends the so to associate the
menu item with an OpenLayers.Control of type BUTTON. When the item is clicked,
the trigger function is called on the Control.
An example is:
// this menu item is associated with the OL Control ZoomToMaxExtent
var menuitem = new mapfish.widgets.toolbar.MenuItem({text: ‘My menu item’,
tooltip: ‘Help for the user’, icon:
'lib/openlayers/theme/default/img/icon_zoomfull.png', control: new
OpenLayers.Control.ZoomToMaxExtent({map: map}) });
The mapfish.widgets.toolbar.MenuItem can also be used as a normal ExtJS menu item
which uses a handler. The advantage of using the MapFish menu item is that it adds
quicktips for useability. An example is of this useage is:

// this menu item calls the zoomOut function of the OL map
var menuitem = new mapfish.widgets.toolbar.MenuItem({text: ‘My menu item 2’,
tooltip: ‘Help for the user as well’, icon:
'lib/openlayers/theme/default/img/icon_zoomout.png', scope: toolbar,
handler: function() {;} });

A mapfish.widgets.toolbar.CheckItem extends so that it can be
associated with the Handler of an OpenLayers Control. An example is a checkbox
menu item which the user can use to enable/disable the mousewheel for map
zooming. The state can also be saved by ExtJS in a cookie.

An example is:
var checkitem = new mapfish.widgets.toolbar.CheckItem({map: map, text: ‘My
checkbox menu item’, tooltip: ‘Help for ths user’, control: new
OpenLayers.Control.Navigation(), olHandler: 'wheelHandler'} );

In this example the checkbox will control the activation of the wheelHandler of