Tools are an efficient way to communicate with the viewer. Additionally, tools can be placed on a toolbar which then takes care of the tools being active only one at a time.
This example shows you how to make custom tools and add them to a toolbar.
The tools are very simple. One will make current coordinates be displayed in a <div> element placed under the map, and the other will make coordinates be dispalyed as a map tip.
The currently active tool is .
The code:
// create the first tool which shows coordinates in a <div> tool1 = new giscloud.ui.Toolbar.Tool( // tool name "tool1", // tool options { styles: { caption: "Coords in div", showCaption: true, cssClass: "mytool", active: "mytool-active", hover: "mytool-hover" }, actions: { activation: function (viewer) { // attach event handler viewer.mouseMove(showInDiv); // or viewer.bind("mouseMove", showInDiv); }, deactivation: function (viewer) { // detach event handler // --> note that in order to detach an event handler it is // necessary to keep a reference to the function originally // passed to the event binding method viewer.unbind("mouseMove", showInDiv); // clear the div $("#coords").html(""); } } } ); // create the second tool which will display coordinates in a map tip tool2 = new giscloud.ui.Toolbar.Tool( // tool name "tool2", // tool options { styles: { caption: "Coords in map tip", showCaption: true, cssClass: "mytool", active: "mytool-active", hover: "mytool-hover" }, actions: { activation: function (viewer) { // attach event handler viewer.mouseMove(showInMapTip); }, deactivation: function (viewer) { // detach event handler viewer.unbind("mouseMove", showInMapTip); // hide map tip viewer.hideTip(); } } } ); // create the toolbar myToolbar = new giscloud.ui.Toolbar( // options { viewer: viewer, container: "toolbar" } ); // add some tools myToolbar.add(tool1, tool2); // bind a handler to the toolbar's toolChange event myToolbar.toolChange(function (oldTool, newTool) { $("#activeTool").html(newTool.name); }); // activate the first tool myToolbar.tools["tool1"].activate();