Open popup after flyTo in Leaflet? - leaflet

Question

I have a Leaflet-map with a layer containing markers with popups using bindPopup. I written this function that flies to the next marker onclick:
const makeFlyTo = () => {
const button = document.getElementById("next");
L.DomEvent.on(button, "click", function(e) {
if (currentView === data.length) {
currentView = 0;
}
map.flyTo(
[data[currentView].lat, data[currentView].lng],
{ zoom },
{
animate: true,
duration: 3
}
);
currentView++;
});
};
I would be nice if the popup opened up on "arrival". Any idea how this can be done?

Answer 1

We have to open marker first and they use FlyTo.
marker.openPopup();
map.flyTo([value['lat'], value['lng']], 15);
As mentioned in the comments, If we use flyTo and then open Popup then most of the times the view adjustment made by popup in map is incorrect.
map.panTo([value['lat'], value['lng']], 15).on('zoomend', () => { setTimeout(()=>marker.openPopup(), 3000) })
OR
map.panTo([value['lat'], value['lng']], 15).on('zoomend', () => marker.openPopup())
Example -
var map = L.map("map").setView([46.76336, -71.32453], 16);
var OpenStreetMap_Mapnik = L.tileLayer(
"http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
{
maxZoom: 19,
attribution:
'© OpenStreetMap'
}
).addTo(map);
function addRowTable(marker, code, coords) {
var tr = document.createElement("tr");
var td = document.createElement("td");
td.textContent = code;
tr.appendChild(td);
tr.onclick = () => {
marker.openPopup();
map.flyTo([value['lat'], value['lng']], 15);
};
document.getElementById("t_points").appendChild(tr);
}
function addMarker(code, lat, lng) {
var marker = L.marker([lat, lng]);
marker.title = code;
marker.bindPopup(code);
marker.addTo(map);
addRowTable(marker, code, [lat, lng]);
}
$(document).ready(function () {
var points = [
["M02KM262", 46.76336, -71.32453],
["M10KM052", 46.76186, -71.32247],
["83KM081", 46.76489, -71.32664],
["83KM082", 46.76672, -71.32919]
];
for (var i = 0; i < points.length; i++) {
addMarker(points[i][0], points[i][1], points[i][2]);
}
});
html, body, .full, #map{
margin: 0;
padding:0;
height: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/leaflet#1.0.3/dist/leaflet.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://unpkg.com/leaflet#1.0.3/dist/leaflet.css" rel="stylesheet"/>
<div class="row full">
<div class="col col-sm-3 full" style="overflow: auto;">
<h3 >List</h3>
<table class="table table-bordered">
<thead>
<tr>
<th>Codes</th>
</tr>
</thead>
<tbody id="t_points"></tbody>
</table>
</div>
<div id="map" class="col col-sm-9 full"></div>
</div>