Leaflet/Leaflet — pull request #2893 by remlev (2014-09-10 16:30:29+00:00)
Title: open popup downward if its "overflowing" north maxBound

First off all, thanks a LOT for all this amazing work! I'm pretty new in here and in programming too. I Hope I'm not going to ask something already set up and working:)

I'm using map.setMaxBounds, wich is great and I let the popup.otions.autoPan to default (true).

With this set up, there is one problem : Saying zoom level is very low and a marker is in top of the map (north of Groënland for example), The popup will open > autopan feature will allow for 1/2sec to view the popup (making go "over the world") > the setMaxBounds method will in the meantime make the map go down (to prevent to see "over the world").

I see 2 solutions to prevent this "yoyo" effect :
1.to have a setMaxBounds method which only works horizontally.
2.Better : to open the popup below the marker in this case.

I managed to go through the 2nde solution with some "dirty tricks" but it would be great to be something automatic (without these jQuery tricks). I did this :

*** I changed autoPan to false during binding Popups
*** I created a CSS custom class called 'reverse-popup' to have the tip at the top pointing upward :
.reverse-popup .leaflet-popup-tip-container {
position: absolute;
transform: rotate(180deg);
top: -20px;
left: 64px;
}
***And then in the page :
map.setMaxBounds([[85.0511, -180], [-85.0511, 180]]);
map.on('popupopen', function(e) {
if(!e.popup.options.oldOffset) e.popup.options.oldOffset = e.popup.options.offset; // saving old anchor point X Y
var px = map.project(e.popup._latlng);
var heightOpeningPopup = $('#map').find('.leaflet-popup-content').height(); // we calculate popup content height (jQuery)
var temp = px.y - heightOpeningPopup; var temp2 = heightOpeningPopup+42;
if(temp < 100){ // if it will go above the world, we prevent it to do so
e.popup.options.offset = new L.Point(0, temp2); // we make the popup go below the poi instead of above
$('#map').addClass("reverse-popup"); // we make the popup tip to be pointing upward (jQuery)
e.popup.update();
}
else{ // we allow auto pan if the popup can open in the normal upward way
e.popup.options.offset = e.popup.options.oldOffset;
e.popup.options.autoPan = true;
$('#map').removeClass("reverse-popup");
e.popup.update();
}
});

map.on('popupclose', function(e) {
e.popup.options.autoPan = false;
});

Cheers et Bonsoir:)