Discussion :

[Yaneck]

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 HTML :

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

1
2
3
4
5
6
7
<ul>
  <li data-groupe="etape-1">ES 1-5 |
De&ucirc;l&eacute;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&ucirc;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 :

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

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

.....

Code :

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

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 !

[NoSmoking]

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

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

Code html :

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

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 :

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
/**
 * 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 :

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

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 :

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
// 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 :

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
/**
 * 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()

[Yaneck]

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

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 HTML :

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

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 :

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

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

[NoSmoking]

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

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

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 :

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

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 :

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

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 html :

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

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 :

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

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 :

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

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 :

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
/**
 * 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

[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 !!