Full Screen Map
View live sample | Download as a zip file
Description
To load the SGS map with full screen map extent, set the size of width and height as 100% in html document.
How To Use
1. Add SGS map.
2. Modify the size of width and height as 100% in html document, or you can set it as your desired percentage.

Note:
1. The map extent is set to (-1355696.017203, 8223922.101947,4461234.292177, 3408522.296928) initially. Modify it to meet your customization needs if necessary.
Code 
                                <html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=big5" />
<title>Full Screen Map</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/CachedLayer.js"></script>
<script type="text/javascript" src="scripts/OpenStreetMap.js"></script>
<script>

function InitWnd()
{
	var pOMap = document.getElementById("OMap")
	
 	var pLyr = new MapCachedLayer("SuperGIS Server", "Agent.aspx", "null");
 	
 	//set map initial extent
	var pExt = new MapEnvelope(-1355696.017203, 8223922.101947,4461234.292177, 3408522.296928);
	var pTrans = new CachedLevelTransformation(pLyr)
	var pMapBase = new MapBase(pOMap, pTrans, 0, 0, "100%", "100%");
	
	//Add OpenStreetMap layer and SGS map layer
	pMapBase.AddLayer(new OpenStreetMap("Standard", { url:"http://tile.opencyclemap.org/cycle/"}));
	pMapBase.AddLayer(pLyr);
	
	//Zoom to the intended extent
	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, use mouse to drap map and zoom in or out
	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";
}


</script>
</head>
<body style="margin:0px" onload="InitWnd();">

	//MODIFY HERE to meet your customization needs, for example, modify "width:100%" as "width:90%"
	<div id="OMap" style="position:absolute;left:0px;top:0px;width:100%;height:100%;"> 
</div>
</body>
</html>