×
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
hamishwillee (Talk | contribs)
m (Hamishwillee - Bot addition of Template:ArticleMetaData)
avnee.nathani (Talk | contribs)
(Avnee.nathani - Updated article for Nokia Maps Javascript API v2.0. (Released in Dec 2011))
Line 1: Line 1:
 +
[[Category:Web]][[Category:Nokia Maps]]
 
{{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]] -->
Line 6: Line 7:
 
|platform= <!-- Compatible platforms - e.g. Symbian^1 and later, Qt 4.6 and later -->
 
|platform= <!-- Compatible platforms - e.g. Symbian^1 and later, Qt 4.6 and later -->
 
|devicecompatability= <!-- Compatible devices e.g.: All* (must have internal GPS) -->
 
|devicecompatability= <!-- Compatible devices e.g.: All* (must have internal GPS) -->
|dependencies= <!-- Any other/external dependencies e.g.: Google Maps Api v1.0 -->
+
|dependencies=Nokia Maps 2.1.0
 
|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. -->
Line 23: Line 24:
 
}}
 
}}
  
[[Category:Web]][[Category:Nokia Maps]]
+
{{Abstract|This article shows how to get the geolocation behind user's mouse click over the map component.}}
__NOTOC__
+
 
+
==Overview==
+
+
This code shows how to get the geolocation behind user's mouse click over the map component.
+
  
 +
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.
  
<code java>
+
<code javascript>
  
 
//Define the map component e.g. in style of this
 
//Define the map component e.g. in style of this
Line 38: Line 35:
 
//
 
//
 
...
 
...
<script src="http://api.maps.ovi.com/jsl.js" type="text/javascript" charset="utf-8"></script>
+
<script type="text/javascript"src="http://api.maps.nokia.com/2.0.0/jsl.js" charset="utf-8"></script>
 
</head>
 
</head>
 
<body onload="init()">
 
<body onload="init()">
Line 56: Line 53:
 
// with the above
 
// with the above
 
...
 
...
 
+
map = new ovi.mapsapi.map.Display(document.getElementById("map"),  
+
map = new nokia.maps.map.Display(document.getElementById("map"),  
 
{
 
{
  components: [ new ovi.mapsapi.map.component.Behavior(),
+
  components: [ new nokia.maps.map.component.Behavior(),
                new ovi.mapsapi.map.component.ZoomBar(),
+
                new nokia.maps.map.component.ZoomBar(),
                new ovi.mapsapi.map.component.Overview(),                             
+
                new nokia.maps.map.component.Overview(),                             
                new ovi.mapsapi.map.component.TypeSelector(),     
+
                new nokia.maps.map.component.TypeSelector(),     
                new ovi.mapsapi.map.component.ScaleBar() ],
+
                new nokia.maps.map.component.ScaleBar() ],
 
  zoomLevel: 3,  
 
  zoomLevel: 3,  
 
                                   eventListener: myListener,
 
                                   eventListener: myListener,
Line 70: Line 67:
 
});
 
});
 
...
 
...
 
+
 
// Grab the user mouse x and y coordinates
 
// Grab the user mouse x and y coordinates
 
+
 
...
 
...
 
function getMouseXY(e) {
 
function getMouseXY(e) {
Line 87: Line 84:
 
return true;
 
return true;
 
}
 
}
 
+
 
...
 
...
 
+
 
// Alert the user what is the geolocation of that screen coordinate
 
// Alert the user what is the geolocation of that screen coordinate
 
+
 
alert(map.pixelToGeo(tempX, tempY));   
 
alert(map.pixelToGeo(tempX, tempY));   
  
 
...
 
...
 +
 +
 
</code>
 
</code>
  

Revision as of 07:41, 2 January 2012

Article Metadata
Dependencies: Nokia Maps 2.1.0
Article
Created: Maveric (31 Dec 2010)
Last edited: avnee.nathani (02 Jan 2012)

This article shows how to get the geolocation behind user's mouse click over the map component.

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.

//Define the map component e.g. in style of this
//
// HTML file
//
...
<script type="text/javascript"src="http://api.maps.nokia.com/2.0.0/jsl.js" charset="utf-8"></script>
</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));
 
...


Example alert window

Geocoordinatesmouseclick.png

161 page views in the last 30 days.
×