Add Graphics
View live sample | Download as a zip file
Description
Use "ImportGeometryXML()" to draw different graphics.
How To Use
Copy and modify the codes below to meet your needs.
Code
                                <html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Add graphics</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(-1355696.017203, 8223922.101947,4461234.292177, 3408522.296928);
     
	var pTrans = new CachedLevelTransformation(pLyr);
     
	var pMapBase = new MapBase(pOMap, pTrans, 0, 0, "100%", "100%");  
	gMapBase = pMapBase;
     
	//OpenStreetMap
	pMapBase.AddLayer(new OpenStreetMap("Standard", { url:"http://tile.opencyclemap.org/cycle/"}));
          
	//Zoom to the intended extent
	pMapBase.ZoomMapTo(pExt);
	pTrans.putMapLevel(Math.floor(pTrans.getMapLevel()));
	pTrans.putMapLevel(5);
	pTrans.FitLevel();
	pMapBase.RefreshMap(true);
     
	var pOPages = document.getElementById("OPages")
	var pPages = new PageControl(pOPages);
	var pPage = pPages.AddPage("Layers", "images/list01.png");
	var gMapCont = new ContentControl(pPage, pMapBase);
	gMapCont.RebuildElement();
    
	//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";
	
	pMapBase.RefreshMap(true);
	
	//Add toolbar
	var pNode = pOMap.ownerDocument.createElement("div");
	pOMap.appendChild(pNode);
	pNode.style.position = "absolute";
	pNode.style.left = "65px";
	pNode.style.top = "60px";
	var pStep = new MapZoomStep(pMapBase);
	pStep.Clear();
	var pTools = new ToolbarControl(pNode, 0, 0);
	pTools.AddTool(pMapBase, new PanTool(true, true), "images/Tools/10.png", "Pan");
	pTools.AddTool(pMapBase, new DrawFreePlgn(), "images/Tools/polygon1.png", "Area Measure"); 
	pTools.AddTool(pMapBase, new DrawFreeLn(), "images/Tools/line1.png", "Area Measure"); 
	pTools.AddTool(pMapBase, new DrawPoint(), "images/Tools/point1.png", "Area Measure"); 
	pTools.AddTool(pMapBase, new DrawLine(), "images/Tools/line1.png", "Area Measure"); 
	pTools.AddTool(pMapBase, new DrawPolygon(), "images/Tools/polygon1.png", "Area Measure"); 
    
	//Read data from oracle
	var pRG = new RefreshGeom();
}

//DRAW POLYGON
function DrawPolygon() 
{
	var pTracker = null;
	var pResult = null;

	this.ExitMapEvent = null;

	this.InitMapEvent = function(pMapBase)
	{
		var hObj = pMapBase.getHPackage(); 
		var pTracker = null;               
		var pEndFunc = function(tEvent)   
		{
			//Draw the polygon on the map
			var pGeom = ImportGeometryXML(pMapBase, pTracker.getGeometry().WellKnownText());
			pTracker = null;
			AttachEvent(hObj, "mousedown", pMouseDown, false); 
		}

		var pMouseDown = function(tEvent) 
		{
			DetachEvent(hObj, "mousedown", pMouseDown, false); 
			pTracker = new PolygonTracker(pMapBase, tEvent, pEndFunc, null);
		}

		this.ExitMapEvent = function() 
		{
			if (pTracker)
				pTracker.Terminate();
			pTracker = null;
			DetachEvent(hObj, "mousedown", pMouseDown, false);
		}
		AttachEvent(hObj, "mousedown", pMouseDown, false); 
	}
}

//DRAW POLYLINE
function DrawLine() 
{
	var pTracker = null;
	var pResult = null;
	
	this.ExitMapEvent = null;
	this.InitMapEvent = function(pMapBase)
	{
		var hObj = pMapBase.getHPackage(); 
		var pTracker = null;               
		var pEndFunc = function(tEvent)   
		{
			//Draw the polyline on the map
			var pGeom = ImportGeometryXML(pMapBase, pTracker.getGeometry().WellKnownText());
			pTracker = null;
			AttachEvent(hObj, "mousedown", pMouseDown, false); 
		}
		
		var pMouseDown = function(tEvent) 
		{
			DetachEvent(hObj, "mousedown", pMouseDown, false); 
			pTracker = new LineStringTracker(pMapBase, tEvent, pEndFunc, null);
		}

		this.ExitMapEvent = function() 
		{
			if (pTracker)
			   pTracker.Terminate();
			pTracker = null;
			
			DetachEvent(hObj, "mousedown", pMouseDown, false);
		}

		AttachEvent(hObj, "mousedown", pMouseDown, false); 
	}
}

