HERE Maps API - get the geocoordinates when user clicks mouse over the map
hamishwillee
(Talk | contribs) m (Automated change of category from Web Technology to Web. (New ontology name for category)) |
hamishwillee
(Talk | contribs) m (Hamishwillee - Add Ovi Maps category) |
||
| Line 1: | Line 1: | ||
| − | [[Category: | + | [[Category:Web]][[Category:Ovi Maps]] |
__NOTOC__ | __NOTOC__ | ||
Revision as of 03:53, 12 October 2011
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
