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


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.

Registering sites with GeoURL involves adding tags to web pages that associate longitude/latitude coordinates with URLs. An example set of HTML tags for this purpose is:

<meta name="ICBM" content="XXX.XXXXX, XXX.XXXXX">
<meta name="DC.title" content="THE NAME OF YOUR SITE">


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

Figure 4-7. Geographical mash-up


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.

Figure 4-8. Finding adjacent geo-mapped locations


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.

Geographical locations can be plotted for any URLs with web page source code that contains tags indicating longitude/latitude coordinates.


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  STYLE="display: none"></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




Ajax Hacks
Ajax Hacks: Tips & Tools for Creating Responsive Web Sites
ISBN: 0596101694
EAN: 2147483647
Year: 2006
Pages: 138

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net