search

yafred / leaflet-responsive-popup

This plugin overrides L.Popup to remove the need to move the map to be able to see the content of the popup.
https://yafred.github.io/leaflet-responsive-popup/
BSD 2-Clause "Simplified" License
90 stars 20 forks source link

Avoid Popup Getting Covered by Map Attribution #4

Closed doc987 closed 6 years ago

doc987 commented 6 years ago

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.

yafred commented 6 years ago

Can you provide a screenshot ?

doc987 commented 6 years ago

See below. image

yafred commented 6 years ago

Have you set autoPanPadding to zero ? (you should not in your case)

What leaflet version are you using ?

doc987 commented 6 years ago

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.

yafred commented 6 years ago

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

doc987 commented 6 years ago

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.

yafred commented 6 years ago

Well done! Thanks for the feedback