Toggling popups on a large number of markers causes strange scroll/zoom behaviour

[David Godfrey]

I have an app I have built which can have a large number of markers active, each marker has an associated popup providing additional data about that marker. These popups are hidden and can either be shown for an individual marker by clicking on it, or through a function that enables all popups for all active markers.

This all works very well, however, periodically (say, at least half the time), when I enable all popups (via a tickbox in my UI that calls a JS function), the leaflet map tries to scroll to the position of the most distant marker in the bottom left quadrant and will sometimes it appears to change the zoom level of the map to zoom in more closely on that marker.

Originally I thought that this was related somehow to that marker being outside the visible area of the map that I was currently displaying, however, I am now using a much larger monitor showing a much greater visible area of my map, and I can see that when this behaviour happens, the marker in question is already visible.

Is this a known behaviour / issue?

Many thanks!

[Edwin Corrigan]

Hi David, 

I see that autoPan for popups is set to true by default - https://leafletjs.com/reference.html#popup-autopan

Perhaps setting this to false would address the map unexpectedly moving? 

Best Regards, 

Edwin

Edwin Corrigan 

 

edwint....@gmail.com

Want to learn React-Leaflet? Check out tihs course

--

---
You received this message because you are subscribed to the Google Groups "Leaflet" group.
To unsubscribe from this group and stop receiving emails from it, send an email to leaflet-js+...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/leaflet-js/79faacd6-213e-44b8-9cf8-c75d65df6740n%40googlegroups.com.

[David Godfrey]

Thanks, I just realised that although I thought I was setting autoPan to false, I had inadvertently set it against the popup, not the marker! Changed it and will see if it fixes the problem, thanks so much for the quick reply! 

[David Godfrey]

Having tried with the markers created with autoPan: false, I can still reproduce the unwanted panning. There is a short screen capture here that shows the behaviour, scrolling the map with popups not visible, enabling all popups while all markers are visible on screen, then disabling all popups, scrolling the map so all markers are outside the viewable area, then reenabling all popups, the map jumps to the bottom of the screen to show the area of the map containing the markers.

https://youtu.be/t_WMRpTR_wI

[Edwin Corrigan]

Hey, 

Can you post your code? 

Best Regards, 

Edwin

Edwin Corrigan 

 

edwint....@gmail.com

Want to learn React-Leaflet? Check out tihs course

To view this discussion on the web visit https://groups.google.com/d/msgid/leaflet-js/5c62bea0-af41-4af6-95f0-09391606c815n%40googlegroups.com.

[David Godfrey]

Here are what I think are the pertinent bits of the code...

//creates the map
//calls setupLabelControl to create a div containing the tickbox that toggles popup visibility
function setupMap() {

    map = L.map('mapid', {fullscreenControl: true}).setView([latitude, longitude], 7);
 
    mapLayer = L.tileLayer('http://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png',
                {attribution: '© OpenStreetMap contributors, © CartoDB'});
       
    setupLabelControl();
}

//adds a checkbox control which allows popup visibility to be toggled
function setupLabelControl() {

    var command = L.control({position: 'bottomleft'});
   
    command.onAdd = function (map) {
        var div = L.DomUtil.create('div', 'toggleLabelDiv');
        div.innerHTML = '<form><input id="toggleLabel" type="checkbox"/><label for="chkcmd">Enable Labels</label></form>';
        div.style.backgroundColor = "white";
        div.style.padding = "6px 6px 6px 6px";
        return div;
    };
   
    command.addTo(map);    
   

    //adds an event listener which calls toggleTrackLabels when the checkbox is clicked  
    document.getElementById("toggleLabel").addEventListener("click", toggleTrackLabels, false);
}

//iterates over an array of all markers and opens or closes the associated popup
function toggleTrackLabels() {

    if (document.getElementById("toggleLabel").checked == true) {

        markers.forEach((value, key) => {
            var marker = markers.get(key);
            marker.openPopup();
        })
    }
    else {
       
        markers.forEach((value, key) => {
            var marker = markers.get(key);
            marker.closePopup();
        })
    }
}

//following code is used to actually create the marker    
//popups get displayed if the mouse is hovered over the marker
//and closed when the mouse is moved off the marker
//finally each marker is added to an array for use by the functions above    
var marker = L.marker([aircraft.lat, aircraft.long], {icon:aircraft.trackIcon, autoPan: false})
            .addTo(map).bindPopup(aircraft.displayData,
                {closeButton:false, closeOnClick:false, autoClose: false, maxWidth: 60, className:'stylePopup'});
               
        marker.on('mouseover', function(e){
            this.openPopup();
        });    

        marker.on('mouseout', function(e){
            this.closePopup();
        });                    
               
        markers.set(aircraft.id, marker);

The issue I am seeing occurs when the user clicks the checkbox which was created in setupLabelControl() and thus the event listener invokes toggleTrackLabels() which iterates over all markers and calls marker.openPopup()

[Mark Lawton]

i remember having this sort of problem about six months ago.  if you ping me directly, tonight, i will try to figure it out

markstev...@gmail.com

To view this discussion on the web visit https://groups.google.com/d/msgid/leaflet-js/5c62bea0-af41-4af6-95f0-09391606c815n%40googlegroups.com.