JeffreyBarke.net

Back in August, Dave Shea came up with the CSS Sprites2 technique in A List Apart No. 266. He chose to implement it in jQuery, but added "consider this article an open invitation to port this technique to your library of choice." I intended to immediately port CSS Sprites2 to Prototype and script.aculo.us, but finally got around to it this weekend.

My version of CSS Sprites2 is almost exactly the same as Dave Shea's: it requires the same HTML, the same styling and includes a similar pre-built function used to invoke it. However, my version also includes keyboard support: there's a matching focus, blur, keydown and keyup event handler for each mouse event handler.

Get CSS Sprites2 for Prototype and script.aculo.us.

I created a tutorial that will step one through how to create a density map with Prototype, the Google Maps API and the HeatMapAPI. The final product, a density map of liquor licenses in Milwaukee, WI, is below. While this map is based on real data, one limitation of the free HeatMapAPI is that only 100 data points can be submitted per call. Since there are approximately 1,300 liquor licenses in Milwaukee, this map isn't even close to accurate!

Creating a map like this takes four simple steps:

1. Getting everything ready
2. Create the Google map
3. Add the data
4. Create the density map

To step one!