Problème avec Leaflet

Bonjour,

J’utilise Leaflet sur un projet de site immobilier sur lequel s’affiche une carte avec un pointeur différent pour chaque offre disponible. Pour ce faire, j’utilise le code suivant qui fonctionne parfaitement :

mymap = L.map('map').setView([lat,lon], 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(mymap);
		
//.  t est un array qui contient les positions gps de chaque offre
for(i=0;i<t.length;i++){
	var marker = L.marker([t[i][lat], t[i][lon]]).addTo(mymap);
}

Mais quand j’ajoute à la boucle une instruction pour créer un pop-up pour chaque offre comme ci-dessous :

for(i=0;i<t.length;i++){
	var marker = L.marker([t[i][lat], t[i][lon]]).addTo(mymap);
	marker.bindPopup("<b>mon titre"</b><br>mon texte").openPopup();
}

toute la carte est décalée sur la gauche, et n’est plus centrée sur les coordonnées définies avec setView.

Une explication sur ce qui se passe et un possible remède ? D’avance merci.

Salut

J’imagine deux possibilités :

• soit le fait d’avoir les popups ouverts déclenche quelque chose qui fait en sorte que ceux-ci soient visibles et donc change le centre de la carte pour ce faire ;
• soit c’est le simple fait d’ajouter les autres marqueurs qui fait quelque chose dans le genre afin qu’ils soient tous visibles.

Si tu ne mets qu’un seul marqueur sans ouvrir le popup, est-ce que le centre reste là où tu l’as défini ?
Et si, toujours avec un seul marqueur, tu ouvres le popup cette fois, est-ce que ça déplace le centre ?

En effet, c’est le fait d’avoir les pop-ups ouverts qui décale le centre.

Merci pour la suggestion.

Attention à ta déclaration des variables

for(i=0;i<t.length;i++){
	var marker = L.marker([t[i][lat], t[i][lon]]).addTo(mymap);
}

en :

const mymap = L.map('map').setView([lat,lon], 13);
  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  maxZoom: 19,
  attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> 
  contributors'
}).addTo(mymap);


for (let i = 0; i < t.length; i++) 
{
	const marker = L.marker([t[i][lat], t[i][lon]]).addTo(mymap);
}