Leaflet – Fixing Broken Relation of Flickr Photos and Marker Cluster

leafletleaflet-pluginsphotospopup

I intend to use Jose Mamira's Flickr plugin to show clustered photos from Flickr, with their thumbnail (first all photos, for this exemple, then I would easily change the code to display only my own photos). This is Jose Mamira's flickr plugin using the Markercluster plugin too:

https://josemamira.github.io/saxweb/src/plugin/photo/Leaflet.Photo.js
https://josemamira.github.io/saxweb/src/plugin/photo/lib/cluster/leaflet.markercluster.js

The fact is I do like this plugin, but the images are not showing, like you can see below.

This is link to the Flickr photo that does not work

url: 'https://www.flickr.com/photos/'+p.id+'_'+p.secret+'.jpg',

but I don't know how to fix it. Can you help me fix it please?

This is official plugin example, where popup photo does not work:
https://josemamira.github.io/saxweb/src/plugin/photo/index.html

enter image description here

This is the code:

// Get JSON request
var xhr= new XMLHttpRequest();
xhr.open("GET",flickrAPI,true);   // 
xhr.send();
xhr.onreadystatechange=function(){
    if(xhr.readyState==4 && xhr.status==200) {
        var data = JSON.parse(xhr.responseText);
        console.log(data.photos);
        //alert('total geophotos: '+ data.photos.photo.length);
        var photos = [];
        for (var i = 0; i < data.photos.photo.length; i++) {
            var p = data.photos.photo[i];       
            // Date
            var pdate = new Date(p.dateupload*1000);
            var months = ['January','February','March','April','May','June','July','August','Septepmber','October','November','December'];
            pdate = pdate.getDate()+'&nbsp;'+months[pdate.getMonth()]+'&nbsp;'+pdate.getFullYear();
            // Push             
            photos.push({
                    lat: p.latitude,
                    lng: p.longitude,                       
                    url: 'https://www.flickr.com/photos/'+p.id+'_'+p.secret+'.jpg',
                    caption: '<a id="'+p.id+'" title="'+p.title+'" href="https://www.flickr.com/photos/'+p.owner+'/'+p.id+'/" target="_new">'+p.title+'</a><br/>'+
                            '<a href="https://www.flickr.com/">Flickr</a> &copy;&nbsp;<a href="http://www.flickr.com/photos/'+p.owner+'/" target="_new">'+p.ownername+'</a>, '+
                            pdate,
                    thumbnail:p.url_t
            }); 
        } 
        photoLayer.add(photos).addTo(map);
        map.fitBounds(photoLayer.getBounds()); 
    } 
};

Best Answer

I'm not familiar with Flicker, but obviously link to individual photo

url: 'https://www.flickr.com/photos/' + p.id + '_' + p.secret + '.jpg'

does not work any more.

After some experimenting on the basis of thumbnail URL p.url_t I found out that link to individual photo should look like this:

url: 'https://live.staticflickr.com/' + p.server + '/' + p.id + '_' + p.secret + '.jpg'

So relevant part of the code should be:

photos.push({
  lat: p.latitude,
  lng: p.longitude,                     
  url: 'https://live.staticflickr.com/' + p.server + '/' + p.id + '_' + p.secret + '.jpg',
  caption: '<a id="'+p.id+'" title="'+p.title+'" href="https://www.flickr.com/photos/'+p.owner+'/'+p.id+'/" target="_new">'+p.title+'</a><br/>'+
    '<a href="https://www.flickr.com/">Flickr</a> &copy;&nbsp;<a href="http://www.flickr.com/photos/'+p.owner+'/" target="_new">'+p.ownername+'</a>, '+
    pdate,
  thumbnail:p.url_t
});
Related Question