1 |
3032
|
perry
|
<h2>Coding your web page</h2>
|
2 |
|
|
|
3 |
|
|
<p>
|
4 |
|
|
There are several common steps for coding a mapbuilder application:
|
5 |
|
|
your HTML page includes a Javascript library,
|
6 |
|
|
which opens and reads a configuration file in the BODY onload event.
|
7 |
|
|
In the following code examples, paths starting with "/" are relative
|
8 |
|
|
to your server root, otherwise they are relative to the web page's base URL.
|
9 |
|
|
</p>
|
10 |
|
|
|
11 |
|
|
<ol>
|
12 |
|
|
<li><span class="title">Create your configuration file:</span>
|
13 |
|
|
Reference the configuration file in the web page's <HEAD> element.
|
14 |
|
|
This variable must be named "mbConfigUrl".
|
15 |
|
|
<pre>
|
16 |
|
|
<script>
|
17 |
|
|
// URL of Mapbuilder configuration file.
|
18 |
|
|
var mbConfigUrl='config/contextEditor.xml';
|
19 |
|
|
</script>
|
20 |
|
|
</pre>
|
21 |
|
|
</li>
|
22 |
|
|
<li><span class="title">Include the mapbuilder Javascript library:</span>
|
23 |
|
|
the web page's <HEAD> element must include a reference to the mapbuilder
|
24 |
|
|
library JavaScript code.
|
25 |
|
|
The library must be <a href="?page=start/install">installed</a> on the same server as
|
26 |
|
|
the page using it:
|
27 |
|
|
<pre>
|
28 |
|
|
<script type="text/javascript" src="/mapbuilder/lib/Mapbuilder.js"></script>
|
29 |
|
|
</pre>
|
30 |
|
|
</li>
|
31 |
|
|
<li><span class="title">Initialize the application:</span>
|
32 |
|
|
the page's BODY onload event handler must call mapbuilder's body onload event
|
33 |
|
|
handler.
|
34 |
|
|
<pre>
|
35 |
|
|
<body onload='mbDoLoad()'>
|
36 |
|
|
..rest of page body...
|
37 |
|
|
</body>
|
38 |
|
|
</pre>
|
39 |
|
|
</li>
|
40 |
|
|
<li><span class="title">Create the HTML for the web page:</span>
|
41 |
|
|
Assign an ID attribute to the HTML elements in the
|
42 |
|
|
page where mapbuilder widget output will be inserted.
|
43 |
|
|
For example:
|
44 |
|
|
<pre><div id="mbId"></div></pre>
|
45 |
|
|
where "mbId" corresponds to a widget ID in your configuration file.
|
46 |
|
|
</li>
|
47 |
|
|
|
48 |
|
|
</ol>
|
49 |
|
|
|
50 |
|
|
<p>
|
51 |
|
|
You can see the whole thing put together in the Mapbuilder
|
52 |
|
|
<a href="/mapbuilder/demo/simple">Simple Demo</a> which is also a good
|
53 |
|
|
example to copy as a starting point for your own applications.
|
54 |
|
|
Be sure to inspect the source code for the demo and it's
|
55 |
|
|
<a href="/mapbuilder/demo/simple/simpleConfig.xml">configuration file.</a>
|
56 |
|
|
</p>
|
57 |
|
|
|
58 |
|
|
<p>
|
59 |
|
|
When developing an application, it's best to keep it separate from the
|
60 |
|
|
mapbuilder codebase so that you can update your mapbuilder installation
|
61 |
|
|
without affecting your application.
|
62 |
|
|
Custom widgets can be included using the stylesheet property, when required.
|
63 |
|
|
The only requirement is that Mapbuilder and your application must share the
|
64 |
|
|
same domain name.
|
65 |
|
|
</p>
|