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.
Posts with tag polylines
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
Capture the Flag: Using a JavaScript API to Enable Interactive Drawing in MapQuest
Introduction
The MapQuest Platform provides a powerful means for developers to integrate MapQuest technology into their web applications. In this article, I will demonstrate how to add interactive drawing to a map using the JavaScript-based API. In the resulting application, a user can set up a real-life game of Capture the Flag by drawing components of the game on an online map. You can see the application live here, and you can download the source in a .zip file here.
Continue reading Capture the Flag: Using a JavaScript API to Enable Interactive Drawing in MapQuest
