...
An example page "atLiteMap-callout.html" is included with iShare in the WebApps\Web\Examples (WebApps\Web for older versions) folder.
| Tip |
|---|
When creating your own Lite Map please take a copy of the latest example atLiteMap-callout.html as this page may not contain the latest changes. |
| Code Block | ||||
|---|---|---|---|---|
| ||||
<!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> |
...