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: "© <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: "© <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> |
