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:

In this case, the click logger that I built in the previous section can be used in conjunction with an existing map to add some basic markers to it as the map in question is being clicked. Thus, having said that, pay close attention to the following hands-on example, which shows how to incorporate different markers to a satellite Yahoo! Map on the fly.

The corresponding code sample is as follows:

<!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 adding simple markers</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 adding simple markers</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 slong 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 report to our Logger

YEvent.Capture(map,EventsList.MouseClick,displayMarker);

// display new marker on the map

function displayMarker(_e,_c){

var geoPoint=new YGeoPoint(_c.Lat,_c.Lon);

map.addMarker(geoPoint);

}

window.onload=function(){

initializeMap();

}

</script>

</body>

</html>

As you can see from the above example, I introduced a brand new JavaScript method, “addMarker(),” that is tasked with displaying a basic marker on the selected map. You should notice that this method takes a “Yahoo!” geo point object as an input argument. This is an object that contains a pair of latitude/longitude values that are properly calculated based on the X,Y coordinates generated each time a mouse click occurs inside the map in question.

This process may sound a bit messy to you, but hopefully the following screen shot will help to dissipate any possible doubts about how these basic markers are added to this sample Yahoo! Map:

See how simple it is to include a few basic markers into a given map? Sure you do! However, as with every web development topic, it requires some time and practice. So I recommend you use all the code samples shown in this tutorial to improve your skills in working with Yahoo! Maps. It’ll be a productive experience, trust me!

Final thoughts

In this fourth chapter of the series, you hopefully learned the foundations of adding basic markers to an existing Yahoo! Map by using an effective click detection mechanism built around the functionality provided by the Yahoo! “Event.Capture” event handling class.

In the next part, things will get even more interesting, since you’ll see how to use the same mouse click handler, but this time to work with what, in Yahoo! jargon, is called a “smart” marker.

Want to find out how this story continues? Don’t miss the next article!

DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.