JavaScript

Adding Zoom Controls to Yahoo! Maps

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 )

Adding a zoom control to a targeted Yahoo! Map is a procedure reduced to using a brand new method of the already familiar “YMap” JavaScript class, which I used in previous examples, called “addZoomLong()”. In this case, as you might have deduced from the method’s name, it’s tasked with displaying a “long” zoom control to an existing map.

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.

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:

There you have it. At this stage, you've hopefully learned how to use the handy “addZoomLong()” JavaScript method to incorporate a long zoom control into an existing Yahoo! Map. However, as I said before, it’s also perfectly possible to include a “short” version of the previous zoom control by using another method of the respective “YMap()” class, which not surprisingly is called “addZoomShort().”

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.