×
Namespaces

Variants
Actions
(Difference between revisions)

Show my location using HTML5 Geolocation API and HERE Maps

From Nokia Developer Wiki
Jump to: navigation, search
jasfox (Talk | contribs)
m (Jasfox - Add link.)
jasfox (Talk | contribs)
m (Jasfox - Updated example to use Nokia Maps API 2.2)
Line 11: Line 11:
  
 
'if (navigator.geolocation)' condition provides whether the browser used by the user supports geolocation or not. If not the appropriate message needs to be shown
 
'if (navigator.geolocation)' condition provides whether the browser used by the user supports geolocation or not. If not the appropriate message needs to be shown
 +
 +
The following code captures the latitude and logitude of the user
 +
<code javascript>
 +
    navigator.geolocation.getCurrentPosition(function(position) {
 +
    var posLatitude = position.coords.latitude;
 +
    var posLongitude = position.coords.longitude;
 +
    }
 +
</code>
 +
 +
== Nokia Maps ==
 +
 +
The following code create  the nokia maps
 +
 +
<code javascript>
 +
    // Create the nokiamap
 +
    nokiaMap = new nokia.maps.map.Display(
 +
    // Map canvas
 +
            document.getElementById("mapCanvas"),
 +
                { components: [
 +
                //components enabling general mouse/touch map interaction (zoom, panning etc.).
 +
                  new nokia.maps.map.component.Behavior(),
 +
                  // show zoom bar
 +
                  new nokia.maps.map.component.ZoomBar(),
 +
                  Provides an expandable overview (minimap) window in the bottom right corner.
 +
                  new nokia.maps.map.component.Overview(),
 +
                  // map types- satellite, terrain etc
 +
                  new nokia.maps.map.component.TypeSelector(),
 +
                  Displays a scale bar at the bottom
 +
                  new nokia.maps.map.component.ScaleBar() ],
 +
                  // the default zoom level is set to 14
 +
                  zoomLevel: 14,
 +
                  // Set the map ceneter to the user's current position
 +
                  center: [posLatitude, posLongitude]
 +
            });       
 +
        });
 +
</code>
 +
== Marker== 
 +
   
 +
  The following code adds a standard marker to the map.
 +
 +
    <code javascript>
 +
var marker = new nokia.maps.map.StandardMarker(
 +
                  [posLatitude, posLongitude], {
 +
                  text: "Me",
 +
                });
 +
      nokiaMap.objects.add(marker);
 +
</code>
 +
 +
{{Abstract|This article explains how to capture a user location using HTML Geolocation API and display the user's location on nokia map }}
 +
 +
== Introduction ==
 +
 +
HTML5 geolocation api provides support to capture ones location by capturing the latitude and longitude where the user is based. So by using a combination of geolocation api and nokia maps it is possible to display one's location on a web page. Please note that the accuracy of the location depends on the correctnes of the latitude and longitude that is captured.
 +
 +
==Geolocation ==
 +
 +
The geolocation api comes along with HTML 5 and hence it is supported in almost all the latest browsers - Firefox, Chrome,Internet explorer, Safari,Opera etc. Inorder to retrieve geolocation, the user needs to explicitly give permission to share his/her location.
 +
 +
The "{{Icode|if (navigator.geolocation)}}" condition provides whether the browser used by the user supports geolocation or not. If not the appropriate message needs to be shown
  
 
The following code captures the latitude and logitude of the user  
 
The following code captures the latitude and logitude of the user  
Line 64: Line 123:
 
<html>
 
<html>
 
<head>
 
<head>
<script src="http://api.maps.nokia.com/2.0.0/jsl.js" type="text/javascript" charset="utf-8"></script>
+
<script type="text/javascript" charset="UTF-8" src="http://api.maps.nokia.com/2.2.0/jsl.js"></script>
<script>
+
<script type="text/javascript">
 +
//<![CDATA[                   
 +
/////////////////////////////////////////////////////////////////////////////////////
 +
// Don't forget to set your API credentials
 +
//
 +
// Replace with your appId and token which you can obtain when you
 +
// register on http://api.developer.nokia.com/
 +
//
 +
nokia.Settings.set( "appId", "YOUR APP ID GOES HERE");
 +
nokia.Settings.set( "authenticationToken", "YOUR AUTHENTICATION TOKEN GOES HERE");
 +
//
 +
//////////////////////////////
 +
/*]]>*/       
 +
</script>
 +
<script type="text/javascript">
 
if (navigator.geolocation) {
 
if (navigator.geolocation) {
 
     var nokiaMap;
 
     var nokiaMap;
Line 113: Line 186:
 
|sourcecode= <!-- Link to example source code e.g. [[Media:The Code Example ZIP.zip]] -->
 
|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]]) -->
 
|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'') -->
+
|devices= Internet Explorer, Firefox, Google Chrome, Safari
 
