Chapter 1: Mapping

This chapter gives you a short introduction to create a map and embed it in your website.

Fig. 1.1: UML class diagram: Mapping

1.1 My first map

To show you how the mapsuite Javascript API works, we will start with a simple example. The example below will show a map with a width of 450 and a height of 300 pixel, the center of the map will be our company in Bonn, Germany.

Mapping example 1a (view example):

Source code example 1a:

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

<html>
	<head>
		<title>infoware mapsuite Javascript API - Chapter 1: Mapping Example 
			- Company for Mapping, Routing, GPS-Navigation, Tracking and Telematics solutions</title>
		
		<!-- (1) Including the API -->
		<script type="text/javascript" src="http://iw.mapandroute.de/MapAPI-1.0/js/mapping.js"></script>
		
		<script type="text/javascript" >
			function initialize()
			{
				//(2) Creating the map object
				var map = new IWMap(document.getElementById('divMap'));	
				
				//(3) Defining a new coordinate and setting it as center
				var coordinate = new IWCoordinate(7.1408879, 50.70150837, IWCoordinate.WGS84);				
				map.setCenter(coordinate);
			}
		</script>
		
	</head>
	<!-- (4) Starting our javascript -->
	<body onload="initialize();">
		<!-- (5) Defining a div element for placing the map -->
		<div id="divMap" style="background-color: #dddddd; width: 450px; height: 300px"></div>
	</body>
</html>

This is a very slim way to implement a map, nevertheless it contains several important code lines already. We will go through the relevant elements step by step.

1.1.1 Including the API

<script type="text/javascript" src="http://iw.mapandroute.de/MapAPI-1.0/js/mapping.js"></script>

With this script tag we import the mapsuite Javascipt API code, which is necessary to start and work with the map.

1.1.2 Creating the map object

var map = new IWMap(document.getElementById('divMap'));

IWMap is the main class of the mapsuite Javascript API. In this line we are creating an IWMap instance called map, and point it to the div tag where it shall appear. This parameter is mandatory, because otherwise the map doesn't know where to appear. Optionally you can set options (like a different map size) with the IWMapOptions object. This will be explained later in detail, but to give you an impression, here a little example:

var options = map.getOptions();
options.setSize(new IWSize(500, 300));

With this code, the height and width definition from the div tag will be overwritten, and the size will be set to 500 x 300 pixel.

1.1.3 Defining a new coordinate and setting the map center

var coordinate = new IWCoordinate(7.1408879, 50.70150837, IWCoordinate.WGS84);
map.setCenter(coordinate);

With the IWCoordinate object we create a new coordinate localised in Bonn. IWCoordinate takes three parameters, the XY-coordinate and the projection type of the coordinate. If the projection type was not specified, then the default value is set to IWCoordinate.MERCATOR. In this example we want to use a WGS84 coordinate, so we set the third parameter to IWCoordinate.WGS84. You don't have to know exactly what this is about, as you can simply use our geocoder to get these values from every point of the world. This will be shown later in chapter two.

IWMap.setCenter() takes an IWCoordinate as parameter and sets the center of the map to this coordinate.

1.1.4 Starting our Javascript

<body onload="initialize();">

This line ensures that our function "initialize()" will be executed when the page is being loaded.

1.1.5 Defining a div element for placing the map

<div id="divMap" style="background-color: #dddddd; width: 450px; height: 300px"></div>

This div tag will be used to draw the map. The attribute id has to be set to the name we used at step two, where we created the map object.

In this example we define the size with the style attribute, but you can also define it with the IWMapOptions method shown above. If both the IWMapOptions.size and div style size are given, the size will be set with the div style values first, and will be immediately overwritten by the IWMapOptions.size when the IWMap is loaded.

The background color is optional, the user will see it while the map data is loaded.

1.2 Setting mouse actions

You can configure the mouse actions by setting the properties of the IWMapOptions object. The following table shows a list of important functions to customize the mouse behaviour. Additional functions about the IWMapOptions are described in our mapsuite API reference.

Method	Description
`setLeftMouseAction(action)`	Sets the action for the left mouse button. The default value is set to `IWMapOptions.CONTROL_MOVE`. Other possible values are `IWMapOptions.CONTROL_NONE` and `IWMapOptions.CONTROL_ZOOM`.
`setRightMouseAction(action)`	Sets the action for the right mouse button. The default value is set to `IWMapOptions.CONTROL_ZOOM`. Other possible values are `IWMapOptions.CONTROL_NONE` and `IWMapOptions.CONTROL_MOVE`.
`setMouseWheelAction(action)`	Sets the action for the mouse wheel. The default value is set to `IWMapOptions.CONTROL_ZOOM`. If you want to disable this feature, then you have to set this attribute to `IWMapOptions.CONTROL_NONE`.
`setDoubleClickAction(action)`	Sets the action for a double click on the right mouse button. The default value is set to `IWMapOptions.CONTROL_ZOOM`. You can disable this feature by setting the value of this attribute to `IWMapOptions.CONTROL_NONE`.

Back to Index Next chapter 2: Geocoding »