Code Gallery

                                <html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Map Query</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;
function InitWnd()
{
	var pOMap = document.getElementById("OMap")
	
 	var pLyr = new MapCachedLayer("SuperGIS Server", "Agent.aspx");
	var pExt = new MapEnvelope(5318030.919404, 3381003.758531,6833971.883454, 2406513.888747);
	var pTrans = new CachedLevelTransformation(pLyr);
	var pMapBase = new MapBase(pOMap, pTrans, 0, 0, "100%", "100%");  
	gMapBase = pMapBase;
	
	//Add SGS map and OpenStreetMap
	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()));
	pTrans.FitLevel();
	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 = "2px";
	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";
	
	pMapBase.RefreshMap(true);
}

var layers = 0;
var pgeom;

//ADD THIS FUNCTION
function FindFunction()
{
	var pTbl = document.getElementById("ResultTbl");
	while (pTbl.rows.length > 0){
		pTbl.deleteRow(0);
	}	
	if(gMapBase.getLayers().length < 2){
		layers = 0; 
	}else{		
		layers = gMapBase.getLayers().length - 2;
	}
	var pServiceLayer = gMapBase.getLayers()[layers];
	var pLayer = pServiceLayer.getLayers()[0];

	var pKeyValue = document.getElementById("KeyValue");
	
	if (pLayer.ExecuteQuery == null)
		return;

	//MODIFY THE SQL HERE to meet your needs
	var strFind = "[CNTRY_NAME] like '" + pKeyValue.value +"%'";

	pLayer.ExecuteQuery(strFind, false, function (pRequest){
		var pDoc = pRequest.responseXML;
		var pNodes = pDoc.documentElement.getElementsByTagName("Feature");
		if (pNodes.length <= 0)
			return;

		var cnt = pNodes.length;
		if (cnt > 0)
		{
			var pValues = GetXMLChildNode(pNodes.item(0), "Values").childNodes;
			pRow = pTbl.insertRow(-1);
			pCell = pRow.insertCell(-1);
			pCell.innerHTML = "GID";
			for (var j = 0 ; j < pValues.length ; j++)
			{
				var pValue = pValues.item(j);
				if (pValue.nodeType == 1)
					pRow.insertCell(-1).innerHTML = pValue.tagName;
			}
			for (var i = 0 ; i < cnt ; i++)
			{
				var pNode = pNodes.item(i)
				var GID = pNode.getAttribute("ID");
				var pValues = GetXMLChildNode(pNode, "Values").childNodes;                          
				pRow = pTbl.insertRow(-1);
				pCell = pRow.insertCell(-1);
				pCell.innerHTML = GID;
				for (var j = 0 ; j < pValues.length ; j++)
				{
					var pValue = pValues.item(j);
					if (pValue.nodeType == 1)
					{
						pCell = pRow.insertCell(-1);
						if (pValue.firstChild != null)
							pCell.innerHTML = pValue.firstChild.nodeValue;
						else
							pCell.innerHTML = "&nbsp;";
					}
				}
			}
			var pGeoms = pDoc.documentElement.getElementsByTagName("Geometry");
			if(pgeom){
				pgeom.Destroy();
			}
			pgeom = ImportGeometryXML(gMapBase, pGeoms.item(0));
			gMapBase.ZoomMapTo(pgeom.getExtent());
			gMapBase.RefreshMap(true);            
		}
	});
}

</script>
</head>
<body style="margin:0px" onload="InitWnd();">
<table width="100%" height="100%" border="0" align="center" cellpadding="0" cellspacing="0">
						<div style="position:relative;left:0px;top:0px;width:100%;height:85%;">
							<div style="width:750px;height:500px;"></div>
							<div id="OMap" style="position:absolute;left:0px;top:0px;width:100%;height:100%;"></div>
							<div id="FindDiv" style="z-index:0;position:absolute;left:60px;top:50px;width:100px;height:100px;"><input type="text" value="Qatar"  id="KeyValue"></input><input type="button" value="Find" onclick="FindFunction()"></input>						</div>
						<div id="OPages" style="position:relative;width:100%;height:20%;overflow:hidden;"></div>
					</td>
				</tr>
			</table>
			</div>
		</td>
	</tr>
</table>
   <div>Query Result
            <table id="ResultTbl" border="1"></table>
   </div>
</body>
</html>