[[topnavbar]]

Ovi Maps API Developer's Guide

[[tabnav]]

Getting Started

Use of the Ovi Maps API is simple. Once the Ovi Maps API JavaScript library is included in the HTML page, only a few lines of code are needed to get the application running.

API Loading

For the integration of the API you just need to add the JavaScript file resource into your HTML document:

<head>
	…
	<script src="http://api.maps.ovi.com/jsl.js" type="text/javascript" charset="utf-8">
	</script>
	…
</head>

Jsl.js is a delivery that contains three things:

  • common classes that are always needed, regardless of the module combination,
  • a package loader which enables the loading of specific module combinations,
  • environment detection code that enables the API to decide on an optimal set of packages for the environment.

Please also take a look in the chapter "Packages and Detection" for more information on package loading and its options.

Acquiring API credentials

Nokia provides several services with the Maps API offering. Basically, you can start without having any credentials given, but you might face a performance gap. In order to get the full potential out of the offering, you must get credentials that authenticate your application against the Services. Please read through the Location API Business Models and Usage Restrictions page , so that you can decide which business model fits your needs best. The authentication itself requires your unique Maps API credentials, namely AppId and Token. You can get these credentials from the API Registration page at Forum Nokia.

Using API credentials

After registering your application, you must set these credentials in the ApplicationContext class.

  •  
    JavaScript
    // Authentication set up is the first thing that you must do with the API 
    	ovi.mapsapi.util.ApplicationContext.set({"appId": "YOUR APPID", "authenticationToken": "YOUR TOKEN"});
    									
  •  
    JavaScript + HTML
    [[exHtmlPart1]]
    	// Authentication set up is the first thing that you must do with the API
    	ovi.mapsapi.util.ApplicationContext.set({"appId": "YOUR APPID", "authenticationToken": "YOUR TOKEN"});
    [[exHtmlPart2]]

Basic Map

The following code displays a basic map, with a defined zoom level and center coordinates. The map will be placed inside the 'map' DIV element.

A basic map with no interaction options
  •  
    JavaScript
    var map = new ovi.mapsapi.map.Display(document.getElementById("map"), {
    	'zoomLevel': 10, //zoom level for the map
    	'center': [52.51, 13.4] //center coordinates
    });
    										
  •  
    JavaScript + HTML
    [[exHtmlPart1]]
    	var map = new ovi.mapsapi.map.Display(
    		document.getElementById("map"),
    		{
    			'zoomLevel': 10, //zoom level for the map
    			'center': [52.51, 13.4] //center coordinates
    		}
    	);[[exHtmlPart2]]

Changing the map type programmatically

Once an instance of Display is created it provides three constants which represent the three base map types available:

NORMAL This is the default base map type
SATELLITE This is the base map type providing satellite imagery
TERRAIN This is the base map type providing elevation profile imagery

To enable the appropriate base map type on the display the "baseMapType" setter can be used:

map.set("baseMapType", map.SATELLITE); //activates the satellite imagery on the display

A map with the satellite base map type set.
  •  
    JavaScript
    var map = new ovi.mapsapi.map.Display(document.getElementById("map"), {
    	zoomLevel: 10,
    	center: [52.51, 13.4]
    });
    //activate the satellite imagery on the display
    map.set("baseMapType", map.SATELLITE);
  •  
    JavaScript + HTML
    [[exHtmlPart1]]
    		var map = new ovi.mapsapi.map.Display(document.getElementById("map"), {
    			zoomLevel: 10,
    			center: [52.51, 13.4]
    		});
    		//activate the satellite imagery on the display
    		map.set("baseMapType", map.SATELLITE);
    [[exHtmlPart2]]
    										

See also the "Map Type" example in the Ovi Maps API Playground.

Components / UI Interaction

The Ovi Maps API ships with a basic set of map components which provides the UI elements needed to interact with the map. These components are mash-ups that use the API . The following components are available with the Ovi Maps API:

Behavior A collection of components enabling general mouse/touch map interaction (zoom, panning etc.).
Zoombar Provides a zoom slider on the left to zoom in/out.
Scalebar Displays a scale bar at the bottom. You can expand it to show a large ruler, as well as change the units between metric and imperial.
Overview Provides an expandable overview (minimap) window in the bottom right corner.
TypeSelector Displays a map type switcher in the top right corner.

To use the shipped components you need to add them to the Display instance. The following example shows how to create a map Display instance with all of the predefined components.

