Open Data Day Hack

Dec 4th was Open Data Day and coders across the globe were pushing, pulling, analyzing and scraping open data. Spare time has been hard to come by recently so I’m a little late to the party, but I’m happy with the outcome. I thought I’d share what I came up with and how it all came together.

So, what is it?

I created a Google Maps based application that lets users query Mecklenburg County, NC (Charlotte) building permits by location and a number of other parameters. Want to know how many building permits were pulled around 2319 Providence Rd? Sure. Only concerned with permits pulled in 2009? Filter by date. Only interested in finding the new McMansions in the neighborhood? Filter by square footage.

How does it work?

Users determine their search location by either entering an address or clicking the map. Setting the search location drops a marker on the map surrounded by a circular search area. This circle size can be easily changed to query a smaller or larger area. I limit the search area to a maximum radius of 2.5 km to keep the number of results from getting out of hand. My original design adjusted the search area with another slider in the left panel but I found that adjusting the size on the map was much more intuitive.

Once results are visible, we can narrow these down by a number of different parameters found on the left panel of the application. Currently you can filter by a range of square footage, project cost or permit issue date. I find that using sliders is much simpler that typing discrete values of upper and lower bounds. I can also limit the input range for parameters to keep users from searching for project costs with negative numbers. I made sure to style the “active” filters with a bolder look and a drop shadow (sorry IE) to let users know what filters they were using.

To get project details, users can click a marker and the results on the right side of the page should scroll to the corresponding building permit and highlight it. For now I’m showing fairly limited information but this could be easily expanded to show more or a link could be added to show full building permit information (I’m not sure if Mecklenburg County exposes this).

Under the hood

So it’s obvious I’m using Google Maps, nothing new here. With the latest release Google now allows you to animate your markers as they are added to the map. This is how I’m dropping/bouncing them onto the page. It took me a while to decide if this was tacky or cool. I chose cool.

This distance widget came from a Fun with MVC Objects article written by Luke Mahe from the Google Geo team. This is really where a lot of the magic happens. If I would have had to write this myself it would have taken much longer to push out this quick hack.

I’m sure a lot of you will notice right off the bat that I’m using jQuery UI for the sliders. It’s too easy not to.

As far as the “Open Data” goes, I’m pulling everything from Mecklenburg County’s DataPortal which was recently released to easily share spatial data. From here users can connect to WMS services, download KML, or link into the GIS Data Center to download data in other formats. But I prefer to pull straight from a series of RESTful Web Services that are powered by a great open source project.

Ok, show me.

View the application live at http://jasonsanford.github.io/open-data-day-hack/

I also created a short screen cast showing it in action.