iShare Solo Map Example Code - pre v5.4.0
As with iShare Lite, the best way of explaining how to configure iShare Solo for your specific requirements is to follow an example. In this code example we have included all the possible panels that may be included.
In order explain the above example we have once again split it into its component parts:
1. Include the Style Sheets
First we need to include the style sheets that are required for iShare Solo.
<!-- Including CSS files --> <link rel="stylesheet" type="text/css" href="css/custom/atMyPages.css" /> <link rel="stylesheet" type="text/css" href="css/custom/atMyPages-js.css" /> <link href="css/jQuery/jquery.core.css" type="text/css" rel="stylesheet" /> <link href="css/jQuery/jquery.autocomplete.css" type="text/css" rel="stylesheet" /> <link href="css/jQuery/base/ui.all.css" type="text/css" rel="stylesheet" />
2. Define the Map and Results Areas
Now we need to define the Map and Results areas.
<div id="atMyMaps">
<div id="atMap" class="atPanelContent" style=”height: 500px !important; width: 100%;padding:0;”>
<div id="atInitialLoader" style="padding-top:180px">
<div class="ui-state-default" style=" margin:auto;width: 75px; background: none repeat scroll 0% 0% rgb(255, 255, 255); z-index: 800; text-align: center; padding: 10px; border-width: 5px; -moz-border-radius: 15px 15px 15px 15px; -moz-box-shadow: 5px 5px 3px rgb(129, 129, 129); display: block;">
<img src="images/stopwatch.gif" id="atMapTimer" style="float:none">
<span>
<br><span style="display:block; padding-top:7px">Loading...</span>
</span>
</div>
</div>
</div> <!-- #atMap -->
<div style="clear:both"></div>
<div id="atPanelResults" style="display:none;padding:5px;margin-top:10px; font-size:80%" class="ui-state-default ui-corner-all">
<h3 style="margin:5px">Map Information:</h3>
<div id="atResults"></div>
</div> <!-- #atPanelResults -->
</div> <!-- #atMyMaps -->
First we need to define a <div> element as a wrapper for the Map and Results areas of the web page. In the above example we have given this an id of “atMyMaps”.
Then 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.
In the example above, we define a <div> with 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. 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.
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 line is not compulsory but you must not change the id of this <div> as it is used internally within iShare.
Lastly we need to define the area for the Results returned from ‘Search For’ and ‘Find Nearest’ queries and this is defined by the <div> id "atPanelResults". In the scenario above we have a heading of “Map Information” which may be changed if required. E.g.
3. 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>
4. Load iShare JS and create Map
The following code runs the script which will include all the remaining JavaScript files that are necessary for iShare Solo by passing in the application name 'solo' and then call the pageLoad function to create the map.
<script type="text/javascript">
Event.observe( window, 'load', function(){
Astun.JS.IncludeJS('solo',pageLoad);
});
</script>
5. Set the Theme for the Panels
This section sets up theme for the panels to use. In this example we have used ‘base’ as this is the theme that has been defined in the Style Sheets section e.g.
<link href="css/jQuery/base/ui.all.css" type="text/css" rel="stylesheet" />
If you wish to use a different theme then you will need to create a folder for the theme in the “../css/qQuery/" folder, add it to the Style Sheets section and then add the folder name as the theme name below.
<script type="text/javascript">
if( !window.astun ) {
window.astun = {};
}
window.astun.settings = {
themeName : 'base'
};
6. Define the Page Load method
When the script files have finished loading the following function sets up the panels and loads them.
function pageLoad() {
var mapDiv = $( 'atMap' );
$mapDiv = jQuery('#'+mapDiv.id);
var loader = {};
loader.mapID = 'atMap';
Event.observe( mapDiv, 'astun:sourceLoad', function(evt){
astun.data = evt;
7. Define your Panels
For each of the panels that you wish to display you will need to define the following parameters:
var panels =
[
{
cssClass : 'atPanelFindNearest',
pluginName : 'findnearest',
pluginData : evt,
pluginOpts : {collapseInStart:true}
}
// Remaining codes for other panel will follow here
]
You may change whether you wish to panel to be displayed collapsed or not by setting the collapseInStart to ‘true’ for initially collapsed or ‘false’. E.g.
|
|
var panels =
[
{
cssClass : 'atPanelFindNearest',
pluginName : 'findnearest',
pluginData : evt,
pluginOpts : {collapseInStart:true, title: "Locate Nearest Features"}
}
// Remaining codes for other panel will follow here
]
In the complete code example at the beginning of this section you can see that we have included all of the available panel types:
- Find Nearest
- Search for
- Find Address
- Show Map Categories – shows not collapsed on startup in the screenshot and code example
- Take Me To – this is not shown in the screenshot as no ‘Take Me To’ layers have been defined in iShare Studio
If you leave all of the panel types included in the web page they will only be displayed if they have been configured in iShare Studio. In this way you will not have to revisit this code if you later decide to configure ‘Take Me To’ layers or ‘Search for’ layers for instance in iShare Studio.
8. Load the Panels
This section of the code loads the panels.
//Options to pass to the function
options = {
panelWrapperTopPosition :2,
attachPanelWrapperTo :'#'+mapDiv.id
};
jqueryFunctions(jQuery,$mapDiv,panels,options);
});
9. Load the Map
This section of the code loads the map.
mapDiv.map = new Astun.JS.Map(
loader.mapID,
{}
);
Your default Map Source, as defined in iShare Studio, will be used but you can optionally specify an alternative map source to be shown as follows:
mapDiv.map = new Astun.JS.Map(
loader.mapID,
{ mapSource:’Workshop/AllMaps’ }
);
10. Initialise Find Address function
This section of code prepares the Find Address panel by initialising all the settings.
window.astun.mapWrapper = mapDiv.map; mapDiv.mapSettings = Astun.JS.getConfiguration(); mapDiv.addressFinder = new Astun.JS.GetData.AddressFinder( mapDiv.map.mapElement, mapDiv.mapSettings.dataUrl );