Add Leaflet Overlay Creates Unwanted 2nd Map Selector

Question

I am adding overlays to an existing leaflet map. The first time I do it I only add different map types and I get the leaflet selector at the top right.

At a later time, in a different class that has access to the created map object, I want to add some more LayerGroups as overlays so they appear below the maps as checkbox items. After I add them, I get a new selector control in the map. I get one per overlay item I add.

I want to have all the new overlays appear on only one map selector. What am I doing wrong? Thanks.

  ngOnInit() 
  {
    var streetMaps = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', 
    { 
      id: '12', attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' 
    });

    this.map = L.map('map', 

    // Add the map layers.
    {
      center: [37.70718665682654, -98.701171875], // center in USA
      zoom: 5,
      layers: [streetMaps]
    });
    L.control.layers(this.GetGoogleBasemaps()).addTo(this.map);

  }

At a later time, I create a new LayerGroup, shown below, and add it to the map but I now get two Selector widgets on the map. One for the maps layers and one for my new overlay. The pictures below show the two different selectors. I only want one with the maps and new overlay in it.

    DisplayAllWellLocations(result: any) {
      if(this.wellsLayer == null) {
        this.wellsLayer = new L.LayerGroup<L.Circle>();
      }
      else {
        this.wellsLayer.clearLayers();
      }
      let wells: string[] = result;

      var wellsRenderer = L.canvas({ padding: 0.5 });
      for (let well of wells) {

        let wellJsonString: string = well;
        let jsonObj = JSON.parse(wellJsonString);
        let lgt: number = jsonObj.X;
        let lat: number = jsonObj.Y;
        let wellName: string = jsonObj.Name;
        let wellId: string = jsonObj.Identifier;

        L.circle([lat, lgt], 
        {
          radius: 5,
          renderer: wellsRenderer,
          color: '#000000',
          fillColor: '#006400',
          fillOpacity: 1, 
          weight: 1
        }).addTo(this.wellsLayer).bindPopup(wellName + " (" + wellId + ")");
      }

      var overlays = {
        "All Wells": this.wellsLayer
      };

    var baseLayers = {};


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

Answer 1

I finally figured it out. After I initially create my map and add the initial layers like this:

    var streetMaps = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', 
    { 
      id: '12', attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' 
    });

    this.map = L.map('map', 
    {
      center: [37.70718665682654, -98.701171875], // center in USA
      zoom: 5,
      layers: [streetMaps], 
    });

    let layerControl: L.Control.Layers = L.control.layers(this.GetGoogleBasemaps()).addTo(this.map);
    this.drawService = new DrawService(this.map, this.dataService, layerControl);

I then get a reference to the layerControl and pass it to my DrawService as shown in the last line above.

Then, in the DrawService, I add any new Layers to the map and then make a call to the L.Control.Layers addOverlay method like this:

      this.wellsLayer.addTo(this.map);
      this.controlLayer.addOverlay(this.wellsLayer, "All Wells");

Final result is shown below.