Adding a toolbar

Submitted by Pieter De Graef on Tue, 17/03/2009 - 10:57

In this section we will handle the addition of a toolbar to the map. Both the client and the server require modifications, and we will handle them separatly.

 

The client (HTML)

For the client-side HTML page, we have to add the toolbar to the HTML body tag. This can easily be done like this:

<body class="soria">
    <div style="width: 100%;" align="center">
        <div id="helloToolbar" dojoType="geomajas.widget.DynamicToolbar"
            style="margin-top: 50px; width:800px; height:25px; text-align:left;">
        </div>
        <div id="helloMap" dojoType="geomajas.widget.MapWidget"
            style="width:800px; height:600px; border: 1px solid #999;">
        </div>
    </div>
</body>

The third line is the representation of a geomajas toolbar in HTML. The widget is called a "geomajas.widget.DynamicToolbar", and we have assigned it the name "helloToolbar".

 

The server (XML)

In the a previous section we saw that the application.xml file included more then just the maps.xml configuration file. It also included a toolbar.xml file. It is this XML file that we will now study.

<toolbar id="helloToolbar">
    <targetMap>helloMap</targetMap>
    <toolRef>ZoomIn</toolRef>
    <toolRef>ZoomOut</toolRef>
    <toolRef>ZoomToRectangleMode</toolRef>
    <toolRef>PanMode</toolRef>
    <toolRef>ToolbarSeparator</toolRef>
    <toolRef>MeasureDistanceMode</toolRef>
</toolbar>

The configuration of a toolbar is very simple. Just like the map, it has an ID ("helloToolbar"), that we can find in our HTML page. For the configuration itself we see that a toolbar must have a reference to a MapWidget (second line). This toolbar is related to a map called "helloMap". After the map reference, we see a list of reference to tools. These tools are can be found in the XML file called "tools.xml".
This toolbar will have buttons for zooming in and out, zooming to a rectangle, panning, and also a tool for measuring distances.

 

Alternative toolbar

The way we described in the previous sections to add a toolbar to a HTML page, is not the only way! If you choose to configure you toolbar on the server, it will be interpreted by the ConfigManager, and applied on the toolbar widget. But this can also be achieved directly in Javascript (check online here).
Say you have no definition of a toolbar called "helloToolbar" in your toolbar.xml file. This would normally result in an empty toolbar (since you still have it defined in the HTML!). You could optionally add code to the onLoad event of the HTML page in which you supply the toolbar of tools yourself. An example is given below:

dojo.addOnLoad(function() {
    globals["applicationUrl"] = "helloworld";
    globals["dispatcher"] = new CommandDispatcher ();
    var configManager = new ConfigManager (globals["dispatcher"]);
    dojo.connect (configManager, "onConfigDone", createToolbar);
    // create the toolbar after config (only then is the MapWidget initialized).
    configManager.getConfigWithJson();
});

function createToolbar () {
    var mapWidget = dijit.byId("helloMap");
    var toolbar = dijit.byId("helloToolbar");

    var zoomIn = new ZoomInAction ("ZoomInAction", mapWidget.getMapView());
    toolbar.addAction (zoomIn, "after");

    var zoomOut = new ZoomOutAction ("ZoomOutAction", mapWidget.getMapView());
    toolbar.addAction (zoomOut, "after");

    var zoomToRect = new ZoomToRectangleTool ("ZoomToRectangleTool", mapWidget);
    zoomToRect.init(mapWidget);
    toolbar.addTool (zoomToRect, "after");

    var pan = new PanTool ("PanTool", mapWidget);
    pan.init(mapWidget);
    toolbar.addTool (pan, "after");
}

The configuration of the toolbar can only be done after the map to which it is attached is initialized. So we begin with connecting a function called "createToolbar" to the ConfigurationManager's "onConfigDone" function. This is a Dojo functionality that makes sure that the "createToolbar" function is executed right after the "onConfigDone" function of the ConfigManager. If we were to execute the "createToolbar" earlier, the first line "dijit.byId("helloMap")" woud return a MapWidget that has not yet been initialized.

Next we create and add actions and tools to the toolbar. The difference between actions and tools is that actions are executed immediatly when clicked, while tools are turned on and off (select/deselect like a checkbox).