×
Namespaces

Variants
Actions
(Difference between revisions)

HERE Maps API - get the geocoordinates when user clicks mouse over the map

From Nokia Developer Wiki
Jump to: navigation, search
avnee.nathani (Talk | contribs)
(Avnee.nathani - Updated article for Nokia Maps Javascript API v2.0. (Released in Dec 2011))
jasfox (Talk | contribs)
m (Jasfox - update to 2.2.4)
(11 intermediate revisions by 3 users not shown)
Line 1: Line 1:
[[Category:Web]][[Category:Nokia Maps]]
+
[[Category:Nokia Maps]][[Category:JavaScript]][[Category:Code Snippet]]
 
{{ArticleMetaData
 
{{ArticleMetaData
 
|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, Google Chrome, Firefox, Opera
 
|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
 
|devicecompatability= <!-- Compatible devices e.g.: All* (must have internal GPS) -->
 
|devicecompatability= <!-- Compatible devices e.g.: All* (must have internal GPS) -->
|dependencies=Nokia Maps 2.1.0
+
|dependencies=Nokia Maps 2.2.4
 
|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= NokiaMaps, JavaScript, geocoordinates
 
|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 23: Line 23:
 
|author=[[User:Maveric]]
 
|author=[[User:Maveric]]
 
}}
 
}}
 +
{{SeeAlso|
 +
* [http://developer.here.net/javascript_api Nokia Maps API]
 +
* [http://developer.here.net/apiexplorer/examples/api-for-js/events/map-coordinate-on-click.html Coordinates on click]
 +
}}
  
{{Abstract|This article shows how to get the geolocation behind user's mouse click over the map component.}}
+
{{Abstract|This article shows how to get the geolocation of the user's mouse click.}}
 
+
The code example calls the getMouseXY function when the user clicks on the map. Note the different behaviour in case of Internet Explorer browser and other browser.
+
  
 +
The code example sets up an Event Listener on the {{Icode|click}} event of the Map Display. The x and y pixel values are extracted from {{Icode|evt.displayX}} and {{Icode|evt.displayY}}  and converted to {{Icode|geo.Coordinates}}. Remember to add in your own [[How to Obtain Your Own Nokia appID and Token| AppId and Token]] to get the example to work.
 
<code javascript>
 
<code javascript>
 +
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 +
<html xmlns="http://www.w3.org/1999/xhtml">
 +
    <head>
 +
      <title>Get Geocoordinates on Click</title>
 +
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 +
      <script type="text/javascript"
 +
            src="http://api.maps.nokia.com/2.2.4/jsl.js" charset="utf-8">
 +
        </script>
 +
    </head>
 +
    <body>
  
//Define the map component e.g. in style of this
+
        <div id="mapContainer" style="z-index: -1; left:0px; top:0px; width: 100%; height: 80%; position: absolute;"></div>
 +
        <script type="text/javascript">
 +
/////////////////////////////////////////////////////////////////////////////////////
 +
// Don't forget to set your API credentials
 
//
 
//
// HTML file
+
// 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");  
<script type="text/javascript"src="http://api.maps.nokia.com/2.0.0/jsl.js" charset="utf-8"></script>
+
nokia.Settings.set( "authenticationToken", "YOUR AUTHENTICATION TOKEN GOES HERE");
</head>
+
<body onload="init()">
+
<center>
+
<div id="map" style="width:640px; height:360px;"></div>
+
...
+
//
+
// JavaScript file
+
//
+
...
+
function init(){
+
...
+
// Prepare to record all mouse movements
+
IE = document.all?true:false;
+
if (!IE) document.captureEvents(Event.MOUSEMOVE)
+
document.onmousemove = getMouseXY;
+
// with the above
+
...
+
+
map = new nokia.maps.map.Display(document.getElementById("map"),  
+
{
+
  components: [ new nokia.maps.map.component.Behavior(),
+
                new nokia.maps.map.component.ZoomBar(),
+
                new nokia.maps.map.component.Overview(),                           
+
                new nokia.maps.map.component.TypeSelector(),   
+
                new nokia.maps.map.component.ScaleBar() ],
+
  zoomLevel: 3,
+
                                  eventListener: myListener,
+
  center: [52.51, 13.4]  // default map center point (not the location retrieved)
+
+
});
+
...
+
+
// Grab the user mouse x and y coordinates
+
+
...
+
function getMouseXY(e) {
+
if (IE) { // grab the x-y pos.s if browser is IE
+
tempX = event.clientX + document.body.scrollLeft;
+
tempY = event.clientY + document.body.scrollTop;
+
}
+
else {  // grab the x-y pos.s if browser is NS
+
tempX = e.pageX;
+
tempY = e.pageY;
+
+
if (tempX < 0){tempX = 0;}
+
if (tempY < 0){tempY = 0;} 
+
return true;
+
}
+
+
...
+
+
// Alert the user what is the geolocation of that screen coordinate
+
+
alert(map.pixelToGeo(tempX, tempY));
+
  
...
+
//
 +
/////////////////////////////////////////////////////////////////////////////////////
 +
 
 +
// Get the DOM node to which we will append the map
 +
var mapContainer = document.getElementById("mapContainer");
 +
 
 +
 
 +
// Create a map inside the map container DOM node
 +
var map = new nokia.maps.map.Display(mapContainer, {
 +
// Initial center and zoom level of the map
 +
center: [52.51, 13.4],
 +
zoomLevel: 10,
 +
components: [
 +
new nokia.maps.map.component.ZoomBar(),
 +
new nokia.maps.map.component.Behavior(),
 +
new nokia.maps.map.component.TypeSelector()
 +
]
 +
});
 +
 
 +
 
 +
/* Attach an event listener to map display
 +
* push info bubble with coordinate information to map
 +
*/
 +
map.addListener("click", function (evt) {
 +
var coord = map.pixelToGeo(evt.displayX, evt.displayY);
 +
 
 +
alert("Clicked at " + coord);
 +
});
 +
 +
</script>
 +
</body>
 +
</html>
 
   
 
   
 
 
</code>
 
</code>
  

Revision as of 14:38, 14 March 2013

Article Metadata
Tested with
Devices(s): Internet Explorer, Google Chrome, Firefox, Opera
Compatibility
Platform(s): Web
Dependencies: Nokia Maps 2.2.4
Article
Keywords: NokiaMaps, JavaScript, geocoordinates
Created: Maveric (31 Dec 2010)
Last edited: jasfox (14 Mar 2013)

This article shows how to get the geolocation of the user's mouse click.

The code example sets up an Event Listener on the click event of the Map Display. The x and y pixel values are extracted from evt.displayX and evt.displayY and converted to geo.Coordinates. Remember to add in your own AppId and Token to get the example to work.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Get Geocoordinates on Click</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript"
src="http://api.maps.nokia.com/2.2.4/jsl.js" charset="utf-8">
</script>
</head>
<body>
 
<div id="mapContainer" style="z-index: -1; left:0px; top:0px; width: 100%; height: 80%; position: absolute;"></div>
<script type="text/javascript">
/////////////////////////////////////////////////////////////////////////////////////
// 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");
 
//
/////////////////////////////////////////////////////////////////////////////////////
 
// Get the DOM node to which we will append the map
var mapContainer = document.getElementById("mapContainer");
 
 
// Create a map inside the map container DOM node
var map = new nokia.maps.map.Display(mapContainer, {
// Initial center and zoom level of the map
center: [52.51, 13.4],
zoomLevel: 10,
components: [
new nokia.maps.map.component.ZoomBar(),
new nokia.maps.map.component.Behavior(),
new nokia.maps.map.component.TypeSelector()
]
});
 
 
/* Attach an event listener to map display
* push info bubble with coordinate information to map
*/

map.addListener("click", function (evt) {
var coord = map.pixelToGeo(evt.displayX, evt.displayY);
 
alert("Clicked at " + coord);
});
 
</script>
</body>
</html>


Example alert window

Geocoordinatesmouseclick.png

132 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×