Collaborative Heatmap: Fav. Bike Route


I’ve been playing around with a cool, real-time, client-side code driven cloud database called Firebase for the last while, and here is one of the projects that came out of it.

There is a local need to identify the streets and other routes that are actually used by cyclists in Prince George, BC (not just “where are the bike routes?”). That sounds like a heatmap to me. Using jQuery Mobile (frontend), Google Maps API (maps), and Firebase (backend), the user can add a direction line to the map (“Add Route” button), modify the directions if they do not show the desired route (drag the route or end points), and save the route (“Submit Route” button). Once the route has been saved, the heatmap will update to reflect the addition. And the cool part is: it will update everyone else’s view in real time, which is important because I know this will go viral. Also cool, I didn’t write a single line of server-side code.

Go ahead and play with the map – add as many lines as you want. I’ve set it so the directions default to Prince George, but you can drag and submit them wherever you want. The biggest limitation of the map is that the directions are converted to points to feed into the heatmap, so in the end it is really a heatmap of most popular corners, not routes.

Disclaimer: this seems to work fine in my versions of Chrome and IE (surprise), but not my iPad’s Safari. Please let me know if you have any insight.


One thought on “Collaborative Heatmap: Fav. Bike Route

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s