Adding Pan Controls to Yahoo! Maps - Displaying a Yahoo! Map with zoom and pan controls
(Page 4 of 4 )
As I expressed in the section that you just went through, the last practical example that I’m going to show you here will be focused on demonstrating how both pan and zoom controls can be combined in one Yahoo! Map.
That being said, here’s the code sample that shows these two useful controls in action:
<!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 and short zoom controls</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 and short zoom controls</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();
// 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, combining a short zoom control and the panoramic mechanism in the same Yahoo! Map is actually a simple process, because this procedure is reduced to calling up the respective “addPanControl()” and “addZoomShort()” JavaScript methods in the proper sequence and nothing else.
Below I included another illustrative image that hopefully will help you see how a selected Yahoo! Map looks after including the aforementioned controls. Here it is:
All right, now you can take a deep breath and relax for a while, since at this point you’re equipped with the background required to build different types of Yahoo! Maps that also incorporate zoom and pan controls. What else can you ask for?
Of course, I recommend you use all of the code samples shown in this tutorial to improve your skills in building these interactive Yahoo! Maps. See for yourself how fun and instructive this experience can be in the end!
Final thoughts
In this third installment of the series, I walked you through the process of adding pan controls to a given Yahoo! Map, a feature that expands its existing functionality.
Nonetheless, there are many other features to explore when it comes to working with Yahoo! Maps, so in the upcoming article, I’m going to teach you how to include click loggers and basic markers into an existing map. Now that you’ve been warned, you don’t have any excuses 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. |
