title: Adding multiple overlays to leaflet's layers control
body: <p>I have a LayerGroup in which several ImageOverlays are placed. These are all displayed correctly.</p>
  
  <p>Now I would like to be able to show and hide this LayerGroup within the LayersControl.</p>
  
  <p>My LayerGroup is defined within a function like this:</p>
  
  <pre><code>this.imgOvl.forEach((img) =&gt; {
    this.imgOvlGp.addLayer(img);
  });
  </code></pre>
  
  <p>If I add this LayerGroup to my existing and working overlays object, I get an error message:</p>
  
  <pre><code> lControl = {
      bLayers: {
        'Open Street Map': xyz
      },
      ol: {
        'GeoJSONs': xyz,
        'Image Overlays': this.imgOvlGp // does not work
      }
    };
  </code></pre>
  
  <p>I get this error message in the browser:</p>
  
  <blockquote>
    <p>MapViewComponent.html:1 ERROR TypeError: Cannot read property 'on' of
    undefined
        at NewClass._addLayer (leaflet-src.js:5101)
        at NewClass.addOverlay (leaflet-src.js:5005)
        at leaflet-control-layers.wrapper.js:52
        at DefaultKeyValueDiffer.push../node_modules/@angular/core/fesm5/core.js.DefaultKeyValueDiffer.forEachAddedItem
    (core.js:19640)
        at leaflet-control-layers.wrapper.js:51
        at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke
    (zone.js:391)
        at Zone.push../node_modules/zone.js/dist/zone.js.Zone.run (zone.js:150)
        at NgZone.push../node_modules/@angular/core/fesm5/core.js.NgZone.runOutsideAngular
    (core.js:17248)
        at LeafletControlLayersWrapper.push../node_modules/@asymmetrik/ngx-leaflet/dist/leaflet/layers/control/leaflet-control-layers.wrapper.js.LeafletControlLayersWrapper.applyChanges
    (leaflet-control-layers.wrapper.js:41)
        at LeafletControlLayersWrapper.push../node_modules/@asymmetrik/ngx-leaflet/dist/leaflet/layers/control/leaflet-control-layers.wrapper.js.LeafletControlLayersWrapper.applyOverlayChanges
    (leaflet-control-layers.wrapper.js:32)</p>
  </blockquote>
  
  <p>If I remove the the line..     </p>
  
  <pre><code> 'Image Overlays': this.imgOvlGp // does not work
  </code></pre>
  
  <p>..from the ol object, everything is working fine.</p>
  
  <p>Any ideas?</p>
  
  <hr>
  
  <p>UPDATE</p>
  
  <pre><code>  this.overlays = imgOverlays;
    this.overLayGroup = new L.LayerGroup().addTo(this.map);
  
    this.overlays.forEach((img) =&gt; {
      this.overLayGroup.addLayer(img);
    });
  
    // If I do it like this, it works..
    const overlay = {'Overlays': this.overLayGroup};
    L.control.layers(null, overlay).addTo(this.map);
  </code></pre>