This article is used to introduce how to combine multiple layers into one, and how to use layers control to enable users to easily switch different layers on the map.

Layer Group

Suppose you have some layer that you want to merge into a group, and deal with these layer uniformly in your code:

Var littleton = L.marker ( [39.61-105.02]) .bindPopup ('This is Littleton, CO.')
Denver = L.marker ( [39.74-104.99]) .bindPopup ('This is Denver, CO.')
Aurora = L.marker ( [39.73.-104.8.]) .bindPopup ('This is Aurora, CO.')
Golden = L.marker ( [39.77-105.23]) .bindPopup ('This is Golden, CO.')

You can use the LayerGroup classes like this instead of adding them directly to the map one by one.

var cities = L.layerGroup([littleton, denver, aurora, golden]);

Note: another way to add LayerGroup:

Var cities = new L.layerGroup ()
L.marker ( [39.61-105.02]) .bindPopup ('This is Littleton, CO.') .addTo (cities)
L.marker ( [39.74-104.99]) .bindPopup ('This is Denver, CO.') .addTo (cities)
L.marker ( [39.73.-104.8.]) .bindPopup ('This is Aurora, CO.') .addTo (cities)
L.marker ( [39.77-105.23]) .bindPopup ('This is Golden, CO.') .addTo (cities)

It's that simple! Now you have a cities layer that integrates your city marker, you can add or delete them together on the map.

Layers Control

Leaflet has small controls that allow users to control which layers they can see on the map. Next we will not only show you how to use the Layer Control control, I also want to show you another convenient use of Layer Group.

There are two types of layers:

• base layers-mutually exclusive layers (only one layer can be visible at a time on the map), such as tile layers;
• overlay-Something else placed on top of the base layer.

In this example, we intend to use two base layers (a gray base and a color base diagram) and an open/close and overlay: the city marker we created earlier. Now let's create these base laysers in the map and set a default.

Var grayscale = L.tileLayer (mapboxUrl, {id: 'MapID', attribution: mapboxAttribution})
Streets = L.tileLayer (mapboxUrl, {id: 'MapID', attribution: mapboxAttribution})

Var map = L.map ('map', {
Center: [39.73,-104.99]
Zoom: 10
Layers: [grayscale, cities]
});

Next, we create two objects: one containing base layer and the other containing overlay. These are just simple key / value pair type objects. Keyword sets the text of the layer in the control (such as "Streets")，the value is the layer variable you created earlier (such as steets).

Var baseMaps = {
"Grayscale": grayscale
"Streets": streets
}

Var overlayMaps = {
"Cities": cities
}

All that's left is to create the Layers Control control and add it to the map. The first parameter is the base layer object, and the second parameter is the overlay object. Both parameters are optional: you can pass just a base layer object, or you can pass a single overlay object with null as the first parameter. This way, the omitted layer type will not appear in the user's selection list.

L.control.layers (baseMaps, overlayMaps) .addTo (map)

This way we added the grayscale and cities layers instead of the strees layer. The Layers Control control detects the layers that have been added, and sets the corresponding multi-check boxes and radio boxes. It should be noted that when using multiple base layers, only one of them can be added to the map at a time, but all of them need to be added to the base layers object when creating the layers control control.