Horizontal Slider
View live sample | Download as a zip file
Description
Use “sgs_LevelBarControl(pOMap, pTrans, pLyr, “noScale”, ”horizontal”)” to add a slider with no ticks. To use it, you have to download “sgs,gis.js” and include it in your code.
How To Use
1. Download and include “sgs,gis.js” first.
2. To use "sgs_LevelBarControl” method, you need to enable cache service.
Code 
                                <html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=big5" />
<title>Horizontal Slider</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 type="text/javascript" src="scripts/sgs.gis.js"></script>
<script>

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%");
	
	//Add OpenStreetMap layer and SGS map layer
	pMapBase.AddLayer(new OpenStreetMap("Standard", { url:"http://tile.opencyclemap.org/cycle/"}));
	pMapBase.AddLayer(pLyr);
	
	//Zoom to SGS map extent
	pMapBase.ZoomMapTo(pExt);
	pTrans.putMapLevel(Math.floor(pTrans.getMapLevel()));
	pMapBase.RefreshMap(true);
	
	//Add a HORIZONTAL scale slider 
	var pLevel = new sgs_LevelBarControl(pOMap, pTrans, pLyr, "noScale", "horizontal");
	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 = "3px";
	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();">
	<div id="OMap" style="position:absolute;left:0px;top:0px;width:100%;height:100%;"> 
</div>
</body>
</html>