Dynamic Layer Groups

HTML

<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css">
<script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script>
<div id="map"></div>

<div>
    <a id="monuments" href="#">Monuments</a>
    <a id="gardens" href="#">Gardens</a>
</div>

CSS

#map { height: 300px; }

JavaScript

// create a map in the "map" div, set the view to a given place and zoom
var map = L.map('map').setView([48.858190, 2.294470], 12);

var monumentsLayerGroup = false;
var gardensLayerGroup = false;
var layerControl = false;

// add an OpenStreetMap tile layer
var osm = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);


    var wmsmaeUrl = 'http://mapainteractivo.ambiente.gob.ec/geoserver/geosuia/ows?';
    var wmsAtribu = 'Thematic data &copy; <a href="http://suia.ambiente.gob.ec/">SUIA, MAE</a>, ' +
            '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>';
    var ecos = "geosuia:ecosistemas";
    var bioc = "geosuia:bioclima";
    var wmslayers = [
        {display:'Ecosistemas', wmsname:"geosuia:ecosistemas"},
        {display:'Bioclimas', wmsname:"geosuia:bioclima"},
    ]

layerControl = L.control.layers().addTo(map);

var getWmsTileLayers = function(url, layers, attrib){
        for (var i = 0; i < layers.length; i++) {
        	alert(layers[i].wmsname);
        	alert(layers[i].display);
        	layerControl.addOverlay(
        		L.tileLayer.wms(url, {
                layers: layers[i].wmsname,
                format: 'image/png',
                transparent: true,
                attribution: attrib
            }), layers[i].wmsname);
        }
        return false;
    }

getWmsTileLayers(wmsmaeUrl, wmslayers, wmsAtribu);

document.getElementById('gardens').onclick = function(evt) {
    
    if(gardensLayerGroup === false) {       
        // Tuileries: 48.864183, 2.326120
        // Champs de Mars: 48.855232, 2.299642
        // Luxembourg: 48.846958, 2.337150
        gardensLayerGroup = L.layerGroup()
        .addLayer(L.marker([ 48.864183, 2.326120 ]))
        .addLayer(L.marker([ 48.855232, 2.299642 ]))
        .addLayer(L.marker([ 48.846958, 2.337150 ]))
        .addTo(map);
    }
        
    if(layerControl...