I'm in a program at GT called Grand Challenges, they gave us some classes on how to work well in groups and with others, and then talked to us a lot about how to solve insurmountable problems. So, right now my group is working on the cliché CO2 emissions problem. Even more cliché is that our solution is an app. We want to use live traffic data and some data from other sources to provide people with multimodal commute options. Google will give you directions for your car or your bike or your feet, but they don't allow you to mix driving and taking a bus, for example.

We want to provide people with emissions and health data for possible routes, as in, ""if you drive and then bike this far, you'll burn this many calories and emit this many kilograms of CO2." We're almost in the development stage, and we needed to come up some mockups to pitch our idea to get some more funding from the program. I wanted the maps to look unique, so I spent an afternoon toying with MapBox. I followed their instructions on feeding publicly available open street map data (free) into MapBox. I played around with some minimalistic styling, and ended up with something kinda pretty.

Next I needed to add some routes on top, nothing fancy, just something dumb. I used the Google Maps HTTP API for some directions, using some waypoints to make the routes look a little more interesting. The API comes back with a list of steps, which each have a polyline object that contains a series of lat,long coordinates in an ASCII compressed format to save space. I used the polyline library to extract them all out, before plugging them into a leaflet.js script that overlays the polyline back on top of the MapBox hosted map. Which is a convoluted way of saying, I made this:

This came out way better than I ever hoped. So, all that was left was to punch it into a mockup of the app in Photoshop. Which, also came out way better than I hoped. I'm really not a designer. Sometimes I open Photoshop or Illustrator and magic happens, and sometimes it just doesn't. I really don't know what I'm doing. I used some CC licensed icons from the Noun Project and some mockup helper helper file I found on Smashing Magazine somewhere.