In my previous MapQuest posts I've mostly been demonstrating how to use MapQuest to display the the various types of geo-formats (KML, GeoRSS, etc). Building on the examples of map event interaction from my previous posts, we can also build an interactive map interface where users can build their own geo-format files. Here's an example where users can interactively click on the map to create a polyline.
More Overlay Events
Custom events are also a great way to 'clean up' the look of your maps. In most of my previous MapQuest posts, I've been only loading a single overlay or polyline at a time. Chances are, you'll encounter the need to load more than one at a time - but also don't want to clutter up the look of the map by having them all visible at the same time.
Here's an example where I've loaded two different polylines from different GeoRSS/GML files. Instead of having both automatically displayed on the map, I'm going to use a mousever event on a POI to display the polyline. Two do so, I create two POIs has a legend to each polyline. On a 'mouseover' event I load and display the appropriate file. On a 'mouseout' event the overlay is set to not be visible.
<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 openXMLFile1(){
myXMLDoc = document.implementation.createDocument("","",null);
myXMLDoc.load("./foo1.xml");
myXMLDoc.onload = loadGeoRSS;
}
function openXMLFile2(){
myXMLDoc = document.implementation.createDocument("","",null);
myXMLDoc.load("./foo2.xml");
myXMLDoc.onload = loadGeoRSS;
}
function loadGeoRSS() {
myOL = new MQLineOverlay();
for (i = 0; i < myXMLDoc.getElementsByTagName("entry").length; i++) {
var c = myXMLDoc.getElementsByTagNameNS("http://www.opengis.net/gml",
"posList")[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);
myOL.setColor("#800000");
myOL.setBorderWidth(1);
myOL.setColorAlpha(1.0);
}
}
function loadData() {
myPoint1 = new MQPoi(new MQLatLng(33.305389, -116.879258));
myPoint1.setInfoTitleHTML("Palomar Mountain South Grade");
myMap.addPoi(myPoint1);
MQEventManager.addListener(myPoint1,'mouseover', openXMLFile1);
MQEventManager.addListener(myPoint1,'mouseout', clear);
myPoint2 = new MQPoi(new MQLatLng(33.288569, -116.805051));
myPoint2.setInfoTitleHTML("Palomar Mountain East Grade");
myMap.addPoi(myPoint2);
MQEventManager.addListener(myPoint2,'mouseover', openXMLFile2);
MQEventManager.addListener(myPoint2,'mouseout', clear);
}
function clear() {
myOL.setVisible(false);
}
function initMap() {
myMap = new MQTileMap(document.getElementById('mapDiv'),
8,new MQLatLng(33.272866, -116.831869));
myMap.addControl(new MQLargeZoomControl(myMap));
loadData();
}
</script>
</head>
<body>
<div id="mapDiv" style="width:384px; height:384px; border:2px solid"></div>
</body>
</html>
Here's a screenshot of the results:
More resources:
* Map data courtesy SundayMorningRides.com
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
Custom Mouse Events
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:
