002

Can I run on every street within a year and track my progress?

# SVG, Animation, Running

Description

I like to run, but like most people, I have trouble with the motivation. I found that setting goals and tracking them help me maintain interest. In the past I had tracked only miles, but was interested to see where I ran. In addition to the tracking motivation, I wanted to use this year’s running as an excuse to explore my local environment. I had lived on Wilmington Island for about six years, but had only traveled on roads that took me where I wanted to go. Life is short! I traced a map of the island in Illustrator and used that vector data as a way to distinguish between have and have not run on. I found so many cool little neighborhoods! I had no idea there were so many houses on our seemingly small island.

Visit pseudosuede.com/2015running for the in progress version.

Checklist

  1. Can I load the SVG data?
  2. Can I animate the SVG monthly data?
  3. Allow the user to resize and/or reposition the map on small screens.
  4. Allow the user to swipe through monthly data.
  5. Can I utilize the Google Map API?

Checklist Tests

  1. Allow the user to resize and/or reposition the map on small screens.

I'm still in the progress of figuring out the correct calculations to build into the jQuery functions, but I am well on my way. I want there to be a elegant solution for viewing the map data when a user of the site visits the map using a small screen. I'm not sure this is the best way but I have learned a lot during this experiment. The following is my current CodePen trials.

See the Pen Image Positioning In Progress by sethakkerman (@sethakkerman) on CodePen.