//DRAW POINT
function DrawPoint() 
{
	var pTracker = null;
	var pResult = null;

	this.ExitMapEvent = null;

	this.InitMapEvent = function(pMapBase)
	{
		var hObj = pMapBase.getHPackage(); 
		var pTracker = null;               
		var pEndFunc = function(tEvent)   
		{
			pTracker = null;
			AttachEvent(hObj, "mousedown", pMouseDown, false); 
		}
		var pMouseDown = function(tEvent) 
		{
			//Draw Point on the map
			var tPt = new Point(pMapBase);
			var CursorPos = pMapBase.getCursorPosition(tEvent);
			var pt = pMapBase.ToMapPoint(CursorPos.X, CursorPos.Y);
			tPt.SetPoint(new MapPoint(pt.X, pt.Y));
		}

		this.ExitMapEvent = function() 
		{
			if (pTracker)
				pTracker.Terminate();
			pTracker = null;
			DetachEvent(hObj, "mousedown", pMouseDown, false);
		}
		AttachEvent(hObj, "mousedown", pMouseDown, false); 
	}
}


//READ ORACLE DATA
function RefreshGeom()
{
	var gGeoms = new Array();
	if (gGeoms.length > 0)
	{
		for(var i = 0 ; i < gGeoms.length ; i++)
		{	
			var tObj = gGeoms[i].getHObject();
			tObj.onclick = null;
			gGeoms[i].Destroy();
		}
	}
	gGeoms = new Array();

	var pAgent = new AjaxAgent("Agent.aspx/ReadOracle", false, true);
		
	pAgent.SendRequest("", function (pRequest) {
		var pDoc = pRequest.responseXML;
		var pNodes = pDoc.documentElement.getElementsByTagName("Feature");
		var cnt = pNodes.length;
		for (var i = 0; i < cnt; i++) {
			var pID = pNodes.item(i).getAttribute("TEST1");
				  
			var pGeoms = pNodes.item(i).getElementsByTagName("Geom");
			if (pGeoms == null || pGeoms.length <= 0)
				continue;
			var pGeom = ImportGeometryXML(gMapBase, pGeoms.item(0).firstChild.nodeValue);
					
			if (pGeom != null)
			{
				if (pGeom.getExtent != null && pGeom.getHObject != null)
				{
					var pEnv = pGeom.getExtent();
					var tObj = pGeom.getHObject();
				}
				gGeoms.push(pGeom);
			}
		}
	}, null, null);
}

//DRAW FREE POLYGON
function DrawFreePlgn()
{
	var pTracker = null;
	var MouseCurX;
	var MouseCurY;
	var MouseDownX;
	var MouseDownY;
	var m_hObj;
	
	this.ExitMapEvent = null;
	this.InitMapEvent = function(pMapBase)
	{
		var pTracker = null;
		var hObj = pMapBase.getHObject();
		var pEventFunc = function(tEvent)
		{
			var pGeom = ImportGeometryXML(pMapBase, pTracker.getGeometry().WellKnownText());
			pTracker = null;
			AttachEvent(hObj, "mousedown", pMouseDown,false);
		}
		
		var pMouseDown = function(tEvent) 
		{
			DetachEvent(hObj, "mousedown", pMouseDown,false);
			pTracker = new LineStringTracker2(pMapBase, tEvent, pEventFunc);
		}
		
		this.ExitMapEvent = function()
		{
			DetachEvent(hObj, "mousedown", pMouseDown,false);
			if (pTracker != null)
				pTracker.Terminate();
			pTracker = null;
		}
		AttachEvent(hObj, "mousedown", pMouseDown,false);
	}
	
}
function LineStringTracker2(pMapBase, tEvent, pEndFunc, pMoveFunc)
{
	var m_pGeom = null;
	var hObj = pMapBase.getHPackage();

	var pMouseMove = null;
	var pThis = this;
	
	var pMouseUp = function(tEvent)
	{
		if (m_pGeom != null)
		{
			if (pEndFunc)
			{
				pEndFunc(tEvent);
			}
		}
		pThis.Terminate();
	}

	pMouseMove = function(tEvent)
	{
		if (m_pGeom)
		{
			var CursorPos = pMapBase.getCursorPosition(tEvent);
			var pt = pMapBase.ToMapPoint(CursorPos.X, CursorPos.Y);
			
			m_pGeom.AddPoint(0, pt);
			
			m_pGeom.RebuildElement();
	
			if (pMoveFunc)
				pMoveFunc(tEvent);
			return false;
		}
	}

	this.getGeometry = function() {return m_pGeom;};
		
	this.Terminate = function() 
	{
		if (pMouseMove)
			DetachEvent(hObj, "mousemove", pMouseMove, false);
		DetachEvent(hObj, "mouseup", pMouseUp, false);
		if (m_pGeom != null)
			m_pGeom.Destroy();
		m_pGeom = null;
	};
	
	var CursorPos = pMapBase.getCursorPosition(tEvent);
	var pt = pMapBase.ToMapPoint(CursorPos.X, CursorPos.Y);
	
	m_pGeom = new Polygon(pMapBase);
	m_pGeom.AddPoint(0, pt);
	AttachEvent(hObj, "mouseup", pMouseUp, false);
	AttachEvent(hObj, "mousemove", pMouseMove, false);
}

