infoware mapsuite Javascript API - Company for Mapping, Routing, GPS-Navigation, Tracking and Telematics solutions

« Previous Chapter 7: Shapes and Layers Back to Index Next Chapter 9: Multi-Language Support »

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

Source code example 8:

<!DOCTYPE html>

<html>
	<head>
		<script type="text/javascript" src="http://iw.mapandroute.de/MapAPI-1.1/js/core.js?vnr=0&pnr=0"></script>
			
		<script type="text/javascript">
			
			//(1) initialize projection client	
			var projectionClient = new IWProjectionClient();
			IWEventManager.addListener(projectionClient, 'onprojection', function(event) { 
				showProjectionResults(event); 
			});
							
			//(2) Calls the projection server to project the XY-Coordinate into the specified system.
			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);			
			}

			//(3) Shows the result of the projection server call.
			function showProjectionResults(event)
			{
				var x = event.outputCoordinate.getX();
				var y = event.outputCoordinate.getY();
									
				//handle result ...			
			}
		</script>
	</head>
	<body class="tutorial">
	
		<span>Enter input coordinate:</span>
		<form>
			<!-- input form-->
			<input type="button" value="do projection" onClick="doProjection(this.form.xcoord.value, this.form.ycoord.value, this.form.proj.value)">
		</form>
		
		<span>Output coordinate</span>
		<table id="resultTable">
			<!--result table-->			
		</table>
	</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 initialize projection client and register listener

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

Then we add a new listener to the IWEventManager object. In this case, we catch the projection event 'onprojection' and call the method showProjectionResults() to display the result after the projection server has sent an answer.

8.3.2 doProjection()

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()

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 object is an IWProjectionEvent and contains the projected coordinates (if it could be successfully projected):

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

« Previous Chapter 7: Shapes and Layers Back to Index Next Chapter 9: Multi-Language Support »