|By Joe Danziger||
|April 20, 2006 04:00 PM EDT||
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=188.8.131.52. It will return the following data to the browser:
NUMBER: 184.108.40.206 - 220.127.116.11
CITY: RED BANK
STATE: NEW JERSEY
LOOKUP_TYPE: Block Allocation
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=18.104.22.168&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.
Taking It Even Further
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.
- Google Maps API - www.google.com/apis/maps/documentation/
- Yahoo! Maps API - http://developer.yahoo.net/maps/
- MS Virtual Earth Developer Center - www.viavirtualearth.com/
- NetGeo Public Database - www.caida.org/tools/utilities/netgeo/
- Hostip.info Community Database - www.hostip.info/
- MaxMind Commercial Database - www.maxmind.com/app/city/
- Locate Geographic Points - http://geonames.usgs.gov/pls/gnispublic
- Cool Google Maps - http://coolgooglemaps.blogspot.com/.
- Where Are RIA Technologies Headed in 2008?
- The Next Programming Models, RIAs and Composite Applications
- AJAX World RIA Conference & Expo Kicks Off in New York City
- Constructing an Application with Flash Forms from the Ground Up
- Building a Zip Code Proximity Search with ColdFusion
- Personal Branding Checklist
- CFEclipse: The Developer's IDE, Eclipse For ColdFusion
- Has the Technology Bounceback Begun?
- Adobe Flex 2: Advanced DataGrid
- i-Technology Viewpoint: We Need Not More Frameworks, But Better Programmers
- Web Services Using ColdFusion and Apache CXF
- Passing Parameters to Flex That Works