Discussion :

[Farmer64]

Salut salut !

Je bloque sur un souci, qui semble assez simple :

Utilisant leaflet (API géo), je souhaite créer des zones intéractives,
Sauf que chaque zone est créée en js, dans une boucle utilisant des données stockées dans un tableau.

Je souhaite passer dans la fonction onclick un argument différent pour chaque zone (un peu normal il semble )
J'ai essayé pas mal de choses, mais je bloque complet...
Extrait de code

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
 
for (i = 0; i < NbParcelles; i++) 
                {
                //console.log('I '+i);
                var CoordsString;
                var nom = parcelles[i][0];// tableau [i][x], avec pourx : 0 = nom ; 1 = coordonnées (array)
                var coords = parcelles[i][1];
                //console.log ("coords " +coords);
				//console.log ("coords{1] " +coords);
                zone.lenght = i;
                try {
                zone[i]= L.polygon(coords,{
                        color: 'green',
                        weight: 10,
                        opacity: 0.7})
 
						.addTo(map);
 
//-----------C'est là que je n'arrive pas à trouver la bonne formule---------
				zone[i].addEventListener(
				"click",
				function(){selectionner(nom)});
 
				}// ne marche pas (lance la fonction avec le dernier "nom" de la boucle)
				catch{"souci pour "+ nom}
 
                } //fin for i  
 
 
 
		 function selectionner(id_sel){
		console.log("sélection : "+ id_selection);
		document.getElementById("nom_selection")="Sélec    : <b>"+id_sel+"</b>";   
 
 	  }

Merci d'avance pour votre aide !!

[ProgElecT]

Salut

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
			for (i = 0; i < NbParcelles; i++) 
                {
					//console.log('I '+i);
					var CoordsString;
					var nom = parcelles[i][0];// tableau [i][x], avec pourx : 0 = nom ; 1 = coordonnées (array)
					var coords = parcelles[i][1];
					//console.log ("coords " +coords);
					//console.log ("coords{1] " +coords);
					zone.lenght = i;
					try {
							zone[i]= L.polygon(coords,{
								color: 'green',
								weight: 10,
								opacity: 0.7})
							.addTo(map).on('click', selectionner(nom));
					}
					catch{"souci pour "+ nom}
 
                } //fin for i  
 
			function selectionner(id_sel){
				console.log("sélection : "+ id_selection);
				document.getElementById("nom_selection")="Sélec    : <b>"+id_sel+"</b>";   
			}

il me semble.

[Farmer64]

Salut Prog,

Merci de ton aide !
Alors là ça me fait un truc incompréhesible lors du test : la fameuse fonction "selectionner()" se lance lors de la création de la page pour TOUS les noms, puis zones incliquables

Une idée ? Je fouille de mon côté
Code testé

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
        var zone=new Array();
        var NbParcelles = parcelles.length;
        console.log('nb parcelles'+NbParcelles);
        for (i = 0; i < NbParcelles; i++) 
                {
                //console.log('I '+i);
                var CoordsString;
                var nom = parcelles[i][0];// tableau [i][x], avec pourx : 0 = nom ; 1 = coordonnées (array)
                var coords = parcelles[i][1];
                //console.log ("coords " +coords);
				//console.log ("coords{1] " +coords);
                zone.lenght = i;
                try {
                zone[i]= L.polygon(coords,{
                        color: 'green',
                        weight: 10,
                        opacity: 0.7})
 
						.addTo(map)
						.on('click', selectionner(nom));
 
				}
				catch{"souci pour "+ nom}
 
                } //fin for i  
 
 
 
		 function selectionner(id_sel){
		console.log("sélection : "+id_sel);
		document.getElementById('nom_selection').innerHTML="Sélec    : <b>"+id_sel+"</b>";   
		 }

[Farmer64]

Euh pardon,
Auto résolution developpez.com
https://javascript.developpez.com/fa...lick.dynamique

Je suis pas le premier à être planté
Merci à la communauté !

[ProgElecT]

Re

L'important étant que ton problème est résolut, il me semble bien que tu pouvais faire aussi

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
zone.push(L.polygon(coords,{
                        color: 'green',
                        weight: 10,
                        opacity: 0.7})
 
						.addTo(map)
						.on('click', selectionner(nom)));

[NoSmoking]

Bonjour,

il me semble bien que tu pouvais faire aussi

en faisant de la sorte au moment de l'affectation sur l'événement onclick tu exécutes la fonction, remplace ta fonction selectionner(nom) par un console.log(nom) et regarde ce qui se passe dans la console.

Auto résolution developpez.com
https://javascript.developpez.com/fa...lick.dynamique

La faq est un peu ancienne et mériterait d'être mise à jour, mais je vois qu'elle est encore utille

Concernant ton soucis tu peux régler cela d'une « manière plus moderne »

Quelque chose comme, à tester :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
const zone = [];
parcelles.forEach((parcelle) => {
  const nom = parcelle[0];
  const coords = parcelle[1];
  zone.push(L.polygon(coords, {
      color: 'green',
      weight: 10,
      opacity: 0.7
    })
    .on('click', () => {
      selectionner(nom)
    })
    .addTo(map));
});