Friday, 29 August 2014

Showing geotagged photos on a Leaflet map

Using Instagram for my real-time travel map had too many limitations, so I decided to use Google+ photos or Picasa Web Albums instead. I've create a new plugin, Leaflet.Photo, that allows you to add geotagged photos to your map, from any source.

The plugin plays well with the great Leaflet.markercluster plugin, showing your photos in clusters. To make the plugin more versatile, it doesn't deal with AJAX loading or image presentation except the thumbnails on the map. Use your AJAX loader of choice, and simply pass on an array of photo objects to the plugin. 

The photo objects can include the properties you like, but the following are required:
  • lat: latitude of photo
  • lng: longitude og photo
  • thumbnail: url to thumbnail photo
I've kept the squared thumbnails of Instagram, as I think it look nicer than variable size thumbnails. Since the photos can have any dimensions, I'm using a CSS technique to crop and center the thumbnails. 

I've created three examples using Picasa Web Albums Data API, CartoDB (synced with Instagram) and Norvegiana API. With CartoDB you can easily get the required photo properties by manipulating the SQL query. Other APIs will require some data parsing before you pass on the photo objects to the plugin. All examples show the photos in a popup when you click/tap on them, but do whatever you like! On my travel map (click on "Bilder"), I'm using my own lightbox showing all photos in a cluster.

Google+ photos


Photos and videos from Google+. See the small animated GIF video thumbnails. 


Instagram / CartoDB


Instagram photos synced with CartoDB. 


Norvegiana 


Historic photos of Oslo from Norvegiana API. 

Innlegg av Kultur- og naturreise.


Enjoy! :-)

6 comments:

  1. Anonymous24 September 2014 at 19:40

    Bjorn I *love* this. Beautiful.

    ReplyDelete
  2. Unknown29 September 2014 at 16:58

    This is excellent. The animated icons / videos are especially cool.

    I find the icons a little difficult to select on my smartphone - it takes a couple of attempts to open the marker popup.

    ReplyDelete
  3. Unknown10 May 2015 at 20:32

    I love what you have shared here, it solved a big headache for me (I am an extreme amateur when it comes to code).

    I have tested it on my site here: http://map.gobiyond.net/

    I do have one question though. I am trying to add another layer to my map to show kml data (the plan is to eventually have this updated live using a DeLorme inReach). I can get the kml to appear on a standalone page (http://map.gobiyond.net/kml.html) but as soon as I try to merge the code with the picasa map page the map does not appear. Is there any particular order code needs to be written? Any help would be appreciated, apologies if it seems vague as to what I'm asking.

    ReplyDelete
  4. Unknown17 November 2015 at 09:58

    Hello,
    really cool job, I really like it but I'm having an issue with using your Leaflet.Photo, my browser is complaining about L.Photo.Cluster, it says: "Uncaught TypeError: Cannot read property 'Cluster' of undefined.. ", and is it even possible to place photos from a directory placed in Home on my computer?

    ReplyDelete
  5. Unknown21 April 2016 at 10:13

    I Want the same effect but with localhost images no connexion

    ReplyDelete
  6. Anonymous21 March 2018 at 15:53

    Is this still working with newer versions of Leaflet ?

    ReplyDelete