JAVASCRIPT

Using Polylines and Smart Markers with Yahoo! Maps

Welcome to the fifth part of the series “Working with Yahoo! Maps.” This series teaches you how to implement the most useful features that come packaged with the Yahoo! Maps Ajax framework. It will permit you to include powerful, highly interactive maps into your own website by using a combination of basic structural markup and a few lines of JavaScript code.

Author Info:

By: Alejandro Gervasio

Poor Best

Rating:

/ 1

April 29, 2008

TABLE OF CONTENTS:

In the section that you just read, I told you that the Yahoo! Maps framework permits you to draw polylines by using another handy JavaScript class, which, not surprisingly, is called "YPolyline()." As you will see for yourself in a moment, the class is quite flexible and allows you to display these lines using different customization parameters, including line colors, opacity, etc.

Let me show you a concrete example of how to draw a few simple polygonal lines on an existing 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">

<head>

<title>Example on building a YAHOO! Map and adding polylines</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 and adding polylines</h1>

function initializeMap(){

// define array to store polyline points

polylinePoints=new Array();

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

// Add an event to report to our Logger

YEvent.Capture(map,EventsList.MouseClick,drawPolyline);

// draw polyline when clicking on the map

function drawPolyline(_e,_c){

var geoPoint=new YGeoPoint(_c.Lat,_c.Lon);

// add marker to the map

map.addMarker(geoPoint);

polylinePoints.push(geoPoint);

// draw polyline on the map

map.addOverlay(new YPolyline(polylinePoints,'black',10,0.5));

}

window.onload=function(){

initializeMap();

}

</script>

</body>

</html>

As you can see, the above hands-on example first constructs a simple satellite map, and then uses the same click logger that you learned in the previous section to dynamically include different markers as the map is being clicked on. So far, this process should be pretty familiar to you. Please notice that I also defined a "polylinePoints" array with the purpose of storing the different latitude/longitude values corresponding to each mouse click.

These array elements are then used to create several black polygonal lines, which are inserted into the map by way of another JavaScript method, called "addOverlay()." As you may guess, this method is utilized to "overlap" different elements on a given map, and certainly polylines are no exception.

If you're anything like me, then you may want to see the final result of this process. Below I included a screen shot that shows the polylines in action. Here it is:

As you can see, the pertinent polygonal lines come in handy for interconnecting different markers as they are displayed on the map. Quite simple to grasp, right?

So far, so good. At this point, you should have an exact idea of how to draw a few basic polylines in an existing Yahoo! Map. So the next step will consist of demonstrating how to build special markers, which in the context of the Yahoo! Map framework are called "smart markers."

As you'll see in the section to come, these special markers can include additional markup in their structures. Therefore, jump forward and keep reading, since I'll be there waiting for you.

Next: Using smart markers with a selected Yahoo! Map >>