Last weekend I was in Cambridge for the fourth annual New England GiveCamp, which brings together tech and design people with nonprofits in need of their help.
Again this year, I was team lead for The Esplanade Association, a nonprofit which cares and advocates for the eponymous park along the Charles River on the Boston side.
Last year, I lead the team that rebuilt the association’s website on a WordPress backend, tossing in some scheduling and form feedback bells and whistles.
This year, TEA was looking for an interactive map of the park. They had an embedded Google Map, but it was, in a word (and a pun), pedestrian: stock icons, little detail in generic infoWindows, etc. Expedient, but hardly exciting.
I took the project because 1. The Esplanade Association is a dream client (see last year’s recap for why) and 2. I’ve done a pile of work in the Google Maps API.
Once again, I was blessed with a team of very skilled, very dedicated and very amenable people to do most of the work: Nate Bates and Will Klein, both experienced JavaScript and Web UX men; and Bryan Phillips, a graphic designer and GiveCamp fixture. My biggest problem last week was coming up with a polite way to to ask them to wait until we were all together at GiveCamp before programming the entire solution.
That enthusiasm and ownership served us well, even allowing us (well, not “us”; Nate) to tackle fixing the website’s CSS to be responsive to screen size, in effect making it mobile.
Friday
On Friday, we met Ashton Porter and Meghan Buco, TEA’s liaisons for the weekend, and settled upon a basic set of responsibilities.
Nate and Will would take care of finding a mapping provider they liked and put together the JavaScript that would power the front end map. Bryan would work with Ashton and Meghan on getting the icons drawn. I would work on the backend, which leveraged a WordPress custom post type and taxonomy with some metadata.
Nate and Will soon settled on using Leaflet, a JavaScript provider that gives access to several different mapping providers, because they wanted the broadest base of maps from which to choose — namely, as Nate put it, whichever one made the park look nicest. Turns out that was MapQuest.
The basic design for getting points on the map was straightforward: We would use JSON. It would have two primary objects, one for categories — that is, the types of icons we would plot, such as docks, footbridges, monuments, bathrooms, etc. — and another containing the points themselves, keyed to the relevant categories / icons.
Nate and Will worked until about 2 a.m. Saturday, but had a functional map at that time. And after working with Ashton and Meghan, Bryan had the iconography pretty much ready to go first thing Saturday morning.
I spent most of the evening working on GiveCamp stuff in general; I manage the website, Facebook and Twitter accounts, so there was a bunch of stuff I had to get out to the campers. But I managed to hit the sack at about midnight, which is early by GiveCamp standards.
Saturday
On Saturday morning at 9 a.m. we had a functional map and all the art. That was both a complete relief and a bit shocking, as I have been to three GiveCamps previously and not a one of them was anywhere near its goal at 9 p.m. on Saturday, nonetheless 9 a.m.
In fact, I was really the only holdup on our project, as I had not begun work on the WordPress backend.
The concept of the backend was simple: I would create a custom post type in WordPress, with a custom taxonomy, that directly related to the map. The taxonomy would be the map categories, and the custom posts each a point on the map. Ashton and Meghan, who are used to using WordPress, could then add, edit and delete points on the map just as they would any other content.
All my custom posts really needed was a few custom fields: One to record latitude, one to record longitude, and two to record external hyperlink text and links, which they wanted for certain points on the map.
Piece of cake; a few meta boxes would give me the custom fields. I would use the Google Maps API to put a map into the post editor, along with a draggable marker that they could place wherever they wanted the related icon to appear, which in turn would populate the lat / lng textboxes with the correct coordinates.
(It doesn’t matter which mapping API gives coordinates or renders them; after all, a point on the Earth is a fact, and so long as your tiles are to scale, you can mix and match APIs as you please, which is the whole idea behind Leaflet.)
I just needed to hook the CRUD events for the taxonomy and posts, write new JSON any time one of those events fired, and our map would be up-to-date at all times.
It took me about eight hours, largely because WordPress changed how it hooks custom taxonomy CRUD and it’s poorly documented. But by dinner time, we were pretty much done, save some tweaking. Which, again, is amazing.
Nate pretty much spent the entire day fixing TEA’s website skin, and pretty much had it ready to go by 9 p.m. So we were wildly ahead of the game, and while it felt great, I didn’t quite know what to make of it, because normally at that time things have come completely apart.
Interestingly, being ahead of the game was par for the course at this year’s GiveCamp; a few teams were a distance from their goals on Saturday night, but most were “green,” in the vernacular of coordinators Rachel Nichols and Kelley Muir.
Sunday
We did hit a few bumps on Sunday. It turns out we did not fully test the JSON I was sending out via my plugin, and it was causing parsing errors on the live version of the map, a fact we didn’t discover until about 90 minutes before we were supposed to present our work.
I’m glad to say Will was very understanding of my short temper over that ultimately meaningless bump.
As that was getting fixed, the map also shifted on us, putting playgrounds in the middle of streets and parking in the center of retention ponds. Needless to say, that wasn’t good, but it was a quick fix once we had the JSON straightened out. We managed to have everything nailed down with about 5 minutes to go before we presented.
That felt more like GiveCamp.
The Result
TEA is quite pleased with its new map and mobile skin.
You can see both on their website. Just shrink your browser window down to 480 pixels or less to see the mobile skin, and click on “Park Map,” under “About The Park,” to see that.
I cannot say enough good things about the team that made it happen. I wound up helping several other teams and generally being distracted the entire weekend, even in the midst of finally getting around to doing my part of the project, and they pretty much managed themselves.
As I’ve said before, when I am answerable for an end result, I like to provide a responsibility, an expectation and a deadline, and let the person doing the work do the work. Nate, Will and Bryan all performed under that freedom remarkably well.
This year, I stayed at Microsoft NERD, the host of GiveCamp, and I would offer to anyone considering doing that two valuable lessons:
- Concrete floors are hard, so you’ll want more padding than I brought to sleep upon. I broke down early Sunday morning, abandoned my tent and slept on a couch.
- Concrete floors echo sound, so you’ll want to bring some sort of earplugs or headphones, as GiveCamp goes all night, every night, and no matter how hard people try to be respectful, voices carry.
- The lights at NERD are automated to turn on anytime someone moves. Thus, they’re pretty much on all weekend. Bring a sleep mask.
All links in this post on delicious: https://delicious.com/dougvdotcom/more-than-one-way-to-skin-a-map-new-england-givecamp-2013-recap