Creating a Google Maps mashup

Since about August of 2005, I’ve been slowly working on scraping data from the Madison police department website traffic accident program and charting it out on a Google Map. Most of that time has been spent not actively hacking out code, but rather looking into how I could make this work within some of the newer web development frameworks such as TurboGears, Rails, Django, or web.py. Two weeks ago, my good friend Cory expressed interest in this project. That interest renewed my motivation to get this thing finished. Or at least closer to finished. Earlier this week, I implemented the basic features that make the map usable. Check out the project here. While I find the map itself interesting, developing the code behind has been a lot of fun and a great learning experience (although the project is far from complete).

Technology

Working on this mashup has allowed me to play with the following technologies:

• AJAX (with JSON via MochiKit)
• Google Maps API
• ElementTree
• geocoding
• calendar component from Yahoo’s UI library
• WWW::Mechanize

Backend workflow

Here’s a rough outline of the “massaging” required to get data from the source into a format that can be displayed on the map:

1. Save html of accident date result
2. Run tidy on html
3. Add latitude/longitude data to accident entry
4. convert accident data to json
5. upload json document to webserver

Once the new JSON document is on the webserver, the map index page reads that into the list of available dates and the calendar control enables selection of that date.

Future improvements

Here’s a couple of ideas for features I might try to implement in future iterations of this project:

• Animated SVG visualizations of accident trends
• sparkline visualizations of accident trends
• “show me how many accidents occurred on my route to work over the last year”

For testing purposes, this map only displays data from March 31, 2006. At some point, I’ll add additional data from the Madison Police department traffic accident program. Check it out and let me know what you think? How can I make it better? Note: I have experienced a few problems while testing the project in Internet Explorer. Until I figure that out, try firefox or get a Mac. ;->