« Previous Chapter 8: Projection    Back to Index    Next Chapter 10: Drawing with SVG and VML »

Chapter 9: Multi-Language Support

Our mapsuite Javascript API contains the IWMultiLanguageSupport class to enable multi-language support. The following chapter demonstrates the usage of this class and describes a simple design pattern for developing multi-language applications.

9.1 How it works

First of all, multi-language support is not only important for map controls but also for everything else which contains text. Our design pattern is very easy to understand, first of all you have just to embed the IWMultiLanguageSupport class in your Javascript code and define a set of supported languages. You can add the languages to the IWLanguagePack instance by creating a new IWLanguage object and calling the addLanguage method. The constructor of the IWLanguage class takes as parameters a language key and the URL of the corresponding language file. Note that the URL must be accessible from the client web browser. Only the requested language file is loaded. For this reason it is unimportant whether you use only one language or several. So, keep your controls free of language relevant text and extract variable text parts into language files.

var pack = new IWLanguagePack();
			
pack.addLanguage(new IWLanguage('de', 'http://localhost/MapAPI-1.1/lang/IWNavigationControl.lang.de'));
pack.addLanguage(new IWLanguage('en', 'http://localhost/MapAPI-1.1/lang/IWNavigationControl.lang.en'));
pack.addLanguage(new IWLanguage('es', 'http://localhost/MapAPI-1.1/lang/IWNavigationControl.lang.es'));
pack.addLanguage(new IWLanguage('tr', 'http://localhost/MapAPI-1.1/lang/IWNavigationControl.lang.tr'));
pack.addLanguage(new IWLanguage('fr', 'http://localhost/MapAPI-1.1/lang/IWNavigationControl.lang.fr'));

IWMultiLanguageSupport.call(this, map, pack);

The code snippet above is taken from the implementation of our IWNavigationControl. The control specifies by default a language pack with five languages. You can change and enlarge the default settings for this control by the following way:

var ctrl = new IWNavigationControl(map);
			
ctrl.getLanguagePack().addLanguage('de', 'http://yourdomain.de/.../IWNavigationControl.lang.de'));
ctrl.getLanguagePack().addLanguage('nl', 'http://yourdomain.de/.../IWNavigationControl.lang.nl'));

map.getLayoutManager().getLayer(1).addControl(ctrl, IWAlignment.RIGHT, IWAlignment.TOP);  

The structure of all language files is the same. Each file contains a list of key and value pairs: key=value. The following listing shows the content of the IWNavigationControl.lang.en file which should be loaded if the language was set to 'en'.

NAVIGATION_UP=Move map up
NAVIGATION_RIGHT=Move map right
NAVIGATION_DOWN=Move map down
NAVIGATION_LEFT=Move map left		

If the language is set to 'en' and your mouse pointer is moved over the navigation control, then the toolip text "Move map up" should be displayed.

9.2 Change the language

You can change the language of the map by calling the map.getOptions().setLanguage() method. The method takes as parameter the ISO 639-1 code of the language, e.g. en, de, fr. After this, the map triggers automatically the IWLanguageChangeEvent to notify all listeners that the language has changed. Your IWMuliLanguageSupport instance catches this event too and triggers the IWMultiLanguageSupportEvent after the requested language file was loaded. Now it is up to you to catch this event and update the language relevant parts of your map application. The code snippet below catches the onLanguagePackLoad event and updates the alt and title attribute of the necessary DOM elements. The available language keys are listed in the corresponding language file.

IWEventManager.addListener(this, 'onlanguagepackload', 
function(event)
{    
	areaUp.alt = event.language.get('NAVIGATION_UP');
	areaUp.title = event.language.get('NAVIGATION_UP');
	areaLeft.alt = event.language.get('NAVIGATION_LEFT');
	areaLeft.title = event.language.get('NAVIGATION_LEFT');			
	areaRight.alt = event.language.get('NAVIGATION_RIGHT');
	areaRight.title = event.language.get('NAVIGATION_RIGHT')
	areaDown.alt = event.language.get('NAVIGATION_DOWN');
	areaDown.title = event.language.get('NAVIGATION_DOWN')
});

9.3 Multi-Language application

The example demonstrates the use of the IWMultiLanguageSupport class and changes to language at runtime. Click the button below and switch the language between de and en to see how it works.

<!DOCTYPE html>

