Wednesday, July 18, 2007

A GME, GeoURL and Google Maps mashup

I recently started playing around with that Google Mashup Editor (GME). In my last blog entry I promised to share the experience of my first mashup, so here is my account.

Further information about Google Mashup Editor (GME)

The Katamari Framework was Google's internal codename for the Google Mashup Editor. In essence, GME is an application server extension to the Google Web Toolkit. I also recently discovered that the attractive syntax highlighting in the Web IDE is provided courtesy of the Open Source Codepress project.

The analogy between Tomcat and the GME platform continues. Where JSP pages have application and session scope, GME has two built-in data feeds (${app}, ${user}) that allow users to read and write data specific to the application or to the user.

My GME mashup: GeoURL to Google Maps

The source code for this mashup is available here and here.

My application would probably be considered "very advanced" rather than an exemplar of typical GME usage. What follows are some developer notes concerning the JavaScript approaches I took with this mashup, I hope these insights are useful to somebody. There is always room for improvement but I am happy with my mashup and think it works well enough.

The GME makes it very easy to produce certain types of application, especially when interfacing with Google's own applications. I have found that GME can be used to host very generic applications, these need not make any use of Google's applications (e.g. you could use Yahoo Maps for example and you get bonus points for using MapStraction!).

My intention was to recreate my ancient GeoURL to Google Maps experiment but host nothing myself with everything necessary running on Google's server.

On GME what makes generic application development possible is that GME can act as an application proxy for RSS/Atom content and you can host JavaScript on it. So if you can acquire your data in RSS/Atom or as XML/JSON using a Web API (e.g. via on demand callback methods) then you can host an application that uses that data on GME. There are many, many Web APIs out there for you to play with (See programmable web apis).

As I had done previously, I wanted to create a streaming display of GeoURL sites as I moved around a Google map.

My initial attempt only used GME tag functionality. This mashup didn't really do what I wanted it to very well and I felt a little restricted in controlling how it behaved so dispensed with using the gm:map tag in favour of hand coding against the Google Maps API myself.

Submission throttling

Rather than attempt to access the GeoURL feed at the end of every mouse move (as is usual with Google Maps stuff), I chose to use the submission throttling technique of only attempting to fetch new feed data after every 4 seconds. This should reduce the load on the backend feed, reduce client side processing and ultimately improve the user experience.

BitPerfects Google Maps "getOverlays" extension

I have methods that add markers and methods that remove markers. Removing markers from Google Maps is a little difficult as by default there is no way to get an array of all the visible markers. I experimented with BitPerfects extension to the Google Maps API that allows better management of markers but I was still having problems because I had methods simultaneously trying to add and delete markers to my array.

Ensuring mutual exclusive array access

My problem is that sometimes I am trying to add/delete and iterate through an array simultaneously. What I needed was some sort of mechanism by which only one process is allowed to act on my array at any one time. I first experimented with a mutually exclusive (mutex for short) access mechanism that implements something called the Wallace Variation to Lamport's bakery algorithm by Bruce Wallace (basically, you take a number and wait in line). This looked just the ticket (groan!) but I figured that for my mashup I didn't need to maintain a queue of waiting methods. In my mashup it would be sufficient to allow the most recent request to take precedence and throw away any previous requests. So inspired by Bruce's mutex algorithm I implemented something that dynamically defines a function and runs it. That function could be changed by each of the various array accessing processes, the last method to redefine the function is the one that actually gets called (assuming it is not already running).

Feedback welcome