Part Layer Visible Check Boxes
View live sample | Download as a zip file
Description
To control the visibility of each layer in the map, use an array to store all layers including the background map first. Then use “putVisible” method to turn on or off a layer. Last, use gMapBase.getLayers()[0].getLayers()[i] to control the visibility of the ith layer. Also, do not forget to build the check boxes in html document. To allow users to control part of the map layers, build only the check boxes you want users to control.
How To Use
Copy and modify the code below to meet your needs.

Note:
This sample demonstrates how to control the visibility of each layer using map cached service. To apply to non-cached service, you will need to publish each map layer as different services.
Code 
                                <html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Layer Visible Check Boxes</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 gMapBase = null;

//pLyrAry is the array to save all the layers in one SGS Map Service
var pLyrAry = new Array();
function InitWnd()
{
	var pOMap = document.getElementById("OMap")
	
 	var pLyr = new MapCachedLayer("SuperGIS Server", "Agent.aspx", "null");
	var pExt = new MapEnvelope(pLyr.getLeft(), pLyr.getTop(), pLyr.getRight(), pLyr.getBottom());	
	var pTrans = new CachedLevelTransformation(pLyr);
	var pMapBase = new MapBase(pOMap, pTrans, 0, 0, "100%", "100%");  
	gMapBase = pMapBase;
	
	//Add OpenStreetMap layer and SGS map layer
	var pLyr2 = new OpenStreetMap("Standard", { url:"http://tile.opencyclemap.org/cycle/"})
	pMapBase.AddLayer(pLyr2);
	pMapBase.AddLayer(pLyr);

	//Put all the layers objects in pLyrAry.
	for(var i=0;i < gMapBase.getLayers()[0].getLayers().length;i++ ){
        pLyrAry.push(gMapBase.getLayers()[0].getLayers()[i]);
	}
	pLyrAry.push(pLyr2);
	
	//Zoom to SGS Map
	pMapBase.ZoomMapTo(pExt);
	pTrans.putMapLevel(Math.floor(pTrans.getMapLevel()));
	pTrans.FitLevel();
	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";
	
}

//Control the layer On and Off
function layerVisible(){
	var Layer1 = document.getElementById("layer1");
	var Layer2 = document.getElementById("layer2");
	var Layer3 = document.getElementById("layer3");
	var Layer4 = document.getElementById("layer4");
	pLyrAry[0].putVisible(Layer1.checked);
	pLyrAry[1].putVisible(Layer2.checked);
	pLyrAry[2].putVisible(Layer3.checked);
	pLyrAry[3].putVisible(Layer4.checked);
	gMapBase.RefreshMap(true);
}

</script>
</head>
<body style="margin:0px" onload="InitWnd();">
	<table style="position:absolute;z-index:10;left:100px;top:15px;background-color:#99ff66";>
		<tr>
			//MODIFY HERE to build your check boxes
			<td style="font-weight: bold;color: #336600;font-size: 25pt;">
				<input id="layer1" type="checkbox" onclick="layerVisible()" checked/>Location<br>
				<input id="layer2" type="checkbox" onclick="layerVisible()" checked/>Highway<br>
				<input id="layer3" type="checkbox" onclick="layerVisible()" checked/>Natural<br>
			</td>
		</tr>
	</table>	
	<div id="OMap" style="position:absolute;left:0px;top:0px;width:100%;height:100%;"> 
</div>
</body>
</html>