MapQuest Devblog

"If you don't know where you are going, any road will get you there." - Lewis Carroll

Like many developers I often start a project by jumping in and writing code. For this project I'm going try something a little different and create a road map for my mapping project.

My project is named MapNews. In my prior post, I covered the project concept: present a map with markers/information windows which show news headlines by location.

Doing the design up front is a bit of a jump off of a cliff for me. I've had only a light reading of the MapQuest Platform documentation and am going to proceed to layout the design. This should be interesting; as the project unfolds, I'll be able to look back and see my misconceptions exposed.

Back in the day, there was always some glory about getting the first post on a popular topic on Slashdot. The first-poster got the opportunity to lead the discussion (or flame war) on the current topic that was on the site. Well, this is my first post on the AOL developer site, so let me introduce myself. I'm Bruce Hopkins, the author of the book, "Bluetooth for Java" by Apress, and I have have recently fallen in love with Flex and ActionScript programming. I've used Java for over 10 years (way back with JDK 1.0a) and it's great for server-side application development, but lacks in certain areas for client-side applications. Well, unless you've been in a cave for the last 2 years, you probably already know that Flex works extermely well for client-side applications, and plays nicely with integrating with Java EE, .NET, SOAP, and REST backends.

So, today, I'm going to introduce you to Flex application development, and we'll get our hands dirty with the MapQuest 5.2 APIs. I'm really excited that MapQuest has decided to make the latest version of their API free for developers, and since their mapping APIs support Flex 2 / Flex 3 it's the best choice for Flex developers for mapping APIs. Take a look at the code snippet below:

<mx:Canvas x="36" y="29" width="571" height="322" 
  backgroundColor="#ffffff">
  <mx:Label x="19" y="10" text="Select Map Type:" width="126"/> 
  <mx:ComboBox id="mapTypeComboBox" x="19" y="29" width="148"
    dataProvider="{mapTypeComboData}" 
    change="changeMapType();"></mx:ComboBox> 
  <ns1:TilemapComponent x="175" y="10" width="376" height="302" 
  id="tilemap" key="123456754322434"/>
</mx:Canvas>

It's only 5 lines of XML that allow you to define all the visual layout for a simple application. So, as you can see in the code above, I have a Label, ComboBox, and TilemapComponent wrapped in a Canvas. All the components are a part of the Flex SDK, except for the Map, which is a part of the MapQuest 5.2 APIs. When you signup for a developer account, you'll get a key where you'll insert into the "key" attribute of TilemapComponent. Now, take a look at the rest of the code:

<mx:Script>
  <![CDATA[ 
 
  [Bindable]
  public var mapTypeComboData: Array = [ {label:"Map View", data:"map"}, 
        {label:"Satellite View", data:"sat"}, 
        {label:"Hybrid View", data:"hyb"} ];
 
  public function changeMapType(): void{
    tilemap.mapType = 
    mapTypeComboData[mapTypeComboBox.selectedIndex].data;
 	}
 	]]>
 </mx:Script>

As you can see, I populated a simple Array with the data that feeds the ComboBox, and I defined a function to be called when the ComboBox is changed. And that's it! The image below shows a screenshot of our application:

So, as you can see, it's pretty easy to use Flex to create mapping applications with the MapQuest 5.2 APIs. Below is the full source code for you to copy.

<?xml version="1.0" encoding="utf-8"?>
   <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
   layout="absolute" xmlns:ns1="com.mapquest.tilemap.*">
 <mx:Canvas x="36" y="29" width="571" height="322" backgroundColor="#ffffff">
 <mx:Label x="19" y="10" text="Select Map Type:" width="126"/> 
 <mx:ComboBox id="mapTypeComboBox" x="19" y="29" width="148" 
 dataProvider="{mapTypeComboData}" change="changeMapType();"></mx:ComboBox> 
 <ns1:TilemapComponent x="175" y="10" width="376" height="302" id="tilemap"
 key="mjtd%7Clu6y29u2n0%2C7s%3Do5-0ura9"/>
 </mx:Canvas>
 
 <mx:Script>
 <![CDATA[ 
 
 [Bindable]
 public var mapTypeComboData: Array = [ {label:"Map View", data:"map"}, 
 {label:"Satellite View", data:"sat"}, 
 {label:"Hybrid View", data:"hyb"} ];
 
 public function changeMapType(): void{
 tilemap.mapType = mapTypeComboData[mapTypeComboBox.selectedIndex].data;
 }
 
 ]]>
 </mx:Script>
 </mx:Application>
 

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:

• MapQuest API
• GeoRSS
• GML

* Map data courtesy SundayMorningRides.com