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

3

8

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});
Sincerity answered 15/8, 2016 at 14:58 Comment(0)
H
20

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});
Herpes answered 8/12, 2017 at 13:38 Comment(0)
G
6

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.

Gaza answered 15/8, 2016 at 15:15 Comment(0)
S
0

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();
  });
Sneed answered 6/10, 2022 at 21:14 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.