A map with all components of the Ovi Maps API distribution
  •  
    JavaScript
    var map = new ovi.mapsapi.map.Display(document.getElementById("map"), {
                components: [ 
    				//behavior collection
    				new ovi.mapsapi.map.component.Behavior(),
    				new ovi.mapsapi.map.component.ZoomBar(),
    				new ovi.mapsapi.map.component.Overview(),
    				new ovi.mapsapi.map.component.TypeSelector(),
    				new ovi.mapsapi.map.component.ScaleBar() ],
    			zoomLevel: 10,
    			center: [52.51, 13.4]
    		});
    //remove zoom.MouseWheel behavior for better page scrolling experience
    map.removeComponent(map.getComponentById("zoom.MouseWheel"));
  •  
    JavaScript + HTML
    [[exHtmlPart1]]
    		var map = new ovi.mapsapi.map.Display(
    			document.getElementById("map"), {
    				components: [ 
    					//behavior collection
    					new ovi.mapsapi.map.component.Behavior(),
    					new ovi.mapsapi.map.component.ZoomBar(),
    					new ovi.mapsapi.map.component.Overview(),
    					new ovi.mapsapi.map.component.TypeSelector(),
    					new ovi.mapsapi.map.component.ScaleBar() ],
    				zoomLevel: 10,
    				center: [52.51, 13.4]
    			});
    	      //remove zoom.MouseWheel behavior for better page scrolling experience
    	      map.removeComponent(map.getComponentById("zoom.MouseWheel"));
    [[exHtmlPart2]]
    										

Note that to enable easy continuous scrolling of this documentation page, we disabled mouse wheel zooming. After creating the map Display instance with the Behavior component collection, the zoom.Mousewheel subcomponent was individually removed.

An alternative to using the combined Behavior component collection and then removing some functionality, you can also skip adding the Behavior collection altogether and instead add individual components like in this code sample:

var map = new ovi.mapsapi.map.Display(document.getElementById("map"), {
      //zoom level for the map
	  'zoomLevel': 10,
	  //center coordinates
      'center': [52.51, 13.4] 
    });
map.addComponent( new ovi.mapsapi.map.component.zoom.DoubleClick() );
map.addComponent( new ovi.mapsapi.map.component.panning.Drag() );
map.addComponent( new ovi.mapsapi.map.component.panning.Kinetic() );

See also the Markers example below where only the DoubleClick zoom and the DragMarker behavior components are enabled. This time already during the map Display instantiation.

Markers

One of the most important use cases is showing points of interest on a map. The Ovi Maps API offers two sorts of markers:

StandardMarkers
which provide a predefined set of possible properties, and
Markers
which allow you to specify your own image to indicate a point on the map.

The following example shows how to add a StandardMarker with a text label.

A map containing a draggable StandardMarker with a short label, with only DoubleClick zooming and marker draggability behaviors enabled
  •  
    JavaScript
    var map = new ovi.mapsapi.map.Display(document.getElementById("map"), {
    		components: [
    			  new ovi.mapsapi.map.component.zoom.DoubleClick(),
    			  //needed for marker drag
    			  new ovi.mapsapi.map.component.objects.DragMarker()],
    			  zoomLevel: 15,
    			  center: [52.51, 13.4]
    		});
    
    //create a marker and add it to the map
    var marker = new ovi.mapsapi.map.StandardMarker([52.51, 13.4], {
    	text: "Hi!", //small label
    	draggable: true  //the marker is marked to be draggable
    });
    map.objects.add(marker);
  •  
    JavaScript + HTML
    [[exHtmlPart1]]
    		var map = new ovi.mapsapi.map.Display(
    			document.getElementById("map"), {
    			components: [
    				new ovi.mapsapi.map.component.zoom.DoubleClick(),
    				//needed for marker drag
    				new ovi.mapsapi.map.component.objects.DragMarker()],
    				zoomLevel: 15,
    				center: [52.51, 13.4]
    			});
    		
    		//create a marker and add it to the map
    		var marker = new ovi.mapsapi.map.StandardMarker([52.51, 13.4], {
    			text: "Hi!", //small label
    			draggable: true  //the marker is marked to be draggable
    		});
    		map.objects.add(marker);
    [[exHtmlPart2]]
    										

As you may have realized, the marker not only stays on the map but you can move it around by clicking it and dragging it around. When you release the mouse button the marker will drop into the new position. This works on touch devices as well.