//DRAW FREE LINE
function DrawFreeLn()
{
	var pTracker = null;
        var MouseCurX;
	var MouseCurY;
	var MouseDownX;
	var MouseDownY;
	var m_hObj;
	
	this.ExitMapEvent = null;
	this.InitMapEvent = function(pMapBase)
	{
		var pTracker = null;
		var hObj = pMapBase.getHObject();
		var pEventFunc = function(tEvent)
		{
			var pGeom = ImportGeometryXML(pMapBase, pTracker.getGeometry().WellKnownText());
			pTracker = null;
			AttachEvent(hObj, "mousedown", pMouseDown,false);
		}
		
		var pMouseDown = function(tEvent) 
		{
			DetachEvent(hObj, "mousedown", pMouseDown,false);
			pTracker = new LineStringTracker3(pMapBase, tEvent, pEventFunc);
		}
		
		this.ExitMapEvent = function()
		{
			DetachEvent(hObj, "mousedown", pMouseDown,false);
			if (pTracker != null)
				pTracker.Terminate();
			pTracker = null;
		}
		AttachEvent(hObj, "mousedown", pMouseDown,false);
	}
	
}
function LineStringTracker3(pMapBase, tEvent, pEndFunc, pMoveFunc)
{
	var m_pGeom = null;
	var hObj = pMapBase.getHPackage();

	var pMouseMove = null;
	var pThis = this;
	
	var pMouseUp = function(tEvent)
	{
		if (m_pGeom != null)
		{
			if (pEndFunc)
			{
				pEndFunc(tEvent);
			}
		}
		pThis.Terminate();
	}

	pMouseMove = function(tEvent)
	{
		if (m_pGeom)
		{
			var CursorPos = pMapBase.getCursorPosition(tEvent);
			var pt = pMapBase.ToMapPoint(CursorPos.X, CursorPos.Y);
			
			m_pGeom.AddPoint(pt);
			
			m_pGeom.RebuildElement();
	
			if (pMoveFunc)
				pMoveFunc(tEvent);
			return false;
		}
	}

	this.getGeometry = function() {return m_pGeom;};
		
	this.Terminate = function() 
	{
		if (pMouseMove)
			DetachEvent(hObj, "mousemove", pMouseMove, false);
		DetachEvent(hObj, "mouseup", pMouseUp, false);
		if (m_pGeom != null)
			m_pGeom.Destroy();
		m_pGeom = null;
	};
	
	var CursorPos = pMapBase.getCursorPosition(tEvent);
	var pt = pMapBase.ToMapPoint(CursorPos.X, CursorPos.Y);
	
	m_pGeom = new Polyline(pMapBase);
	m_pGeom.AddPoint(pt);
	AttachEvent(hObj, "mouseup", pMouseUp, false);
	AttachEvent(hObj, "mousemove", pMouseMove, false);
}

</script>
</head>
<body style="margin:0px" onload="InitWnd();">
<table width="100%" height="100%" border="0" align="center" cellpadding="0" cellspacing="0">
		<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>
						<div id="OPages" style="position:relative;width:0%;height:0%;overflow:hidden;"></div>
				</tr>
			</table>
			</div>
		</td>
	</tr>
</table>
</body>
</html>