1

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()); 
    } 
};
1
  • @TomazicM ok done
    – Vincent Dc
    Jan 6, 2022 at 11:13

1 Answer 1

2

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
}); 
1
  • the code is up and running!! I really appreciate your kind help. I'll love to play with that. Thank you @TomazicM Best regards :) ibb.co/rwrrZdQ
    – Vincent Dc
    Jan 6, 2022 at 13:38

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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