CODEWITHSUNDEEP
leafletmapboxleaflet.markercluster
Jameesh Moidunny
Jameesh Moidunny

Reputation: 81

How can I Open Multiple Popups in Leaflet Marker at a time

Map` like this:

L.Map = L.Map.extend({
openPopup: function(popup) {
this._popup = popup;
        return this.addLayer(popup).fire('popupopen', {
            popup: this._popup
        });
    }
});

But I am using leaflet. Is there anyway to extent like so that i can prevent closing my marker popup?

L.mapbox.accessToken = constant.accessToken;
var map = L.mapbox.map('map', 'mapbox.streets', {zoomControl: true});

Upvotes: 8

Views: 16312

Answers (3)

JPCM
JPCM

Reputation: 1

Define an array:

let map=L.map('mymap');
...    
var markers = L.markerClusterGroup();

...

var marker=[];
marker[0]= L.marker([latitud1,longitud1]).addTo(map).bindPopup('Hola 0',{autoClose: false, closeOnClick: false});
marker[1]= L.marker([latitud2,longitud2]).addTo(map).bindPopup('Hola 1',{autoClose: false, closeOnClick: false});

To put on the map:

marker.forEach(function(marker) {
       markers.addLayer(marker);
       map.addLayer(markers);
});

Show the popup for only one:

var curPos = marker[0].getLatLng();
map.setView(new L.LatLng(curPos.lat,curPos.lng), 13);
marker[0].openPopup();

Show all popups:

marker.forEach(function(marker) {
     var popup = marker.getPopup();
     marker.bindPopup(popup.getContent()).openPopup();
 });

Close all popups:

 map.eachLayer(function (layer) {
      layer.closePopup();
  });

Upvotes: 0

Bambam
Bambam

Reputation: 3919

Update Dec 2017 Leaflet popup options have been extended to include { autoClose: false } which has the required effect :

 var my_marker = L.marker([my_lat, my_lng], {icon: my_icon})
                  .addTo(map)
                  .bindPopup('My Popup HTML', {closeOnClick: false, autoClose: false});

Upvotes: 22

IvanSanchez
IvanSanchez

Reputation: 19089

Let me quote the Leaflet documentation on L.Popup:

Used to open popups in certain places of the map. Use Map.openPopup to open popups while making sure that only one popup is open at one time (recommended for usability), or use Map.addLayer to open as many as you want.

In order to open several popups, instantiate them using L.popup(latlng, options), then .addTo(map) them.

Upvotes: 6

Related Questions