Leafletjs Adding Scrollable Pop Up?

Using leafletjs with popups. When I have popups with minimal text all works fine. If I make them bigger they still work fine. If I add too much I add maxHeight to the pop up and i

Solution 1:

How do you initialize your popup options and how to you add more content to it?

Once the maxHeight option is set, the scroll bar should appear as soon as the content is too big, and disappear as soon as it gets small enough.

Demo: http://jsfiddle.net/ve2huzxw/92/

---

EDIT:

Following the extra details and code about how you add content to the popup element:

The height CSS attribute (which makes the scroll bar appear if necessary) is dynamically added by Leaflet when it detects that the content is too big.

However, this detection occurs only if you use the setContent popup method. It is not triggered if you change the content through external function (like your AJAX callback in weatherload function that "manually" changes a part of the popup content innerHTML).

The easiest workaround is simply to call myPopup._updateLayout() internal Leaflet method on your popup, just after you have added content. This will "manually" force Leaflet to check the popup content height, and add the height CSS attribute if necessary.

Updated demo: http://jsfiddle.net/ve2huzxw/93/

A "proper" solution would be to avoid adding content through innerHTML. Instead, you should use setContent popup method to update your content (you would copy your initial image, and add your new content). This would also avoid using a div with an ID that is the same for all your popups (which relies on the fact that only 1 popup would be open on the map at any one time, but would break if this assumption is no longer true).

Solution 2:

If your popup is smarter(is doing 'hard work') I recommend to compile a new directive on the fly.

var newScope = $scope.$new();
            var myPopupContent = $compile('<div style="width:200px"  gr-my-popup ></div>')(newScope);

            L.popup()
                .setLatLng(e.latlng)                  
                .setContent(myPopupContent[0])
                .openOn(map);    

Where grMyPopup will be your directive.