5.4.0+
An example page "atLiteMap-callout.html" is included with iShare in the WebApps\Web\Examples (WebApps\Web for older versions) folder.
<!DOCTYPE html>
<html>
<head>
<title>iShare - Lite callout</title>
<!-- This script is only needed for the examples folder, remove if used elsewhere. -->
<script type="text/javascript" src="../js/basehrefresolver.js"></script>
<!-- REMINDER: if not in iShare Web base folder update ALL URLs accordingly -->
<style type="text/css">
#atMap {
border: 1px solid #CCC;
height: 500px;
width: 500px;
}
#atPopupLinks {
left: 550px;
height:500px;
width:400px;
margin-top:0;
overflow:auto;
list-style-type: circle;
position: absolute;
top: 0;
}
</style>
<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">
function pageLoad() {
var mapSource = "Workshop/AllMaps",
layers = "primary_schools",
field = "_",
shape = "POLYGON((485498 168503,504004 168427,504194 153151,485346 153113,485498 168503))";
//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) {
var $lis = jQuery([]), //Empty jQuery object to append all <li>s
$links = jQuery('#atPopupLinks ul');
// empty the list
$links.empty();
//Show the layer name as well
jQuery('#atPopupLinks h3:first')
.html(data[0].properties.layer);
jQuery.each(data[0].features, function() {
var $this = this,
linkInfo = typeof ($this.properties.fields[field]) !== "undefined" ? $this.properties.fields[field] : "",
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>
<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/AllMaps', layers: 'Primary Schools', view: { easting: 495553, northing: 175654, zoom: 2000} }, null, pageLoad);
</script>
</head>
<body>
<div style="clear: both"> </div>
<div id="atPopupLinks">
<h3>Loading links...</h3>
<ul>
<li style="display:none"> </li>
</ul>
</div>
<div id="atMap">
<div id="atInitialLoader">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>
1. Styling the Feature List
Here is where you configure the display of the Feature List.
<style type="text/css">
#atMap {
border: 1px solid #CCC;
height: 500px;
width: 500px;
}
#atPopupLinks {
left: 550px;
height:500px;
width:400px;
margin-top:
overflow:auto;
list-style-type: circle;
position: absolute;
top: 0;
}
</style>
2. Defining the Feature List
var mapSource = "Workshop/AllMaps",
layers = "primary_schools",
field = "_",
shape = "POLYGON((485498 168503,504004 168427,504194 153151,485346 153113,485498 168503))";
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.
3. Placing the Feature List
<div id="atPopupLinks">
<h3>Loading links...</h3>
<ul>
<li style="display:none"> </li>
</ul>
</div>