Added by madair, last edited by Federico Fissore on Jul 05, 2006  (view change) show comment

Labels:

Enter labels to add to this page:
Wait Image 
Looking for a label? Just start typing.

The purpose of this section of the User Guide is to explain how to go about adding MapBuilder to a web page and what the individual parts achieve.

There are several common steps for coding a MapBuilder application: your HTML page includes a JavaScript library which opens and reads a configuration file in the BODY onload event. In the following code examples, paths starting with "/" are relative to your server root, otherwise they are relative to the web page's base URL.

1. Create your configuration file: Reference the configuration file in the web page's <HEAD> element. This variable must be named "mbConfigUrl".

<script>
  // URL of Mapbuilder configuration file.
  var mbConfigUrl='sampleConfig.xml';
</script>

2. Include the MapBuilder JavaScript library: the web page's <HEAD> element must include a reference to the MapBuilder library JavaScript code. The library must be installed on the same server as the page using it:

<script type="text/javascript" src="/mapbuilder/lib/Mapbuilder.js"></script>

3. Initialize the application: the page's BODY onload event handler must call MapBuilder's body onload event handler.

<body onload='mbDoLoad()'>
  ..rest of page body...
</body>

There are ways that other BODY onload event handlers can be called as well.

4. Create the HTML for the web page: Assign an ID attribute to the HTML elements in the page where MapBuilder widget output will be inserted. For example:

<div id="mbId"></div>

where "mbId" corresponds to a widget ID in your configuration file.

You can see the whole thing put together in the MapBuilder Simple and Basic Demos which are also good examples to copy as a starting point for your own applications. Be sure to inspect the source code for the demo and it's configuration file.

When developing an application, it's best to keep your application code separate from the MapBuilder codebase so that you can update your MapBuilder installation without affecting your application.  The only requirement is that MapBuilder and your application must share the same domain name.  If you need to customize a widget XSL file, copy the default MapBuilder XSL file to your application directory and referece it using the <stylesheet> property in the configuration file.

Next>