How to display geotagged photos from my domain in leaflet

Question

I already asked a question similar to this then I used a plugin of displaying geotagged photos in leaflet from (Google+ photos|Instagram / CartoDB|Norvegiana ) photos in leaflet This plugin gets photos over the internet connection (Google+ photos|Instagram / CartoDB|Norvegiana ) I want the same but from photos hosted in my domain .

Answer 1

Though all the examples on the Leaflet.Photo plugin page involve getting data via an API, all you really need is an array of objects with the latitude, longitude and URL(s) for each image. For example:

var photos = [{
  "lat": 34.04555452,
  "lng": -118.3001509,
  "thumbnail": "http://www.mydomain.com/photo1_thumb.jpg",
  "url": "http://www.mydomain.com/photo1.jpg",
  "name": "My First Photo"
}, {
  "lat": 34.0522683,
  "lng": -118.2698607,
  "thumbnail": "http://www.mydomain.com/photo2_thumb.jpg",
  "url": "http://www.mydomain.com/photo2.jpg",
  "name": "My Second Photo"
}, {
  "lat": 34.06281904,
  "lng": -118.2809651,
  "thumbnail": "http://www.mydomain.com/photo3_thumb.jpg",
  "url": "http://www.mydomain.com/photo3.jpg",
  "name": "My Third Photo"
}]

var photoLayer = L.photo.cluster().on('click', function(evt) {
  var photo = evt.layer.photo;
  var template = '<img src="{url}" /></a><p>{name}</p>';
  evt.layer.bindPopup(L.Util.template(template, photo)).openPopup();
});

photoLayer.add(photos).addTo(map);

The lat, lng and thumbnail properties are required, since these are what the plugin uses to create the marker, but you can add any other properties you like, such as the full-size image URL, caption text, styling parameters, etc. The simplest way to use photos from your own domain is just to store this array of objects in your script, or as a separate file on your server, which you could load either with the page or later via AJAX.

Here's an example fiddle with the objects included in the script:

http://jsfiddle.net/nathansnider/q8ar6wu9/