Détecter un clic sur une case cocher du Control.Layers

**jpe54** · 20/04/2020, 13h38

Bonjour,

Avec la library Leaflet, Control.Layers permet de sélectionner un fond de carte via des boutons radio > baseLayers.
Si fichier GPX une trace (liste de trackpoint) et / ou des points d'intérêt (waypoint) peuvent être affichés selon des cases à cocher > Overlays

Code :

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

1
2
3
4
5
6
7
8
9
10
11
var baseLayers = {
	"IGN": ign,
	"OpenStreetMap": osm
};
 
var overlays = {
	"Wpt": marker,
	"Trk": route
};
 
L.control.layers(baseLayers, overlays).addTo(map);

Une fois ce layer ajouté sur la carte la solution pour détecter une modification de fonds de cartes est listée dans différents exemples dans leur documentation.

Par contre, et lié avec une mauvaise maitrise de langue anglaise non technique, je n'arrive pas à trouver quel élément surveiller pour placer un event indiquant la case à cocher cliquée, sans placer un lien sur le nom de l'overlay affiché.

Comment procéder ?

Merci par avance,

Amitiés à tous, et prenez soin de vous !

PS : Solution en jQuery trouvée à ce lien : https://stackoverflow.com/questions/...rol-on-leaflet

Code :

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

1
2
3
4
5
6
7
8
9
10
11
$(".leaflet-control-layers-selector").on('click',function () {
    // get the selected option in the control layers :
    map.eachLayer(function () {
        if (typeof layer.options.layers !== "undefined" && layer.options.layers !== layer_name) {
            var seleted_opt = layer.options.layers;
        }
    });
    //function calls
});
 
//layer_name is the the name of my WMS_parcelle layer.

En ayant pris soin de charger une bibliothèque jQuery cela ne fonctionne pas malgré ce code vu dans l'OpenSource Leaflet.js :

Code html :

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

<input class="leaflet-control-layers-selector" type="checkbox">

Cette autre solution non plus : https://github.com/vogdb/Leaflet.ActiveLayers même en allant chercher les fichiers js absents.

Merci !

**NoSmoking** · 26/04/2020, 09h10

Bonjour,

je n'arrive pas à trouver quel élément surveiller pour placer un event indiquant la case à cocher cliquée, sans placer un lien sur le nom de l'overlay affiché.

tu n'as normalement rien à faire, c'est fait en « sous-marin ».

Exemple :

Code html :

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
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Leaflet Layers Control</title>
<meta name="Author" content="NoSmoking">
<meta name="DVP-discussion" content="d2064491">
<link href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" rel="stylesheet" >
<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"></script>
<style>
html, body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  font: 1em/1.5 Verdana,sans-serif;
}
main {
  margin: auto;
  max-width: 60em;
  min-height: 100vh;
  background-color: rgba(255,255,255,.5);
}
button {
  font: inherit;
}
#leaflet-carte {
  width: 60em;
  height: 40em;
  margin: auto;
}
</style>
</head>
<body>
<main>
  <h1>Leaflet Layers Control</h1>
  <p>
    <button>Afficher/Masquer A to L</button>
    <button>Afficher/Masquer M to Z</button>
  </p>
  <div id="leaflet-carte"></div>
</main>
<script>
// création de groupes d'affichages
const markersA2L = L.layerGroup();
const markersM2Z = L.layerGroup();
// données à traiter
var dataMarkers = [{
  lat: 44.837368,
  lng: -0.576144,
  ville: "Bordeaux",
  "groupe": markersA2L
}, {
  lat: 45.194276,
  lng: 5.731633,
  ville: "Grenoble",
  "groupe": markersA2L
}, {
  lat: 45.767299,
  lng: 4.834329,
  ville: "Lyon",
  "groupe": markersA2L
}, {
  lat: 43.297612,
  lng: 5.381042,
  ville: "Marseille",
  "groupe": markersM2Z
}, {
  lat: 48.856667,
  lng: 2.350987,
  ville: "Paris",
  "groupe": markersM2Z
}];
// création et affectation des markers aux différentes couches
dataMarkers.forEach( (d) => {
  L.marker([d.lat, d.lng]).bindPopup( d.ville).addTo(d.groupe);
})
// création des layers de base
const OSMLayer = new L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
  attribution: "&copy; <a href='https://www.openstreetmap.org/copyright'>OpenStreetMap</a> contributors"
});
const OSMRelief = L.tileLayer('https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png', {
  maxZoom: 17,
  attribution: "&copy; <a href='https://opentopomap.org'>OpenTopoMap</a> contributors"
});
// création de la map
const oMap = L.map("leaflet-carte", {
  center: [46.8, 2.0],
  zoom: 5,
  "layers": [OSMLayer, markersA2L]
});
// création d'un objet contenant les layers de base
const baseLayers = {
  "Plan": OSMLayer,
  "Relief": OSMRelief,
};
// création d'un objet contenant les overlays des markers
const overlayMarkers = {
  "Markers A to L": markersA2L,
  "Markers M to Z": markersM2Z
};
// création et ajout du contrôle des layers
L.control.layers(baseLayers, overlayMarkers).addTo(oMap);
// affichage des markers M à Z
markersM2Z.addTo(oMap);
/**
 * fonction d'affichage-masquage des overlays markers
 */
function toggleLayer(layer){
  const visible = oMap.hasLayer(layer);
  if (visible) {
    oMap.removeLayer(layer);
  }
  else {
    oMap.addLayer(layer);
  }
}
// même effet que le contrôle
const oBtns = document.querySelectorAll("button");
oBtns[0].onclick = () => toggleLayer(markersA2L);
oBtns[1].onclick = () => toggleLayer(markersM2Z);
</script>
</body>
</html>

[EDIT] mise à jour du code

**jpe54** · 26/04/2020, 18h15

Merci NoSmoking de ton intervention.

Mais ma question ne porte pas sur baselayers pour les fonds de cartes, mais sur le overlays (markers ou Polyline) que l'on peut ou non afficher sur la carte par une case à cocher.

je souhaiterai afficher des marqueurs complémentaires selon la ou les sélection(s) voire actionner automatiquement un zoom sur la zone concernée par la sélection sans avoir à positionner un lien sur son libellé.

**NoSmoking** · 27/04/2020, 10h30

Il te faut simplement passer par les méthodes addTo() ou addLayer() suivant le cas.

J'ai mis à jour le code de ma dernière réponse si cela peut éclaircir quelques points.

**jpe54** · 27/04/2020, 12h03

Un grand merci pour ce coup de main pour une amélioration que j'avais mise en suspens, et réactualisée en mettant en profit ce confinement.

Sans vous et ce fantastique Forum, je n'y serait pas arrivé car je persistais à chercher un objet pour adapter ce type de codage :

Code :

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

1
2
3
document.onclick = function (event) {
		console.log(event);
        }

ou via les informations DOM de ce lien sur : https://developer.mozilla.org/fr/doc...ggering_events

Prenez soin de vous ! et encore Merci.

Sujet résolu.

Détecter un clic sur une case cocher du Control.Layers [LeafLet]

Bibliothèques & Frameworks

Discussions similaires

Partager

Partager