Afficher / Cacher avec une checkbox

Version imprimable

Bonsoir, je rencontre actuellement un problème avec une création de code pour ajouter une checkbox afin de cacher/afficher une polyline précise sur Leaflet.

J'aimerais la mettre sur la gauche du petit tableau avec les noms des parcours. Une case à cocher pour chaque noms. Comme ça les visiteurs pourront cacher la ou les parcours souhaités.
Code:

1 2 3 4 5 6 7 <ul> <li data-groupe="etape-1">ES 1-5 | Deûlémont (10.38 km) </li> <li data-groupe="etape-2">ES 2-6 | Bousbecque (4.45 km) </li> <li data-groupe="etape-3">ES 3-7 | Quesnoy sur Deûle (9.43 km) </li> </ul>
Mais voilà, cela fait déjà un moment que je cherche, essaie des codes trouvé sur le net, du copier coller... Mais rien ne marche.. Je ne trouve pas non plus la fonction à ajouter pour que la chekbox et Leaflet soit compatible. J'arrive juste à afficher le petit carré à décocher ou cocher.. Bon c'est déjà pas mal ! :) Mais je bloque sur l'id à mettre et la fameuse "function" ...

suite du code
Code:

1 2 3 const groupeEtape1 = L.featureGroup(); const groupeEtape2 = L.featureGroup(); const groupeEtape3 = L.featureGroup();
.....
Code:

