...
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.
| Tip |
|---|
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. |
| Code Block | ||||
|---|---|---|---|---|
| ||||
<!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> | ||||
| Tip | ||||
| When creating your own Lite Map please take a copy of the latest example .html as this page may not contain the latest changes as this just explains how it all works. |
In order explain the above example we have split it into its component parts:
...