How to set map center and zoom level

Ovi Maps API allows you to change the map default center and zoom level.

The location uses the standard Geographic latitude and longitude values.

In our example we would like to center the map to Dusseldorf, Germany.

Therefore we will apply the coordinates for Dusseldorf
The exact queried values are lat:51.2156299, lon:6.7760499

This takes place Where we edit the following section:


document.getElementById("map"),
{
'zoomLevel': 10, //zoom level for the map
'center': [52.51, 13.4] //center coordinates
}

In our case the Dusseldorf coordinates would look like this:

center : [51.21, 6.77]


You can experience to find the best initial zoom level for you, the values go up to 21. The bigger the value the more the map will be zoomed in (higher values for street level views).

In this example we would use zoomLevel 12 as follows:

zoomLevel : 5

The full edited code with all UI controls enabled would look like this:

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: 5,
center: [51.21, 6.77] //Dusseldorf, Germany
});

This code will give you the following map view when you have saved and published your post:

How to make the Ovi Maps interactive

Now that you have added the Ovi Maps to your blog, you can see it is static and does not react on the users actions.

To make the map 'intelligent', to be able to zoom it and move within the map, we need to add functionality to it called 'behaviour'.

This is done by creating a new instance of Behaviour and specifying the requested capabilities.

To add some more 'spice', we will add the map behaviours:

ZoomBar
This will add a slider UI component, which enables the user to increase or decrease the map zoom level. The four zoom level bookmark buttons that also will appear, allow for setting predefined zoom levels.

Overview
Defines a panel showing an overview of the map of the currently visible viewport.

TypeSelector
Provides a user interface to change the current base map type (Satellite, Terrain, Map)

ScaleBar
Defines a panel providing a scalebar. The scalebar is a ruler displaying distance measurements at different zoom levels of the map. By default, the scalebar is collapsed showing only one ruler section. When expanded, the scalebar shows more ruler sections. The measurement type can be changed from metric to imperial, which will be reflected in the distance measurements.

The following code as whole should go between the 'script type=' ... 'script' tag:

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"));

Depending on your needs, you can leave out any of the behaviours (lines in collection starting with 'new'), should you not want that user interaction to be available.