...
| Code Block | ||
|---|---|---|
| ||
<!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.
| Code Block | ||
|---|---|---|
| ||
<!--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
| Code Block | ||
|---|---|---|
| ||
<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
| Code Block | ||
|---|---|---|
| ||
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}; |
...