1

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 .

  • i tried the code but it dose not show the photos in my map and it shows this error: Cannot read property 'cluster' of undefined which is related to this line of code: L.photo.cluster() do i need to add additional leflet package in it ? – maryam samani Nov 11 '18 at 3:17
3

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/

  • It worked fine ,only one small issues the close popup images is not like usual here the usual : i.imgur.com/PbSbiWq.png and our close button :i.imgur.com/DuDmH2I.png – Rabie Ben Apr 24 '16 at 10:32
  • The author is using some custom css in those examples (here). It's not really part of the plugin, but it does look nice, and probably makes it more mobile-friendly. If you use that css, you just need to add the leaflet-popup-photo class to your popup. Example here – nathansnider Apr 25 '16 at 21:27
  • You are a master, It worked as I wanted . – Rabie Ben Apr 26 '16 at 20:30

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.