laiello laiello - 2 months ago 39
jQuery Question

leafletjs - marker.bindPopup - keep all popups open

I am having some difficulty keeping all the popups open with leaflet.

I have the following code in the a loop to add markers to a LayerGroup (ajax auto-updating).

var marker = L.marker([value.position.lat, value.position.lon],options).addTo(markers);
allpoints.push([value.position.lat, value.position.lon]);
marker.bindPopup("InfoWindow",{closeOnClick:false,closeButton:false}).openPopup();


It works great, except it only keeps the last popup open. I would like to keep all of them open. I did find an article on here (stackoverflow) regarding doing so with different marker names, however I have this in a loop. I did try putting L.marker into an array, but leaflet did not like that.

Any ideas?

Answer

You will need to override the openpopup method on the Leaflet Map, replacing it with a copy of this method, only comment out the line that calls this.closePopup();

On your page you would add

L.Map = L.Map.extend({
    openPopup: function (popup, latlng, options) { 
        if (!(popup instanceof L.Popup)) {
        var content = popup;

        popup = new L.Popup(options).setContent(content);
        }

        if (latlng) {
        popup.setLatLng(latlng);
        }

        if (this.hasLayer(popup)) {
        return this;
        }

        // NOTE THIS LINE : COMMENTING OUT THE CLOSEPOPUP CALL
        //this.closePopup(); 
        this._popup = popup;
        return this.addLayer(popup);        
    }
});

http://jsfiddle.net/yVLJf/37/

You can find the original Leaflet openPopup method here: https://github.com/Leaflet/Leaflet/blob/1acffc5a3d31010b7d613382ab2a5830ecee5dd5/src/layer/Popup.js#L290

Comments