Creating Click Loggers and Basic Markers with Yahoo! Maps - Building a click logger within a map’s area
(Page 3 of 4 )
Over the course of the section that you just read, I mentioned that it was possible to build a click detection mechanism that could log certain information, such as the respective X,Y coordinates or latitude and longitude values, regarding mouse clicks.
Before I show you how to do this, I must say that the implementation of this click logger requires using some JavaScript classes that are bundled with the Yahoo! UI framework. This can be a bit hard to grasp if you’re not familiar with it. However, fear not, because other than those UI classes, the rest of the source code that you’ll see next is practically the same as compared to previous examples.
Having clarified that point, pay close attention to the following example, which implements the aforementioned click logger into a regional Yahoo! Map:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Example on building a YAHOO! Map and a click logger</title>
<script type="text/javascript" src="http://api.maps.yahoo.com/ajaxymap?
v=3.7&appid=Your-AP-ID"></script>
<style type="text/css">
body{
padding: 0;
margin: 0;
background: #fff;
}
h1{
font: bold 16pt Arial, Helvetica, sans-serif;
color: #000;
text-align: center;
}
#mapcontainer{
height: 400px;
width: 500px;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<h1>Example on building a YAHOO! Map and a click logger</h1>
<div id="mapcontainer"></div>
<script type="text/javascript">
function initializeMap(){
// Create a new map object
var map=new YMap(document.getElementById('mapcontainer'));
// Add type controls to the map
map.addTypeControl();
// Add the Pan Control to the map
map.addPanControl();
// Add long zoom control to the map
map.addZoomLong();
// Set map type to YAHOO_MAP_SAT
map.setMapType(YAHOO_MAP_SAT);
// Display the map centered on the selected location
map.drawZoomAndCenter("Los Angeles",3);
// Add an event to the logger
YEvent.Capture(map,EventsList.MouseClick,displayLocation);
function displayLocation(_e,_c){
var centerCoords=map.convertLatLonXY(map.getCenterLatLon());
// set starting location
YLog.initPos(centerCoords);
// display latitude and longitude values when clicking on the map
YLog.print('You Clicked at the following values:');
YLog.print('Latitude:'+_c.Lat);
YLog.print('Longitude:'+_c.Lon);
}
}
window.onload=function(){
initializeMap();
}
</script>
</body>
</html>
As you can see, the prior example uses the event handler JavaScript class that comes bundled with the Yahoo! UI library to build an effective click detection mechanism, which is capable of logging the respective latitude and longitude values of a specific mouse click.
I defined a callback JavaScript function, called “displayLocation()”, that is responsible for displaying these values in a separate box. This box was created via the “YLog” class that comes packaged with the Yahoo! UI library. Once you grasp the logic of this part of the previous example, the rest of the source code should be pretty easy to follow, since a regional map is integrated into the click logger.
Finally, below you can see an illustrative image that shows how this click detection system works in a real situation:
After you've analyzed how this click logger works, you might be wondering why we built it. Well, it could be utilized to display other useful stuff. For instance, it could add basic markers on the fly. That is a procedure that deserves a closer look!
Therefore, in the upcoming section, I’m going to teach you how to include some basic markers into a selected Yahoo! Map by using the functionality of the click logger that you just learned.
This topic will be covered in detail in the next few lines. Thus, jump forward and keep reading.
Next: Adding basic markers on the fly >>
More JavaScript Articles
More By Alejandro Gervasio
