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 it makes the pop up scrollable.

If I start with out enough content to fill the page and make it scrollable, it is not made scrollable. That is Ok till I dynamically add more content to the popup and then I need the scroll bar but it will not show up.

Any thoughts on how to get leafletjs to add the scroll bar to a popup once the popup has already been rendered?

EDIT: The popup options are initialized with the markers in a loop that loads different arrays of data depending on what a person wants to see. The initialization is as follows.

    var marker = L.marker(new L.LatLng(a[0], a[1]), { title: title });
        marker.bindPopup('<img width="'+width+'" height="'+height+'"  src="'+a[3]+'"/><br><div id="weather"> <button type="button" onclick="weatherload(\''+a[0]+'\',\''+a[1]+'\')">Click Me for Weather!</button></div>',{'maxWidth':'500','maxHeight':'350','minWidth':'350'});
        CAMlayer.addLayer(marker);

The popup has an image that takes up most of the space. At the bottom there is a div with a button. When the button is clicked it is replaced with a loader gif while an ajax function gets some data that it puts in the popup by way of innerhtml.

 document.getElementById("weather").innerHTML = xhttp.responseText;

I set the maxheigth to 350px, once the extra data is added it grows to 520px with no scroll bar.

EDIT: Removed test page.

回答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).

回答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.

来源：https://stackoverflow.com/questions/34469574/leafletjs-adding-scrollable-pop-up

标签

javascript

scrollbar

leaflet