Mapping Photos with the Leaflet.Instagram Plugin

About a month ago, I posted about accessing Twitter data via R.  Now, I will cover accessing and mapping photos from Instagram using the Leaflet.Instagram plugin which can be found on github: https://github.com/turban/Leaflet.Instagram and Instagram API.

If you want to skip ahead and see the resulting map, then visit: http://webmapexamples.net/instabaltimore.html

Note: The difficulty of this project is moderate to difficult based on the large number of Leaflet plugins and other code that you will have to use.  However, the results are terrific.  There are several different implementations of the code so you have a few options to pick and choose from.

Getting an account...
First, head over to the Instagram page for developers: https://instagram.com/developer/

Leaflet.Instagram Plugin
In addition to the Instagram plugin for Leaflet, you will need to install several other scripts including:

1. Leaflet 
2. reqwest
3. Leaflet.markercluster
4. jQuery
5. fancyBox

You will need to ensure that the files are placed in correct directories and referenced correctly in your code.  If you a receiving errors, check to make sure everything is correct!   There are also several CSS files for styling.  Of course, you can find examples of webpages on github to make sure that everything works before trying your own example.

Getting an Access Token

In order to access Instagram, you will need an Access Token.  You will see this in the plugin code. This is different from your user id, etc. found on the Instagram API page.  Several websites will help you generate a token as well.

The Code
Making sure all of the JavaScript libraries are referenced properly is the toughest part.  Otherwise, the code comes down to just three pieces in Leaflet:

1. Creating a variable for map for the <div> element
2. Adding a basemap via L.tileLayer
3. Making a call to the Instagram API which depends on what you want
1. It can be based on tag, user, location,etc.

The Instagram API is well organized and easy to understand how to retrieve data.

In this case, I retrieved recent results from my Instagram photos.  Other criteria to select photos include: relationships, media, comments, liked, tagged, by location, and geography.

The Results
I created a quick map of photos from walking around Baltimore's Inner Harbor.  Unfortunately, it was cloudy, so I won't be winning any awards for great photos!  Head over to http://webmapexamples.net/instabaltimore.html to see the results! Clicking on the popups will show a larger picture, which is also clickable to take you to the original version on Instagram.

Walla! An interactive map of Instagram photos!

The map updates in real time, so as soon a photo is posted and the webpage refreshed, it appears.  If you want to see another example, head on over to the plugin creator's nice map where you can also see the clustering effect (photos grouped and numbered together) at: http://turban.github.io/Leaflet.Instagram/examples/fancybox.html or see below for the map of photos from Sjernaroy, Norway.