Quand on commence à travailler avec Leaflet, on a tendance à créer des markers, des tracés ou des figures les uns après les autres.
Pourtant, tout l'intérêt de Leaflet est de pouvoir gérer ces éléments en lot. Les regrouper dans une même famille permet au visiteur d'interagir avec chaque élément de cette famille en un seul contrôle. Cela permet également de simplifier très nettement le code source. Cette fonctionnalité layerGroup est vraiment très pratique, surtout sur des cartes complexes qui comportent de nombreux éléments.
Nous allons découvrir avec ce tutoriel comment utiliser cette fonction layerGroup(). L'idée d'ici est d'associer plusieurs éléments en une même famille, et de les contrôler ensuite avec du javascript.
1 - Création du groupe layerGroup :
La 1ère chose à faire est de créer le groupe avec la fonction layerGroup() et de l'assigner à une variable :
var monGroupe1 = new L.layerGroup();
Désormais, nous avons tout une couche (Layer) qui est sous la variable monGroupe1.
2 - Créer des objets :
Nous allons maintenant créer des objets et les associer à ce groupe.
Déjà, nous allons déclarer les icônes de nos futurs marqueurs (le code est volontairement simplifié)
var monicone = L.icon({iconUrl: "leaflet/images/monicone.png"});Ensuite, nous allons déclarer des markers :
var marker1 = L.marker([45.4509,3.17176],{icon:monicone});
var marker2 = L.marker([45.4900,3.3245],{icon:monicone});
Créons maintenant un tracé (ou un polygone peu importe) avec la fonction polyline. On donne d'abord la liste des coordonnées dans la liste des coordonnées qui vont générer le tracé, dans la variable latlngs :
var latlngs = [[45.50385251159307,2.762310136870254],[45.5036118894457,2.7379347657892787],[45.498317942003816,2.727635313219872],[45.49470814698721,2.7341582998471563]];
On crée ensuite l'objet tracé avec la fonction polyline :
var montrace = L.polyline(latlngs);
3 - Associer ces objets au groupe monGroupe1 :
Maintenant que nous avons créé 3 objets sous les variables marker1, marker2, montrace, nous allons leur attribuer le groupe monGroupe1.
C'est très facile :
marker1.addTo(monGroupe1);
marker2.addTo(monGroupe1);
montrace.addTo(monGroupe1);
Notez que nous aurions pu le faire dès la création de l'objet :var marker1 = L.marker([45.4509,3.17176],{icon:monicone}).addTo(monGroupe1);
4 - Afficher ce groupe sur la carte :
C'est très simple, on l'ajoute à la variable macarte (qui a permis d'initialiser la carte avec la fonction setview) :
monGroupe1.addTo(macarte);
Notez que nous aurions pu le faire aussi dès la déclaration du groupe :var monGroupe1 = new L.layerGroup().addTo(macarte);
5 - contrôler le Layer groups :
Il existe 2 possibilités pour avoir la main sur notre groupe. La 1ère est de créer soit-même les boutons pour avoir ses propres effets.
La seconde est d'utiliser la fonction addOverlay : elle permet, grâce à une checkbox, de cacher / montrer les éléments d'un même groupe.
la fonction addOverlay() :
Personnellement, je n'aime pas trop cette fonction addOverlay : elle est assez restrictive puisqu'elle ne permet que de montrer / cacher des éléments. Par défaut, elle est cachée sous le bouton "couche" en haut à droite : ce n'est pas intuitif. Cependant, il faut reconnaître qu'elle permet d'obtenir un résultat très rapide pour contrôler ses objets.
layerControl.addOverlay(monGroupe1, "l'intitulé de mon groupe 1");
À la main avec jquery :
Dans cet exemple, je vais rester assez simple, je vais simplement afficher / cacher le layer Groupe grâce à jquery et l'intéraction d'un checkbox :
$('#monbouton1').click(function(e) {
if((this).value == 0) // Je vérifie l'état de mon bouton au moment du clic. S'il est à 0 alors je dois ajouter faire apparaître la couche sur la carte grace
{
mongroupe1.addTo(macarte); // j'affiche le layer mongroupe1 sur la carte
$('monbouton1').val(1); // je donne la nouvelle valeur à mon checkbox : 1
}
else
{
mongroupe1.remove(macarte); // je supprime le layer mongroupe1 de la carte
$('monbouton1').val(0); // je donne la nouvelle valeur à mon checkbox : 0
}
});
et le code de la case à cocher :
<input type="checkbox" value="1" checked="checked" /> Afficher le groupe 1
L'avantage de cette méthode manuelle, c'est qu'on est libre de cumuler les interactions avec la carte leaflet. La seule contrainte, c'est de comprendre qu'on fonctionne en couche. On ne peut pas contrôler un même groupe de deux façons différentes. De ce que j'ai compris, un objet ne peut appartenir qu'à un seul et même layer. Il faut donc ranger les éléments dans différents groupes. Cela permet, avec un seul et même bouton, de contrôler plusieurs couches en même temps.
Voici un petit exemple ou je cache tous les autres groupes si je coche la case "Afficher uniquement le groupe 1".
$('#monbouton1').click(function(e) {
if((this).value == 0) // Je vérifie l'état de mon bouton au moment du clic. S'il est à 0 alors je dois ajouter faire apparaître la couche sur la carte grace
{
mongroupe1.addTo(macarte); // j'affiche le layer mongroupe1 sur la carte
mongroupe2.remove(macarte); // je supprime les layers mongroupe2 et 3 de la carte
mongroupe3.remove(macarte);
$('monbouton1').val(1); // je donne la nouvelle valeur à mon checkbox : 1
}
else
{
mongroupe1.remove(macarte); // je supprime le layer mongroupe1 de la carte
$('monbouton1').val(0); // je donne la nouvelle valeur à mon checkbox : 0
}
});
et le code de la case à cocher :
<input type="checkbox" value="1" checked="checked" /> Afficher uniquement le groupe 1
Exemple d'utilisation de layerGroup() :
Avec la carte interactive sur les GR du massif central, pour le projet les Terres du milieu, j'ai mis en place mon propre système de contrôle. Il permet d'afficher / supprimer plusieurs groupes layer au clic, tout en gérant en parrallèle un affichage / suppression automatique sur certains groupes au zoom. Un vrai numéro d'équilibriste, bon courage si vous vous allez piocher dans le code source !
Ce qui est intéressant de comprendre, c'est qu'en travaillant manuellement on peut proposer un meilleur UX que celui proposé par défaut avec addOverlay, et surtout on peut proposer de multiples effets dans un même menu. Ici, on cache / affiche des éléments, et on déplace automatiquement la carte sur certains éléments.
A vous de jouer !