Chapter 3: Mapping and Geocoding

Now we put the mapping and geocoding examples together. If you haven't read example one and two yet, this code might be a little bit confusing for you. In this case, please go back to the previous two examples, there you should find the answers to your questions.

Mapping and Geocoding example 3a (view example):

Source code example 3a:

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

<html>
	<head>
		<title>Chapter 3: Mapping and Geocoding example 3a</title>
		<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">				
		<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 map = null;
			var geocoder = new IWGeocoderClient();
			var marker = null;
			IWEventManager.addListener(geocoder, 'ongeocode', function(event) { return showGeocodingResults(event); });
						
			/**
			 * Initialized the map object and centers it to our company.
			 * @private
			 * @return {void}
			 */					
			function initialize() 
			{
				map = new IWMap(document.getElementById('divMap'));				
				map.setCenter(new IWCoordinate(794920, 6568662, IWCoordinate.Mercator), 14);											   
			}
			
			/**
			 * Calls the geocode method.
			 * @private
			 * @param {String} inputAddress the address string
			 * @param {String} countryCode the country code
			 * @param {Number} maximumHits the maximum hits returned by the geocoder
			 * @return {void}
			 */	
			function doGeocoding(inputAddress, countryCode, maxResults)
			{					
				geocoder.geocodeAddressString(inputAddress, countryCode, maxResults);
			}	
			
			/**
			 * Callback method for geocode events.
			 * @private
			 * @param {IWGeocodingEvent} event the geocoding event
			 * @return {void}
			 */								
			function showGeocodingResults(event)
			{
				var results = event.results;
				var table = document.getElementById('resultTable');								

				for (var i = table.rows.length-1; i > 0; i--)
				{
					table.deleteRow(i);
				}

				if (results.length > 0)
				{	
					var rows = results.length;
					
					for(var i = 0; i < rows; i++) 
					{					
						var result = results[i];	
						var tr = table.insertRow(i+1);

						tr.className = (i % 2 ? 'even' : 'odd');
						
						var text = '';
						var address = result.getAddress();
						
						if (address.getStreet())
						{
							text = address.getStreet()
							if (address.getHouseNumber()) 
							{
								text += ' ' + address.getHouseNumber();
							}
						}
						if (address.getZipCode())
						{
							text += address.getZipCode();
							if (address.getCity())
							{
								text += ' ' + address.getCity();
							}
						}

						var a  = document.createElement('a');
						a.href = '#';
															
						IWEventManager.addListener(a, 'onclick',
							function(event)
							{
								if (marker == null)
								{
									marker = new IWMarker(map, this.getCoordinate());
									map.getOverlayManager().getLayer(1).addOverlay(marker);
								}
								else
								{
									marker.setCoordinate(this.getCoordinate());
									marker.redraw();
								}	
							
								map.panTo(this.getCoordinate());
							}.iwclosure(address)
						);
										 									
						a.innerHTML = text;
						
						tr.insertCell(0).innerHTML = (i+1);
						tr.insertCell(1).appendChild(a);
					}						
				}		
			}
		</script>
	</head>

	<body onload="initialize();" class="tutorial">

		<h2>3.1 Using Mapping and Geocoding together</h2>
		
		<div id="divMap" style="position: absolute; top: 70px; left: 450px; background-color: #dddddd; width: 450px; height: 300px"></div>

		<form>
			<table>
				<tr>
					<td width="120">Address phrase</td>
					<td><input type="text" size="35" name="inputAddress" value="Bonn"></td>
				</tr>
				<tr>
					<td width="150">Country code</td>
					<td><input type="text" size="35" name="countryCode" value="D"></td>
				</tr>				
				<tr>
					<td>Maximum hits</td>
					<td><input type="text" size="35" name="maximumHits" value="30"></td>
				</tr>
			</table>
			<input type="button" value="geocode" 
				onClick="doGeocoding(this.form.inputAddress.value, this.form.countryCode.value, this.form.maximumHits.value)">
		</form>
			
		<br>

		<div style="position: relative; left: -1px; width: 396px; height: 255px; overflow: auto; padding: 1px;">
			<table id="resultTable">
				<tr>
					<th>No.</th>
					<th width="300">Address found</th>
				</tr>					
			</table>
		</div>		
	</body>
</html>

The HTML code is almost the same as in our previous examples. We provide a DIV container for the map and a DIV container for the geocoding result. The Javascript code was completely adopted from example one and two. We only changed the output format for our results. As mentioned above, if you have any problems in understanding the code, please read chapter 1 and chapter 2. Now let us take a closer look at the changes.

3.1.1 Locate the address

var a  = document.createElement('a');
a.href = '#';
															
IWEventManager.addListener(a, 'onclick',
	function(event)
	{
		if (marker == null)
		{
			marker = new IWMarker(map, this.getCoordinate());
			map.getOverlayManager().getLayer(1).addOverlay(marker);
		}
		else
		{
			marker.setCoordinate(this.getCoordinate());
			marker.redraw();
		}	
	
		map.panTo(this.getCoordinate());
	}.iwclosure(address)
);
					 									
a.innerHTML = text;

tr.insertCell(0).innerHTML = (i+1);
tr.insertCell(1).appendChild(a);

The geocoded addresses will now be shown as links. When the user clicks on a link, the map will move to the address location. With the sharp ('#') the link we are adding refers to our page. What we want this link to do is to execute a javascript method. We add an event listener to the onclick event. If the onclick event is thrown, then our event handler executes the callback method for setting the center of the map. In order to change the center, we call the API function panTo() method. This method takes a IWCoordinate object as parameter. With panTo() the map will move smoothly to the new location if it's near the old one, otherwise the map jumps directly to the new location.

