Fork me on GitHub

Interactive Choropleth Map


The purpose of this project is to provide a resource for those who would like to develop or use a professionally designed interactive choropleth map.


This project was spawned from one of the assignments given out at the 3rd Philly Give Camp. The original project was the answer to a request from the Coalition Against Hunger to create an interactive choropleth map for the purpose of peoperly displaying information gathered in most comprehensive report on hunger in the state of pennsylvania ever generated.

On the drive home from the Philly Give Camp, I got to thinking about all of the improvements that we could do to make this project even better. By the time I got home, I decided what the project really needed was a complete re-write.

And thus, this project was born.

Project Goals:

Create Base Map [done]

Our first goal should be to create an interactive choropleth map based on the Leaflet tutorial.

View tutorial

Standard geoJSON data import [done]

Follow the correct standards on using geoJSON to input information, including any "report" information, into the map.

Map Control Layer [done]

Output the report data into a leaflet map control layer. This is the most browser compatible way to displaying data from the report.

CSS Style Convention

Import all map styles from a CSS file. Currently the tutorial hard-codes this into the javascript. This goes against typical web-conventions

Google Docs Spreadsheet Support

Extend the geoJSON import function to allow for data to be fed in directly from a public google docs spreadsheet.

Style Map Control Layer

Using only CSS, change the location of the map control layer to be outside of the map-area. Try to accomplish this without changing the javascript at all. Currently the map control layer works perfectly in all browsers, perhaps more advanced styling should be limited to IE9+ and all standards browsers.

Map Behavior

  1. Zoom to map object when clicked on
  2. Unzoom when clicked on again