Layer Groups
Group a bunch of layers to dd it or remove it from the map at once
<![CDATA[
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.');
var cities = L.layerGroup([littleton, denver, aurora, golden]);
]]>
Layer Control
Leaflet has a nice little control that allows your users control what
layers they want to see on your map. In addition to showing you how to use it,
we’ll show another handy use for layer groups.
There are two types of layers — base layers that are mutually exclusive
(only one can be visible on your map), e.g. tile layers, and overlays —
all the other stuff you put over the base layers.
In this example, we want
to have two base layers (grayscale and night-style base map) to switch between,
and an overlay to switch on and off — city markers (those we created earlier).
Let’s create those layers and add the default ones to the map:
<![CDATA[
var grayscale = L.tileLayer('http://korona.geog.uni-heidelberg.de/tiles/roadsg/x={x}&y={y}&z={z}', {
maxZoom: 19,
attribution: 'Imagery from <a href="http://giscience.uni-hd.de/">GIScience Research Group @ University of Heidelberg</a> — Map data © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
});
var streets = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
maxZoom:19,
subdomains: ['a','b','c']
});
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.');
var cities = L.layerGroup([littleton, denver, aurora, golden]);
var geojsonFeature = [{
"type": "LineString",
"coordinates": [[-100, 40], [-105, 45], [-110, 55]]
}, {
"type": "LineString",
"coordinates": [[-105, 40], [-110, 45], [-115, 55]]
}];
var geoJsonLayer = L.geoJson(geojsonFeature);
var map = L.map('mapid', {
center: [39.73, -104.99],
zoom: 4,
layers: [grayscale, cities]
});
var baseMaps = {
"Grayscale": grayscale,
"Streets": streets
};
var overlayMaps = {
"Cities": cities,
"Geo Json Lines": geoJsonLayer
};
L.control.layers(baseMaps, overlayMaps).addTo(map);
]]>