Revision as of 03:43, 2 May 2011 by hamishwillee (Talk | contribs)

Using the RESTful Map API together with HERE Maps API

From Nokia Developer Wiki
Jump to: navigation, search

In short Ovi Maps API allows you to integrate Ovi maps into your web page. Ovi Maps offers a variety of essential map functionality out of the box like, panning, zooming and support for W3C positioning inbuilt in modern browsers. However in some situations it is just enough to show the map image. This is where Ovi maps rendering API comes into play.

Ovi maps rendering API is light weight, but full-blown, offering for easy access of map data. Map data is served as a single image, which makes it highly compatible with variety of devices. You don’t even need JavaScript so show the map.

To maximize the compatibility and to potentially reduce initial page load time, you can combine these two offerings. Ovi maps is not supported on browsers of mobile devices, which is not optimal situation if you are targeting for mobile friendly website. One way to circumvent this problem is by having a plain map image served on the page initially. Then only after the user clicks on the map the Ovi Maps is loaded. In this way you can potentially save on initial load time and be rested that all of your visitors are able to see the map.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>OVI Maps test page</title>
<script type="text/javascript" src="http://api.maps.ovi.com/jsl.js">
<script type="text/javascript">
function showFullMap(){
document.getElementById("map").innerHTML = "";
var map = new ovi.mapsapi.map.Display(document.getElementById("map"), {
components: [
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, //zoom level for the map
'center': [61.2953, 23.4553] // center coordinates
<div id="map" style="width:540px; height:334px;">
<img src='http://m.ovi.me/?c=61.2953,23.4553&h=334&w=540&z=10' onclick='showFullMap();'/>
214 page views in the last 30 days.