How to add layers and update layer control dynamically : leaflet

Question

I am working with the lealflet api, where user can draw shapes to map(image)...

Initially the layer control(handling 1 layer) is added for base map using imageoverlay......

I have added a button of id 'newLyer' to page where click event handles the creation of new layer.....i.e user can create new layer and update layer control(which is now handling 2 layers)....

I have used several methods to create the layers and adding to control but failed....

Adding new layer to layerGroup

var layerGroup = new L.LayerGroup(),
                    imageOverlayUrl = 'aa.jpg',
                    // New imageoverlay added to the layergroup
                    imageOverlay = new L.ImageOverlay(imageOverlayUrl, bounds).addTo(layerGroup),
                    // New featuregroup added to the layergroup
                    featureGroup = new L.FeatureGroup().addTo(layerGroup);

LayerControl where i needed to add the control(if i am correct)

        var layerControl = new L.control.layers({
            'Main': layerGroup,
            //here i need to add new layer control
            }, null, { collapsed: false }).addTo(map);

OnClick function with so far static code, this will be executed on click

        $('#newLayer').click(function addNewLayer() {
            // Second layergroup not added to the map yet
            var layerGroupNew = new L.LayerGroup(),
                imageOverlayUrlNew = 'bb.png',
                // New imageoverlay added to the second layergroup
                imageOverlayNew = new L.imageOverlay(imageOverlayUrlNew, bounds).addTo(layerGroup2),
                // New featuregroup added to the second layergroup
                featureGroupNew = new L.FeatureGroup().addTo(layerGroupNew);
        });

In Short

Initially, i have one layer with its control, now onclick function creates the new layer which will be added to the map but how i can add this layer into layerControl....

If someone has idea about how to do this sort of thing, please do help,,,, any kind of help or reference will be appreciated.... Thanks for your time

Answer 1

If you look at the documentation for L.Control.Layers:

http://leafletjs.com/reference.html#control-layers

You'll see that L.Control.Layers has a addBaseLayer method:

http://leafletjs.com/reference.html#control-layers-addbaselayer

Adds a base layer (radio button entry) with the given name to the control.

Thus you can do:

layerControl.addBaseLayer(newBaseLayer, 'My New BaseLayer');

And you're good to go. As you see, you could have spared yourself the trouble of posting this question if you would have taken a look at the reference. Leaflet is very well documented. I've personally learned most that i know about Leaflet by reading the docs completely once of twice. Good luck with your project, cheers!