×
Namespaces

Variants
Actions
Revision as of 02:52, 2 January 2012 by hamishwillee (Talk | contribs)

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

From Nokia Developer Wiki
Jump to: navigation, search
Article Metadata
Article
Created: Maveric (31 Dec 2010)
Last edited: hamishwillee (02 Jan 2012)


Overview

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


//Define the map component e.g. in style of this
//
// HTML file
//
...
<script src="http://api.maps.ovi.com/jsl.js" type="text/javascript" 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 ovi.mapsapi.map.Display(document.getElementById("map"),
{
components: [ new ovi.mapsapi.map.component.Behavior(),
new ovi.mapsapi.map.component.ZoomBar(),
new ovi.mapsapi.map.component.Overview(),
new ovi.mapsapi.map.component.TypeSelector(),
new ovi.mapsapi.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

141 page views in the last 30 days.
×