Leaflet Layers Control Example

by Jonatas Walker

HTML

<script src="//leafletjs.com/dist/leaflet.js"></script>
<link rel="stylesheet" href="//leafletjs.com/dist/leaflet.css">
<div id="map" style="width: 500px; height: 400px"></div>

JavaScript

var cities = new L.LayerGroup();
var cities_conflict = 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);

L.marker([39.60, -105.02]).addTo(cities_conflict),
L.marker([39.72, -104.99]).addTo(cities_conflict),
L.marker([39.71, -104.8]).addTo(cities_conflict),
L.marker([39.75, -105.23]).addTo(cities_conflict);

var mbAttr = 'Map data &copy; <a href="http://openstreetmap.org">'
    +'OpenStreetMap</a>contributors, <a href="http://creativecommons.org'
    +'/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © '
    +'<a href="http://mapbox.com">Mapbox</a>',
    mbUrl = 'https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6IjZjNmRjNzk3ZmE2MTcwOTEwMGY0MzU3YjUzOWFmNWZhIn0.Y8bhBaUMqFiPrDRW9hieoQ';

var grayscale = L.tileLayer(mbUrl, {
    id: 'mapbox.light', attribution: mbAttr}),
    streets  = L.tileLayer(mbUrl, {
        id: 'mapbox.streets',   attribution: mbAttr});

var map = L.map('map', {
    center: [39.73, -104.99],
    zoom: 10,
    layers: [grayscale, cities]
});

var baseLayers = {
    "Grayscale": grayscale,
    "Streets": streets
};
var l1 = 'l1',
    desc_l1 = 'Cities',
    span1 = '<strong><span id="'+l1+'">'+desc_l1+'</span></strong>',
    l2 = 'l2',
    desc_l2 = 'Cities II',
    span2 = '<span id="'+l2+'">'+desc_l2+'</span>',
    overlays = {};

overlays[span1] = cities;
overlays[span2] = cities_conflict;

L.control.layers(baseLayers, overlays).addTo(map);

var getInput = function(span){
    var cond = true,
        parent = span.parentNode,
        label,
        input;
    while(cond && parent){
        if(parent.tagName == 'LABEL'){
            cond = false;
            label = parent;
            break;
        }
        parent = parent.parentNode;
...