Welcome to the second part of the series “Working with Yahoo! Maps.” As the title clearly suggests, this series provides you with all the elements that you will need to start utilizing the Yahoo! Maps Ajax-based framework. It complements theoretical explanations with numerous code samples. This article will discuss how to incorporate zoom controls into an existing Yahoo! Map.
Adding Zoom Controls to Yahoo! Maps - Adding a long zoom control to Yahoo! Maps (Page 3 of 4 )
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">
<title>Example on building a YAHOO! Map with long zoom control</title>
<h1>Example on building a YAHOO! Map with long zoom control</h1>
// Create a new map object
var map=new YMap(document.getElementById('mapcontainer'));
// Add type controls to the map
// Add long zoom control to the map
// Set map type to YAHOO_MAP_SAT
// Display the map centered on the selected location
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:
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.