5.4.0+
Once again we will first show you some example code. The only difference in this example is the extra style entries required for the Feature List.
An example page "atSoloMap-callout.html" is included with iShare in the WebApps\Web\Examples (WebApps\Web for older versions).
<!DOCTYPE html>
<html>
<head>
<title>iShare - Solo with 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 -->
<script type="text/javascript">
function pageLoad() {
var mapDiv = $('atMap'),
$mapDiv = jQuery('#' + mapDiv.id),
loader = {},
$links = jQuery('#atPopupLinks').find('ul'),
mapSource = 'Workshop/AllMaps',
layerName = 'primary_schools',
shape = "POLYGON((485498 168503,504004 168427,504194 153151,485346 153113,485498 168503))";
Event.observe(mapDiv, 'astun:layerShow', function(evt) {
if (evt.memo.layer.layerName == layerName) $links.parent().slideDown();
});
Event.observe(mapDiv, 'astun:layerHide', function(evt) {
if (evt.memo.layer.layerName == layerName) $links.parent().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) {
//Show the layer name as well
$links.parent().find('h3:first').html(astun.mapWrapper.layerControl.findLayer(layerName).displayName)
//remove the loader
var $lis = jQuery([]); //Empty jQuery object to append all <lis>
$links.html('');
jQuery.each(data[0].features, function() {
var $this = this;
var lonLat = new OpenLayers.LonLat($this.geometry.coordinates[0][0], $this.geometry.coordinates[0][1]),
icon,
linkInfo = typeof($this.properties.fields._) !== "undefined" ? $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>
<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/solomap.js"></script>
<script type="text/javascript">
soloMap.addFindNearestPanel();
soloMap.addSearchForPanel();
soloMap.addSearchPanel();
soloMap.addShowmapCategoriesPanel();
soloMap.addTakeMeToPanel();
soloMap.createMap('atMap', { themeName: 'base', mapSource: 'Workshop/AllMaps', view: { easting: 495553, northing: 175654, zoom: 2000} }, null, pageLoad);
</script>
<style type="text/css">
#atMap {
position: relative;
height: 500px !important;
width: 100%;
padding: 0;
border: 1px solid #ccc;
}
#atPopupLinks {
height: 500px;
left: 820px;
overflow: auto;
position: absolute;
top: 0;
width: 300px;
}
#atPopupLinks ul {
list-style-type: circle;
padding-left: 30px;
}
#atPopupLinks h3 {
padding-left: 20px;
}
</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" />
<link rel="stylesheet" type="text/css" href="custom.example/css/atPrint.css" media="print" />
<link rel="stylesheet" type="text/css" href="css/jQuery/astun/ui.all.css" />
</head>
<body style="margin: 20px;">
<!-- #atMyMaps -->
<div id="atMyMaps" style="width: 800px;">
<!-- #atMap -->
<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>
<div style="clear: both"> </div>
<div id="atPopupLinks">
<h3>Loading links...</h3>
<ul>
<li style="display:none"> </li>
</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>
<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. Defining the Feature List
var mapSource = 'Workshop/AllMaps',
layerName = 'primary_schools',
shape = "POLYGON((485498 168503,504004 168427,504194 153151,485346 153113,485498 168503))";
mapSource and layerName 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.
The following section is where you may alter the style of the popups.
#atPopupLinks {
height: 500px;
left: 820px;
overflow: auto;
position: absolute;
top: 0;
width: 300px;
}
#atPopupLinks ul {
list-style-type: circle;
padding-left: 30px;
}
#atPopupLinks h3 {
padding-left: 20px;
}
3. Placing the Feature List
<div id="atPopupLinks">
<h3>Loading links...</h3>
<ul>
<li style="display:none"> </li>
</ul>
</div>