Bonjour/Bonsoir,

j'ai trouvé un très beau script permettant d'afficher les photos Flickr sur une carte Leaflet.js, sous la forme d'un carrousel en dessous. Les images taguées au dessus d'une zone s'affichent
http://tannerjt.github.io/natl-park-gallery/

Je souhaiterai l'adapter pour qu'il prenne les photos de mon piwigo, selon un code que je mettrai dans la colonne "comment" de l'image dans la base de données mysql.

Je ne sais pas du tout comment faire.. le code en question est


/* APPLICATION FLICKR FUNCTIONS */
function getImages() {
    // get current extent
    var mapBounds = map.getBounds();
    var centroid;
    // clear current gallery
    current_gallery = {};
    current_req_length = 0;
    queue_length = 0;
    // calculate number of matches for queue
    $.each(np_geo.getLayers(), function (i, l) {
        // get centroid of layer
        centroid = turf.centroid(l.feature);
        var latlng = L.latLng([centroid.geometry.coordinates[1], centroid.geometry.coordinates[0]]);
        if(mapBounds.contains(latlng)) {
            current_req_length += 1;
        }
    });
    // Make flickr calls
    $.each(np_geo.getLayers(), function (i, l) {
        // get centroid of layer
        centroid = turf.centroid(l.feature);
        var latlng = L.latLng([centroid.geometry.coordinates[1], centroid.geometry.coordinates[0]]);
        if(mapBounds.contains(latlng)) {
            if(l.feature.properties['UNIT_NAME'] in cached) {
                // push existing parks with images
                current_gallery[l.feature.properties['UNIT_NAME']] = cached[l.feature.properties['UNIT_NAME']];
                queue_length += 1;
                if(queue_length == current_req_length) {
                    buildHtml(l.feature.properties['UNIT_NAME']);
                }
            } else {
                callFlickr(l.feature, l.feature.properties['UNIT_NAME']);
            }
        }
    });
}

function callFlickr(f, parkName) {
    var bbox = turf.extent(f.geometry).join(",");
    var tags = parkName.split(" ");
    tags.push("park");
    tags.push("national");
    tags = tags.join(",");
    $.ajax({
        url : flickr_config.url,
        //jsonp : "jsonFlickrApi",
        dataType : 'json',
        data : {
            api_key : flickr_config.key,
            tags : tags,
            bbox : bbox,
            format : 'json',
            method : 'flickr.photos.search',
            per_page : flickr_config.maxNumImages,
            nojsoncallback : 1
        }
    }).done(function (resp) {
        queue_length += 1;
        if(resp.stat !== "ok") {
            if(queue_length == current_req_length) {
                buildHtml(parkName)
            }
            return;
        }
        var photos = [];
        $.each(resp.photos.photo, function (i, v) {
            photos.push("https://farm" + v.farm + ".staticflickr.com/" + v.server + "/" + v.id + "_" + v.secret + "_n.jpg");
        });
        // add to cache
        cached[parkName] = photos;
        current_gallery[parkName] = photos;
        if(queue_length == current_req_length) {
            buildHtml(parkName);
        }
    });
}




J'avais déjà réussi a afficher les images sur markercluster grâce à 

var gallery='https://mappingforyou.eu/gallery/imagesInCat.php?catID=35';

// Photos
var photoLayer = L.photo.cluster({
    spiderfyDistanceMultiplier: 1.2
}).on('click', function(evt) {
    evt.layer.bindPopup(L.Util.template('<a href="{url}" target="_blank"><img src="{photo}"/></a><p style="margin: 0 !important;">{caption} <span style="display:inline-block; width: 100%; font-size: 0.8em; white-space: nowrap; overflow:hidden !important; text-overflow: ellipsis;">{comment}<br>{caption}</span></p>', evt.layer.photo), {
        className: 'leaflet-popup-photo',
        minWidth: 250
    }).openPopup();
});

reqwest({
    url: gallery,
    type: 'jsonp',
    success: function(data) {
        var photos = [];

        for (var i = 0; i < data.length; i++) {
            var photo = data[i];
            if (photo[0]) {
                photos.push({
                    lat: photo[0],
                    lng: photo[1],
                    url: photo[4],
                    photo: photo[5],
                    caption: photo[2],
                    comment: photo[6],
                    thumbnail: photo[3]
                });
            }
        }

        photoLayer.add(photos).addTo(map);
        //      map.fitBounds(photoLayer.getBounds());
    }
});

Dernière modification par vincedchart (2022-08-28 19:21:54)