Ajax Hacks: Tips & Tools for Creating Responsive Web Sites

Hack 32. Use Ajax with a Yahoo! Maps and GeoURL Mash-up

Display the location of a cluster of bloggers on a Yahoo! Map.

This hack describes the GeoURL Yahoo! mapping application. You can access this mash-up of the GeoURL service and Yahoo! Maps at http://www.premshree.org/geourlmap.htm. This application uses the Yahoo! Maps API and data from GeoURL (http://geourl.org). When given a weblog address (http://jeremy.zawodny.com/blog/, for example), this hack displays a map of the weblogger's neighborsbloggers who are geographically close to the blogger associated with the URL. It asks for a URL, then uses the Ajax request object to connect with GeoURL and download some necessary XML data for sending along to the Yahoo! Maps site.

Figure 4-7 shows what the GeoURL Yahoo! mapping application looks like in a browser.

When you enter a weblog address that is stored at GeoURL, the application displays a map with icons indicating the locations of nearby bloggers or mapped URLs. Figure 4-8 shows one of these maps.

How It Works

The GeoURL service maps weblog addresses, as well as other kinds of URLs, to geographical latitude/longitude locations. The service can also plot neighboring or clustered locations of URLs.

The GeoURL service provides an RSS feed in XML format that can specify a weblogger's neighbors, and the Yahoo! Maps API accepts latitude/longitude values so that it can display markers in a map. Therefore, these two web services are all we need for this application.

To generate the map, we need to pass a chunk of XML data originating from GeoURL to the Yahoo! Maps API. A typical application for this purpose involves an HTTP request to a server-side script, which in turn makes HTTP requests to the GeoURL service, constructs the required XML, and then sends the XML in a request to the Yahoo! Maps web service.

Mashed-up Requests

However, do we really need to make a traditional server-side call to construct the XML, and have the user experience a complete page rebuild? We can avoid a page refresh by using Ajax and the request object! To this end, simply add a DIV element to the web page (to give the user feedback about sending the requests and map loading). Here's a snapshot of the code for the web page:

<H1>GeoURL Yahoo! Mapping</H1> <FORM METHOD="POST" ACTION= "http://api.maps.yahoo.com/Maps/V1/AnnotatedMaps" onSubmit= "loadMapData( ); return false;"> <INPUT TYPE="TEXT" NAME="url" size="30" /> <INPUT TYPE="HIDDEN" NAME="appid" value="geourlmap" /> <INPUT TYPE="HIDDEN" NAME="xmlsrc" value="" /> <INPUT TYPE="SUBMIT" VALUE="Map!" /> <BR /><BR /><DIV ></DIV> </FORM>

When the user clicks the Map! button, the application calls the loadMapData( ) function, which sends the user's entered URL to a server component. The component fetches the GeoURL XML data and returns it to our application. The JavaScript in our application then receives the XML response and submits it to the Yahoo! Maps URL, http://api.maps.yahoo.com/Maps/V1/AnnotatedMaps/.

Here is the mash-up application's code, which the web page includes in a script tag:

<SCRIPT LANGUAGE="JavaScript"> function getXmlHttpObject( ){ if (window.XMLHttpRequest) return new XMLHttpRequest( ); else if (window.ActiveXObject) return new ActiveXObject("Microsoft.XMLHTTP"); else { alert("XMLHttpRequest not supported!"); return null; } } function handleHttpResponse( ) { if (http.readyState == 4) { document.getElementById('load'). innerHTML += ' [done]<br />Generating map...'; results = http.responseText; if (!results.match('rss')) { document.getElementById('load'). innerHTML = '[ERROR] This URL is probably '+ 'not listed at GeoURL.'; } else { document.forms[0].xmlsrc.value = results; document.forms[0].submit( ); } } } function loadMapData( ) { resetLoadDiv( ); showLoadDiv( ); var url = document.forms[0].url.value; var post_url = '/cgi-bin/geourlmap.cgi' post_data = 'url=' + url; http.open("POST", post_url); http.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8'); http.send(post_data); http.onreadystatechange = handleHttpResponse; return false; } function resetLoadDiv( ) { document.getElementById('load'). innerHTML = 'Loading map data ...'; } function showLoadDiv( ) { document.getElementById('load'). style.display = 'block'; } var http = getXmlHttpObject( ); </SCRIPT>

Anyone who wants their site included in a mash-up like this can add their URL to the GeoURL service. Simply go to http://geourl.org/add.html and follow the instructions!

Premshree Pillai