|sdk= <!-- SDK(s) built and tested against (e.g. [http://linktosdkdownload/ Nokia Qt SDK 1.1]) -->
 
|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 -->
+
|platform= Web
 +
|dependencies=Nokia Maps 2.2.0
 
|devicecompatability= <!-- Compatible devices e.g.: All* (must have internal GPS) -->
 
|devicecompatability= <!-- Compatible devices e.g.: All* (must have internal GPS) -->
 
|signing=<!-- Signing requirements - empty or one of: Self-Signed, DevCert, Manufacturer -->
 
|signing=<!-- Signing requirements - empty or one of: Self-Signed, DevCert, Manufacturer -->
 
|capabilities=<!-- Capabilities required by the article/code example (e.g. Location, NetworkServices. -->
 
|capabilities=<!-- Capabilities required by the article/code example (e.g. Location, NetworkServices. -->
|keywords= <!-- APIs, classes and methods (e.g. QSystemScreenSaver, QList, CBase -->
+
|keywords= Geocoding, Positioning
 
|id= <!-- Article Id (Knowledge base articles only) -->
 
|id= <!-- Article Id (Knowledge base articles only) -->
 
|language=<!-- Language category code for non-English topics - e.g. Lang-Chinese -->
 
|language=<!-- Language category code for non-English topics - e.g. Lang-Chinese -->
Line 131: Line 205:
 
{{SeeAlso|
 
{{SeeAlso|
 
*  [http://api.maps.nokia.com/ Nokia Maps API]  
 
*  [http://api.maps.nokia.com/ Nokia Maps API]  
* [http://api.maps.nokia.com/2.1.1/playground/?example&#61;positioning Geolocation Example]
+
* [http://api.maps.nokia.com/en/examples/maps/services/positioning.html Geolocation Example]
 
  }}
 
  }}

Revision as of 09:33, 18 April 2012

This article explains how to capture a user location using HTML Geolocation API and display the user's location on nokia map

Contents

Introduction

HTML5 geolocation api provides support to capture ones location by capturing the latitude and longitude where the user is based. So by using a combination of geolocation api and nokia maps it is possible to display one's location on a web page. Please note that the accuracy of the location depends on the correctnes of the latitude and longitude that is captured.

Geolocation

The geolocation api comes along with HTML 5 and hence it is supported in almost all the latest browsers - Firefox, Chrome,Internet explorer, Safari,Opera etc. Inorder to retrieve geolocation, the user needs to explicitly give permission to share his/her location.

'if (navigator.geolocation)' condition provides whether the browser used by the user supports geolocation or not. If not the appropriate message needs to be shown

The following code captures the latitude and logitude of the user

    navigator.geolocation.getCurrentPosition(function(position) {
var posLatitude = position.coords.latitude;
var posLongitude = position.coords.longitude;
}

Nokia Maps

The following code create  the nokia maps

     // Create the nokiamap 
nokiaMap = new nokia.maps.map.Display(
// Map canvas
document.getElementById("mapCanvas"),
{ components: [
//components enabling general mouse/touch map interaction (zoom, panning etc.).
new nokia.maps.map.component.Behavior(),
// show zoom bar
new nokia.maps.map.component.ZoomBar(),
Provides an expandable overview (minimap) window in the bottom right corner.
new nokia.maps.map.component.Overview(),
// map types- satellite, terrain etc
new nokia.maps.map.component.TypeSelector(),
Displays a scale bar at the bottom
new nokia.maps.map.component.ScaleBar() ],
// the default zoom level is set to 14
zoomLevel: 14,
// Set the map ceneter to the user's current position
center: [posLatitude, posLongitude]
});
});

Marker

 The following code adds a standard marker to the map.
 var marker = new nokia.maps.map.StandardMarker(
[posLatitude, posLongitude], {
text: "Me",
});
nokiaMap.objects.add(marker);

This article explains how to capture a user location using HTML Geolocation API and display the user's location on nokia map

Introduction

HTML5 geolocation api provides support to capture ones location by capturing the latitude and longitude where the user is based. So by using a combination of geolocation api and nokia maps it is possible to display one's location on a web page. Please note that the accuracy of the location depends on the correctnes of the latitude and longitude that is captured.

Geolocation

The geolocation api comes along with HTML 5 and hence it is supported in almost all the latest browsers - Firefox, Chrome,Internet explorer, Safari,Opera etc. Inorder to retrieve geolocation, the user needs to explicitly give permission to share his/her location.

The "if (navigator.geolocation)" condition provides whether the browser used by the user supports geolocation or not. If not the appropriate message needs to be shown

The following code captures the latitude and logitude of the user

    navigator.geolocation.getCurrentPosition(function(position) {
var posLatitude = position.coords.latitude;
var posLongitude = position.coords.longitude;
}

Nokia Maps

The following code create  the nokia maps

     // Create the nokiamap 
nokiaMap = new nokia.maps.map.Display(
// Map canvas
document.getElementById("mapCanvas"),
{ components: [
//components enabling general mouse/touch map interaction (zoom, panning etc.).
new nokia.maps.map.component.Behavior(),
// show zoom bar
new nokia.maps.map.component.ZoomBar(),
Provides an expandable overview (minimap) window in the bottom right corner.
new nokia.maps.map.component.Overview(),
// map types- satellite, terrain etc
new nokia.maps.map.component.TypeSelector(),
Displays a scale bar at the bottom
new nokia.maps.map.component.ScaleBar() ],
// the default zoom level is set to 14
zoomLevel: 14,
// Set the map ceneter to the user's current position
center: [posLatitude, posLongitude]
});
});

Marker

 The following code adds a standard marker to the map.
 var marker = new nokia.maps.map.StandardMarker(
[posLatitude, posLongitude], {
text: "Me",
});
nokiaMap.objects.add(marker);

Complete Source Code

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" charset="UTF-8" src="http://api.maps.nokia.com/2.2.0/jsl.js"></script>
<script type="text/javascript">
//<![CDATA[
/////////////////////////////////////////////////////////////////////////////////////
// Don't forget to set your API credentials
//
// Replace with your appId and token which you can obtain when you
// register on http://api.developer.nokia.com/
//
nokia.Settings.set( "appId", "YOUR APP ID GOES HERE");
nokia.Settings.set( "authenticationToken", "YOUR AUTHENTICATION TOKEN GOES HERE");
//
//////////////////////////////
/*]]>*/
</script>
<script type="text/javascript">
if (navigator.geolocation) {
var nokiaMap;
var marker;
navigator.geolocation.getCurrentPosition(function(position) {
var posLatitude = position.coords.latitude;
var posLongitude = position.coords.longitude;
nokiaMap = new nokia.maps.map.Display(
document.getElementById("mapCanvas"),
{ components: [
new nokia.maps.map.component.Behavior(),
new nokia.maps.map.component.Overview(),
new nokia.maps.map.component.ZoomBar(),
new nokia.maps.map.component.TypeSelector(),
new nokia.maps.map.component.ScaleBar() ],
zoomLevel: 11,
center: [posLatitude, posLongitude]
});
 
var marker = new nokia.maps.map.StandardMarker(
[posLatitude, posLongitude], {
text: "Me",
});
nokiaMap.objects.add(marker);
 
});
} else {
alert("Geolocation API is not supported in your browser.Please upgrade your browser");
}
</script>
 
<style type="text/css">
#mapCanvas {
height: 600px;
width: 950px;
border:10px solid #000000;
}
</style>
</head>
<body>
<div id="mapCanvas"></div>
</body>
</html>
Article Metadata
Tested with
Devices(s): Internet Explorer, Firefox, Google Chrome, Safari
Compatibility
Platform(s): Web
Dependencies: Nokia Maps 2.2.0
Article
Keywords: Geocoding, Positioning
Created: wang_shui (27 Dec 2011)
Last edited: jasfox (18 Apr 2012)
139 page views in the last 30 days.
×