CODEWITHSUNDEEP
javascriptjqueryleaflet
Vortex
Vortex

Reputation: 816

Leaflet open multiple popups without binding to a marker

I am busy writing a simple map implementation using leaflet however I have hit a bit of a snag. I am trying to setup my map and have added a custom control to show labels (which will show the popups) based on the selection of a checkbox.

My custom control is like so:

        var checkBoxControl = L.Control.extend({
            options: {
                position: 'topright'
            },
            onAdd: function (map) {
                var container = L.DomUtil.create('input', 'leaflet-control');

                container.style.backgroundColor = 'white';
                container.id = 'labels_checkbox';
                container.style.width = '30px';
                container.style.height = '30px';
                container.label = "Labels";
                container.type = 'checkbox';

                container.onclick = function () {
                    var checkBox =  $("#labels_checkbox");
                    var checkBoxValue = checkBox[0];
                    var labelsChecked = checkBoxValue.checked;
                    var bounds = mymap.getBounds();

                    for (var i = 0; i < markers.length; i++) {
                        marker = markers[i].mark;

                        if (bounds.contains(marker.getLatLng())) {
                            var previewLabel = markers[i].previewLabel;
                            if (labelsChecked == true) {
                                console.log('previewLabel', previewLabel);
                                mymap.addLayer(previewLabel).fire('popupopen');
                            } else {
                                previewLabel.close();
                            }
                        }
                    }

                };
                return container;
            }
        });

I can see as per my console that it is fetching all the surrounding markers however the map won't open those markers?

Is there a way for me to open a popup without binding it to a marker?

Thanks

Upvotes: 0

Views: 2925

Answers (1)

YaFred
YaFred

Reputation: 10008

You have to change L.Map behaviour to prevent automatic closing of popups. It is discussed here.

  // prevent a popup to close when another is open
  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);        
  }
});

See this example

Upvotes: 1

Related Questions