Code Gallery

                                <html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=big5" />
<title>Get Map Detail Info</title>
<link rel="stylesheet" type="text/css" href="css/map.css">
<link rel="stylesheet" type="text/css" href="css/TemplatePicker.css">
<link rel="stylesheet" type="text/css" href="css/InfoWindow.css" />
<script type="text/javascript" src="scripts/ext/Base.js"></script>
<script type="text/javascript" src="scripts/ext/GFX.js"></script>
<script type="text/javascript" src="scripts/ext/InfoWindow.js"></script>
<script type="text/javascript" src="scripts/AjaxAgent.js"></script>
<script type="text/javascript" src="scripts/Framework.js"></script>
<script type="text/javascript" src="scripts/MapBase.js"></script>
<script type="text/javascript" src="scripts/Controls.js"></script>
<script type="text/javascript" src="scripts/MapLayer.js"></script>
<script type="text/javascript" src="scripts/Navigate.js"></script>
<script type="text/javascript" src="scripts/Tracker.js"></script>
<script type="text/javascript" src="scripts/CachedLayer.js"></script>
<script type="text/javascript" src="scripts/Geometry.js"></script>
<script type="text/javascript" src="scripts/Edit.js"></script>
<script type="text/javascript" src="scripts/Query.js"></script>
<script type="text/javascript" src="scripts/Overview.js"></script>
<script type="text/javascript" src="scripts/Bookmark.js"></script>
<script type="text/javascript" src="scripts/OpenStreetMap.js"></script>
<script>

var pMapBase = null;
function InitWnd()
{
	var pOMap = document.getElementById("OMap")   	  
	
    	var pLyr1 = new MapCachedLayer("SuperGIS Server", "Agent-1.aspx", "null");							
    	var pLyr2 = new MapCachedLayer("SuperGIS Server", "Agent-2.aspx", "null");
    	var pLyr3 = new MapCachedLayer("SuperGIS Server", "Agent-3.aspx", "null");
	var pExt = new MapEnvelope(pLyr1.getLeft(), pLyr1.getTop(), pLyr1.getRight(), pLyr1.getBottom()); 	
	var pTrans = new CachedLevelTransformation(pLyr1);  
	pMapBase = new MapBase(pOMap, pTrans, 0, 0, "100%", "100%"); 
	
	//Add SGS and OpenStreetMap
	pMapBase.AddLayer(new OpenStreetMap("Standard", { url:"http://tile.opencyclemap.org/cycle/"}));
	pMapBase.AddLayer(pLyr1);	
	pMapBase.AddLayer(pLyr2);
	pMapBase.AddLayer(pLyr3);
	
	//Zoom to SGS map
	pMapBase.ZoomMapTo(pExt); 
	pTrans.putMapLevel(Math.floor(pTrans.getMapLevel()));   
	pMapBase.RefreshMap(true);
	
	//Add scale slider
	var pLevel = new LevelBarControl(pOMap, pTrans);
	pMapBase.AddElement(pLevel);
	
	//Add pan tool
	var pTool = new PanTool(false, true);
	if (pTool.InitialMapBase)
		pTool.InitialMapBase(pMapBase);
	pMapBase.SelectMapTool(pTool);
	
	//Add compass
	var pNode = pMapBase.getHPackage();
	var m_pCompass = pNode.ownerDocument.createElement("img");
	pNode.appendChild(m_pCompass);
	m_pCompass.src = "images/compass.png"
	m_pCompass.style.position = "absolute";
	m_pCompass.style.left = "1px";
	m_pCompass.style.top = "5px";
	
	//Add supergeo copyright
	var m_pCopyright = pOMap.ownerDocument.createElement("img");
	pOMap.appendChild(m_pCopyright);
	m_pCopyright.src = "images/poweredby.png"
	m_pCopyright.style.position = "absolute";
	m_pCopyright.style.left = "0px";
	m_pCopyright.style.bottom = "0px";
}

