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?

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?

• javascript
• jquery
• leaflet

3 Answers 3

You will need to override the openpopup method on the Leaflet Map, replacing it with a copy of this method, only ment 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/yVLJf/37/

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

The idea is render popup as separate Layer if you want to render all popups in one time. You can`t do it use marker.openPopup() after marker.bindPopup(Popup) because Leaflet close other popups on open current.

I had same task in my React application.

In example this.api = L.map(this.map);

drawMarkers() {
const {points, keepAllPopupsOpen} = this.props;

this.markers.clearLayers();

points.forEach(point => {
  const hasPopup = point.title;
  const marker = this.createMarker(point, keepAllPopupsOpen);
  this.markers.addLayer(marker);

  if (hasPopup) {
    const popup = this.createPopup(point, keepAllPopupsOpen);

    if (keepAllPopupsOpen) {
      this.api.addLayer(popup);
    } else {
      marker.bindPopup(popup);
    }
  }
});
}

Use disabled params for disable close button in popup and prevent close popup on click outside popup:

createPopup(point, disabled = false) {
    const {title, location} = point;

    const popup = L.popup({
      closeOnClick: !disabled,
      closeButton: !disabled,
      offset: [-22, -38]
    })
    .setLatLng(location)
    .setContent(title);

    return popup;
  }

Simply add this option to bindPopup method

.bindPopup(car.car_name, {autoClose:false, closeOnClick:false})

It will overwrite default behaviour check official doc https://leafletjs./reference.html#popup-option