HERE Maps API - get the geocoordinates when user clicks mouse over the map
m (Jasfox - Add link.) |
m (Jasfox - Updated example to use Nokia Maps API 2.2) |
||
| Line 30: | Line 30: | ||
{{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 behind user's mouse click over the map component.}} | ||
| − | The code example | + | 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 Geocoordinates. |
| − | + | ||
<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.0/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> | ||
| − | |||
</code> | </code> | ||
Revision as of 16:54, 13 April 2012
See Also
This article shows how to get the geolocation behind user's mouse click over the map component.
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 Geocoordinates.
<!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.0/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
