Coding your web page

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.

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='config/contextEditor.xml';
    </script>
  
```
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>
  
```
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>
  
```
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 Demo which is also a good example 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 it separate from the mapbuilder codebase so that you can update your mapbuilder installation without affecting your application. Custom widgets can be included using the stylesheet property, when required. The only requirement is that Mapbuilder and your application must share the same domain name.