Adding Pan Controls to Yahoo! Maps - Review: including short and long zoom control into an existing Yahoo! Map
(Page 2 of 4 )
As I stated in the beginning of this article, my goal here consists basically of demonstrating how to include some pan controls into a given Yahoo! Map. But do you really remember how to add zoom capabilities also? Good question! So, before I show you how a pan mechanism can be incorporated to a selected map, first let me remind you of the steps required to include both short and long zoom controls.
Please take a look at the following code samples, which were developed in the preceding article of the series, to recall how to provide an existing Yahoo! Map with powerful zoom capabilities:
(example on including a long zoom control into an existing regional Yahoo! Map)
<!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>
(example on including a short zoom control into an existing regional Yahoo! Map)
<!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>
After studying the above practical examples, I’m reasonably sure that you're familiar with including both short and long zoom controls into any targeted Yahoo! Map. The means that it’s time to continue exploring some other features that come packaged with the Yahoo! Map Ajax framework.
I’m going to teach you how to display a set of handy pan controls on a given map. But as you might guess, to learn more on this interesting topic, you’ll have to read the next section. Don’t you worry, since I’ll be there waiting for you.
Next: Incorporating a useful pan control into a Yahoo! Map >>
More JavaScript Articles
More By Alejandro Gervasio
