Once again we will first show you some example code. The only difference in this example is the extra style entries required for the results list, the MapSource, Layer Name, Bounding polygon and Initial view.
...
Code Block | ||||
---|---|---|---|---|
| ||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/DTD/strict.dtd"> <html> <head> <title>iShare - Solo</title> <!-- Including CSS files --> <link rel="stylesheet" type="text/css" href="css/custom/atMyPages.css" /> <link rel="stylesheet" type="text/css" href="css/custom/atMyPages-js.css" /> <link href="css/jQuery/jquery.core.css" type="text/css" rel="stylesheet" /> <link href="css/jQuery/jquery.autocomplete.css" type="text/css" rel="stylesheet" /> <link href="css/jQuery/astun/ui.all.css" type="text/css" rel="stylesheet" /> <link rel="stylesheet" type="text/css" href="css/custom/atPrint.css" media="print" /> <style> #atMap{ position: relative; height: 500px !important; width: 100%;padding:0; border: 1px solid #ccc;} #atPopupLinks { height: 500px; left: 820px; list-style-type: circle; overflow: auto; position: absolute; top: 0; width:200px; } .olPopupCloseBox { height:16px !important; width:16px !important; } .olPopup h3, .olPopup p { margin:0; } .contentDisplay fieldset { border:none; margin:0; padding 2px 3px; } .atPopupFeatureInfo { max-height:130px; overflow-x:hidden; overflow-y:auto; } .atMainLayersGroup ol li .atLayerLink span { color:black; } .olControlAttribution { bottom:10px !important; } </style> <body style="margin:20px; font-size:75%;"> <div id="atMyMaps" style="width:800px;"> <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> <!-- #atMap --> <div style="clear:both"></div> <div id="atPopupLinks"> <h3><!--Layer name will appear here--></h3> <ul> <h3>Loading links...</h3> </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> </div> <!-- #atMyMaps --> <a id="atPoweredBy"alt="Powered by Astun Technology" 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('solo',pageLoad); }); </script> <script type="text/javascript"> if( !window.astun ) { window.astun = {}; } window.astun.settings = { themeName : 'base' }; function pageLoad() { var mapDiv = $( 'atMap' ); $mapDiv = jQuery('#'+mapDiv.id); var loader = {}, $links = jQuery('#atPopupLinks').hide(), mapSource = 'Workshop/AllMaps', layerName = 'SchoolsPrim', shape = "POLYGON((485498 168503,504004 168427,504194 153151,485346 153113,485498 168503))"; initialView = {easting:495553, northing:175654, zoom:2000}; Event.observe( mapDiv, 'astun:sourceLoad', function(evt){ //Save the evt globally so that we can use it later astun.data = evt; var panels = [ { cssClass : 'atPanelFindNearest', title : 'Find Nearest', pluginName : 'findnearest', pluginData : evt, pluginOpts : {collapseInStart:true} } , { cssClass : 'atPanelSearchFor', title : 'Search For', pluginName : 'searchfor', pluginData : evt, pluginOpts : {collapseInStart:true} } , { cssClass : 'atPanelSearch', title : 'Address Search', pluginName : 'addresssearch', pluginData : evt, pluginOpts : {collapseInStart:true} } , { cssClass : 'atShowmapCategories', title : 'Show Map Categories', pluginName : 'showmapcategories', pluginData : evt, pluginOpts : {} } , { cssClass : 'atTakeMeTo', title : 'Take Me To', pluginName : 'takemeto', pluginData : evt, pluginOpts : {collapseInStart:true} } ] //Options to pass to the function options = { panelWrapperTopPosition :2, attachPanelWrapperTo :'#'+mapDiv.id }; //Start jQuery functions which will create panels and do other settings jqueryFunctions(jQuery,$mapDiv,panels,options); }); //Start the map mapDiv.map = new Astun.JS.Map(loader.mapID, { mapSource : mapSource, layers:layerName, view:initialView }); window.astun.mapWrapper = mapDiv.map; mapDiv.mapSettings = Astun.JS.getConfiguration(); mapDiv.addressFinder = new Astun.JS.GetData.AddressFinder( mapDiv.map.mapElement, mapDiv.mapSettings.dataUrl ); Event.observe( mapDiv, 'astun:layerShow', function(evt){ if(evt.memo.layer.layerName == layerName) $links.slideDown(); }); Event.observe( mapDiv, 'astun:layerHide', function(evt){ if(evt.memo.layer.layerName == layerName) $links.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) { //remove the loader var $lis = jQuery([]); //Empty jQuery object to append all <lis> $links.html(''); jQuery.each(data[0].features, function(){ var $this = this, lonLat = new OpenLayers.LonLat( $this.geometry.coordinates[0][0], $this.geometry.coordinates[0][1]), icon, linkInfo = $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> </body> </html> |
...
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}; |
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.
Placing the Feature List
Code Block |
---|
<div id="atPopupLinks"> <h3><!--Layer name will appear here--></h3> <ul> <h3>Loading links...</h3> </ul> </div> |
...