0

Some geotagged photos are saved in a Piwigo library, and this page aim is to put them into a Leaflet map only if they fit into the bounding box and are inside a certain category, and display a dropdown menu for the user to change the category. The user moves the map and other photos are loaded, into the new bounding box or window bounds.

An extension to Markercluster (code / introduction), called Leaflet photo (code / introduction) is used to display photos in clusters and thumbnails (image)

The process of loading photos through rewquest (code / introduction) (and jquery, code, if I'm right), calling imagesinCat.php (modified code / introduction), a PHP page that reads through a Mysql database, according to the category and the bounds of the map in the window, works fine

Leaflet Photocluster

However, when moving/zooming the map (event onMoveEnd), the older photos are not removed, and the add up to the new ones, and so if you move the map ten times, all photos would appear eleven times; I've tried things like photoLayer2.clear(), without success;

two, three times the same image

The page is here: https://mappingforyou.eu/test/ .

Divs in the html, including one that holds the dropdown menu and calls an event:

<div id="map" style="width: 100%; height: 80vh;"></div>
<div style="width: 100%; height: 4vh;">
        <form method="post" class="stroke-text">
        <label labelfor="aforma" id="aformb">Photos:</label>
        <select size="1" id="photosdropdown" name="photosdropdown" class="stroke-text" id="photosdropdown" onchange="photoTrigger(this)">
    <option value="35">Paysage</option>
    <option value="12">Tout</option>
    <option value="4">Ile de France</option>
</select>
    </form> 
</div>
<div style="width: 100%; height: 15vh;" id="owl-demo" class="owl-carousel">


</div>

javascript :

// map
const map = L.map('map').setView([48.505, 2.09], 11);

const tiles = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 18,
    attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(map);

let catID = 35;

// Photos dropdo



// piwigo

function loadPiwigo() {

    if (map.hasLayer(photoLayer2)) {
        photoLayer2.removeLayers();
    };
    var photoLayer2 = 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: 'https://mappingforyou.eu/gallery/imagesInCat.php?catID=' + catID + '&minLat=' + map.getBounds().getSouthWest().lat + '&maxLat=' + map.getBounds().getNorthEast().lat + '&minLng=' + map.getBounds().getSouthWest().lng + '&maxLng=' + map.getBounds().getNorthEast().lng,
        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]
                    });
                }
            }

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

};

window.addEventListener('load', loadPiwigo);
map.on('moveend', loadPiwigo);

function photoTrigger() {
    photosdropdown_getready = document.getElementById("photosdropdown");
    console.log("Photoscat:" + photosdropdown_getready.value);
    catID = photosdropdown_getready.value;
    console.log("Transferredcatphoto:" + catID);

    loadPiwigo;
};
2
  • Thanks, @TomazicM . This is updated
    – Vincent Dc
    Oct 31 at 16:50
  • @TomazicM looks like I've just solved it. I'll post the answer in a few minutes
    – Vincent Dc
    Oct 31 at 17:44

0

Your Answer

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

Browse other questions tagged or ask your own question.