×
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
Oskar Bukolt (Talk | contribs)
m (Oskar Bukolt - Update keywords + minor text alteration)
jasfox (Talk | contribs)
m (Jasfox - version)
Line 7: Line 7:
 
|platform= Web  
 
|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.2.1
+
|dependencies=Nokia Maps 2.2.3
 
|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 24: Line 24:
 
}}
 
}}
 
{{SeeAlso|
 
{{SeeAlso|
*   [http://api.maps.nokia.com/en/maps/intro.html Nokia Maps API]  
+
* [http://developer.here.net/javascript_api Nokia Maps API]
* [http://api.maps.nokia.com/en/playground/examples/maps/events/coordinateonclick.html Coordinates on click]
+
* [http://developer.here.net/apiexplorer/examples/api-for-js/events/map-coordinate-on-click.htmll Coordinates on click]
 
  }}
 
  }}
  
Line 38: Line 38:
 
       <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 
       <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 
       <script type="text/javascript"
 
       <script type="text/javascript"
             src="http://api.maps.nokia.com/2.2.1/jsl.js" charset="utf-8">
+
             src="http://api.maps.nokia.com/2.2.3/jsl.js" charset="utf-8">
 
         </script>
 
         </script>
 
     </head>
 
     </head>

Revision as of 16:12, 3 January 2013

Article Metadata
Tested with
Devices(s): Internet Explorer, Google Chrome, Firefox, Opera
Compatibility
Platform(s): Web
Dependencies: Nokia Maps 2.2.3
Article
Keywords: NokiaMaps, JavaScript, geocoordinates
Created: Maveric (31 Dec 2010)
Last edited: jasfox (03 Jan 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.

<!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.3/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

275 page views in the last 30 days.
×