Colorer des polygones

Version imprimable

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:

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:

1
2
 
alert(couleur);

sous mon

Code:

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

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:

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);
    })
});

30/06/2020, 14h24
augier26

[LeafLet] Colorer des polygones

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

Citation:

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

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

Code:

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.

30/06/2020, 19h06
augier26

[LeafLet] Colorer des polygones

Ah merci,

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

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