MapQuest Devblog

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.

This method, although similar to the method I covered in my last post, uses the InfoWindow of the map rather than a rollover associated with a Point Of Interest (POI). The InfoWindow is populated with the title and content when the overlay is moused-over, and follows the cursor, similar to a tooltip.

The biggest disadvantage with this method comes from the need to step outside of the API to attach a mousemove event. This means that the solution needs to take browser differences into consideration. In order to simplify the code, and because I generally use ASP.NET for most of my work, you will notice that I have utilized a few shortcuts provided by the Microsoft AJAX Library.

Somewhere there is a map of how it can be done. - Ben Stein

In Part 1 I showed you how to get started with the MapQuest Advantage API by getting a developer key. In Part 2 I put that key to use by providing access to a basic map in the Map It! widget. In this installment I'll show you how to incorporate basic geocoding.

About Geocoding

Geocoding is the process of converting an address into latitude and longitude coordinates that uniquely identify a location, and you can use to plot on a map. Applications using the MapQuest Platform can calculate the latitude and longitude of:

• Street addresses and intersections, the highest accuracy geocoding methods.
• Street blocks, including the nearest block to an invalid house number.
• Postal codes, including ZIP, ZIP+2, and ZIP+4 codes.
• City centers.
• US state and Canadian province centers.
• Country centers.
• Centers of other administrative areas that are used internationally.

The Map It! application will allow users to enter an address in one of the following forms:

• street address, zip
• street address, city, state
• street address, city, state, zip
• street address, city, state, zip, country

Welcome back! In the first article of this series, I walked you through the basics of creating and populating a custom table of location data using MapQuest Data Manager. In this article I will take you through the remaining functions that Data Manager offers, and make you a Data Manager expert extraordinaire!

A Multi-Step Process

As you might recall from the first article, to populate your custom table you perform the following steps:

1. Create the custom table.
2. Generate a text file that contains location information.
3. Upload the text file.

Although I showed you how to push data from staging to production, you will normally go through several iterations of data maintenance before doing this push (unless you are one of the few software developers who never make a mistake). These maintenance steps will likely include adding new records, removing existing records, and changing records that are already in the database--basic database maintenance type stuff.

By the way, as I walk you through this article I am going to further refine my own personal collection of locations. I encourage you to come up with your own list of locations, even if you randomly pick them off a map. My locations are pretty standard fare in the D.C. area, but you might choose instead to come up with locations that are closer in proximity to where you live.

With that said, let's look at the database maintenance functions that Data Manager provides for those of us prone to make mistakes. The first is the Clone Table function.

This morning we released an update to the MapQuest JavaScript API. Version 5.3, Release Candidate 3 contains the following new functionality:

• Drop Shadow setting for the map: We've added a visual drop-shadow graphic to the map, that you can turn on by calling map.setMapShadowState(boolean). This shadow is off by default.
• Remote Collections: KML and GeoRSS support built into the API! Create a RemoteCollection, tell it the location of the feed and its format, and watch it get automagically sucked onto the map! If you have another format, feel free to extend the feed loading classes to create your own loadable formats.
• Min/Max Zoom levels on POIs: You can now set minimum and maximum zoom levels on POIs. The POI would then only be visible on the map between the set zoom levels.
  poi.setValue('minZoomLevel', x) poi.setValue('maxZoomLevel', x)
• Show Traffic Flow on the Map: You can now add traffic flow to your map. This is the first step of adding traffic functionality into the API - more will follow.
• Show Traffic/Incident POIs on the Map: You can now add traffic incident POIs to your map. This is the second step of adding traffic functionality into the API - more will follow.

Are you starting to see a pattern here?

To use this version, change the version parameter in the API request to "v=5.3.0_RC3":
<script src="http://btilelog.access.mapquest.com/tilelog/ transaction?
transaction=script&key=YOUR_KEY_HERE&ipr=true&itk=true
&v=5.3.0_RC3" type="text/javascript"></script>

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:

• MapQuest APIs
• GeoRSS
• GML

* Map data courtesy SundayMorningRides.com

So, if you read my previous blog post and tried out the example code that I provided, then you should be pretty comfortable using Flex and ActionScript with the MapQuest 5.2 APIs. I'm truly amazed that the MapQuest development team made it so easy for developers to create location-based applications for Flex applications. And for that matter, just in case you didn't know, the MapQuest APIs are available for other languages like Java, .NET, C++, and JavaScript, but since I'm really enthusiastic about using Flex, so I'm going to focus on the Flex side of things.