The following sample shows how to use a custom Marker image as an icon.

A map containing a non-draggable custom Marker with its icon centered above the coordinate. The map supports full interaction except for the zoom.MouseWheel behavior.
  •  
    JavaScript
    var map = new ovi.mapsapi.map.Display(document.getElementById("map"), {
    		components: [new ovi.mapsapi.map.component.Behavior()],
    		zoomLevel: 13,
    		center: [52.51, 13.4]
    });
    
    map.removeComponent(map.getComponentById("zoom.MouseWheel"));
    
    var marker = new ovi.mapsapi.map.Marker(
    		new ovi.mapsapi.geo.Coordinate(52.51, 13.4),{
    		title: "marker",
    		visibility: true,
    		icon: "images/pic_marker_house.png",
    		//offset the top left icon corner so that it's
    		//centered above the coordinate
    		anchor: new ovi.mapsapi.util.Point(32, 32) 
    	});
    map.objects.add(marker);
  •  
    JavaScript + HTML
    [[exHtmlPart1]]
    		var map = new ovi.mapsapi.map.Display(document.getElementById("map"), {
    			components: [new ovi.mapsapi.map.component.Behavior()],
    			zoomLevel: 13,
    			center: [52.51, 13.4]
    		});
    	
    		map.removeComponent(map.getComponentById("zoom.MouseWheel"));
    	
    		var marker = new ovi.mapsapi.map.Marker(
    			new ovi.mapsapi.geo.Coordinate(52.51, 13.4),{
    			title: "marker",
    			visibility: true,
    			icon: "images/pic_marker_house.png",
    			//offset the top left icon corner so that it's
    			//centered above the coordinate
    			anchor: new ovi.mapsapi.util.Point(32, 32) 
    		});
    		map.objects.add(marker);
    [[exHtmlPart2]]
    										

Geo Objects

The Ovi Maps API provides several different geo shapes to create custom content on top of the map view. These can be a circle, a rectangle, a polyline or a polygon.

A map with a Circle shape
  •  
    JavaScript
    var map = new ovi.mapsapi.map.Display(document.getElementById("map"), {
    		components: [new ovi.mapsapi.map.component.Behavior()],
    		zoomLevel: 10,
    		center: [52.51, 13.4]
    });
    
    map.removeComponent(map.getComponentById("zoom.MouseWheel"));
    
    map.objects.add(new ovi.mapsapi.map.Circle(
    		//place the circle center here
    		[52.51, 13.4],
    		//radius of 8000 meters
    		8000,
    		{
    			color: "#823f",
    			fillColor: "#2387",
    			width: 10
    		}
    ));
  •  
    JavaScript + HTML
    [[exHtmlPart1]]
    		var map = new ovi.mapsapi.map.Display(document.getElementById("map"), {
    				components: [new ovi.mapsapi.map.component.Behavior()],
    				zoomLevel: 10,
    				center: [52.51, 13.4]
    		});
    		
    		map.removeComponent(map.getComponentById("zoom.MouseWheel"));
    		
    		map.objects.add(new ovi.mapsapi.map.Circle(
    				//place the circle center here
    				[52.51, 13.4],
    				//radius of 8000 meters
    				8000,
    				{
    					color: "#823f",
    					fillColor: "#2387",
    					width: 10
    				}
    		));
    [[exHtmlPart2]]
    										

The above code demonstrates the use of the circle geo shape. The shape is added to the map view by creating a specific object. The coordinates, radius and formatting are defined with JSON parameters for the object creator.

The use of other shapes is described in the "Geo Shapes" example in the Ovi Maps API Playground.

Services

In addition to client-side features, the Ovi Maps API provides access to services such as search and routing.

For example, the search can be used to list points of interest nearby. The routing is used to render a travel route between two or more coordinates.

Each of the service objects takes care of the related network requests. Thus all that the developer must provide are the call parameters and the object creation.

To understand how to associate action handlers for the services continue to the chapter "Advanced API Usage".

Search

Search is a vital part of modern web applications. The relation between geo coordinates and human-readable POI information is essential to provide rich location based services. This API gives access to the huge Nokia geo database containing address, POI and place information from all over the world. For example, if you add a custom place in maps.ovi.com it will later become part of the database and can be retrieved with this API .

The entry point is the ovi.mapsapi.search.Manager, which provides four methods to retrieve search results:

