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="http://www.w3.org/2005/Atom"
      xmlns:georss="http://www.georss.org/georss"
      xmlns:gml="http://www.opengis.net/gml">
  <title>Sample GeoRSS ATOM feed</title>
  <entry>
    <title>Mesa Grande Road</title>
    <georss:where>
      <gml:LineString>
      <gml:posList>
        [space delimited list of lat long coordinates]
      </gml:postList>
      </gml:LineString>
    </georss:where>
  </entry>
</feed>

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.

<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 openXMLFile() {
    myXMLDoc = document.implementation.createDocument("","",null);
    myXMLDoc.load("./bah.xml");
    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 SundayMorningRides.com