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

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

Chapter 3: Mapping and Geocoding

3.1 Using Mapping and Geocoding together

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

Source code example 3a:

<!DOCTYPE html>

<html>
	<head>
		<title>Chapter 3: Mapping and Geocoding example 3a</title>
		<script type="text/javascript" src="http://iw.mapandroute.de/MapAPI-1.1/js/core.js?vnr=0&pnr=0"></script>

		<script>
	
			var map = null;
			var geocoder = null;
			var marker = null;
			
			function initialize()
			{
				IWEventManager.addListener(IWLoader, 'onmoduleload', function(event)
					{
						if (event.name == 'geocoding') {
							//initialize geocoder client
							geocoder = new IWGeocoderClient();
							IWEventManager.addListener(geocoder, 'ongeocode', function(event)
							{
								return showGeocodingResults(event);
							});
				 
							function showGeocodingResults(event) // callback method
							{
								var results = event.results;
								var table = document.getElementById('resultTable');
								//handle geocoding results
								
								if (results.length > 0)
								{
									var rows = results.length;
									
		
									for (var i = 0; i < rows; i++)
									{
										
										var result = results[i];
										var address = result.getAddress();
										
										
										var a = document.createElement('a');
										a.href = '#';
										a.onclick = function()
										{
											//'this' is an IWGeocodingAddress
											//use the coordinate to place marker at this location
											if (marker == null)
											{
												marker = new IWMarker(map, this.getCoordinate());
												map.getOverlayManager().getLayer(1).addOverlay(marker);
											}
											else
											{
												marker.setCoordinate(this.getCoordinate());
												marker.redraw();
											}
											
											//move the map to the new center
											map.panTo(this.getCoordinate());
										}.iwclosure(address);
		
										a.innerHTML = address.toFullFormattedString();
										
										//place results in resultTable
										var tr = table.insertRow(i + 1);
										tr.className = (i % 2 ? 'even' : 'odd');
										tr.insertCell(0).innerHTML = (i + 1);
										tr.insertCell(1).appendChild(a);
									}
								}
							}
						}
				});
				IWLoader.loadModules(['geocoding']);
				
				//init map in container
				map = new IWMap(document.getElementById('divMap'));
				map.setCenter(new IWCoordinate(794920, 6568662, IWCoordinate.Mercator), 14);
			}
			
			//function to start geocoding
			function doGeocoding(inputAddress, countryCode, maxResults)
			{		
				geocoder.geocodeAddressString(inputAddress, countryCode, maxResults);
			}
		</script>
	</head>

	<body onload="initialize();" class="tutorial">
		<!--> map container-->
		<div id="divMap" style="position: absolute; left: 500px; background-color: #dddddd; width: 450px; height: 300px"></div>

		<form>
			<!--...-->
			<input type="button" value="geocode" onclick="doGeocoding()">
		</form>
		<table id="resultTable">
			<!--...-->
		</table>
	
	</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.

The geocoded addresses will now be shown as links. When the user clicks on a link, the map will move to the address location. 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.

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.2 Using Mapping and Reverse-Geocoding together

Now we change our reverse geocoding example so that a click on the map triggers the geocoding request and not formular values

Mapping and Reverse-Geocoding example 3b

Source code example 3b:

<!DOCTYPE html>
<html>
	<head>
		<title>Chapter 3: Mapping and Reverse-Geocoding example 3b</title>
		<script type="text/javascript" src="http://iw.mapandroute.de/MapAPI-1.1/js/core.js?vnr=0&pnr=0"></script>

		<script>
			
			var map = null;
			var geocoder = null;
			var clickMarker = null;
			var highlightMarker = null;
			
			function initialize()
			{
				IWEventManager.addListener(IWLoader, 'onmoduleload', function(event)
				{
					if (event.name == 'geocoding') {
						//initialize geocoder client
						geocoder = new IWGeocoderClient();
						IWEventManager.addListener(geocoder, 'onreversegeocode', function(event)
						{
							return showReverseGeocodingResults(event);
						});
					}
				});
				
				IWLoader.loadModules(['geocoding']);
				
				//initialize the map
				map = new IWMap(document.getElementById('divMap'));
				
				IWEventManager.addListener(map, 'onclick', function(event) { 
					doReverseGeocoding(event.position); 
				});
				
				map.setCenter(new IWCoordinate(794920, 6568662, IWCoordinate.Mercator), 14);
			}
			
			function doReverseGeocoding(position)
			{
				var type = map.getCurrentMapType();
				var coordinate = type.getProjection().pixelToMeter(position);
				
				//trigger geocoding
				geocoder.reverseGeocodeByHits(coordinate, 20);				
			}	
								
			function showReverseGeocodingResults(event) // callback method
			{
				//show results in table and/or map for example
				//...
			}
			
		</script>
	</head>

	<body onload="initialize();" class="tutorial">
		<div id="divMap"></div>
		<!-- ... -->
	</body>
</html>

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