Saturday, February 9, 2013

Virtual Map - a small project for the vdhackathon

Last month Panama celebrated a hackathon against domestic violence. It was a two-day event where developers met with non-profit organizations and government agencies to help them solve some of their issues through the use of technology. You can read a little bit more at this site.

I participated as a developer, and chose to work on the "Virtual Map" project. Our goal was to create an online form where victims could anonymously send info about their situation and get help from EEM, a non-profit organization that promotes women rights. EEM would then be able to collect stats, generate reports, and plot results over a map to see which areas in the country require most help.

We divided the project into several parts, and each developer was assigned a specific task. My task consisted in taking the generated data and plotting it over a map. You can see the end result here.

When the weekend started I had no idea how to render maps or display custom information over them. I thought about using the Google Maps API, but after some research I found an interesting library called Leaflet and decided it was perfect for the job. The thing I liked the most about Leaflet is that it came with a series of easy-to-follow examples, and there was one in particular that would help me a lot during the weekend: Interactive Choropleth Map.

So the weekend was just starting and I already had half of my work done. All I needed to do was take the data from the app and convert it to a format Leaflet could understand.

The data was handed to me as a JSON document with this format, where each province had a well-defined id and a series of domestic violence categories with their corresponding ocurrence count. Since Leaflet only works with data in the GeoJSON format, I had to convert from JSON to GeoJSON. The easiest way I could think of was using this GeoJSON as a base, and just "injecting" it the data I obtained from the app.

Things got a little more interesting because I had to render a different result for each domestic violence category, and the user had to be able to switch between each one. Leaflet's layers were of great help for getting this part done.

Overall I have to say it was a great weekend: I got to meet some new developers, contributed to a social cause, got some free food, and learned how to use Leaflet for plotting maps. I'll definitely be looking forward for next hackathons in my area.

Like I mentioned before, you can see the end result here. And if you want to check out the source code you can visit the Github repository.

No comments: