iShare Lite Map Example Code - pre v5.4.0

The best way of explaining how to create your own embedded maps is to follow an example. This example web page below shows how to display a point at a Zoom Level of 2000 and Easting and Northing coordinates of 495553 and 175654 respectively.

It is also interesting to note that no Style Sheets are required.

Example

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>iShare - Lite</title>
</head>
<body style="font-size: 75.0%;">
   <div id="atMap" style="border:1px solid #CCC; height:300px !important; width:300px">
      <div id="atInitialLoader" style="border:1px solid #CCC;padding:5px;margin:125px auto auto;text-align:center;width:75px;font-family:Helvetica;">Loading...</div>
   </div>
 
<a id="atPoweredBy" href="http://www.astuntechnology.com"><img src="images/astun/poweredbyishare-online.png" height="18" width="175" style="border:0" /></a>
   <script type="text/javascript" src="js/lib/prototype-1.6.0.3.js"></script>
   <script type="text/javascript" src="FileIncluderJS.aspx"></script>
   <script type="text/javascript">
      Event.observe(window, 'load', function() {
Astun.JS.IncludeJS('lite',function(){
         $('atMap').map = new Astun.JS.Map('atMap',{view:{easting:495553, northing:175654, zoom:2000}});
         });
      });
   </script>
</body>
</html>

In order explain the above example we have split it into its component parts:

Define the Map Area
Include the basic JavaScript files.
Load iShare JS and then Create the "map" object.
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 do this by creating a named <div> element and obtaining a reference to this element in the browser's document object model (DOM).

Example

<div id="atMap" style="border:1px solid #CCC; height:300px !important; width:300px">
   <div id="atInitialLoader" style="border:1px solid #CCC;padding:5px;margin:125px auto auto;text-align:center;width:75px;font-family:Helvetica;">Loading...</div>
</div>

In the example above, we define a <div> with an id "atMap" and set its size and border using style attributes. You may adjust these values based on the size of map you wish to display. Note that the map will always take its size from that of its containing element, so you must always set a size on that <div> explicitly. You may change the id for this <div> but if you do you will also need to change all references to this in the remaining code. The height parameter is defined as “!important” in order that it is not overridden by any other style sheet.

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.

Example

<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.

Example

<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.

Example

Astun.JS.IncludeJS('lite',function(){
   $('atMap').map = new Astun.JS.Map('atMap',{view:{easting:495553, northing:175654, zoom:2000}});
});

If you wish to specify a specific Map Source to use, other than the default Base Maps then you can pass a “mapsource” parameter.

Example

Astun.JS.IncludeJS('lite',function(){
   $('atMap').map = new Astun.JS.Map('atMap',{mapSource:'Workshop/AllMaps'});
});

To specify both “view” and “mapsource” parameters you will need to separate them with a comma e.g.

Example

Astun.JS.IncludeJS('lite',function() {
   $('atMap').map = new Astun.JS.Map('atMap',{
      view:{easting:495553, northing:175654, zoom:2000},
      mapSource:'Workshop/AllMaps'
   });
});