1 2 3 L.polyline([ [50.726970000, 2.974120000], [50.727520000, 2.974660000], ... , optionsOver).addTo(groupeEtape1); ... etc
Pour le code complet : https://nosmoking.developpez.com/dem.../d2052338.html C'est le code que NoSmoking m'a très gentiment créer !! Il n'a quasiment pas changé, à part niveau "esthétique"

Bref, merci d'avance à la (les) personne qui me trouveront une petite solution !!

Bonne sooirée et bon week-end !

Bonjour,
comme on n'a pas ton code final on va repartir de celui de la source fournie, excellente par ailleurs :ptdr: !

• Dans ton HTML il te faut d'abord ajouter les checkbox :

Code:

1
2
3
4
5
<ul>
  <li data-groupe="etape-1"><input type="checkbox" checked="checked">ES 1-5 | Deûlémont (10.38 km)</li>
  <li data-groupe="etape-2"><input type="checkbox" checked="checked">ES 2-6 | Bousbecque (4.45 km)</li>
  <li data-groupe="etape-3"><input type="checkbox" checked="checked">ES 3-7 | Quesnoy sur Deûle (9.43 km)</li>
</ul>

Tu pourrais également de décider de les créer dynamiquement mais autant les mettre directement dans le code HTML.
Le fait que ceux-ci soient déclarés checked fait que la couche correspondante sera afficher à l'ouverture de la page, ajoutée à la map.

• Il te faut une fonction d'initialisation de ta liste, contrairement à ce que l'on a dans la source cela sera plus propre, qui va préparer et affecter les actions sur les différents éléments de cette liste.

Je ne rentre pas dans le détail et te livre ce à quoi pourrait ressembler ta fonction :

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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
/**
 * Initialisation des actions sur les éléments de la liste
 */
function initListe(){
  // récup des éléments DOM liés
  const elements = document.querySelectorAll("[data-groupe]");
  elements.forEach(function(el) {
    const lien = el.dataset.groupe;
    if (lien && Groupes[lien]) {
      const group = Groupes[lien];
      //=======================
      // on traite les checkbox
      //=======================
      const check = el.firstElementChild;
 
      if (check && "checkbox" === check.type) {
        // ajout événement au click
        L.DomEvent.on(check, "click", function(e) {
          // pas d'effet indésirable (zoom)
          L.DomEvent.stopPropagation(e);
          // on montre le groupe
          if (this.checked) {
            oMap.addLayer(group);
          }
          // on masque le groupe
          else {
            group.fire("mouseout");
            oMap.removeLayer(group);
          }
        });
        // ajout du groupe à la carte si checked
        if( check.checked) {
          group.addTo(oMap);
        }
      }
      // actions sur mouse over/out
      group.on("mouseover mouseout", handleMouseInOut);
 
      //=========================================
      // on gére le click et autre mouse over/out
      //=========================================
      L.DomEvent.on(el, "click", function() {
        if (oMap.hasLayer(group)) {
          // masque le survol
          group.fire("mouseout");
          // déplace la map
          oMap.flyToBounds(group.getBounds());
        }
      });
      L.DomEvent.on(el, "mouseover mouseout", function(e) {
        if (oMap.hasLayer(group)) {
          group.fire(e.type);
        }
      });
    }
  });
}

• Cette fonction prend en compte l'affichage des différentes couches et l'affectation du mouveover/out, il te faut donc supprimer de ton code la partie correspondante à savoir :

Code:

1
2
3
4
5
6
7
8
9
10
11
// définition actions sur mouse over/out
// et ajout des groupes à la carte
groupeEtape1
  .on("mouseover mouseout", handleMouseInOut)
  .addTo(oMap);
groupeEtape2
  .on("mouseover mouseout", handleMouseInOut)
  .addTo(oMap);
groupeEtape3
  .on("mouseover mouseout", handleMouseInOut)
  .addTo(oMap);

... tu dois également supprimer la partie affection sur la liste qui est également prise en charge :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// récup des éléments DOM liés
const elements = document.querySelectorAll("[data-groupe]");
elements.forEach(function (el) {
  const lien = el.dataset.groupe;
  if (lien && Groupes[lien]) {
    const group = Groupes[lien];
    L.DomEvent.on( el, "click", function () {
      // masque le survol
      group.fire("mouseout");
      // déplace la map
      oMap.flyToBounds(group.getBounds());
    });
    L.DomEvent.on( el, "mouseover mouseout",  function (e) {
      group.fire( e.type);
    });
  }
});

• Voilà qui devrait être plus propre et surtout ne pas oublier d’appeler la fonction pour initialisation, si on résume tu devrais te retrouver avec :

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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
/**
 * Gestion des accès menu groupe
 */
const Groupes = {
  "etape-1": groupeEtape1,
  "etape-2": groupeEtape2,
  "etape-3": groupeEtape3
};
/**
 * Initialisation des actions sur les éléments de la liste
 */
function initListe(){
  // récup des éléments DOM liés
  const elements = document.querySelectorAll("[data-groupe]");
  elements.forEach(function(el) {
    const lien = el.dataset.groupe;
    if (lien && Groupes[lien]) {
      const group = Groupes[lien];
      //=======================
      // on traite les checkbox
      //=======================
      const check = el.firstElementChild;
 
      if (check && "checkbox" === check.type) {
        // ajout événement au click
        L.DomEvent.on(check, "click", function(e) {
          // pas d'effet indésirable (zoom)
          L.DomEvent.stopPropagation(e);
          // on montre le groupe
          if (this.checked) {
            oMap.addLayer(group);
          }
          // on masque le groupe
          else {
            group.fire("mouseout");
            oMap.removeLayer(group);
          }
        });
        // ajout du groupe à la carte si checked
        if( check.checked) {
          group.addTo(oMap);
        }
      }
      // actions sur mouse over/out
      group.on("mouseover mouseout", handleMouseInOut);
 
      //=========================================
      // on gére le click et autre mouse over/out
      //=========================================
      L.DomEvent.on(el, "click", function() {
        if (oMap.hasLayer(group)) {
          // masque le survol
          group.fire("mouseout");
          // déplace la map
          oMap.flyToBounds(group.getBounds());
        }
      });
      L.DomEvent.on(el, "mouseover mouseout", function(e) {
        if (oMap.hasLayer(group)) {
          group.fire(e.type);
        }
      });
    }
  });
}
initListe()

... à mettre au bon endroit.

[Edit] correction oubli d'un test sur L.DomEvent.on(el, "click", function()... dans fonction initListe()

Bonjour, wahouu !!! Tout simplement génial !! C'est incroyable ! :) Cela fonctionne parfaitement ! Oui je n'ai quasiment pas changé le code, il est excellent c'est vrai 8-)

Un énorme merci pour tout ce que vous avez fait !!!!

Du coup, par curiosité, si je veut afficher/cacher plusieurs couches je doit créer un nouveau groupe si j'ai bien compris

ex:
Code:

1 2 3 4 5 6 <ul> <li data-groupe="etape-0"><input type="checkbox" checked="checked">Parcours</li> <li data-groupe="etape-1"><input type="checkbox" checked="checked">ES 1-5 | Deûlémont (10.38 km)</li> <li data-groupe="etape-2"><input type="checkbox" checked="checked">ES 2-6 | Bousbecque (4.45 km)</li> <li data-groupe="etape-3"><input type="checkbox" checked="checked">ES 3-7 | Quesnoy sur Deûle (9.43 km)</li> </ul>
Mais pour les groupes à cacher, je mets les noms entre [] ??

ex
Code:

1 2 3 4 5 6 const Groupes = { "etape-0": [groupeEtape1, groupeEtape2,groupeEtpae3], "etape-1": groupeEtape1, "etape-2": groupeEtape2, "etape-3": groupeEtape3 };

Citation:

Cela fonctionne parfaitement ! Oui je n'ai quasiment pas changé le code, il est excellent c'est vrai 8-)

Pas entièrement, j'ai corrigé la source car j'avais oublié un test :oops:

Citation:

Du coup, par curiosité, si je veut afficher/cacher plusieurs couches je doit créer un nouveau groupe si j'ai bien compris
(...)
Mais pour les groupes à cacher, je mets les noms entre [] ??

Tu ne peux pas y arriver comme cela simplement mais en contournant le problème c'est faisable.

Explications :
• Il faut créer un featureGroup qui va encapsuler tes différentes étapes, par exemple :

Code:

