Popup autoPan acting funky

[FunkMonkey33]

We're using circleMarkers to depict clustered locations (our
clustering is done on the server side). We bind popups to the circles
that when opened display information about individiual locations
within the popup.

We use the JQuery UI accordian control to group information about a
particular location together. It looks great, and it keeps our popups
from getting huge.

The trouble is when we set the popup's autoPan to true, the map pans
way too much, much more than is needed to display the popup.

Here is an example: http://jsfiddle.net/FunkMonkey33/jHwdd/24/

If you run the example, you'll see what I mean. The map really only
needs to pan a few pixels to get the entire popup into view. However,
it winds up panning several hundred pixels, taking the entire popup,
the circleMarker you clicked on, and even the map tiles (if you stay
at zoom level 1) out of your view.

Thanks in advance for your help!

Aaron

[Jason Sanford]

This is a pretty common issue with a lot of web mapping APIs I've worked with. It's just not very simple (I think) for Leaflet to guess at the actual height of your content. I've had issues in the past when using tabs and/or accordions in InfoWindows/Popups.

Without diving into the code, my guess is that Leaflet sees everything in the accordion as visible and adjusts the "height" accordingly. But maybe Leaflet could do a better job (or attempt) at guessing the height of the content.

[FunkMonkey33]

Actually I think the problem is with the Accordian, and not with
Leaflet.

You call the accordian() method on a DOM element that already exists.
In order to get it to exist, we must tell leaflet to open the popup:

map.openPopup(popup);

When leaflet executes this action, it measures the height of the popup
at that particular point in time, then it pans the map accordingly.
It's only after that point that the accordian() method does its thing,
and collapses all the panels.

What I need to try now is to create an invisible DIV, add it to the
DOM, set its HTML to the HTML we generate, call accoridan() on it,
then and only then set the popup's content to the generated content.
I'll let you know how it goes.

[FunkMonkey33]

It worked! Check it out: http://jsfiddle.net/jHwdd/27/

Thanks, everyone!

[FunkMonkey33]

Actually, use this version: http://jsfiddle.net/jHwdd/29/

Had to fix one small bug.

Aaron