Adding Zoom Controls to Yahoo! Maps - Using a short zoom control with Yahoo! Maps
(Page 4 of 4 )
As I stated in the previous section, it’s also feasible to incorporate a “short” zoom control into an existing Yahoo! Map by using another method of the handy “YMap()” JavaScript class, called “addShortZoom().”
This method supports practically the same implementation as its counterpart “long” and can be seen in action in the following hands-on example:
<!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 short 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 short 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 short zoom control to the map
map.addZoomShort();
// 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>
As you can see, displaying a “short” zoom control on a selected Yahoo! Map is only a question of calling the appropriate JavaScript method of the pertinent “YMap” class. In this case, the mentioned control is added before specifying the type of map that should be constructed. Pretty simple to grasp, isn’t it?
In addition, you may want to look at the following screen shot, which shows the visual appearance of the previously mentioned zoom control:
As shown in the above image, the short zoom control is composed basically of two small arrows for zooming in and out on the targeted Yahoo! Map. Of course, it’s up to you to decide what zoom control best suits your needs, according to the specific requirements of the web application that will use these interactive maps.
Final thoughts
That’s all for now. In this second part of the series, I demonstrated how to incorporate two different zoom controls into an existing Yahoo! Map, making it much more functional and usable.
However, I’m only scratching the surface when it comes to exploring the numerous features packaged with the Yahoo! Map Ajax framework. Thus, in the next article, you’ll learn how to incorporate some useful pan controls into a given map, providing it with the capacity to scroll all over a selected geographical location.
Now that you’re aware of the topics that will be discussed in the upcoming article of this series, you won't want to miss it!
| 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. |
/ 2 
