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.
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);
 |
| 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.
Comments
Thanks,
Fabrício.
Thanks for this great work. I've actually managed to get it working on using the Instagram API in a combination of Mapbox and Leaflet (a real achievement for me!) and its functionality is as you've shown here. I was hoping to have more images populate the map and I don't seem to see a way to make use of the parameters in the user endpoint, specifically I'd like to use count. Any suggestions as to how I might go about doing this. I'm sure you're very busy over there but if you get a chance to have a look, any thoughts would be much appreciated. A rough implementation is available at http://intrvls.com/photomap/.
Tusen Takk, Chris
Example of Baltimore's Inner Harbor:
http://webmapexamples.net/instabaltimore.html