reverseGeoCode
Retrieves address information regarding a given Coordinate.
geoCode
Works the other way around and provides Location information regarding the given address string.
search
Is similar to geoCode, but also takes POI information into account, which then usually become part of the result.
placeSearch
Enables the search of places. A Place is an object containing more than address information - for instance airports, restaurants and theaters. As this kind of search is very detailed you have to limit the query to a certain Proximity.
A search example (with the Behavior, TypeSelector and ZoomBar components added to the map display)
  •  
    JavaScript
    var map = new ovi.mapsapi.map.Display(document.getElementById("map"), {
    		components: [ new ovi.mapsapi.map.component.Behavior(),
    			new ovi.mapsapi.map.component.TypeSelector(),
    			new ovi.mapsapi.map.component.ZoomBar() ],
    			center: [52, 17.5]
    		});
    		
    map.removeComponent(map.getComponentById("zoom.MouseWheel"));
    
    var SEARCH = new ovi.mapsapi.search.Manager();
    
    SEARCH.addObserver("state", function(observedManager, key, value) {
    	if(value == "finished") {
    		if (observedManager.locations.length > 0) {
    			var rs = (new ovi.mapsapi.search.component.SearchResultSet(observedManager.locations)).container;
    			//push marker(s) to map
    			map.objects.add(rs);
    			//zoom to result(s)
    			map.zoomTo(rs.getBoundingBox());
    			//zoom out if too close 
    			if (map.zoomLevel > 16){
    				map.set("zoomLevel", 16);
    			}
    		}
    	} else if (value == "failed"){
    		alert("The automatically triggered search request in the Search example failed."); 
    	}
    });
    SEARCH.search("pariser platz berlin", {
    		//parameters that allow to set the proximity of the search
    		//center: new ovi.mapsapi.geo.Coordinate(52.5, 13.3333),
    		//radius: 1200000
    });
    SEARCH.clear();
  •  
    JavaScript + HTML
    [[exHtmlPart1]]
    		var map = new ovi.mapsapi.map.Display(document.getElementById("map"), {
    		components: [ new ovi.mapsapi.map.component.Behavior(),
    			new ovi.mapsapi.map.component.TypeSelector(),
    			new ovi.mapsapi.map.component.ZoomBar() ],
    			center: [52, 17.5]
    		});
    		
    map.removeComponent(map.getComponentById("zoom.MouseWheel"));
    
    var SEARCH = new ovi.mapsapi.search.Manager();
    
    SEARCH.addObserver("state", function(observedManager, key, value) {
    	if(value == "finished") {
    		if (observedManager.locations.length > 0) {
    			var rs = (new ovi.mapsapi.search.component.SearchResultSet(observedManager.locations)).container;
    			//push marker(s) to map
    			map.objects.add(rs);
    			//zoom to result(s)
    			map.zoomTo(rs.getBoundingBox());
    			//zoom out if too close 
    			if (map.zoomLevel > 16){
    				map.set("zoomLevel", 16);
    			}
    		}
    	} else if (value == "failed"){
    		alert('The automatically triggered search request in the Search example failed.'); 
    	}
    });
    SEARCH.search("pariser platz berlin", {
    		//parameters that allow to set the proximity of the search
    		//center: new ovi.mapsapi.geo.Coordinate(52.5, 13.3333),
    		//radius: 1200000
    });
    SEARCH.clear();
    [[exHtmlPart2]]
    										

For more information, check the "Searches" and "Observability" examples in the Ovi Maps API Playground.

Routing

Route planning and navigation are the most commonly used applications of location-based services. With the API you are able to retrieve optimal routes respecting your calculation criteria, based on up-to-date maps and taking real-time traffic information into account.

A Route describes a distinct path between at least two Waypoints, the starting and the destination point, optionally via further waypoints.

ovi.mapsapi.routing.Manager offers the calculateRoute and getRoutes methods for using the routing functionality.

The input for the route calculation by calculateRoute is a list of waypoints. The waypoints can be specified by passing either a GeoCoordinate, a Place or a Location. The entered RoutingMode defines how the route shall be calculated. Here the RoutingType (e.g. based on travel time or distance), the TransportMode (e.g. by car or public transport), the RoutingOptions (e.g. avoiding toll roads etc.) and the TrafficMode (possible use of traffic information) can be considered.

Based on these conditions the calculated routes are provided by the getRoutes method. They consist of a list of segments between the different waypoints (RouteLegs), connected with Maneuver information such as the direction and a textual instruction describing the required maneuver. In addition to that, a graphical representation of the route as a polyline is given, which can be rendered together with the map data so that the route is displayed on the map.

