Creating Click Loggers and Basic Markers with Yahoo! Maps - Adding basic markers on the fly
(Page 4 of 4 )
As you might have guessed, Yahoo! Maps supports the inclusion of different types of markers into a selected geographical location. It's a feature that can be really useful when highlighting certain relevant points that belong to the targeted location or to other places.
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">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Example on building a YAHOO Map and adding simple markers</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 adding simple markers</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 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. |
