Adding Zoom Controls to Yahoo! Maps - Adding a long zoom control to Yahoo! Maps
(Page 3 of 4 )
Adding a zoom control to a targeted Yahoo! Map is a procedure reduced to using a brand new method of the already familiar “YMap” JavaScript class, which I used in previous examples, called “addZoomLong()”. In this case, as you might have deduced from the method’s name, it’s tasked with displaying a “long” zoom control to an existing map.
As you’ll see in a few moments, a long zoom control is a simple slider that allows the user to adjust different zoom levels that will be applied to the map in question. Of course, the term “long” implies that this zoom control must have a counterpart, called “short.” It does, but that control will be explained in detail in the next section of this article.
All right, having clarified that point, focus your attention on the following example. It shows how to include a long zoom control into a basic satellite Yahoo! Map.
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 with long zoom control</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 with long zoom control</h1>
<div id="mapcontainer"></div>
<script type="text/javascript">
// Create a new map object
var map=new YMap(document.getElementById('mapcontainer'));
// Add type controls to the map
map.addTypeControl();
// 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);
</script>
</body>
</html>
See how easy it is to incorporate a long zoom control to a satellite map? I bet you do! In this case, I used the “addZoomLong()” method to incorporate robust zooming capabilities into a satellite Yahoo! map. Naturally, if you’re anything like me, you’ll surely want to see how this control looks. Thus, below I included an illustrative image that shows it in action. Here it is:
There you have it. At this stage, you've hopefully learned how to use the handy “addZoomLong()” JavaScript method to incorporate a long zoom control into an existing Yahoo! Map. However, as I said before, it’s also perfectly possible to include a “short” version of the previous zoom control by using another method of the respective “YMap()” class, which not surprisingly is called “addZoomShort().”
Essentially, this brand new zoom control has the same functionality as its “long” cousin, but it looks pretty different. Therefore, since the control deserves a deeper discussion, in the next section I’m going to show you how to include it into a selected Yahoo! Map.
To learn more about this topic you’ll have to read the next few lines. They’re just one click away.
Next: Using a short zoom control with Yahoo! Maps >>
More JavaScript Articles
More By Alejandro Gervasio
