Interactive Map of Michigan Counties

Cultivate Michigan

For this project, we used:

  • ■ SVG
  • ■ KineticJS
  • ■ jQuery

Background

Cultivate Michigan is a campaign to encourage large meal-serving institutions to source 20% of their produce from Michigan farms by the year 2020. In order to encourage more institutions to take part, the campaign leaders asked Mouko to create a list of institutions, grouped by county, updated automatically in real-time as new institutions join and complete their user profile. Ideally, they said, we would create a graphical map showing the locations of member institutions.

Challenges

  1. Usability
    While we had worked with mapping systems in the past, such as Google maps, what was needed in this case was a simpler system focused heavily on design and usability. Users would not be viewing the map to find directions, but would want to learn quickly how wide-spread the program was, who else was a member, and where new membership was badly needed.
  2. Technology
    Identifying a technology that would allow us to draw a detailed map of each Michigan county while also customizing colors and fill patterns in real-time using real-world, real-time data would be a challenge. Making sure it would work in most modern web browsers would be an even bigger challenge.

Solution and Results

We used a free and very stable HTML 5 graphics library called KineticJS and a public domain map of Michigan in Scalable Vector Graphics (SVG) format to create an interactive map. The SVG provided an outline of each Michigan county and by mapping member institutions’ zip codes to corresponding counties, we were able to create a “heat map” showing the distribution of member instutions, with colors ranging from light green (few institutions in a county) to dark green (many institutions in a county). Users can view the precise number of member institutions in a county by moving their mouse to the desired county. Additionally, clicking on a county gently scrolls the user down the page to a listing of member institutions grouped by county, as requested. By using free public domain solutions, we were able to save Cultivate Michigan money in licensing fees and delivered a pretty snazzy map to boot!