Discussion :

[augier26]

Je crée une carte des communes du Vaucluse.
Pour les contours de chaque commune, je récupère les coordonnées dans data.gouv.fr basé sur chaque code INSEE
https://geo.api.gouv.fr/communes/84150/?&fields=contour

Je n'arrive pas à intégrer une couleur spécifique pour chaque commune.

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
36
37
38
39
40
41
42
43
 
<script>
 
...
 
        var tableau = [
          ...
	  [84149,"Violès",44.0660605145,5.25707803023,"https://geo.api.gouv.fr/communes/84149/?&fields=contour","rgb(255,125,64)"],
	  [84150,"Visan",44.1767100202,4.95138229619,"https://geo.api.gouv.fr/communes/84150/?&fields=contour","rgb(123,104,238)"],
	  [84151,"Vitrolles-en-Luberon",44.3268006533,4.94430178075,"https://geo.api.gouv.fr/communes/84151/?&fields=contour","rgb(152,251,152)"]
	];
            /* On boucle sur le tableau pour y placer les communes */
            for (i = 0; i < tableau.length; i++) {
                /*
                 * On va créer les contours de chaque commune avec sa couleur selon la province
                 */
 
                 /*     Affichage de la couleur de chaque commune    */
				var couleur = tableau[i][5];
                 /*     Sans ce alert(couleur);, les couleurs ne sont pas prises en compte    */
				alert(couleur);
 
                                var url = tableau[i][4];
				   ajaxGet(url, function (reponse) {
				   var contour = JSON.parse(reponse).contour;
				for (var j = 0 ; j < contour.length ; j++) {
				   contour[j].reverse();
				}
				L.geoJson(contour).addTo(map);
				function style() {
				   return {
				   fillColor: couleur,
				   weight: 0.5,
				   opacity: 1,
				   color: 'white',
				   dashArray: 3,
				   fillOpacity: 0.5,};
				}
				L.geoJson(contour, {style: style}).addTo(map);
				})
            }
			window.onload = initMap;
</script>

Pour obtenir les couleurs, je suis obligé de placer un

Code :

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

1
2
 
alert(couleur);

sous mon

Code :

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

var couleur = tableau[i][5];

Sinon elles ne s'affichent pas ...
C'est très long à valider commune par commune et totalement impraticable en production.

Merci de vos conseils

[NoSmoking]

Bonjour,
tu as un souci avec les variables de boucle, que vaut couleur, lorsque la fonction qui l'utilise s’exécute ?

Bien des façons de résoudre cela mais tu peux faire cela facilement en utilisant un forEach de bon aloi sur ton tableau :

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
tableau.forEach(function (tab) {
    var couleur = tab[5];
    var url = tab[4];
    ajaxGet(url, function (reponse) {
        const contour = JSON.parse(reponse).contour;
        for (let j = 0; j < contour.length; j++) {
            contour[j].reverse();
        }
// à supprimer        L.geoJson(contour).addTo(map);
        function style() {
            return {
                fillColor: couleur,
// à supprimer                weight: 0.5,
                opacity: 1,
// à supprimer                color: 'white',
                dashArray: 3,
                fillOpacity: 0.5,
            };
        }
        L.geoJson(contour, {
            style: style
        }).addTo(map);
    })
});

[augier26]

Merci,

C'est exactement la boucle qui me manquait.

Ne me reste plus qu'à compresser mon fichier leaflet.js pour que l'affichage soit plus rapide.
https://spipfactory.fr/sites/essaill...plete/cgv.html

[NoSmoking]

Ne me reste plus qu'à compresser mon fichier leaflet.js

Attention :
dans ton script, tu as une boucle dans une boucle

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
/* On boucle sur le tableau pour y placer les communes */
for (i = 0; i < tableau.length; i++) {
    /*
     * On va créer les contours de chaque commune avec sa couleur selon la province
     */
    /*   var couleur = tableau[i][5];
			//	alert(couleur);
				var url = tableau[i][4];*/
    tableau.forEach(function (tab) {
        var couleur = tab[5];
        var url = tab[4];
        ajaxGet(url, function (reponse) {

il te faut supprimer ta boucle for qui est remplacée par la boucle forEach.

[augier26]

Ah merci,

Je me demandais pourquoi l'affichage était si long => boucle infinie...

Corrigé.
https://spipfactory.fr/sites/essaill...plete/cgv.html