The code bellow is part of the "Routing" example in the Ovi Maps API Playground. The waypoints list is given as a parameter for the routing manager. The navigation modes are defined in JSON .

A routing example
  •  
    JavaScript
    var map = new ovi.mapsapi.map.Display(
    	document.getElementById("map"), {
    		components: [new ovi.mapsapi.map.component.Behavior()],
    		zoomLevel: 11,
    		center: [50.12, 8.62]
    	}
    );
    
    map.removeComponent(map.getComponentById("zoom.MouseWheel"));
    //create a route controller
    var router = new ovi.mapsapi.routing.Manager() 
    //create waypoints
    var waypoints = new ovi.mapsapi.routing.WaypointParameterList();
    waypoints.addCoordinate(
    	new ovi.mapsapi.geo.Coordinate(50.1120423728813, 8.68340740740811)
    );
    waypoints.addCoordinate(
    	new ovi.mapsapi.geo.Coordinate(50.140411376953125, 8.572110176086426)
    );
    var modes = [{
    	type: "shortest",
    	transportModes: ["car"],
    	options: "avoidTollroad",
    	trafficMode: "default"
    }];
    
    var onRouteCalculated = function(observedRouter, key, value){
    	if (value == "finished") {
    		var routes = observedRouter.getRoutes();
    		//create the default map representation of a route
    		var mapRoute = new ovi.mapsapi.routing.component.RouteResultSet(routes[0]).container;
    		map.objects.add(mapRoute);
    		//Zoom to the bounding box of the route
    		map.zoomTo(mapRoute.getBoundingBox(), false, "default");
    	} else if (value == "failed") { 
    		alert("The routing request failed.");
    	}
    };
    
    //add the observer function to the router's "state" property
    router.addObserver("state", onRouteCalculated);
    
    //calculate the route (and call onRouteCalculated afterwards)
    router.calculateRoute(waypoints, modes);
  •  
    JavaScript + HTML
    [[exHtmlPart1]]
    		var map = new ovi.mapsapi.map.Display(
    			document.getElementById("map"), {
    				components: [new ovi.mapsapi.map.component.Behavior()],
    				zoomLevel: 11,
    				center: [50.12, 8.62]
    			}
    		);
    		
    		map.removeComponent(map.getComponentById("zoom.MouseWheel"));
    		//create a route controller
    		var router = new ovi.mapsapi.routing.Manager() 
    		//create waypoints
    		var waypoints = new ovi.mapsapi.routing.WaypointParameterList();
    		waypoints.addCoordinate(
    			new ovi.mapsapi.geo.Coordinate(50.1120423728813, 8.68340740740811)
    		);
    		waypoints.addCoordinate(
    			new ovi.mapsapi.geo.Coordinate(50.140411376953125, 8.572110176086426)
    		);
    		var modes = [{
    			type: "shortest",
    			transportModes: ["car"],
    			options: "avoidTollroad",
    			trafficMode: "default"
    		}];
    		
    		var onRouteCalculated = function(observedRouter, key, value){
    			if (value == "finished") {
    				var routes = observedRouter.getRoutes();
    				//create the default map representation of a route
    				var mapRoute = new ovi.mapsapi.routing.component.RouteResultSet(routes[0]).container;
    				map.objects.add(mapRoute);
    				//Zoom to the bounding box of the route
    				map.zoomTo(mapRoute.getBoundingBox(), false, "default");
    			} else if (value == "failed") { 
    				alert("The routing request failed.");
    			}
    		};
    		
    		//add the observer function to the router's "state" property
    		router.addObserver("state", onRouteCalculated);
    		
    		//calculate the route (and call onRouteCalculated afterwards)
    		router.calculateRoute(waypoints, modes);
    [[exHtmlPart2]]
    										


Take a look at the full examples in the Ovi Maps API Playground to learn more about associating handlers and using services like geocoding and search in the Ovi Maps API.

Built-in Positioning

The user location is one of the key issues in building a map application on the web. The Ovi Maps API now supports the direct use of W3C browser positioning, which provides the user's location to be used in the Ovi Maps API implementations.

The code below is a part of the "Positioning" example in the Ovi Maps API Playground.
The positioning service manager requests the user position from the browser, and sends the received coordinates to the callback function. The callback function then creates a marker and a circle shape to illustrate the accuracy of the received position.

