JAVASCRIPT

Adding Pan Controls to Yahoo! Maps

Welcome to the third chapter of the series “Working with Yahoo! Maps.” If you’re an enthusiastic web developer who wants to incorporate these powerful interactive maps into your own web site, then in this article series, you’ll find a step-by-step guide on how to implement their features, including numerous hands-on examples.

Author Info:

By: Alejandro Gervasio

Poor Best

Rating:

/ 2

April 15, 2008

TABLE OF CONTENTS:

As I stated in the beginning of this article, my goal here consists basically of demonstrating how to include some pan controls into a given Yahoo! Map. But do you really remember how to add zoom capabilities also? Good question! So, before I show you how a pan mechanism can be incorporated to a selected map, first let me remind you of the steps required to include both short and long zoom controls.

Please take a look at the following code samples, which were developed in the preceding article of the series, to recall how to provide an existing Yahoo! Map with powerful zoom capabilities:

(example on including a long zoom control into an existing 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! Map with long zoom control</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! Map with long zoom control</h1>

// Create a new map object

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

// Add type controls to the map

map.addTypeControl();

// Add long zoom control to the map

map.addZoomLong();

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

(example on including a short zoom control into an existing 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! Map with short zoom control</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! Map with short zoom control</h1>

// Create a new map object

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

// Add type controls to the map

map.addTypeControl();

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

After studying the above practical examples, I’m reasonably sure that you're familiar with including both short and long zoom controls into any targeted Yahoo! Map. The means that it’s time to continue exploring some other features that come packaged with the Yahoo! Map Ajax framework.

I’m going to teach you how to display a set of handy pan controls on a given map. But as you might guess, to learn more on this interesting topic, you’ll have to read the next section. Don’t you worry, since I’ll be there waiting for you.

Next: Incorporating a useful pan control into a Yahoo! Map >>