Adding Pan Controls to Yahoo! Maps - Incorporating a useful pan control into a Yahoo! Map
(Page 3 of 4 )
True to form, any Yahoo! Map that doesn't include a panoramic control mechanism will be rather limited in terms of its functionality, since it won’t allow you to scroll over different geographical locations beyond the one selected. Nevertheless, you shouldn’t feel disappointed at this point, since this AJAX framework does support the inclusion of a powerful pan system.
A pan control can be incorporated by invoking a brand new method called “addPanControl()”, which belongs to the “YMap” JavaScript class. Not rocket science, right? Please pay attention to the following example, which shows how to include the pan control into a satellite Yahoo! Map.
The respective code sample looks like this:
<!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 pan 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 pan 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 the Pan Control to the map
map.addPanControl();
// 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 was demonstrated above, including a pan control into an existing Yahoo! Map is only a matter of calling the “addPanControl()” JavaScript method before displaying the map in question on the browser. In this case, the type of map I decided to work with is based on satellite images, but this condition can be easily modified to use both regional and hybrid ones.
To complement the previous example, I included a screen shot that depicts the look and feel of this handy pan control just added. Here it is:
As you can see by looking at the upper left corner of this image, the pan control is comprised of the four typical “up,” ”down,” ”left,” and “right” arrows, which, when clicked on, will scroll the whole map toward the corresponding direction.
At this point, you've learned how to incorporate a powerful panoramic control to a given Yahoo! Map, which expands its functionality and usability. Therefore, the last thing that I’m going to teach you in this tutorial will be how to combine both the zoom and pan controls that you learned earlier in the same map, completing the discussion on principal visualization mechanisms supported by a typical Yahoo! Map. Sounds really exciting, right?
To see how these handy controls will be displayed on one single interactive map, please click on the link shown below and keep reading. We’re almost done!
Next: Displaying a Yahoo! Map with zoom and pan controls >>
More JavaScript Articles
More By Alejandro Gervasio
