Custom events are also a great way to 'clean up' the look of your maps. In most of my previous MapQuest posts, I've been only loading a single overlay or polyline at a time. Chances are, you'll encounter the need to load more than one at a time - but also don't want to clutter up the look of the map by having them all visible at the same time.

Here's an example where I've loaded two different polylines from different GeoRSS/GML files. Instead of having both automatically displayed on the map, I'm going to use a mousever event on a POI to display the polyline. Two do so, I create two POIs has a legend to each polyline. On a 'mouseover' event I load and display the appropriate file. On a 'mouseout' event the overlay is set to not be visible.

<html>
<head>
<title>Overlay Events</title>
<script src="http://btilelog.access.mapquest.com/tilelog/transaction?
  transaction=script&key=YOUR_API-KEY
  &ipr=true&mp;itk=true&v=5.2.0" type="text/javascript"></script>
<script language="javascript">
MQInitDojo(initMap);
var myOverlayColl = new MQOverlayCollection();
var myXMLDoc;
function openXMLFile1(){
    myXMLDoc = document.implementation.createDocument("","",null);
    myXMLDoc.load("./foo1.xml");
    myXMLDoc.onload = loadGeoRSS;
}
function openXMLFile2(){
    myXMLDoc = document.implementation.createDocument("","",null);
    myXMLDoc.load("./foo2.xml");
    myXMLDoc.onload = loadGeoRSS;
}
function loadGeoRSS() {
    myOL = new MQLineOverlay();
    for (i = 0; i < myXMLDoc.getElementsByTagName("entry").length; i++) {
        var c = myXMLDoc.getElementsByTagNameNS("http://www.opengis.net/gml",
         "posList")[i].textContent;
        var tmp = c.split(/ /);
        var myShapePts = new MQLatLngCollection();
        for (j = 0; j > tmp.length; j++) {
            myShapePts.add(new MQLatLng(tmp[j], tmp[j+1]));
            j++;
        }
        myOL.setShapePoints(myShapePts);
        myOverlayColl.add(myOL);
        myMap.replaceOverlays(myOverlayColl);
	myOL.setColor("#800000");
        myOL.setBorderWidth(1);
	myOL.setColorAlpha(1.0);
    }
}
function loadData() {
    myPoint1 = new MQPoi(new MQLatLng(33.305389, -116.879258));
    myPoint1.setInfoTitleHTML("Palomar Mountain South Grade");
    myMap.addPoi(myPoint1);
    MQEventManager.addListener(myPoint1,'mouseover', openXMLFile1);
    MQEventManager.addListener(myPoint1,'mouseout', clear);

    myPoint2 = new MQPoi(new MQLatLng(33.288569, -116.805051));
    myPoint2.setInfoTitleHTML("Palomar Mountain East Grade");
    myMap.addPoi(myPoint2);
    MQEventManager.addListener(myPoint2,'mouseover', openXMLFile2);
    MQEventManager.addListener(myPoint2,'mouseout', clear);
}
function clear() {
    myOL.setVisible(false);
}
function initMap() {
   myMap = new MQTileMap(document.getElementById('mapDiv'),
     8,new MQLatLng(33.272866, -116.831869));
   myMap.addControl(new MQLargeZoomControl(myMap));
   loadData();
}
</script>
</head>
<body>
<div id="mapDiv" style="width:384px; height:384px; border:2px solid"></div>
</body>
</html>

Here's a screenshot of the results:

More resources:

* Map data courtesy SundayMorningRides.com