Comments 0

Document transcript

MapFish toolbarAuthor: Bart van den Eijnden, bartvde@osgis.nl

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

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

2. mapfish.widgets.toolbar.MenuItem, a menu item that extends Ext.menu.Itemand associates it with an OpenLayers Control of type BUTTON. It also addsExtJS 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 amapfish.widgets.toolbar.MenuItem. The upper item (“Zoom via muiswiel”) is an example of amapfish.widgets.toolbar.CheckItem

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

ToolbarThe toolbar constructor takes a config object with the following parameters next tothe standard ExtJS.Toolbar config:• map, the OpenLayers.Map;• configurable: a boolean which determines whether or not the toolbar will havea configuration button which is coupled to a menu. The user can use the menuto 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 willshow a list of the buttons in the toolbar, allowing the user to change the visibility of the buttons. Thestate 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 examplevar toolbar = new mapfish.widgets.toolbar.Toolbar({map: map, configurable:true});// render the toolbar in a div which has id buttonbartoolbar.render('buttonbar');// add the controlstoolbar.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 addedtoolbar.activate();Using the isDefault property on a Control it can be configured what is the defaultcontrol 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 tothe following css:.zoomin {background-image:url(lib/openlayers/theme/default/img/icon_zoomin.png)!important;width: 20px !important;height: 20px !important;}.zoomout {background-image:url(lib/openlayers/theme/default/img/icon_zoomout.png)!important;width: 20px !important;height: 20px !important;}.pan {background-image:url(lib/openlayers/theme/default/img/icon_pan.png)!important;width: 20px !important;height: 20px !important;}.roirectangle {background-image:url(lib/openlayers/theme/default/img/icon_roi_rectangle.png)!important;width: 20px !important;height: 20px !important;}.query {background-image:url(lib/openlayers/theme/default/img/icon_query.png)!important;width: 20px !important;height: 20px !important;}MenuItemA mapfish.widgets.toolbar.MenuItem extends the Ext.menu.Item so to associate themenu 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 ZoomToMaxExtentvar 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: newOpenLayers.Control.ZoomToMaxExtent({map: map}) });The mapfish.widgets.toolbar.MenuItem can also be used as a normal ExtJS menu itemwhich uses a handler. The advantage of using the MapFish menu item is that it addsquicktips for useability. An example is of this useage is:

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