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.

Author Info:

By: Alejandro Gervasio

Poor Best

Rating:

/ 3

April 08, 2008

TABLE OF CONTENTS:

Before I proceed to show you how to incorporate some useful zoom controls into an existing Yahoo! Map, I’d like to review very quickly the group of hands-on examples that were developed in the first part of this series. This way, you can recall some basic concepts concerning the creation of the three main types of maps supported by this Yahoo! Ajax framework.

Here are the respective code samples that demonstrate how to build a regional, a hybrid, and a satellite-based Yahoo! Map:

(example on building a basic regional Yahoo! Map)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>Example on building a YAHOO! Regional Map</title>

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! Regional Map</h1>

// Create a new map object

var map=new YMap(document.getElementById('mapcontainer'));

// Add type controls to the map

map.addTypeControl();

// Set map type to YAHOO_MAP_REG

map.setMapType(YAHOO_MAP_REG);

// Display the map centered on the selected location

map.drawZoomAndCenter("Los Angeles",3);

</script>

</body>

</html>

(example on building a basic hybrid Yahoo! Map)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>Example on building a YAHOO! Hybrid Map</title>

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! Hybrid Map</h1>

// Create a new map object

var map=new YMap(document.getElementById('mapcontainer'));

// Add type controls to the map

map.addTypeControl();

// Set map type to YAHOO_MAP_HYB

map.setMapType(YAHOO_MAP_HYB);

// Display the map centered on the selected location

map.drawZoomAndCenter("Los Angeles",3);

</script>

</body>

</html>

(example on building a basic satellite Yahoo! Map)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>Example on building a YAHOO! Satellite Map</title>

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! Satellite Map</h1>

// Create a new map object

var map=new YMap(document.getElementById('mapcontainer'));

// Add type controls to the map

map.addTypeControl();

// 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>

With the inclusion of the above hands-on examples, hopefully you’ve recalled how to build different types of Yahoo! Maps. Not too difficult to grasp, right?

Of course, in this particular case I’m not going to include the complementary images that correspond to each of the earlier examples, since this process would be rather boring to you and completely unnecessary. Thus, having reviewed the foundations on how to build basic Yahoo! Maps, it’s time to continue learning more useful features that come integrated with this powerful Yahoo! framework.

In consonance with the concepts that I deployed in the beginning of this article, in the course of the section to come, I’m going to teach you how to add some simple zoom controls to an existing Yahoo! Map.

To learn the basics of how to include this brand new zoom control in a selected Yahoo! Map, please click on the link that appears below and keep reading.

Next: Adding a long zoom control to Yahoo! Maps >>