//Get the map detail information. 
function GetMapDetail()					
{
	var pPanel = new SWGPanel(OMap, 1, true, true);
	pPanel.putTitle("Map Basic Infomation");
	pPanel.CenterWindow();
	var pV = pPanel.getViewFrame();
	pV.style.height = "250px";
	var pLayerInfo = document.getElementById("LayerInfo");
		var sInfos = new Array();
		var pLayers = pMapBase.getLayers();
		for (var i = 0 ; i < pLayers.length - 1 ; i++)
		{
			var pLayer = pLayers[i];
			if (pLayer.getLayers)
			{
				var pLayers2 = pLayer.getLayers();
				for (var j = pLayers2.length - 1 ; j >= 0 ; j--)
                    		{
					var pLayer2 = pLayers2[j];
					var sInfo = "Layer Name: " + pLayer2.getName() + "<BR>" + "Layer Visible: " + pLayer2.getVisible() + "<BR>" + "Feature Type: " + pLayer2.getFeatureType();
					sInfos.push(sInfo);
                    		}
			}
			else
				alert("No Layers!")
		}
	pV.innerHTML = sInfos.join("<BR><BR>");
}

//Get Scale information. 
function GetScale()					
{
	var pPanel = new SWGPanel(OMap, 1, true, true);
	pPanel.putTitle("Map Scales Infomation");
	pPanel.CenterWindow();
	var pV = pPanel.getViewFrame();
	pV.style.height = "250px";
	var pLayerInfo = document.getElementById("LayerInfo");
	var sInfos = new Array();
	var pLayers = pMapBase.getLayers();
	for (var i = 0; i < pLayers.length - 1; i++) {
	var pLayer = pLayers[i];
	if (pLayer.getLayers) {
		var pLayers2 = pLayer.getLayers();
		for (var j = pLayers2.length - 1; j >= 0; j--) {
			var pLayer2 = pLayers2[j];
			var sInfo = "Layer Name: " + pLayer2.getName() + "<BR>" + "Scales: " + pLayer2.getScales();
			sInfos.push(sInfo);
		}
	}
	else
		alert("No Layers!")
	}
	pV.innerHTML = sInfos.join("<BR><BR>");
}

//Get Width and Height information. 
function GetWH()					
{
	var pPanel = new SWGPanel(OMap, 1, true, true);
	pPanel.putTitle("Map Width & Height Infomation");
	pPanel.CenterWindow();
	var pV = pPanel.getViewFrame();
	pV.style.height = "100px";
	var pLayers = pMapBase.getLayers();
	var mWidth = pMapBase.getClientWidth();
	var mHeight = pMapBase.getClientHeight();

	pV.innerHTML = "Map Width: " + mWidth + "<BR>" + "Map Height: " + mHeight;
}

</script>
</head>
<body style="margin:0px" onload="InitWnd();">
<table width="100%" height="100%" border="0" align="center" cellpadding="0" cellspacing="0">
	<tr>
		<td>
			<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
				<tr>
					<td valign="top">
						<div style="position:relative;left:0px;top:0px;width:100%;height:100%;">
						
							<div style="width:750px;height:500px;"></div>
							<div id="OMap" style="position:absolute;left:0px;top:0px;width:100%;height:100%;"></div>
							<div id="BottonDiv" style="z-index:0;position:absolute;left:60px;top:50px;width:100px;height:100px;"><input type="button" value="Layer Information" onclick="GetMapDetail()"></input>
							<div id="BottonDiv" style="z-index:0;position:absolute;left:0px;top:30px;width:100px;height:100px;"><input type="button" value="Map Scales" onclick="GetScale()"></input>
							<div id="BottonDiv" style="z-index:0;position:absolute;left:90px;top:0px;width:100px;height:100px;"><input type="button" value="Map Size" onclick="GetWH()"></input>
						</div>
						
					</td>
					<td width="1px" align="center" align="center">
						<div id="OPages" style="position:relative;width:100%;height:100%;overflow:hidden;"></div>
					</td>
				</tr>
			</table>
			</div>
		</td>
	</tr>
</table>
</body>
</html>