Posts with tag MouseEvents

Custom Mouse Events to Data Overlays

Posted Feb 26th 2008 2:04PM by Abel Lin

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

Custom Mouse Events

Posted Feb 21st 2008 1:56PM by Abel Lin

In my previous MapQuest posts I've been showing how to create custom maps by added data from various geographical sources. Another way to customize your maps is to add custom interactive control behaviors via mouse events. In my next couple posts, I'll show you how to add different mouse events to the maps and overlays.

In this post, we'll create basic map that will display the latitude and longitude coordinates of the center of the map canvas as well as the coordinates of mouse clicks on the canvas.

<html>
<head>
<title>Mouse 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">

function showClick(event) {
  var foo = document.getElementById('click');
  foo.innerHTML = event.ll.getLatitude() + ', ' + event.ll.getLongitude();
}
function showCenter() {
    var foo2 = document.getElementById('center');
    foo2.innerHTML = this.getCenter().getLatitude() + ', ' +
       this.getCenter().getLongitude();
    // remove previous poi before marking center
    myMap.removeAllPois()
    myPoint = new MQPoi(new MQLatLng(this.getCenter().getLatitude(),  
       this.getCenter().getLongitude()));
    myMap.addPoi(myPoint);
}
function initMap() {
   myMap = new MQTileMap(document.getElementById('mapDiv'),8,
       new MQLatLng(33.173676, -116.714889));
   myMap.addControl(new MQLargeZoomControl(myMap));
   MQEventManager.addListener(myMap, "click", showClick);
   MQEventManager.addListener(myMap, "move", showCenter);
}
</script>
</head>
<body onload="initMap();">
<table>
<tr><td>Map Center: </td>>td><div id="center"></div></td></tr>
<tr><td>Mouse Click: </td>>td><div id="click"></div></td></tr>
</table>
<div id="mapDiv" style="width:384px; height:384px; border:2px solid"></div>
</body>
</html>

To add an event, you simply define a function that is attached to a mouse event using the MQEventManager() object. In this example there are two function, one to show the coordinates of the map center and one to show the coordinate of a click event. As you see, the click action require the use of a event object to be passed from the event manager. Also in showCenter() function, in addition to displaying the coordinates in the DIV tag, I'm also placing a POI at the center location (after clearing out the previous POIs).

Here's a screenshot of the result:

In my next post, I'll show how we can further customize the maps by adding events to overlays using mouseover events.

More resources: