Related Topics: RIA Developer's Journal, ColdFusion on Ulitzer

RIA & Ajax: Article

An In-Depth Look at Mapping APIs

The benefits and drawbacks

Back in the November 2005 issue of CFDJ, we looked at how to create a live map of your Web site visitors using Google Maps and other freely available services.

Now that Yahoo! and Microsoft have joined the fray and released their own mapping APIs, we'll revisit our example while learning about each implementation along the way. All of these APIs are extremely powerful, but each has its own advantages that may work better for your particular solution. We'll take a look at each in detail and outline some of the benefits and drawbacks of each.

Geo-locating by IP Address
Let's go over our example one more time. We're going to use these tools to create a visual map of users visiting your site. You'll be able to show these on a custom map along with any other text or HTML data you'd like to display. One of the key ingredients to this technique is the ability to geo-locate an IP address. This refers to the ability to locate a user's geographic latitude and longitude from his IP address. The most cost-effective source of this information is to query one of the freely available public databases. NetGeo was a project originally set up by the Cooperative Association for Internet Data Analysis (CAIDA). Although it has been defunct for several years, the database is still freely available and provides a good resource for determining rough locations.

We'll set up a table (see Listing 1) to keep a log of user visits. Each time a new user visits the site, we'll query the geolocation database and insert a record of the user's IP address, latitude, longitude, city, state, country. In CFMX 7, this code can be put inside the onSessionStart() function in Application.cfc.

Queries are executed via HTTP against the NetGeo database by calling the URL http://netgeo.caida.org/perl/netgeo.cgi?target=64.19.164.74. It will return the following data to the browser:

VERSION=1.0
TARGET: 64.19.164.74
NAME: MONMOUTH-BLK2
NUMBER: 64.19.128.0 - 64.19.191.255
CITY: RED BANK
STATE: NEW JERSEY
COUNTRY: US
LAT: 40.35
LONG: -74.08
LAT_LONG_GRAN: City
LAST_UPDATED: 01-Jun-2001
NIC: ARIN
LOOKUP_TYPE: Block Allocation
RATING:
DOMAIN_GUESS: MONMOUTH.COM
STATUS: OK

ColdFusion's string functions can be used to parse out the relevant latitude and longitude data, as well as the city, state, and country. We'll then insert that info into the database and use it to populate a map overlay when each point is clicked. Listing 2 contains the code to parse out these fields.

Another source of freely available geo-location data is the community-based hostip.info project located at http://www.hostip.info. Although this is a newer database, it's being actively and continuously updated and is improving with time. This database can also be queried via HTTP and returns the results in a format similar to NetGeo. A URL query to hostip.info would be structured as http://api.hostip.info/get_html.php?ip=64.19.164.74&position=true.

You can also download the full hostip.info database directly to your server for quicker response time. There's also the commercial GeoIP City database maintained by MaxMind (see www.maxmind.com/app/city).

Drawing the Map Using Google
The first thing you'll need to do is to sign up for a Google Maps API key at www.google.com/apis/maps/. This key will have to be included on any pages on which you'll be drawing maps.

To begin, put the script calls in Listing 3 in the <head></head> section of your page.

Next, include an empty div right after your <body> tag. This will contain the actual map and determine its size:

<div id="map" style="width: 700px; height: 500px"></div>

Using Yahoo!'s New Flex-Based API
You'll also have to get an application ID from Yahoo! before using its service. Once that's done, you'll put script calls in Listing 4 in the <head></head> section of your page.

Then include an empty div right after your <body> tag. This div will contain the actual map:

<div id="mapContainer" style="width: 700px; height: 500px"></div>

Microsoft's Virtual Earth Implementation
Interfacing with Microsoft's Virtual Earth is also relatively painless. Most of your code will go in the <head></head> section of the page. The code you'll need to include is in Listing 5. Then you'll have to add an onLoad call to your body tag as follows: <body onLoad="OnPageLoad()">.

As with most of Microsoft's technologies, Virtual Earth will probably take a few revisions before they get it right. Currently there are advantages to using the Google or Yahoo! APIs. Google offers simplicity and the capability to add detailed HTML overlays complete with images. Yahoo!'s advantage comes in its rich integration possibilities with Flash-based technologies as well as AJAX.

Troubleshooting
One thing to note is that some browsers will throw a security error when trying to access a JavaScript file from a different domain. You can get around this by downloading the .js file to your server and serving it up locally.

Taking It Even Further
The Yahoo! map that we built, though Flash-based, used the JavaScript API to interact with the map. There's also an ActionScript API available for direct integration with Flash as well as a Flex API to interact with maps directly from your RIAs. This comes at a great time with Macromedia's recent announcements regarding the Flex product line. Check this link under resources for a great example of what can be done with the Flash API: http://tinyurl.com/avpv8 (from Justin's Rich Media Blog). The APIs will also accept geo-coded RSS feeds. This lets you fuse live data right on to your maps, such as being able to plot apartments currently listed for rent through craigslist.

Conclusion
We've only scratched the surface of what can be done using the new mapping APIs that are now available. It's possible to create all kinds of applications based on geographic data. Although the licensing terms for each API are slightly different, they are generally pretty liberal and even allow for commercial use in some cases. Visit the links provided for full documentation on each of them.

Resources

More Stories By Joe Danziger

Joe Danziger is a senior web applications developer with Multimax, Inc., a provider of Enterprise IT Services and Solutions supporting the critical missions of the Air Force, Army, Navy, and other Department of Defense components. He is certified as an Advanced Macromedia ColdFusion MX Developer, and also maintains the Building Blocks site (www.ajaxcf.com) dedicated to AJAX and ColdFusion, as well as DJ Central (www.djcentral.com), a Website serving DJs and the electronic dance music industry.

Comments (0)

Share your thoughts on this story.

Add your comment
You must be signed in to add a comment. Sign-in | Register

In accordance with our Comment Policy, we encourage comments that are on topic, relevant and to-the-point. We will remove comments that include profanity, personal attacks, racial slurs, threats of violence, or other inappropriate material that violates our Terms and Conditions, and will block users who make repeated violations. We ask all readers to expect diversity of opinion and to treat one another with dignity and respect.