×
Namespaces

Variants
Actions
(Difference between revisions)

Ovi Maps API - How to embed an Ovi Maps on your webpage and show a map marker for a stored GPS location

From Nokia Developer Wiki
Jump to: navigation, search
Maveric (Talk | contribs)
m
hamishwillee (Talk | contribs)
m (Hamishwillee - Bot update - Fix metadata and links)
 
(9 intermediate revisions by 3 users not shown)
Line 1: Line 1:
[[Category:Ovi]][[Category:Web Technology]]
+
[[Category:HERE Maps]][[Category:JavaScript]]
{{Under construction}}
+
{{ArticleMetaData <!-- v1.2 -->
 +
|sourcecode= <!-- Link to example source code e.g. [[Media:The Code Example ZIP.zip]] -->
 +
|installfile= <!-- Link to installation file (e.g. [[Media:The Installation File.sis]]) -->
 +
|devices= <!-- Devices tested against - e.g. ''devices=Nokia 6131 NFC, Nokia C7-00'') -->
 +
|sdk= <!-- SDK(s) built and tested against (e.g. [http://linktosdkdownload/ Nokia Qt SDK 1.1]) -->
 +
|platform= <!-- Compatible platforms - e.g. Symbian^1 and later, Qt 4.6 and later -->
 +
|devicecompatability= <!-- Compatible devices e.g.: All* (must have internal GPS) -->
 +
|dependencies= <!-- Any other/external dependencies e.g.: Google Maps Api v1.0 -->
 +
|signing= <!-- Signing requirements - empty or one of: Self-Signed, DevCert, Manufacturer -->
 +
|capabilities= <!-- Capabilities required by the article/code example (e.g. Location, NetworkServices. -->
 +
|keywords= <!-- APIs, classes and methods (e.g. QSystemScreenSaver, QList, CBase -->
 +
|language= <!-- Language category code for non-English topics - e.g. Lang-Chinese -->
 +
|translated-by= <!-- [[User:XXXX]] -->
 +
|translated-from-title= <!-- Title only -->
 +
|translated-from-id= <!-- Id of translated revision -->
 +
|review-by= <!-- After re-review: [[User:username]] -->
 +
|review-timestamp= <!-- After re-review: YYYYMMDD -->
 +
|update-by= <!-- After significant update: [[User:username]]-->
 +
|update-timestamp= <!-- After significant update: YYYYMMDD -->
 +
|creationdate= 20101231
 +
|author= [[User:Maveric]]
 +
}}
 +
 
 +
 
 +
{{UnderConstruction|timestamp=20110101}}
  
 
==Introduction==
 
==Introduction==
  
This article will explain how to create a web page with a basic Ovi Maps embedded and further, how to put a map marker on the geocoordinates (latitude and longitude) saved previously to a file in wiki article no (_link referring to the wiki article_). The coordinates were sent from a mobile device running a web runtime widget. The widget is inlcuded and downloadable from within the same wiki article.
+
This article will explain how to create a web page with a basic Ovi Maps embedded and further, how to put a map marker on the geocoordinates (latitude and longitude) saved previously to a file in Wiki article no (_link referring to the Wiki article_). The coordinates were sent from a mobile device running a web runtime widget. The widget is included and downloadable from within the same Wiki article.
  
 
==Prerequisites==
 
==Prerequisites==
  
A mobile device with Web-Runtime support
+
* A mobile device with Web-Runtime support
A web server with a valid location data file available and readable
+
* A web server with a valid location data file available and readable
Java Platform Standard ed. (5.x)
+
* Java Platform Standard ed. (5.x)
  
 
==Embedding Ovi Maps in your web page==
 
==Embedding Ovi Maps in your web page==
  
<code java>
+
<code javascript>
 
HTML <HEAD>
 
HTML <HEAD>
  
Line 25: Line 49:
 
Add a div for the map:
 
Add a div for the map:
  
<code java>
+
<code javascript>
 
<body>
 
<body>
 
<p><center><div id="map" style="height: 360px; width: 640px;"></div></center></p>
 
<p><center><div id="map" style="height: 360px; width: 640px;"></div></center></p>
Line 33: Line 57:
 
Start the script and first add the map instance.
 
Start the script and first add the map instance.
  
<code java>
+
<code javascript>
  
 
<script type="text/javascript">
 
<script type="text/javascript">
Line 56: Line 80:
 
The function showuseronmap()
 
The function showuseronmap()
  
<code java>
+
<code javascript>
 
+
 
function showuseronmap()
 
function showuseronmap()
 
{
 
{
Line 80: Line 103:
 
The java.net.URL class represents a URL. There are constructors to create new URLs and methods to parse the different parts of a URL. However the heart of the class are the methods that allow you to get an InputStream from a URL so you can read data from a server. We are utilizing this by providing the class a reference to the datafile variable to define the target for file reading.
 
The java.net.URL class represents a URL. There are constructors to create new URLs and methods to parse the different parts of a URL. However the heart of the class are the methods that allow you to get an InputStream from a URL so you can read data from a server. We are utilizing this by providing the class a reference to the datafile variable to define the target for file reading.
  
<code java>
+
<code javascript>
 
+
 
   while ((aLine = input.readLine()) != null) {
 
   while ((aLine = input.readLine()) != null) {
 
       data [i++] = aLine;
 
       data [i++] = aLine;
 
   }
 
   }
 
 
</code>
 
</code>
  
This file loop reads the input file line by line until there are no more lines to be read.
+
This file loop reads the input file line by line until there are no more lines to be read.
 
+
  
 
<code java>
 
<code java>
 
 
   for (var j = 0; j < data.length ; j++)
 
   for (var j = 0; j < data.length ; j++)
 
       temp += data[j] + "<br>";
 
       temp += data[j] + "<br>";
Line 99: Line 118:
 
</code>
 
</code>
  
The following for-loop will iterate thru the lines read. It will split each line in two parts,  separated a blank space (‘ ‘). It is therefore important that the input file has the following format and content e.g.:
+
The following for-loop will iterate through the lines read. It will split each line in two parts,  separated a blank space (‘ ‘). It is therefore important that the input file has the following format and content e.g.:
  
 
32.10000<SPACE>64.000001
 
32.10000<SPACE>64.000001
Line 126: Line 145:
 
This part of the code defines a map marker for the Ovi Maps and utilizes the latitude and longitude values we had fetched previously. The values from the file are in string format. Therefore we need to convert them to numeric, to be used as the MyMarker parameters respectively. This is achieved simply by calling the putMeOnTheMap() function using the parseFloat() function. The only function for it is to parses a string and return a floating point number. These values are then passed on to the putMeOnTheMap() function.
 
This part of the code defines a map marker for the Ovi Maps and utilizes the latitude and longitude values we had fetched previously. The values from the file are in string format. Therefore we need to convert them to numeric, to be used as the MyMarker parameters respectively. This is achieved simply by calling the putMeOnTheMap() function using the parseFloat() function. The only function for it is to parses a string and return a floating point number. These values are then passed on to the putMeOnTheMap() function.
  
<code java>
+
<code javascript>
  
 
<TBD>
 
<TBD>

Latest revision as of 08:30, 24 April 2013

Article Metadata
Article
Created: Maveric (31 Dec 2010)
Last edited: hamishwillee (24 Apr 2013)


Underconstruction.pngUnder Construction: (20110101) This article is under construction and it may have outstanding issues. If you have any comments please use the comments tab.

[edit] Introduction

This article will explain how to create a web page with a basic Ovi Maps embedded and further, how to put a map marker on the geocoordinates (latitude and longitude) saved previously to a file in Wiki article no (_link referring to the Wiki article_). The coordinates were sent from a mobile device running a web runtime widget. The widget is included and downloadable from within the same Wiki article.

[edit] Prerequisites

  • A mobile device with Web-Runtime support
  • A web server with a valid location data file available and readable
  • Java Platform Standard ed. (5.x)

[edit] Embedding Ovi Maps in your web page

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

Add a div for the map:

<body>
<p><center><div id="map" style="height: 360px; width: 640px;"></div></center></p>

Start the script and first add the map instance.

<script type="text/javascript">
 
 
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: 3,
eventListener: myListener,
center: [52.51, 13.4] // default map center point
 
});


The function showuseronmap()

function showuseronmap()
{
var my_longitude = 0;
var my_latitude = 0;
var temp = "";
var data = new Array();
var i = 0;
var datafile = window.location.href.substring(0,
window.location.href.lastIndexOf("/")+1)+"inc/testFile.txt";
 
var url = new java.net.URL(datafile);
var connect = url.openConnection();
 
var input = new java.io.BufferedReader(new java.io.InputStreamReader(connect.getInputStream()));
var aLine = "";

In the beginning of the script we will set several variables to hold data. The datafile variable points to the file on server in which the location data (latitude and longitude) values are to be read from.

The java.net.URL class represents a URL. There are constructors to create new URLs and methods to parse the different parts of a URL. However the heart of the class are the methods that allow you to get an InputStream from a URL so you can read data from a server. We are utilizing this by providing the class a reference to the datafile variable to define the target for file reading.

  while ((aLine = input.readLine()) != null) {
data [i++] = aLine;
}

This file loop reads the input file line by line until there are no more lines to be read.

  for (var j = 0; j < data.length ; j++)
temp += data[j] + "<br>";
tilap = data[0].split(' ');

The following for-loop will iterate through the lines read. It will split each line in two parts, separated a blank space (‘ ‘). It is therefore important that the input file has the following format and content e.g.:

32.10000<SPACE>64.000001

The first number, value of geolocation latitude, is separated from the longitude by a blank space.

Basically, there can be many location lines one file, but this example only supports handling of one location line. This would be easily extended to multiple locations to output multiple markers on the map, if needed.

// Show a map marker on mylocation
 
putMeOnTheMap(parseFloat(tilap[0]),parseFloat(tilap[1]));
}
function putMeOnTheMap(p_latitude, p_longitude)
{
var MyMarker = [{type: "marker",
longitude: p_longitude,
latitude: p_latitude,
clickable: true,
infoTitle: "My last known location",
infoDescription: p_longitude +","+p_latitude
}];

This part of the code defines a map marker for the Ovi Maps and utilizes the latitude and longitude values we had fetched previously. The values from the file are in string format. Therefore we need to convert them to numeric, to be used as the MyMarker parameters respectively. This is achieved simply by calling the putMeOnTheMap() function using the parseFloat() function. The only function for it is to parses a string and return a floating point number. These values are then passed on to the putMeOnTheMap() function.

<TBD>
 
}
</script>
This page was last modified on 24 April 2013, at 08:30.
138 page views in the last 30 days.