Including a Feature List in iShare Lite - pre v5.4.0
An example page "atlitemap-callout.html" is included from iShare 4.4.6
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 callout</title>
</head>
<body style="font-size: 75.0%;">
<!--Style here because everything inside body will be copied to any page-->
<style>
#atMap {
border:1px solid #CCC; height:500px; width:500px;
}
#atInitialLoader, #atMapLoader {
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;
}
#atMapLoader {margin-top:0;}
#atPopupLinks {
left: 500px;
list-style-type: circle;
position: absolute;
top: 0;
}
.olPopupCloseBox {
height:16px !important;
width:16px !important;
}
.olPopup h3, .olPopup p {
margin:0;
}
.atPopupFeatureInfo {
max-height:130px;
overflow-y:auto;
overflow-x:hidden;
}
</style>
<ul id="atPopupLinks">
<h3>Loading links...</h3>
</ul>
<div id="atMap">
<div id="atInitialLoader">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(){
var mapSource = 'Workshop/AllMaps',
layers = 'SchoolsPrim',
shape = "POLYGON((485498 168503,504004 168427,504194 153151,485346 153113,485498 168503))",
initialView = {easting:495553, northing:175654, zoom:2000};
$('atMap').map = new Astun.JS.Map('atMap',{
mapSource : mapSource,
layers:layers,
view:initialView
});
//Get links
url = "MapGetImage.aspx?callback=?&Type=jsonp&RequestType=GeoJSON&ServiceAction=GetMultiInfoFromShape&ActiveTool=MultiInfo&ActiveLayer=&mapid=-1&axuid=1317050721102&_=1317050721105";
jQuery.getJSON(url,
{
MapSource : mapSource,
Layers : layers,
Shape : shape
},
function (data)
{
//remove the loader
var $lis = jQuery([]), //Empty jQuery object to append all <li>s
$links = jQuery('#atPopupLinks');
$links.html('');
jQuery.each(data[0].features, function(){
var $this = this,
linkInfo = $this.properties.fields._,
lonLat = new OpenLayers.LonLat( $this.geometry.coordinates[0][0], $this.geometry.coordinates[0][1]),
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(){
astun.mapWrapper.interactions.showMapToolTip({'lonLat' : lonLat });
astun.mapWrapper.map.setCenter(lonLat);
return false;
}).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>
1. Styling the Feature List
Here is where you configure the display of the Feature List.
Example
<!--Style here because everything inside body will be copied to any page-->
<style>
#atMap {
border:1px solid #CCC; height:500px; width:500px;
}
#atInitialLoader, #atMapLoader {
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;
}
#atMapLoader {margin-top:0;}
#atPopupLinks {
left: 500px;
list-style-type: circle;
position: absolute;
top: 0;
}
.olPopupCloseBox {
height:16px !important;
width:16px !important;
}
.olPopup h3, .olPopup p {
margin:0;
}
.atPopupFeatureInfo {
max-height:130px;
overflow-y:auto;
overflow-x:hidden;
}
</style>
2. Placing the Feature List
Example
<ul id="atPopupLinks">
<h3>Loading links...</h3>
</ul>
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.
3. Defining the Feature List
Example
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.