×
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
jasfox (Talk | contribs)
m (Jasfox - update to 2.2.4)
jasfox (Talk | contribs)
m (Jasfox - Update links)
 
(10 intermediate revisions by 2 users not shown)
Line 1: Line 1:
[[Category:Nokia Maps]][[Category:JavaScript]][[Category:Code Snippet]]
+
[[Category:HERE Maps]][[Category:JavaScript]][[Category:Code Examples]]
{{ArticleMetaData
+
{{ArticleMetaData <!-- v1.2 -->
|sourcecode= <!-- Link to example source code e.g. [[Media:The Code Example ZIP.zip]] -->
+
|sourcecode=  [https://github.com/heremaps/examples/blob/master/maps_api_for_javascript/simple-examples/geocoordinate-on-click.html geocoordinate-on-click.html]
 
|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= Internet Explorer, Google Chrome, Firefox, Opera
 
|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= 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.4
+
|dependencies= HERE Maps 2.5.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. -->
 
|keywords= NokiaMaps, JavaScript, geocoordinates
 
|keywords= NokiaMaps, JavaScript, geocoordinates
|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 -->
 
|translated-by= <!-- [[User:XXXX]] -->
 
|translated-by= <!-- [[User:XXXX]] -->
|translated-from-title= <!-- Title only -->  
+
|translated-from-title= <!-- Title only -->
 
|translated-from-id= <!-- Id of translated revision -->
 
|translated-from-id= <!-- Id of translated revision -->
|review-by=<!-- After re-review: [[User:username]] -->
+
|review-by= <!-- After re-review: [[User:username]] -->
 
|review-timestamp= <!-- After re-review: YYYYMMDD -->
 
|review-timestamp= <!-- After re-review: YYYYMMDD -->
 
|update-by= <!-- After significant update: [[User:username]]-->
 
|update-by= <!-- After significant update: [[User:username]]-->
 
|update-timestamp= <!-- After significant update: YYYYMMDD -->
 
|update-timestamp= <!-- After significant update: YYYYMMDD -->
|creationdate=20101231
+
|creationdate= 20101231
|author=[[User:Maveric]]
+
|author= [[User:Maveric]]
 
}}
 
}}
 
{{SeeAlso|
 
{{SeeAlso|
* [http://developer.here.net/javascript_api Nokia Maps API]
+
* [http://developer.here.com/javascript_api HERE Maps API]
* [http://developer.here.net/apiexplorer/examples/api-for-js/events/map-coordinate-on-click.html Coordinates on click]
+
* [http://developer.here.com/apiexplorer/examples/api-for-js/events/map-coordinate-on-click.html Coordinates on click]
 
  }}
 
  }}
  
Line 32: Line 31:
 
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.
 
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">
+
function setUpClickListener(map){
<html xmlns="http://www.w3.org/1999/xhtml">
+
/* Attach an event listener to map display
    <head>
+
* obtain the coordinates an display in an alert box.
      <title>Get Geocoordinates on Click</title>
+
*/
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+
map.addListener("click", function (evt) {
      <script type="text/javascript"
+
var coord = map.pixelToGeo(evt.displayX, evt.displayY);
            src="http://api.maps.nokia.com/2.2.4/jsl.js" charset="utf-8">
+
alert("Clicked at " + coord);
        </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>
  
Line 92: Line 45:
 
==Example alert window==
 
==Example alert window==
 
[[File:geocoordinatesmouseclick.png]]
 
[[File:geocoordinatesmouseclick.png]]
 +
 +
A fully working example can be found at:
 +
 +
http://rawgithub.com/heremaps/examples/master/maps_api_for_javascript/simple-examples/geocoordinate-on-click.html

Latest revision as of 14:56, 28 November 2013

Article Metadata
Code ExampleTested with
Devices(s): Internet Explorer, Google Chrome, Firefox, Opera
Compatibility
Platform(s): Web
Dependencies: HERE Maps 2.5.3
Article
Keywords: NokiaMaps, JavaScript, geocoordinates
Created: Maveric (31 Dec 2010)
Last edited: jasfox (28 Nov 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.

function setUpClickListener(map){
/* Attach an event listener to map display
* obtain the coordinates an display in an alert box.
*/

map.addListener("click", function (evt) {
var coord = map.pixelToGeo(evt.displayX, evt.displayY);
alert("Clicked at " + coord);
});
}


[edit] Example alert window

Geocoordinatesmouseclick.png

A fully working example can be found at:

http://rawgithub.com/heremaps/examples/master/maps_api_for_javascript/simple-examples/geocoordinate-on-click.html

This page was last modified on 28 November 2013, at 14:56.
159 page views in the last 30 days.
×