Showing Instagram photos and videos on a Leaflet map

I've created a new plugin, Leaflet.Instagram, that allows you to add Instagram photos and videos to your maps. You can load photos with the Instagram API or from CartoDB.

You can choose to show your images in a popup or a lightbox. The small images on the map can be clustered. 

The plugin is very easy to use:

L.instagram('https://api.instagram.com/v1/users/209969753/media/recent?access_token=your_access_token').addTo(map);

Just add the url and endpoint to the Leaflet API together with your access token. If you don't want to expose you're access token, I suggest that you create a proxy or sync your data with CartoDB. The plugin has built-in support for CartoDB:

L.instagram('http://turban.cartodb.com/api/v2/sql?q=SELECT * FROM instagram WHERE the_geom && ST_SetSRID(ST_MakeBox2D(ST_Point(5.952, 59.329), ST_Point(5.982, 59.342)), 4326)').addTo(map); 

Using CartoDB has the added benefit of allowing a wide range of spatial queries. In the query above I'm only fetching images within the geographic bounds of the island. 

The interactive map looks like this (try it in fullscreen!):

[ Fullscreen map | Code ]

Click on a image to see a bigger version or to play a video.