1
2
3
4
5
6
7
8
9
10
11
// création des groupes parcours
const parcours1 = L.featureGroup();
const parcours2 = L.featureGroup();
 
// regroupement des étapes
parcours1
  .addLayer(groupeEtape1)
  .addLayer(groupeEtape2);
parcours2
  .addLayer(groupeEtape3)
  .addLayer(groupeEtape4);

et faire la déclaration comme initialement pour lier aux <li> :

Code:

1
2
3
4
5
6
7
8
const Groupes = {
  "parcours-1": parcours1,
     "etape-1": groupeEtape1,
     "etape-2": groupeEtape2,
  "parcours-2": parcours2,  
     "etape-3": groupeEtape3,
     "etape-4": groupeEtape4
};

ton code HTML pour la prise en compte devient :

Code:

1
2
3
4
5
6
7
8
9
<ul>
  <li data-groupe="parcours-1"><input type="checkbox" checked="checked">Parcours #1</li>
  <li data-groupe="etape-1"><input type="checkbox" checked="checked">ES 1-5 | Deûlémont (10.38 km)</li>
  <li data-groupe="etape-2"><input type="checkbox" checked="checked">ES 2-6 | Bousbecque (4.45 km)</li>
 
  <li data-groupe="parcours-2"><input type="checkbox" checked="checked">Parcours #2</li>
  <li data-groupe="etape-3"><input type="checkbox" checked="checked">ES 3-7 | Quesnoy sur Deûle (9.43 km)</li>
  <li data-groupe="etape-4"><input type="checkbox" checked="checked">ES 4-8 | Houplines (6.44 km)</li>
</ul>

A ce stade, sans rien changer, cela fonctionne mais il y a pas de synchronisation entre l'état des checkBox et l'affichage.

• Pour garder la synchronisation entre parcours et étapes, il faut lier les checkBox aux Group afin de pouvoir influer sur eux.
Il suffit dans la fonction de lier ces deux éléments simplement en créant un propriété supplémentaire au Group :

Code:

1
2
// ajout liaison groupe -> checkbox
group.btnCheck = check;

Pour synchroniser au click il suffira de parcourir les layers du Group et de mettre la checkBox à jour si elle existe.

Code:

1
2
3
4
5
6
// mise à jour checkbox liées
group.eachLayer(function(layer) {
  if (layer.btnCheck) {
    layer.btnCheck.checked = group.btnCheck.checked;
  }
});

... maintenat on mélange le tout et on le met dans la fonction initListe qui devient :

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
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
/**
 * Initialisation des actions sur les éléments de la liste
 */
function initListe(){
  // récup des éléments DOM liés
  const elements = document.querySelectorAll("[data-groupe]");
  elements.forEach(function(el) {
    const lien = el.dataset.groupe;
    if (lien && Groupes[lien]) {
      const group = Groupes[lien];
      //=======================
      // on traite les checkbox
      //=======================
      const check = el.firstElementChild;
 
      if (check && "checkbox" === check.type) {
        // ajout liaison groupe -> checkbox
        group.btnCheck = check;
        // ajout événement au click
        L.DomEvent.on(check, "click", function(e) {
          // pas d'effet indésirable (zoom)
          L.DomEvent.stopPropagation(e);
          // on montre le groupe
          if (this.checked) {
            oMap.addLayer(group);
          }
          // on masque le groupe
          else {
            group.fire("mouseout");
            oMap.removeLayer(group);
          }
          // mise à jour checkbox liées
          group.eachLayer(function(layer) {
            if (layer.btnCheck) {
              layer.btnCheck.checked = group.btnCheck.checked;
            }
          });
        });
        // ajout du groupe à la carte si checked
        if( check.checked) {
          oMap.addLayer(group);
        }
        else {
          oMap.removeLayer(group);
        }
      }
      // actions sur mouse over/out
      group.on("mouseover mouseout", handleMouseInOut);
 
      //=========================================
      // on gére le click et autre mouse over/out
      //=========================================
      L.DomEvent.on(el, "click", function() {
        if (oMap.hasLayer(group)) {
          // masque le survol
          group.fire("mouseout");
          // déplace la map
          oMap.flyToBounds(group.getBounds());
        }
      });
      L.DomEvent.on(el, "mouseover mouseout", function(e) {
        if (oMap.hasLayer(group)) {
          group.fire(e.type);
        }
      });
    }
  });
}

...il y a d'autres petites modifications, mais mineures dans le code.

Ce n'est peut-être pas très académique mais cela fonctionne.

J'espère avoir été clair !

• Exemple en ligne :

Leaflet : L.FeatureGroup()

[Edit] Ajout fichier de test

09/02/2021, 16h31
Yaneck

Wouha !!! Alors là c'est exactement ce que je voulais faire !!!!!!! Encore une fois un énorme merci , c'est inimaginable tout ce que l'on peut créer !! Chapeau !! :) Reste plus qu'a "importer" tout ça !!

Sujet résolu et clos du coup ;)

Encore merci pour tout, c'est vraiment sympa !!