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