<html>
	<head>
		<title>Chapter 9: Multilanguage Example</title>
		<script type="text/javascript" src="http://iw.mapandroute.de/MapAPI-1.1/js/core.js?vnr=0&pnr=0"></script>		
		
		<script type="text/javascript">
			
			var map = null;
			var self = this;
			var languageObj = null;
						
			function initialize() 
			{
				map = new IWMap(document.getElementById('divMap'));
				
				// Enables multi language support for the application context.
				var pack = new IWLanguagePack();  
				pack.addLanguage(new IWLanguage('de', 'http://localhost/MapAPI-1.1/tutorial/lang/ApplicationContext.lang.de'));  
				pack.addLanguage(new IWLanguage('en', 'http://localhost/MapAPI-1.1/tutorial/lang/ApplicationContext.lang.en'));

				IWMultiLanguageSupport.call(self, map, pack);
	
				// We register an event listener to catch the onLanguagePackLoad event.  
				IWEventManager.addListener(self, 'onlanguagepackload', 
					function(event)
					{    
						languageObj = event.language;
					}
				);
				
				// We load the language file for the current language.
				self.loadLanguagePack(map.getOptions().getLanguage());
				
				//add controls
				IWEventManager.addListener(map, 'oninitialize', function() {
					//create toolpar control with relevant listeners
					var toolbar = createToolbar(map);
					map.getLayoutManager().getLayer(1).addControl(toolbar, IWAlignment.TOP, IWAlignment.CENTER);								
					map.getLayoutManager().getLayer(1).addControl(new IWNavigationControl(map), IWAlignment.RIGHT, IWAlignment.TOP);
					map.getLayoutManager().getLayer(1).addControl(new IWSliderControl(map), IWAlignment.RIGHT, IWAlignment.TOP);
				});
				
				// load module controls and center the map if the module is loaded. 
				IWEventManager.addListener(IWLoader, 'onmoduleload', function(event)
				{
					if (event.name == 'controls')
					{
						map.setCenter(new IWCoordinate(7.1408879, 50.70150837, IWCoordinate.WGS84), 13);
					}
				});
				
				IWLoader.loadModules(['controls']);
			}
			
			 //Creates a user defined toolbar and returns it.
			function createToolbar(map)
			{
				var toolbar = new IWToolbarControl(map);
		
				var item1 = new IWToolbarItem('address');
				var item2 = new IWToolbarItem('search');
				var item3 = new IWToolbarItem('print');
				
				//additional styles here ...

				IWEventManager.addListener(toolbar, 'onmouseover', function(e) { 
						formatOnMouseOver(e.item); 
				});
				IWEventManager.addListener(toolbar, 'onmouseout', function(e) { 
					//change format of items here on mouse out event ...
				});
				IWEventManager.addListener(toolbar, 'onclick', function(e) { 
					//...  
				});
		
				toolbar.addItem(leftBorder);
				toolbar.addItem(item1);
				toolbar.addItem(item2);
				toolbar.addItem(spacer);
				toolbar.addItem(item3);
				toolbar.addItem(rightBorder);
				
				return toolbar;
			}

			
			/**
			 * Eventmethod for onMouseOver events.
			 * This method is registered on 'onmouseover' events from the toolbox. If the event is catched we
			 * change the url of the image.
			 * @return {void}
			 */
			function formatOnMouseOver(item)
			{
				var image = item.getNode().firstChild;
				var label = image.nextSibling;
				
				switch(item.getName())
				{
					case 'address':
						image.src = '../img/controls/toolbar/address_hover.gif';
						label.innerHTML = '<p class="iwtoolbaritem">' + languageObj.get('SEARCH_ADDRESS') + '</p>';
						break;
						
					case 'search':
						image.src = '../img/controls/toolbar/search_hover.gif';
						label.innerHTML = '<p class="iwtoolbaritem">' + languageObj.get('SHOW_POIS') + '</p>';
						break;

					case 'print':
						image.src = '../img/controls/toolbar/print_hover.gif';
						label.innerHTML = '<p class="iwtoolbaritem">' + languageObj.get('PRINT_MAP') + '</p>';
						break;
				}
			}
			
		</script>
		
	</head>
	<body onload="initialize();" class="tutorial">
		<div id="divMap" style="background-color: #dddddd; width: 450px; height: 300px"></div>
		<input type="button" value="Change language" onclick="changeLanguage();">
	</body>
</html>

9.4 List of available language packs

   « Previous Chapter 8: Projection    Back to Index    Next Chapter 10: Drawing with SVG and VML »

Copyright Sun Nov 24 11:35:05 CET 2024 infoware GmbH