In my previous MapQuest post I demonstrated to to add customized interactivity to maps via mouse control events. Here we'll add mouseover events to data overlays on the map.

I've loaded data to my map via a GeoRSS file using GML encoding. Unlike my previous GeoRSS/GML example, however, here I'm loading a data for a polyline overlay (For brevity, I've ommited the list of coordinates).

<feed xmlns=""
  <title>Sample GeoRSS ATOM feed</title>
    <title>Mesa Grande Road</title>
        [space delimited list of lat long coordinates]

With the feed, I simply read/parse the XML file and use the MapQuest API to create a polyline based on the coordinates - additionally we'll create default settings for the polyline (color, line width and opacity) which we will change depending if the mouse is over the polyline.

<title>Overlay Events</title>
<script src="
	&v=5.2.0" type="text/javascript"></script>

>script language="javascript"<
var myOverlayColl = new MQOverlayCollection();
var myXMLDoc;
function openXMLFile() {
    myXMLDoc = document.implementation.createDocument("","",null);
    myXMLDoc.onload = loadGeoRSS;
function loadGeoRSS() {
    myOL = new MQLineOverlay();
    for (i = 0; i

To create the highlighted view of the polyline for the mouseover event, I simply create a highlightView() function that alters the settings for the polyline when activated by the event manager. I also create a defaultView function to return the polyline to default settings.

Here's a screenshot of the results:

Default View (mouseout)

Highlight View (mouseover)

More resources:

* Map data courtesy