twitter
Wednesday
Mar232011

« mapstagram: mapping instagram photos in real-time »

For those of you who are uninterested in the details behind Mapstagram and just wanna see the damn thing, click the logo:

 

The Story

Instagram has quickly become one of my favorite apps on the iPhone.  It combines photography, social networking, and mobile in a seamless and fun way.  It goes to show that even though Facebook is dominating the land of social, there's still room for innovation and niches.

Although Instagram has been out since October, it still exists purely as a mobile app.  No website and therefore no way to show off your Instagram "profile" (other than through individual sharing of pics via Facebook, Twitter, etc.).  I had a sneaking suspicion that they had something in the works, so when Instagram recently announced their API, I was naturally excited.  Why build out a web interface (although they probably will do that eventually), when you can release an API and harness the power of the developer community?

So I took a look at their docs, and wasn't surprised to see the typical REST-style API with JSON-formatted payloads.  I registered to be an API developer, opened up Eclipse, and off I went.  I began by creating a pretty boring grid display of my own Instagram pics:

Grid display of my Instagram photos using REST API

Meh.  I noticed that the geo location for each photo was included in the response, so then I created a simple mashup by displaying my pics as markers on Google Maps:

Map display of my Instagram photos using REST API

Kinda cool but still nothing super special.  Then literally the next day, Instagram announced their Real-Time API.  What this means is that you can subscribe to photos based on certain aspects such as tags, named locations, or geo coordinates, and whenever a photo is uploaded by a user that matches that criteria, you'll receive a notification from Instagram in real-time.  Awesome sauce!

And this is where the idea of Mapstagram took off.  I began architecting a backend system to handle real-time updates from Instagram (technical details below), while my friend, Jochem Geerdink, worked on the creative and front-end side.  Together, we created a dynamic visual display of Instagram photos on Google Maps in real-time.  

We give you Mapstagram:

Mapstagram

Technical Details 

High level real-time flow:

  1. Instagram user uploads new geo-tagged photo via his/her iPhone.
  2. Instagram processes this update , and immediately notifies all subscribers (such as Mapstagram) that are subscribed to that photo's geo coordinates.
  3. Mapstagram receives the notification, then queries Instagram for the new photo(s) in that geo location.
  4. Mapstagram sends these new photos to all connected clients.
  5. Photos are displayed on Google Maps, and added to the scrolling list of photo updates.  

For the software stack, I decided to toy with some technologies that I've dabbled with in the past, but never got the chance to go in depth with:

  • Google App Engine (GAE) - It's free and super easy to develop/deploy on using the Eclipse plugin.  Here are some of the GAE features I'm using:
    • Schema-less Datastore - essentially a wrapper around BigTable that implements the JDO interface
    • Memcache - distributed memory cache
    • Channel API - GAE's implementation of the Comet model - this was a crucial piece to Mapstagram's real-time architecture
    • URL Fetch API - communication API for external calls
    • Cron Service - a way to perform scheduled tasks
  • Google Maps Javascript API V3
    • Markers - I customized the markers by using Instagram's thumbnail URLs.  At present, when you click the small image, I'm actually removing the marker, and creating a new marker with the URL to a larger image.  Somewhat of a hack but it works - kinda clever no?  I plan on changing this in the future.
    • Events - I use the marker's "click" event to implement the aforementioned hack.  
  • jQuery - I have the most experience with YUI, but I know jQuery is the most popular JS library so I went with it:
    • $.ajax() - For AJAX calls to server
    • $.queue() - Used to queue the pipeline of real-time pics, as well as the "Replay" feature
    • Effects - To perform basic animations
    • Timeago plugin - Used to display relative time (e.g. "2 mins ago")

 

Future

Mapstagram started off with me goofing around with the Instagram API, and quickly became a fun 2-person project with Jochem.  We definitely have more ideas and improvements that we'd love to add to Mapstagram, so hopefully we'll have the time and energy to implement them.  Feedback is definitely welcome!

Look for me (eimajination) and Jochem (orangeup) on Instagram, and add us to your friend list!

References (2)

References allow you to track sources for this article, as well as articles that were written in response to this article.

Reader Comments (12)

Wow, this is great. Thanks for providing the information you did. I have been working on something similar just of my photos as fun little side project. It would be great to talk to you a bit about what you guys did. Feel free to email if you have a sec.

Thanks much!

Again, you guys did a great job!

March 24, 2011 at 1:38 PM | Unregistered CommenterJustin

Thanks Justin - glad you like! I'd love to discuss the project with you (got your email and will respond).

March 25, 2011 at 10:57 AM | Registered Commenterjamie

Fun and creative. Looking forward to see what else you would add to it.

March 26, 2011 at 1:18 AM | Unregistered CommenterOmid

Thanks Omid! Yeah we have more ideas but too bad we both have full-time jobs. =) How's life at Google?

March 26, 2011 at 1:25 PM | Registered Commenterjamie

I love your work. Will you be adding the Twin Cities to your map?

April 12, 2011 at 12:28 PM | Unregistered CommenterPeter

Hi Peter,

Since you're the first person to request a city, we made it happen. Check out Minneapolis: http://www.mapstagram.com.

(Sorry Durham)

April 12, 2011 at 2:21 PM | Registered Commenterjamie

I appreciate it!

This is awesome. This tool will enable local start-ups to flourish. Combining Mapstagram and Twitter is like combining fuel with fire; it's a great one-two punch. Designers integrating both widgets on the same website will inspire local conversations. Please develop Mapstagram into a "subscriber-follower" service that can be embedded as a widget and I will put together a great case study for you by summer's end in the Twin Cities.

Mapstagram provides local merchants a "good enough" excuse to start curating original content. Instagram is a great platform choice with a small learning curve and low barrier to entry. Mapstagram is a great "brand" name. Using Mapstagram will motivate local merchants to capture creative photos from visiting customers. Patrons are more likely to share photos of themselves if Instagram presents itself as a gift.

Small businesses will choose Mapstagram because of the path it leaves behind for prospective customers.

Live curation is the missing ingredient for local economies to be successful. I wish you great success.

April 13, 2011 at 4:32 PM | Unregistered CommenterPeter

Great work!
If you have a few minutes i have also some questions about mapstagram.
You can mail me when you have time.

Thanks!

September 3, 2011 at 7:54 AM | Unregistered CommenterMarko

I am very thank you to share this article,it’s very good,I hope you can share more,and I will continue to read,thanks!

December 21, 2011 at 4:20 AM | Unregistered Commenterconsumer protection agency

Great job! Do you plan to add europe and the rest of the world?

January 3, 2012 at 5:35 PM | Unregistered Commenterignazio

Im really impressed that theres so much about this subject thats been uncovered and you did it so well.

June 7, 2012 at 3:26 AM | Unregistered CommenterSoftware Consultant in Austin

Hi !

I just found out about Mapstagram and I love it ! You guys did a great job and i would love to see Paris as an available city (Ok, I live in Paris!)

I don't see what brings the Sign in with Instagram feature to the feature but I heard that Instagram ask to register the user in the API, is it why you did it ?
Also, is the 10 minutes limit used not to reach Instagram request limit ?

Anyway, if you guys want to make it open source, that would be great because we all could add our cities :)

November 10, 2012 at 11:49 AM | Unregistered CommenterLaurent

PostPost a New Comment

Enter your information below to add a new comment.

My response is on my own website »
Author Email (optional):
Author URL (optional):
Post:
 
Some HTML allowed: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>