Archived:Ovi Maps API - How to show photos on the map

From Nokia Developer Wiki
Jump to: navigation, search

Archived.pngArchived: This article is archived because it is not considered relevant for third-party developers creating commercial solutions today. If you think this article is still relevant, let us know by adding the template {{ReviewForRemovalFromArchive|user=~~~~|write your reason here}}.

The Ovi Maps API has been superceded by the Nokia Maps API. The Nokia Maps API v2 is the successor of the Ovi Maps API. The latest version of the API can be found here.

Article Metadata
Created: Maveric (22 Jun 2011)
Last edited: hamishwillee (24 Apr 2013)



In this article we will show how to use PHP and JavaScript intogether with Ovi Maps API to create a simple mashup of showing photos on map. The photos are located on a web server, fetched and displayed on the map.


This example assumes you will have access to a web server running PHP (5.x) and JavaScript enabled on a modern web browser.


We will create only one PHP file, which needs to reside on the web server. The file consists of mixed XHTML/JavaScript and PHP.

Also, to be able to extract the EXIF information, the PHP.INI file should have the EXIF data reading enabled.

Feel free to further enhance this simple example to your own purposes.

Example code

First we will set the document content type, document title, call the Ovi Maps API JavaScript.

We then set the required "div" for placing the map. We then start the JavaScript section and set the authentication token.

Please note that at the moment of writing the use of authentication is not required. Please follow the Ovi Maps API project discussions section "Announcements". There it will be separately informed when the authentication is enabled.

After this, we create three arrays; for holding the data for EXIF information and filenames.

The PHP part will start by setting the directory from which the images should be read on the server.

The function "readGPSinfoEXIF" will take care of parsing the required data out of the images and it is called from the main foreach ($array as $key => $image) loop, which will go thru each and every file in the directory.

After the PHP part we will jump back to the JavaScript and start to set up our map on screen.

First, we will name our map as a "mapContainer", then define another container that will be set into the container that already holds our map. For this component we will then create a map Marker, we will go thru all of the pictures that we were able to retrieve the EXIF data.

Please note, that if the image was not taken with a device that supported embedding the location data inside the photo, then there will be no location data in it.

Even in mobile phones that support GPS location fetching, you should check if the feature for storing location of the image is enabled, so this when taking new photos with your mobile.

We go thru a loop where we get the actual coordinates for a Marker, then define the Marker to have "icon" of type of the file "PictureFullname", which is each time one of our pictures (.JPG's in this example).

We then add to the container the new marker called "photoMarker". This willl add the Marker into the container, but not yet to the map.

To achieve that, we will need to add the container with our Markers into the map, so that will take place at "map.objects.add(container)". This would then make the images visible on the map.

Finally we want to zoom the map to cover all the map Markers, or now photos, by using the "zoomTo" method.

Please change the folder directory in this to the one you want to use: "$array = dirImages('web/uploads')

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>My pictures on Ovi Maps</title>
<script src="http://api.maps.ovi.com/jsl.js" type="text/javascript" charset="utf-8"></script>
<div id="map" style="z-index: -1; left:0px; top:0px; width: 100%; height: 100%; position: absolute;"></div>
<script type="text/javascript">
//Set the authentication token, which is needed by the web-services to authenticate your application.
ovi.mapsapi.util.ApplicationContext.set("authenticationToken", "<Token>");
PictureLatitude = new Array();
PictureLongitude = new Array();
PictureFullname = new Array();
$dir = "web/uploads";
function readGPSinfoEXIF($image_full_name)
$exif=exif_read_data($image_full_name, 0, true);
if(!$exif || $exif['GPS']['GPSLatitude'] == '') {
return false;
} else {
$lat_ref = $exif['GPS']['GPSLatitudeRef'];
$lat = $exif['GPS']['GPSLatitude'];
list($num, $dec) = explode('/', $lat[0]);
$lat_s = $num / $dec;
list($num, $dec) = explode('/', $lat[1]);
$lat_m = $num / $dec;
list($num, $dec) = explode('/', $lat[2]);
$lat_v = $num / $dec;
$lon_ref = $exif['GPS']['GPSLongitudeRef'];
$lon = $exif['GPS']['GPSLongitude'];
list($num, $dec) = explode('/', $lon[0]);
$lon_s = $num / $dec;
list($num, $dec) = explode('/', $lon[1]);
$lon_m = $num / $dec;
list($num, $dec) = explode('/', $lon[2]);
$lon_v = $num / $dec;
$gps_int = array($lat_s + $lat_m / 60.0 + $lat_v / 3600.0, $lon_s
+ $lon_m / 60.0 + $lon_v / 3600.0);
return $gps_int;
function dirImages($dir)
$d = dir($dir);
while (false!== ($file = $d->read()))
$extension = substr($file, strrpos($file, '.'));
if($extension == ".jpg" || $extension == ".jpeg" || $extension == ".gif"
|$extension == ".png")
$images[$file] = $file;
return $images;
$array = dirImages('web/uploads');
$counter = 0;
foreach ($array as $key => $image)
$image_full_name = $dir."/".$key;
$results = readGPSinfoEXIF($image_full_name);
$latitude = $results[0];
$longitude = $results[1];
print "PictureLatitude.push(\"$latitude\" );";
print "PictureLongitude.push(\"$longitude\" );";
print "PictureFullname.push(\"$image_full_name\" );";
var mapContainer = document.getElementById("map");
var mapNS = ovi.mapsapi.map,
//create a map inside the map container:
map = new mapNS.Display(mapContainer, {
components: [ new mapNS.component.Behavior() ]
var container = new ovi.mapsapi.map.Container();
// Define a marker
for ( var i=PictureLatitude.length-1; i>=0; --i ){
if(PictureLatitude[i] != '') //for all items that are not empty...
markerCoords = new ovi.mapsapi.geo.Coordinate(parseFloat(PictureLatitude[i]), parseFloat(PictureLongitude[i]));
//marker = new ovi.mapsapi.map.Marker(markerCoords);
photoMarker = new ovi.mapsapi.map.Marker(markerCoords, {
icon: PictureFullname[i]
map.zoomTo(container.getBoundingBox(), false);

Test example live here

Please note that all the pictures are covered on the current zoomlevel, you would need to zoom further in to see more...


Further reading

For reference the old Ovi Maps API documentation is archived here:

For the latest Nokia Maps API full documentation and API reference here:

You may also access the interactive API explorer

Tested with

Mozilla Firefox 5.0

This page was last modified on 24 April 2013, at 09:54.
181 page views in the last 30 days.