Custom tools and toolbars

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();