Changer dynamiquement la couleur des traces

**jpe54** · 10/12/2018, 15h23

Bonjour,

J'ai découvert avec beaucoup d'intérêt l'Open Source Leaflet et en particulier ce plugin, qui permet de charger des fichiers GPX locaux grâce à une API HTML5 proposé ici :

https://github.com/makinacorpus/Leaflet.FileLayer

Une fois une trace GPX chargée et affichée, on peut en ajouter une seconde, une troisième etc... mais la couleur reste identique soit le rouge du fait de cette variable présente sous cette forme :

Code :

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

1
2
3
4
5
6
7
       var style = {
            color: 'red',
            opacity: 1.0,
            fillOpacity: 1.0,
            weight: 2,
            clickable: false
        };

Les TrackPoints (le trajet) sont représentés par une ligne, les WayPoints par des ronds.

Je souhaiterai un changement dynamique de la couleur de la trace à chaque chargement de fichier différent. (actuellement je peux récupérer le nom du fichier chargé et pourrai tester ce nom pour sélectionner un autre style 'color'... à moins d'une autre procédure plus simple !)

Voici la portion du code originel du lien Leaflet.FileLayer ci-dessus qui me pose un problème de compréhension :

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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
  (function (window) {
    'use strict';
 
    function initMap() {
        var control;
        var L = window.L;
        var osm = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '&copy; OpenStreetMap contributors'
        });
        var map = L.map('map', {
            center: [46.82, 2.90],
            zoom: 6
        }).addLayer(osm);
       var style = {
            color: 'red',
            opacity: 1.0,
            fillOpacity: 1.0,
            weight: 2,
            clickable: false
        };
 
var IconWpt = L.icon({
        iconUrl: 'pin-icon-wpt.png',
        shadowUrl: 'marker-shadow.png',
		iconSize: [30, 30],
		shadowSize: [50, 50],
		iconAnchor: [16, 45],
		shadowAnchor: [16, 47],
        popupAnchor: [10,10]
});
 
        L.Control.FileLayerLoad.LABEL = '<img class="MyFolder" src="leaflet/images/folder.svg" alt="file icon"/>';
        control = L.Control.fileLayerLoad({
            fitBounds: true,
            layerOptions: {
                style: style,
              pointToLayer: function (data, latlng) {
                    return L.circleMarker(
                        latlng,
                        { style: style}
                    );
               }
           }
        });
 
        control.addTo(map);
        control.loader.on('data:loaded', function (e) {
            var layer = e.layer;
            console.log(layer);
 
 
 
        });
    }
 
    window.addEventListener('load', function () {
        initMap();
    });
}(window));

j'ai pris le temps de consulter la documentation en particulier ces différentes lectures :
https://leafletjs.com/reference-1.3.4.html#path
et :
https://leafletjs.com/reference-1.3....eojson-options

J'ai réussi à personnaliser les Waypoints en utilisant des icones personnelles par des icones "pin-icon-wpt.png"

en insérant ce code pour définir une nouvelle icone :

Code :

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

1
2
3
4
5
6
7
8
9
var IconWpt = L.icon({
        iconUrl: 'pin-icon-wpt.png',
        shadowUrl: 'marker-shadow.png',
		iconSize: [30, 30],
		shadowSize: [50, 50],
		iconAnchor: [16, 45],
		shadowAnchor: [16, 47],
        popupAnchor: [10,10]
});

et en modifiant cette portion de code originel : (voir également mes commentaires…)

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
        L.Control.FileLayerLoad.LABEL = '<img class="MyFolder" src="leaflet/images/folder.svg" alt="file icon"/>';
        control = L.Control.fileLayerLoad({
            fitBounds: true,
            layerOptions: {
// =========================================================
// =========================================================
// La couleur de la ligne est définit ici en utilisant la variable style présente dans le code original 
// =========================================================
                style: style,
// =========================================================
// =========================================================
             pointToLayer: function (data, latlng) {
 
/* Neutraliser pour utiliser les icones personnelles
                    return L.circleMarker(
                        latlng,
                        { style: style}
                    );
*/ 
// et ajouter
return L.marker(latlng, {icon: IconWpt });
               }
           }
        });

Merci par avance, à ceux qui savent d'éclairer ma lanterne…

Bien amicalement à vous tous !

EDIT : Solution trouvée comme suit : (Reste à utiliser un event de la boite de chargement de fichiers Windows plutôt qu'un compteur comme nLoad...

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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
 var nLoad = 0
 
 // Préparation de la liste des couleurs
 get color fonction du compteur Compteur
		function getColor(n) {
			return n == 1 ? 'red' :
			       n == 2  ? 'blue' :
			       n == 3  ? 'orange' :
			       n == 4  ? 'cyan' :
			       n == 5  ? 'maganta' :
			       n == 6  ? 'yellow' :
			       n == 7  ? 'goldenrodrod' :
			                  'black';
		}
 
	  (function (window) {
    'use strict';
 
    function initMap() {
 
        var control;
        var L = window.L;
        var osm = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '&copy; OpenStreetMap contributors'
        });
        var map = L.map('map', {
            center: [46.82, 2.90],
            zoom: 6
        }).addLayer(osm);
 
		var style = {
            color: getColor(1),
            opacity: 1.0,
            fillOpacity: 1.0,
            weight: 2,
            clickable: false
        };
 
var IconWpt = L.icon({
        iconUrl: 'leaflet/images/pin-icon-wpt.png',
        shadowUrl: 'leaflet/images/marker-shadow.png',
		iconSize: [30, 30],
		shadowSize: [50, 50],
		iconAnchor: [16, 45],
		shadowAnchor: [16, 47],
        popupAnchor: [10, 10]
});
 
        L.Control.FileLayerLoad.LABEL = '<img class="MyFolder" src="leaflet/images/folder.svg" alt="file icon"/>';
        control = L.Control.fileLayerLoad({
            fitBounds: true,
            layerOptions: {
			style: style,               
              pointToLayer: function (data, latlng) {
			  // Icône à afficher
						return L.marker(latlng, {icon: IconWpt });
               }
           }
        });
 
        control.addTo(map);			
        control.loader.on('data:loaded', function (e) {
            var layer = e.layer;
            console.log(layer);
 
			nLoad = nLoad + 1;
			layer.setStyle({color :getColor(nLoad)});
 
        });
    }
 
    window.addEventListener('load', function () {
        initMap();
    });
 
}(window));

**NoSmoking** · 11/12/2018, 13h25

Bonjour,

EDIT : Solution trouvée comme suit : ...

tu as peut être plus simple, et il me semble plus propre, en gérant cela via un objet dédié, namespace :

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
/**
 * Objet de gestion des couleurs d'affichage
 * appel : maVariable = Color.get();
 */
var Color = {
  // tableau des couleurs voulues
  data: ["#F00", "#FF0", "#0F0", "#0FF", "#00F", "#F0F"],
  // fonction de récupération
  get: function() {
    // récup la 1st valeur
    var c = this.data.shift();
    // on la met à la fin
    this.data.push(c);
    // et on la retourne
    return c;
  }
};

**jpe54** · 13/12/2018, 08h51

Bonjour NoSmoking,

Effectivement ! Je me suis focalisé - à tort - sur la FAQ Leaflet oubliant cette possibilité, bien que j'étais parti en construisant un tableau avec les couleurs…

Excellente fêtes de fin d'année à vous tous.

Bien Cordialement

Changer dynamiquement la couleur des traces [LeafLet]

Bibliothèques & Frameworks

Discussions similaires

Partager

Partager