So, let's say that there's a couple of "points"on the map that you're "interested" in observing. And let's also say that you want to see the "points of interest" (hence the name) together on the map at the same time. Well, today, I'll show you how to display points of interest (conveniently called POIs) within your mapping application. In the example code provided today, we're going to examine one of the many use cases where using POIs is very useful, meaningful, and convenient: real estate. So, let's say that I'm looking to buy a new home, and my agent wants to give me a customized website with all the homes that match my profile. The image below is the complete running application, from a fictional real estate company named, "The Real Estate Connection", displaying the homes that matched my profile.

So, as you can see, there are two homes that matched my profile, according to the image shown above. Here's the ActionScript function that plotted the two POIs that you see above:

public function main(): void{
   
  var zoomControl:ZoomControl = new ZoomControl();
  tilemap.addControl(zoomControl);
 
  // now let's set the points of interest
  var house1_coordinates:PointLL = new PointLL(40.720409,-73.994637);
  var house1_Poi:Poi = new Poi(house1_coordinates);
  house1_Poi.setInfoTitle("18044 Oak Lane");
  house1_Poi.setInfoContent("This a stunning 2 bed, 2 bath condo - $1.2M");
  var house2_coordinates:PointLL = new PointLL(40.720409,-76.994637);
  var house2_Poi:Poi = new Poi(house2_coordinates);
  house2_Poi.setInfoTitle("22365 Miller");
  house2_Poi.setInfoContent("This a great 2 bed, 2 bath condo - $400k");
   
  house1_Poi.setKey("A1");
  house2_Poi.setKey("B1");
  tilemap.addPoi(house1_Poi);
  tilemap.addPoi(house2_Poi);
  
  tilemap.setCenter(house1_coordinates,3);

}

So as you can see, I'm providing the coordinates of the locations that I want to show up on the map as a POI. Additionally, I can also provide a title and description (called the InfoContent) of the POI. You don't need to provide a key for your POI, unless you want to reference them later on. On the last line of the function shown above, I center the map on the first house's coordinates, and then I set the zoom level to 3. Obviously, this stuff is not hard, so take a look full source code below:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:ns1="com.mapquest.tilemap.*" creationComplete="main();">
<mx:Canvas x="36" y="10" width="600" height="341" backgroundColor="#ffffff">
<ns1:TilemapComponent x="138" y="39" width="452" height="302" id="tilemap" key="mjtd%7Clu6y29u2n0%2C7s%3Do5-0ura9"/>
<mx:Text x="10" y="39" text="Dear Bruce, welcome to your personalized real estate website. Take a look at the properties that I have identified for you. Feel free to contact us if you have any questions." width="120" height="172"/>
<mx:Label x="183.5" y="10" text="The Real Estate Connection" fontSize="16"/>
<mx:Image x="10" y="176" source="user-home.png"/>
</mx:Canvas>

<mx:Script>
<![CDATA[
import com.mapquest.tilemap.pois.*;
import com.mapquest.PointLL;
import com.mapquest.tilemap.controls.ZoomControl;


public function main(): void{

var zoomControl:ZoomControl = new ZoomControl();
tilemap.addControl(zoomControl);

// now let's set the points of interest
var house1_coordinates:PointLL = new PointLL(40.720409,-73.994637);
var house1_Poi:Poi = new Poi(house1_coordinates);
house1_Poi.setInfoTitle("18044 Oak Lane");
house1_Poi.setInfoContent("This a stunning 2 bed, 2 bath condo - $1.2M");

var house2_coordinates:PointLL = new PointLL(40.720409,-76.994637);
var house2_Poi:Poi = new Poi(house2_coordinates);
house2_Poi.setInfoTitle("22365 Miller");
house2_Poi.setInfoContent("This a great 2 bed, 2 bath condo - $400k");

house1_Poi.setKey("A1");
house2_Poi.setKey("B1");

tilemap.addPoi(house1_Poi);
tilemap.addPoi(house2_Poi);

tilemap.setCenter(house1_coordinates,3);

}

]]>
</mx:Script>
</mx:Application>