Page Comparison

...

1. Define the Map Area
2. Include the basic JavaScript files.
3. Load iShare JS and then Create the "map" object.
4. Set the Map Options - such as the Location of the map and the Map Source to use.

1. Define the Map Area

First we need to define the area to be used for the map on the web page together with the border style and an optional map loading progress message.

...

We have also defined a second <div> with an id "atInitialLoader". This is so that you can display a message to the user whilst the map is loading. In the above example we have used the words “Loading…”. This is not compulsory but you must not change the id of this <div> as it is used internally within iShare.

2. Include the basic JavaScript files

Next we need to include the two basic JavaScript files that are required for loading and displaying the map.

<script type="text/javascript" src="js/lib/prototype-1.6.0.3.js"></script>
<script type="text/javascript" src="FileIncluderJS.aspx"></script>

3. Load iShare JS and then Create the Map

Now we need to start the script which will include all the remaining JavaScript files that are necessary for iShare Lite by passing the application name 'lite', followed by the map creation function.

<script type="text/javascript">
Event.observe(window, 'load', function() {
Astun.JS.IncludeJS('lite',function(){
   $('atMap').map = new Astun.JS.Map('atMap'});
         });
      });
</script>

4. Set Map Options

You need to pass a “view” parameter to the previous JavaScript function that loads the map, where you specify the easting, northing and zoom to be displayed when the web page is opened.

...