Back to Index    Next chapter 2: Geocoding »

Chapter 1: Mapping

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

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 Source code example 1a: 
<!DOCTYPE html>
<html>
	<head>
		<title>infoware mapsuite Javascript API - Chapter 1: Mapping Example</title>
		
		<!-- (1) Including the API / Please enter correct vnr/pnr -->
		<script type="text/javascript" src="http://iw.mapandroute.de/MapAPI-1.1/js/core.js?vnr=0&pnr=0"></script>		
		
		<script type="text/javascript">
			function initialize() 
			{
				//(2) Creating the map object
				var map = new IWMap(document.getElementById('map'));
				
				//(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="map" 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.1/js/core.js?vnr=0&pnr=0"></script>

With this script tag we import the core modules of mapsuite Javascipt API code, which is necessary to start and work with a simple map. To use more features like geocoding, touch gestures, ... you need to load these modules.

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.

1.3 Setting map types

As of now mapsuite API supports following default map types:

The map type is always set by a call to IWMap.setCenter(). To set a new map type, you can use this code snippet: 
var type = map.getOptions().getMapTypeByName('hybrid');
map.setCenter(map.getCenter(), map.getZoom(), type);

1.3 Setting map styles

If your product have access to different styles. You can change the style of your map with following code: 

map.getCurrentMapType().setStyle(IWMapType.STYLE_HERE_DELUXE);
The following styles are available for maptype roadmap:

Back to Index    Next chapter 2: Geocoding »

Copyright Tue Nov 05 22:06:23 CET 2024 infoware GmbH