Including a Feature List in iShare Solo - pre v5.4.0
Owned by Kim Stimpson
Once again we will first show you some example code. The only difference in this example is the extra style entries required for the results list, the MapSource, Layer Name, Bounding polygon and Initial view.
An example page "atsolomap-callout.html" has been included from iShare v4.4.6.
Example Expand source
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/DTD/strict.dtd">
<html>
<head>
<title>iShare - Solo</title>
<!-- 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/astun/ui.all.css" type="text/css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="css/custom/atPrint.css" media="print" />
<style>
#atMap{ position: relative; height: 500px !important; width: 100%;padding:0; border: 1px solid #ccc;}
#atPopupLinks {
height: 500px;
left: 820px;
list-style-type: circle;
overflow: auto;
position: absolute;
top: 0;
width:200px;
}
.olPopupCloseBox {
height:16px !important;
width:16px !important;
}
.olPopup h3, .olPopup p {
margin:0;
}
.contentDisplay fieldset {
border:none;
margin:0;
padding 2px 3px;
}
.atPopupFeatureInfo {
max-height:130px;
overflow-x:hidden;
overflow-y:auto;
}
.atMainLayersGroup ol li .atLayerLink span { color:black; }
.olControlAttribution { bottom:10px !important; }
</style>
<body style="margin:20px; font-size:75%;">
<div id="atMyMaps" style="width:800px;">
<div id="atMap" class="atPanelContent">
<div id="atInitialLoader" class="ui-state-default" style="padding:10px;margin:125px auto auto;text-align:center;width:75px;font-family:Helvetica;-moz-border-radius:5px;-webkit-border-radius:5px;">
Loading...
</div>
</div>
</div> <!-- #atMap -->
<div style="clear:both"></div>
<div id="atPopupLinks">
<h3><!--Layer name will appear here--></h3>
<ul>
<h3>Loading links...</h3>
</ul>
</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">Results</div>
</div>
</div> <!-- #atMyMaps -->
<a id="atPoweredBy"alt="Powered by Astun Technology" 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('solo',pageLoad);
});
</script>
<script type="text/javascript">
if( !window.astun ) {
window.astun = {};
}
window.astun.settings = {
themeName : 'base'
};
function pageLoad() {
var mapDiv = $( 'atMap' );
$mapDiv = jQuery('#'+mapDiv.id);
var loader = {},
$links = jQuery('#atPopupLinks').hide(),
mapSource = 'Workshop/AllMaps',
layerName = 'SchoolsPrim',
shape = "POLYGON((485498 168503,504004 168427,504194 153151,485346 153113,485498 168503))";
initialView = {easting:495553, northing:175654, zoom:2000};
Event.observe( mapDiv, 'astun:sourceLoad', function(evt){
//Save the evt globally so that we can use it later
astun.data = evt;
var panels =
[
{
cssClass : 'atPanelFindNearest',
title : 'Find Nearest',
pluginName : 'findnearest',
pluginData : evt,
pluginOpts : {collapseInStart:true}
}
,
{
cssClass : 'atPanelSearchFor',
title : 'Search For',
pluginName : 'searchfor',
pluginData : evt,
pluginOpts : {collapseInStart:true}
}
,
{
cssClass : 'atPanelSearch',
title : 'Address Search',
pluginName : 'addresssearch',
pluginData : evt,
pluginOpts : {collapseInStart:true}
}
,
{
cssClass : 'atShowmapCategories',
title : 'Show Map Categories',
pluginName : 'showmapcategories',
pluginData : evt,
pluginOpts : {}
}
,
{
cssClass : 'atTakeMeTo',
title : 'Take Me To',
pluginName : 'takemeto',
pluginData : evt,
pluginOpts : {collapseInStart:true}
}
]
//Options to pass to the function
options = {
panelWrapperTopPosition :2,
attachPanelWrapperTo :'#'+mapDiv.id
};
//Start jQuery functions which will create panels and do other settings
jqueryFunctions(jQuery,$mapDiv,panels,options);
});
//Start the map
mapDiv.map = new Astun.JS.Map(loader.mapID, { mapSource : mapSource, layers:layerName, view:initialView });
window.astun.mapWrapper = mapDiv.map;
mapDiv.mapSettings = Astun.JS.getConfiguration();
mapDiv.addressFinder = new Astun.JS.GetData.AddressFinder( mapDiv.map.mapElement, mapDiv.mapSettings.dataUrl );
Event.observe( mapDiv, 'astun:layerShow', function(evt){
if(evt.memo.layer.layerName == layerName) $links.slideDown();
});
Event.observe( mapDiv, 'astun:layerHide', function(evt){
if(evt.memo.layer.layerName == layerName) $links.slideUp();
});
//Get links
var url = baseURL+"MapGetImage.aspx?callback=?&Type=jsonp&RequestType=GeoJSON&ServiceAction=GetMultiInfoFromShape&ActiveTool=MultiInfo&ActiveLayer=&mapid=-1&axuid=1317050721102&_=1317050721105";
jQuery.getJSON(url,
{
MapSource : mapSource,
Layers : layerName,
Shape : shape
},
function (data)
{
//remove the loader
var $lis = jQuery([]); //Empty jQuery object to append all <lis>
$links.html('');
jQuery.each(data[0].features, function(){
var $this = this,
lonLat = new OpenLayers.LonLat( $this.geometry.coordinates[0][0], $this.geometry.coordinates[0][1]),
icon,
linkInfo = $this.properties.fields._,
hrefLink = linkInfo.indexOf('http:')!=-1 ? linkInfo.split('|')[0] : '#';
linkInfo = linkInfo.indexOf('http:')!=-1 ? linkInfo.split('|')[1] : linkInfo;
$lis = $lis.add(
jQuery('<li/>').append(
jQuery('<a/>')
.attr('href',hrefLink)
.html(linkInfo)
.click(function(e){
e.preventDefault();
astun.mapWrapper.interactions.showMapToolTip({'lonLat' : lonLat });
astun.mapWrapper.map.setCenter(lonLat);
}).hover(
function(){
var size = new OpenLayers.Size(1, 1);
icon = new OpenLayers.Icon('images/zoomToIcon.gif', new OpenLayers.Size(34, 34), null, function(size) {
return new OpenLayers.Pixel(-12, 2-size.h);
});
lonLat.marker = astun.mapWrapper.createMarker(lonLat, icon);
},
function(){
if(!icon.isDrawn()) return; //No marker images on map to remove
if(!lonLat.marker) return; //No marker found
astun.mapWrapper.markerLayer.removeMarker( lonLat.marker );
lonLat.marker.destroy();
lonLat.marker = null;
})
)
);
});
//Append all LIs to the list
$links.append($lis);
});
}
</script>
</body>
</html>
Defining the Feature List
var mapSource = 'Workshop/AllMaps',
layerName = 'SchoolsPrim',
shape = "POLYGON((485498 168503,504004 168427,504194 153151,485346 153113,485498 168503))";
initialView = {easting:495553, northing:175654, zoom:2000};
mapSource, layerName and initialView are self explanatory. shape defines the bounding polygon to cover the area under which all the features i.e. links will be generated as the list as you can see in the above example.
Placing the Feature List
<div id="atPopupLinks">
<h3><!--Layer name will appear here--></h3>
<ul>
<h3>Loading links...</h3>
</ul>
</div>
The above link container i.e <ul> list may be placed anywhere and may also be styled using its unique id 'atPopupLinks' which should not be changed to anything else as it is used in the script to populate the links.