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:

As I said in the prior section, Yahoo! Maps support the inclusion of "smart markers," which are markers whose visual appearance can be enriched with additional markup, such as paragraphs and bolded text. However, this concept will be better understood if you take a look at the following example, which shows how to use the markers in question:

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

<head>

<title> Example on using smart markers with satellite YAHOO! 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 using smart markers with satellite YAHOO! Map</h1>

function initializeMap(){

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

// display smartMarker

function displaySmartMarker(_e,_c){

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

var newMarker= new YMarker(geoPoint);

// call 'autoexpand()' method

newMarker.addAutoExpand('This is a smart marker');

// add HTML to the smart marker

var markerHTML= '<p>This is the markup<br />';

markerHTML+='of the smart marker</p>';

YEvent.Capture(newMarker,EventsList.MouseClick,function()
{newMarker.openSmartWindow(markerHTML)});

map.addOverlay(newMarker);

}

window.onload=function(){

initializeMap();

}

</script>

</body>

</html>

Undoubtedly, there are some interesting things to note with reference to the above example. First, notice how the smart markers are created with the brand new "YMarker" JavaScript class, and also how a basic label is added to each of them via the "addAutoExpand()" method, which comes in handy for inserting descriptive tool tips into a selected marker.

Finally, some additional markup is added to each marker, which will be properly displayed on the map by using another helpful method, called "openSmartWindow()." In case you're wondering what a smart window is within the context of Yahoo! Maps, basically they contain DIVs that can be shown or hidden in response to a determined event, including mouse clicks, of course.

To help you understand the functionality of smart markers, I included an image that shows them in action. Here it is:

All right, with the inclusion of this final hands-on example you should have at least a basic background in using smart markers with an existing Yahoo! Map. Nonetheless, I suggest you practice using the code samples shown in this tutorial. It's the best learning method!

Final thoughts

That's all for the moment. In this fifth chapter of the series, you learned a couple of additional features of Yahoo! Maps, namely working with simple polygonal lines and using "smart" markers, which are markers that can include their own markup.

Nonetheless, smart markers require a more detailed analysis. Thus, I'll be putting my focus on them in the final installment of this article series. You don't have any excuses to miss it!

DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.