In my previous MapQuest posts I've been showing how to create custom maps by added data from various geographical sources. Another way to customize your maps is to add custom interactive control behaviors via mouse events. In my next couple posts, I'll show you how to add different mouse events to the maps and overlays.
In this post, we'll create basic map that will display the latitude and longitude coordinates of the center of the map canvas as well as the coordinates of mouse clicks on the canvas.
<html>
<head>
<title>Mouse Events</title>
<script src="http://btilelog.access.mapquest.com/tilelog/transaction?
transaction=script&key=YOUR_API-KEY&ipr=true∓itk=true
&v=5.2.0" type="text/javascript"></script>
<script language="javascript">
function showClick(event) {
var foo = document.getElementById('click');
foo.innerHTML = event.ll.getLatitude() + ', ' + event.ll.getLongitude();
}
function showCenter() {
var foo2 = document.getElementById('center');
foo2.innerHTML = this.getCenter().getLatitude() + ', ' +
this.getCenter().getLongitude();
// remove previous poi before marking center
myMap.removeAllPois()
myPoint = new MQPoi(new MQLatLng(this.getCenter().getLatitude(),
this.getCenter().getLongitude()));
myMap.addPoi(myPoint);
}
function initMap() {
myMap = new MQTileMap(document.getElementById('mapDiv'),8,
new MQLatLng(33.173676, -116.714889));
myMap.addControl(new MQLargeZoomControl(myMap));
MQEventManager.addListener(myMap, "click", showClick);
MQEventManager.addListener(myMap, "move", showCenter);
}
</script>
</head>
<body onload="initMap();">
<table>
<tr><td>Map Center: </td>>td><div id="center"></div></td></tr>
<tr><td>Mouse Click: </td>>td><div id="click"></div></td></tr>
</table>
<div id="mapDiv" style="width:384px; height:384px; border:2px solid"></div>
</body>
</html>
To add an event, you simply define a function that is attached to a mouse event using the MQEventManager() object. In this example there are two function, one to show the coordinates of the map center and one to show the coordinate of a click event. As you see, the click action require the use of a event object to be passed from the event manager. Also in showCenter() function, in addition to displaying the coordinates in the DIV tag, I'm also placing a POI at the center location (after clearing out the previous POIs).
