Using Polylines and Smart Markers with Yahoo! Maps - Drawing polygonal lines (polylines)
(Page 3 of 4 )
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">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Example on building a YAHOO! Map and adding polylines</title>
<script type="text/javascript" src="http://api.maps.yahoo.com/ajaxymap?
v=3.7&appid=Your-AP-ID"></script>
<style type="text/css">
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>
<div id="mapcontainer"></div>
<script type="text/javascript">
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 >>
More JavaScript Articles
More By Alejandro Gervasio
