Chapter 8: Projection

For converting coordinates between different projections you can use the IWProjectionClient. This example shows you how to use it. The usage is very similar to the IWGeocoderClient introduced in Chapter 2. If you read this chapter, you should have no problems in understanding the following code.

Projection example 8 (view example):

Source code example 8:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
	<head>
		<title>Chapter 8: Projection example</title>
		<link type="text/css" rel="stylesheet" href="http://iw.mapandroute.de/MapAPI-1.0/css/screen.css"></link>
		<script type="text/javascript" src="http://iw.mapandroute.de/MapAPI-1.0/js/mapping.js"></script>
			
		<script language="javascript">
				
			var projectionClient = new IWProjectionClient();
			IWEventManager.addListener(projectionClient, 'onprojection', function(event) { showProjectionResults(event); });
							
			/**
			 * Calls the projection server to project the XY-Coordinate into the specified system.
			 * @private
			 * @param {String} x
			 * @param {String} y
			 * @param {String} toProjection
			 * @return {void}
			 */							
			function doProjection(x, y, toProjection)
			{			
				var coordinate = new IWCoordinate(x, y);
				var fromProjection = (toProjection == IWProjectionType.WGS84 ? IWProjectionType.LCC_EUROPE : IWProjectionType.WGS84);
				
				projectionClient.project(coordinate, fromProjection, toProjection);			
			}

			/**
	 		 * Shows the result of the projection server call.
	 		 * @private
	 		 * @param {IWProjectionEvent} event
	 		 * @return {void}
	 		 */	
			function showProjectionResults(event)
			{
				if (event.status != 'OK')
				{
					alert('Error: (' + event.status + ') ' + event.errorDescription);
					return;
				}
			
				var x = event.outputCoordinate.getX();
				var y = event.outputCoordinate.getY();
												
				var table = document.getElementById('resultTable');								

				if (table.rows.length > 1)
				{
					table.deleteRow(1);
				}
				
				var tr = table.insertRow(1);
				tr.insertCell(0).innerHTML = x;				
				tr.insertCell(1).innerHTML = y;
			}
		</script>
	</head>
	<body class="tutorial">
	
		<h1>Chapter 8: Projection Example</h1>

		<h2>8.1 Enter input coordinate</h2>
		
		<form>
			<table>
				<tr>
					<td width="100">x-coordinate</td>
					<td><input type="text" size="35" name="xcoord" value="6.9599"></td>
				</tr>
				<tr>
					<td width="100">y-coordinate</td>
					<td><input type="text" size="35" name="ycoord" value="50.9406"></td>
				</tr>
				<tr>
					<td>projection</td>
					<td>
						<select name="proj">
							<option value="LCC_EUROPE" selected>WGS84 -> LCC Europe</option>
							<option value="WGS84">LCC Europe -> WGS84</option>
						</select>
					</td>
				</tr>			
			</table>
			<br>
			<input type="button" value="do projection" onClick="doProjection(this.form.xcoord.value, this.form.ycoord.value, this.form.proj.value)">
		</form>

		<h2>8.2 Output coordinate</h2>

		<table id="resultTable">
			<tr>
				<th>x</th>
				<th>y</th>
			</tr>					
		</table>
		
		<br><br>
	</body>
</html>

We define two Javascript methods, doProjection() and showProjectionResults(). In doProjection() we just forward the values from our form we defined in our html code. The showProjectionResults() method writes the output coordinate in the table resultTable that we defined at the bottom of our code.

Let's take the code apart and have a look what it does.

8.3.1 Using the EventManager to receive projection events

var projectionClient = new IWProjectionClient();
IWEventManager.addListener(projectionClient, 'onprojection', function(event) { showProjectionResults(event); });

At first we need our projection client, so we instantiate the IWProjectionClient object.

Then we add a new listener to the IWEventManager object. With the IWEventManager we can add so called "listeners". Listeners can be used to determine when a request comes in. In this case, we use it to call our showProjectionResults() method when the server has sent an answer.

8.3.2 doProjection()

			function doProjection(x, y, toProjection)
			{			
				var coordinate = new IWCoordinate(x, y);
				var fromProjection = (toProjection == IWProjectionType.WGS84 ? IWProjectionType.LCC_EUROPE : IWProjectionType.WGS84);
				
				projectionClient.project(coordinate, fromProjection, toProjection);			
			}

We create a IWCoordinate object from the x and y value and determine the correct projection type. With the method project() we send our request to the projection service.

8.3.3 showProjectionResults()

function showProjectionResults(event)
{

	if (event.status != 'OK')
	{
		alert('Error: (' + event.status + ') ' + event.errorDescription);
		return;
	}

If our listener (that we created at step one) catches an answer, it calls our function with the event it receives as parameter. We know that this event is our projection-answer, so we check if the conversion was successful.

		var x = event.outputCoordinate.getX();
		var y = event.outputCoordinate.getY();

The conversion was successfull, so we extract the x and y value from the outputCoordinate object.

We can now simply print the coordinate in our table:

	var table = document.getElementById('resultTable');								

	if (table.rows.length > 1)
	{
		table.deleteRow(1);
	}
	
	var tr = table.insertRow(1);
	tr.insertCell(0).innerHTML = x;				
	tr.insertCell(1).innerHTML = y;
}

« Previous chapter 7: Shapes and Layers Back to Index Next chapter 9: Security and Access Protection »