Avoid Popup Getting Covered by Map Attribution
doc987 opened this issue · 7 comments
Is there a way to prevent the popup from going too close to the edge of the map? Sometimes the bottom of the popup gets covered by the map attribution in the bottom right of the map.
Can you provide a screenshot ?
See below.
Have you set autoPanPadding to zero ? (you should not in your case)
What leaflet version are you using ?
I did not set autoPanPadding. The only options I'm using for L.responsivePopup() are maxWidth and maxHeight. Those force the popup to have a scroll bar. Otherwise the popup can be taller or wider than the map (and has no scroll bar). I'm using Leaflet 1.3.1.
You can't have the popups go above the attribution.
Make sure your maximum height for the popup is less than the height of the map (at least 40 pixels difference).
Increase https://github.com/yafred/leaflet-responsive-popup#autopanpadding (for example [20,20]
The autoPanPadding default is 5 and the height of the attribution is roughly 16
Thanks! The autoPanPadding solved it, and the result looks much better.
I wasn't trying to have the popup cover the attribution, but rather have the popup far enough away from the edge so that the attribution doesn't cover the popup. I was already setting the popup to be a percentage of the map size so the popup didn't overlow the map. The issue was that if the popup was placed at the bottom, then it may be under the attribution.
It was a little tricky. Suppose one wants to determine the maximum usable height. First choose an autoPanPadding.y value that is at least as large as the map attribution height. Add the margin included by the leaflet-popup-content CSS class (19 pixels for height). Multiply it by 2 for top and bottom. Subtract that from the map height in pixels. The popup should be no bigger than the result.
Math.min( pct_of_height * map_px_height, map_px_height - 2*(autoPanPadding.y+19) )A similar calculation applies to width.
Well done!
Thanks for the feedback