Example of MapMaster and EaxMapBox Components Layout

To execute the example create an HTML page and perform the following operations:

1. In the HEAD tag add links to the following CSS files: PP.css, PP.Express.css, PP.Metabase.css.

One should also add links to the following JS files: PP.js, PP.ChartMaster.js, PP.MapMaster.js, PP.MapChart.js, PP.TabSheet.js, PP.Metabase.js, PP.Navigator.js, PP.Express.js, jquery.js, and resources.ru.js.

2. In the SCRIPT tag add code to create the MapMaster and EaxMapBoxcomponents:

<script type="text/javascript">
    var eaxData;
    var idTime;
    onReady = function () {
        var IMAGE_PATH = "../../build/img/"; //path to images folder
        PP.resourceManager.setRootResourcesFolder("../resources/"); //path to resources folder
        PP.setCurrentCulture(PP.Cultures.ru); //select language settings
        var eaxAnalyzer, eaxMbService;
        //create the Waiter component used to wait for metabase connection
        waiter = new PP.Ui.Waiter();
        //Create a metabase instance
        metabase = new PP.Mb.Metabase({
            Id: "WAREHOUSE",
            UserCreds: { UserName: "sa", Password: "Qwerty1" },
            StartRequest: function () {
                waiter.show();
            },
            EndRequest: function () {
                waiter.hide();
            },
            Error: function (sender, args) {
                alert(args.ResponseText);
            }
        });
        //Open metabase
        metabase.open();
        //Create a service used to work with express reports
        eaxMbService = new PP.Exp.EaxMdService({ Metabase: metabase });
        //open express report with the 935529 key for edit
        eaxAnalyzer = eaxMbService.edit(935529);
        //Create a container for express report map
            mapBox = new PP.Exp.Ui.EaxMapBox({             Source: eaxAnalyzer, // Data source             Width: 500,             Height: 500,             ParentNode: "Map",             Service: eaxMbService         });         //Create map wizard         master = new PP.Ui.MapMaster({             ParentNode: "mapM", //DOM node where chart wizard will be placed             Height: 500,             Width: 310,             ImagePath: IMAGE_PATH,             DataView: mapBox         });     } </script>

3. In the BODY tag place the created components:

<body onselectstart="return false" class="PPNoSelect" onload="onReady()">
    <table style="width: 100%">
        <tr>
            <td valign="top" width="350" id="mapM">
            </td>
            <td valign="top" id="Map">
            </td>
        </tr>
    </table>
</body>

After executing the example the page contains the layout of the express report map and the master for its setup:

See also:

MapMaster | EaxMapBox