Hover with your mouse over the map below to trigger the positioning request.

An example using the W3C geolocation API (only works in browsers that support this functionality). MouseWheel zooming behavior is enabled in this example.
  •  
    JavaScript
    var map = new ovi.mapsapi.map.Display(document.getElementById("mapEx7"),
    		{
    			components: [new ovi.mapsapi.map.component.Behavior()],
    			zoomLevel: 13,
    			center: [52.51, 13.4]
    		}
    );
    
    var mapNode = document.getElementById("map"),
    posInstructionNode = document.getElementById("posInstruction");
    
    if (navigator.geolocation) {
    	var positioning = new ovi.mapsapi.positioning.Manager(),
    	getPos = function(){
    		if (!window._positioningDone) {
    			window._positioningDone = true;
    			ovi.dom.removeEvent(mapNode, "mouseover", getPos, false);
    			posInstructionNode.innerHTML = "Positioning request was already initiated. Please reload the page if you want to perform another one.";
    			positioning.getCurrentPosition(
    				function(position){
    					var coords = position.coords;
    					var marker = new ovi.mapsapi.map.StandardMarker(coords);
    					var accuracyCircle = new ovi.mapsapi.map.Circle(coords, coords.accuracy);
    					map.objects.addAll([accuracyCircle, marker]);
    					map.zoomTo(accuracyCircle.getBoundingBox(), false, "default");
    					if (map.zoomLevel > 16){
    						//zoom out if too close 
    						map.set("zoomLevel", 16);
    					}
    				},
    				function(error){
    					alert('Positioning was not successful.');
    				},
    				{ 
    				//optional: wait time before failure
    				//timeout: 15000 
    				}
    			);
    		}
    	};
    	ovi.dom.addEvent(mapNode, "mouseover", getPos, false);
    } else {
    	var innerH = posInstructionNode.innerHTML;
    	innerH = innerH.replace("<i>", "<I>");
    	innerH = innerH.replace("<I>", "<i style='text-decoration: line-through;'>");
    	innerH += "<br/>Your browser doesn't support the W3C geolocation API, <span style='color: red;'>the geolocation part of this example will not work</span>.";
    	posInstructionNode.innerHTML = innerH;
    }
  •  
    JavaScript + HTML
    [[exHtmlPart1]]
    	var map = new ovi.mapsapi.map.Display(document.getElementById("mapEx7"),
    			{
    				components: [new ovi.mapsapi.map.component.Behavior()],
    				zoomLevel: 13,
    				center: [52.51, 13.4]
    			}
    	);
    	
    	var mapNode = document.getElementById("map"),
    	posInstructionNode = document.getElementById("posInstruction");
    	
    	if (navigator.geolocation) {
    		var positioning = new ovi.mapsapi.positioning.Manager(),
    		getPos = function(){
    			if (!window._positioningDone) {
    				window._positioningDone = true;
    				ovi.dom.removeEvent(mapNode, "mouseover", getPos, false);
    				posInstructionNode.innerHTML = "Positioning request was already initiated. Please reload the page if you want to perform another one.";
    				positioning.getCurrentPosition(
    					function(position){
    						var coords = position.coords;
    						var marker = new ovi.mapsapi.map.StandardMarker(coords);
    						var accuracyCircle = new ovi.mapsapi.map.Circle(coords, coords.accuracy);
    						map.objects.addAll([accuracyCircle, marker]);
    						map.zoomTo(accuracyCircle.getBoundingBox(), false, "default");
    						if (map.zoomLevel > 16){
    							//zoom out if too close 
    							map.set("zoomLevel", 16);
    						}
    					},
    					function(error){
    						alert('Positioning was not successful.');
    					},
    					{ 
    					//optional: wait time before failure
    					//timeout: 15000 
    					}
    				);
    			}
    		};
    		ovi.dom.addEvent(mapNode, "mouseover", getPos, false);
    	} else {
    		var innerH = posInstructionNode.innerHTML;
    		innerH = innerH.replace("<i>", "<I>");
    		innerH = innerH.replace("<I>", "<i style='text-decoration: line-through;'>");
    		innerH += "<br/>Your browser doesn't support the W3C geolocation API, <span style='color: red;'>the geolocation part of this example will not work</span>.";
    		posInstructionNode.innerHTML = innerH;
    	}
    [[exHtmlPart2]]
    										

 

[[footer]]