[GIS] Leaflet mouseover popup makes whole map move

clusteringleafletmarkerspopup

I was following a couple of examples to get my leaflet map to show the popup for the marker when I hover over it.

This example to show popup on hover.

I also used example to do leaflet marker cluster groups very heavily.

For some reason, when I hover over the marker to show the popup, the popup box is sized to hold the popup data and that box size seems to make the whole map move, instead of positioning the popup info within the map box. How do I keep the popup box from moving the whole map?

This is the code to show the marker popup info, which is very close to leaf-demo from the leaflet marker cluster demo mentioned above, and GitHub info here:

 <!-- set up markerClusterGroup, retrieving the marker pin locations from markers.js -->
var markerClusters = L.markerClusterGroup();

for ( var i = 0; i < markers.length; ++i )
{
  var popup = markers[i].name +
              '<br/>' + markers[i].city +
              '<br/><b>IATA/FAA:</b> ' + markers[i].iata_faa +
              '<br/><b>ICAO:</b> ' + markers[i].icao +
              '<br/><b>Altitude:</b> ' + Math.round( markers[i].alt * 0.3048 ) + ' m' +
              '<br/><b>Timezone:</b> ' + markers[i].tz;

  var m = L.marker( [markers[i].lat, markers[i].lng], {icon: myIcon} )
                  .bindPopup( popup );

  m.on('mouseover', function (e) {
     this.openPopup();
  });
  m.on('mouseout', function (e) {
     this.closePopup();
  }); 

  markerClusters.addLayer( m );
}

map.addLayer( markerClusters );

Best Answer

Leaflet displays popup box above the marker and by default wants to display the whole popup box. If box would reach outside map boundaries, map is moved to display the whole popup box. You have to use {autoPan: false} popup option to prevent this, but in this case popup box might be partially hidden.

Another thing is that in you particular case when you bind popup display to mouseover event and popup close to mouseout, Leaflet actually behaves in unwanted manner when popup would reach outside map boundaries. When mouse gets over the marker, map is first moved to accommodate the whole popup box, but with this very action mouse gets outside marker and popup is not displayed at all.

Related Question