How to create your iShare Lite Map - from v5.4.0

5.4.0+

The best way of explaining how to create your own embedded maps is to follow an example. An example page "atLiteMap.html" is included with iShare in the WebApps\Web\Examples (WebApps\Web for older versions) folder.

When creating your own Lite Map please take a copy of the latest example atLiteMap.html as this page may not contain the latest changes.

atLiteMap.html - from v5.4.0

<!DOCTYPE html>
<html>
	<head>
		<title>iShare - Lite</title>
		<link rel="stylesheet" type="text/css" href="custom.example/css/iShareCommon.css" />
		<link rel="stylesheet" type="text/css" href="custom.example/css/Map.css" />		
		<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" src="js/litemap.js"></script>
		<script type="text/javascript">
			liteMap.createMap('atMap', { mapSource: 'Workshop/Maps', layers: 'primary_schools' });
		</script>	
	</head>
	<body>
		<!-- #atMap -->
		<div id="atMap" style="border: 1px solid #CCC; height: 512px; width: 512px">
			<div id="atInitialLoader" style="border: 1px solid #CCC; padding: 5px; margin: 125px auto auto; text-align: center; width: 75px; font-family: Helvetica; -moz-border-radius: 5px; -webkit-border-radius: 5px;">Loading...</div>
		</div>
		
		<a id="atPoweredBy" title="Powered by Astun Technology" href="http://www.astuntechnology.com">
			<img src="images/astun/poweredbyishare-online.png" height="18" width="175" style="border: 0" alt="Powered by Astun"/>
		</a>
	</body>
</html>

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

1. Include the basic iShare Style Sheets

First we need to include the basic iShare Style Sheets that are used across iShare in order that the map popups etc. are styled in a similar manner across iShare Maps. You will need to change these entries to point to your basic iShare style sheets.

<link rel="stylesheet" type="text/css" href="custom.example/css/iShareCommon.css" />
<link rel="stylesheet" type="text/css" href="custom.example/css/Map.css" />

2. Include the basic JavaScript files

Next we need to include the 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>
<script type="text/javascript" src="js/litemap.js"></script>

3. Set Map Options & Additional Features

Now you need to define the map options and any additional features (layers) that you wish to use for your map.

Example

<script type="text/javascript">
	liteMap.createMap('atMap', { 
		mapSource: 'Workshop/AllMaps', 
		layers: 'primary_schools,secondary_schools',
		view:{easting:495553, northing:175654, zoom:2000}
	});
</script>

mapSource

This is the map source that you wish to be displayed in your Lite Map. If you don't specify a mapSource then the Default Map Source will be used.

layers

If you wish to include additional Map Features to be displayed when the map is loaded then you may define a layers parameter with as many layers as you wish by separating each Layer name (not Display Name) with a comma. In the above example we have chosen to display Primary and Secondary Schools. These layers must be defined within iShare Studio.

If you don't specify the layers parameter then the layers configured as Visible on Startup will be displayed.

view

The map will be displayed at the My Maps Startup view unless you specify a “view” parameter. This example shows how to display a point at a Zoom Level of 2000 and Easting and Northing coordinates of 495553 and 175654 respectively.

geoRSS

This is another optional parameter that has not been included in the above example. Please see Including a GeoRSS Feed for details.

4. Define the Map Area

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

Example

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

In the example above, we define a <div> with an id "atMap" and set its size and border using style attributes. The height parameter is defined as “!important” in order that it is not overridden by any other style sheet. You may adjust these values based on the size of map you wish to display.

The map will always take its size from that of its containing element, so you must always set a size explicitly.

We have also defined 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.