While discussing what to do for a Free Friday project, Neil and I decided we want to build some sort of visualization related to the location data UA had been processing. I quickly thought of the dashboard that Jon Rohan wrote for SimpleGeo, which would plot the coordinates that API requests were targetted at as those requests came in. After finding Jon’s code, I realized that the front end portion was going to be very easy to adopt, as well as make generic. Having obtained Jon’s blessing, I tidied the code up a bit and open-sourced it. Of course, the backend code that supplies our geo data will remain closed source and proprietary, but there is an example data source included to help others get started.
I called the project Windshield because the points look like bugs that show up on the glass over the course of a long drive. The source is here. I have an example up here.
I could make this a wordy post about programming practices, javascript, and technology, but this was a really simple project. Besides, other people did most of the hard work:
- PolyMaps did all the map parts of it.
- CloudMade made the gorgeous tiles.
- Jon Rohan wrote the code I aped heavy-handedly to get a grip on the thing.
- I made the function that supplies the points pluggable so that it was easy to test and extend, so HURRAY for higher order functions.
Probably the most surprising thing was Aaron submitting a pull request hours after I had open sourced the damn thing to make the demo work correclty in FireFox. Thanks, Aaron!
Things I know I still need to do:
- Make it easier to manipulate the map once it’s created (perhaps return something from the windshield function)
- Explore the concept of a PolyMaps “layer”
- Can I create a custom layer for my points and use the DOM element for that layer to more efficeintly prune points over time? The present implementation of selecting all
circle
tags, then removing the parent of their parent of their parent brings the browser to its knees
- Can I create a custom layer for my points and use the DOM element for that layer to more efficeintly prune points over time? The present implementation of selecting all
- Remove points over time in a FIFO arrangement? Would require quite a bit more javascript than I presently have appetite for, but who knows…
Highly relevant: