Custom Mouse Events to Data Overlays

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∓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 < myXMLDoc.getElementsByTagName("entry").length; i++) {
        var title = myXMLDoc.getElementsByTagName("title")[i].textContent;
        var c = myXMLDoc.getElementsByTagNameNS("http://www.opengis.net/gml", "p
osList")[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);
        // set defautView
        myOL.setColor("#800000");
        myOL.setBorderWidth(1);
        myOL.setColorAlpha(1.0);
        // set eventmanager objects
        MQEventManager.addListener(myOL,'mouseover', highlightView);
        MQEventManager.addListener(myOL,'mouseout', defaultView);
    }
}
function highlightView() {
    myOL.setColor("#000080");
    myOL.setBorderWidth(5);
    myOL.setColorAlpha(0.5);
}
function defaultView() {
    myOL.setColor("#800000");
    myOL.setBorderWidth(1);
    myOL.setColorAlpha(1.0);
}
function initMap() {
   myMap = new MQTileMap(document.getElementById('mapDiv'),8,
	new MQLatLng(33.173 676, -116.714889));
   myMap.addControl(new MQLargeZoomControl(myMap));
   openXMLFile();
}
</script>
</head>
<body>
<div id="mapDiv" style="width:384px; height:384px; border:2px solid"></div>
</body>

</html>

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

Topic Centers