title: How to add layers and update layer control dynamically : leaflet
body: <p>I am working with the lealflet api, where user can draw shapes to
  map(image)...</p>
  
  <p>Initially the layer control(handling 1 layer) is added for base map
  using imageoverlay......</p>
  
  <p>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)....</p>
  
  <p>I have used several methods to create the layers and adding to control
  but failed....</p>
  
  <p><strong>Adding new layer to layerGroup</strong></p>
  
  <pre><code>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);
  </code></pre>
  
  <p><strong>LayerControl where i needed to add the control(if i am correct)</strong></p>
  
  <pre><code>        var layerControl = new L.control.layers({
              'Main': layerGroup,
              //here i need to add new layer control
              }, null, { collapsed: false }).addTo(map);
  </code></pre>
  
  <p><strong>OnClick function with so far static code, this will be executed on click</strong></p>
  
  <pre><code>        $('#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);
          });
  </code></pre>
  
  <p><strong>In Short</strong></p>
  
  <p>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....</p>
  
  <p>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</p>