I am follow IvanSanchez's snakeIn to draw each marker after each polyline.

The code has been modified such as

   var markers = [[63.5, 11],
    [40.5, -3.5],
    [51.5, -0.5],
    [52.3, 4.75],
    [39.5, -0.5]];

   var route = L.featureGroup().addTo(map);

   var n = markers.length;

   for (var i = 0; i < n-1; i++) {
        var marker = new L.Marker(markers[i]);
        var line = new L.polyline([markers[i],markers[i+1]]);
        route.addLayer(marker);
        route.addLayer(line);
    };
   route.addLayer(new L.Marker(markers[n-1]));

   map.fitBounds(route.getBounds());

I have been trying to play with Leaflet popup, where I can bindpopup for each marker. My question is how can I make each popup automatically open when its marker is drawn, then it will automatically close when the next marker is drawn, and so on...

I am follow IvanSanchez's snakeIn to draw each marker after each polyline.

The code has been modified such as

   var markers = [[63.5, 11],
    [40.5, -3.5],
    [51.5, -0.5],
    [52.3, 4.75],
    [39.5, -0.5]];

   var route = L.featureGroup().addTo(map);

   var n = markers.length;

   for (var i = 0; i < n-1; i++) {
        var marker = new L.Marker(markers[i]);
        var line = new L.polyline([markers[i],markers[i+1]]);
        route.addLayer(marker);
        route.addLayer(line);
    };
   route.addLayer(new L.Marker(markers[n-1]));

   map.fitBounds(route.getBounds());

I have been trying to play with Leaflet popup, where I can bindpopup for each marker. My question is how can I make each popup automatically open when its marker is drawn, then it will automatically close when the next marker is drawn, and so on...

• javascript
• popup
• leaflet

2 Answers 2

In Leaflet, every layer (including the markers) has an add event which fires when it's added to the map.

Internally, the code for Leaflet.Polyline.SnakeAnim removes and adds layers from a LayerGroup when a snaking animation runs; this means that layers which are snaking in will fire an add event.

Additionally, a LayerGroup (or FeatureGroup) running a snaking animation will fire a snake event every time a new layer is snaked in. Note, however, that this event does not have a reference to the just-snaked-in layer.

So something like:

marker1.on('add', function(){
    // Open popup for marker 1
});

You also say:

then it will automatically close when the next marker is drawn,

First read the docs for L.Map.openPopup, and then:

marker1.on('add', function(){
    map.openPopup( popupForMarker1 );
});

I asked myself the question and here is how I proceeded based on the answer of IvanSanchez and the doc https://leafletjs./index.html#map-openpopup

const marker = L.marker(L.latLng(this.location.lat, this.location.lng), {
  icon,
  title: this.location.name,
})
  .bindPopup(this.location.content)
  .on('add', function () {
    marker.openPopup();
  });