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.