Mapping and Reverse-Geocoding example 3b (view example):

Source code example 3b:

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

<html>
	<head>
		<title>Chapter 3: Mapping and Reverse-Geocoding example 3b</title>
		<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">				
		<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 map = null;
			var geocoder = new IWGeocoderClient();
			var clickMarker = null;
			var highlightMarker = null;
			
			IWEventManager.addListener(geocoder, 'onreversegeocode', function(event) { return showReverseGeocodingResults(event); });
						
			/**
			 * Initialized the map object and centers it to our company.
			 * @private
			 * @return {void}
			 */					
			function initialize() 
			{
				map = new IWMap(document.getElementById('divMap'));
				IWEventManager.addListener(map, 'onclick', function(event) { doReverseGeocoding(event.position); });								
				map.setCenter(new IWCoordinate(794920, 6568662, IWCoordinate.Mercator), 14);
			}
			
			/**
			 * Calls the reverse geocode method.
			 * @private
			 * @param {IWPoint} position the pixel position on map.
 			 * @return {void}
			 */									
			function doReverseGeocoding(position)
			{
				var type = map.getCurrentMapType();
				var coordinate = type.getProjection().pixelToMeter(position);

				//********************************************************************
				//* We use a simple marker to show the click position on the map
				//********************************************************************
				if (clickMarker == null)
				{
					clickMarker = new IWMarker(map, coordinate);					
					map.getOverlayManager().getLayer(1).addOverlay(clickMarker);
				}
				else
				{
					clickMarker.setCoordinate(coordinate);
					clickMarker.redraw();					
				}	
				
				iw.id('info').innerHTML = 'Pixel: ' + position.getX() + ',' + position.getY() + ', Coordinate: ' + coordinate.getX() + ', ' + coordinate.getY();
				
				geocoder.reverseGeocodeByHits(coordinate, 20);				
			}	
			
			/**
			 * Callback method for reverse geocode events.
			 * @private
			 * @param {IWReverseGeocodingEvent} event the reverse geocoding event
			 * @return {void}
			 */								
			function showReverseGeocodingResults(event)
			{
				var results = event.results;
				var table = document.getElementById('resultTable');								

				//********************************************************************
				//* Removes all house markers from the map
				//********************************************************************
				map.getOverlayManager().getLayer(0).removeAllOverlays();

				//********************************************************************
				//* Removes all table rows
				//********************************************************************
				for (var i = table.rows.length-1; i > 0; i--)
				{
					table.deleteRow(i);
				}

				if (results.length > 0)
				{	
					var rows = results.length;
					
					for(var i = 0; i < rows; i++) 
					{					
						var result = results[i];	
						var tr = table.insertRow(i+1);

						tr.className = (i % 2 ? 'even' : 'odd');

						var text = '';
						var address = result.getAddress();
						
						if (address.getStreet())
						{
							text = address.getStreet();
							if (address.getHouseNumber()) 
							{
								text += ' ' + address.getHouseNumber();
							}
						}
						if (address.getZipCode())
						{
							text += '<br>' + address.getZipCode();
							if (address.getCity())
							{
								text += ' ' + address.getCity();
							}
						}
						
						var wgs84 = address.getCoordinate().toWGS84();
						text += '<br>' + wgs84.getX() + ', ' + wgs84.getY();

						var a  = document.createElement('a');
						a.href = '#';
															
						IWEventManager.addListener(a, 'onclick', function(event)
						{
							map.panTo(this.getCoordinate());								
						}.iwclosure(address));

						IWEventManager.addListener(a, 'onmouseover', function(event) 
						{
							if (highlightMarker == null)
							{
								highlightMarker = new IWMarker(map, this.getCoordinate());
								highlightMarker.setDefaultIcon(new IWIcon('http://iw.mapandroute.de/MapAPI-1.0/img/symbols/house/house_red_18.gif', new IWPoint(15, 13), new IWSize(30, 26)));
								map.getOverlayManager().getLayer(0).addOverlay(highlightMarker);						
							}
							else
							{
								highlightMarker.setCoordinate(this.getCoordinate());
								highlightMarker.redraw();
							}											
						}.iwclosure(address));						
										 									
						a.innerHTML = text;
						
						tr.insertCell(0).innerHTML = (i+1);
						tr.insertCell(1).appendChild(a);
						tr.insertCell(2).innerHTML = result.getDistance();

						//********************************************************************
						//* Places a small house for every address on the map
						//********************************************************************
						var houseMarker = new IWMarker(map, address.getCoordinate());
						houseMarker.setDefaultIcon(new IWIcon('http://iw.mapandroute.de/MapAPI-1.0/img/symbols/house/house_blue_18.gif', new IWPoint(15, 13), new IWSize(30, 26)));
						map.getOverlayManager().getLayer(0).addOverlay(houseMarker);						
					}
				}		
			}
		</script>
	</head>

	<body onload="initialize();" class="tutorial">

		<h2>3.2 Using Mapping and Reverse-Geocoding together</h2>
		
		<div id="divMap" style="position: absolute; top: 70px; left: 450px; background-color: #dddddd; width: 450px; height: 300px"></div>
		<div style="position: absolute; top: 400px; left: 450px;"><p id="info" class="small"></p></div>	
		<div style="position: relative; left: -1px; width: 396px; height: 400px; overflow: auto; padding: 1px;">
			<table id="resultTable">
				<tr>
					<th>No.</th>
					<th width="230">Address found</th>
					<th width="50">Distance</th>
				</tr>					
			</table>
		</div>		
	</body>
</html>

« Previous chapter 2: Geocoding and Reverse-Geocoding Back to Index Next chapter 4: Routing »