JAVASCRIPT

Creating Click Loggers and Basic Markers with Yahoo! Maps

This is the fourth part of the series “Working with Yahoo! Maps.” If you’re a web developer who’s interested in learning the key concepts surrounding the utilization of Yahoo! Maps within the context of your web applications, then this article series might be for you. In it you’ll find comprehensive examples that will let you put this useful Ajax framework to work for you in a very short time.

Author Info:

By: Alejandro Gervasio

Poor Best

Rating:

/ 1

April 22, 2008

TABLE OF CONTENTS:

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">

<head>

<title>Example on building a YAHOO! Map and a click logger</title>

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>

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 >>