title: Leaflet : LayerGroup of Popups can't have modified width / height
body: <p>My aim is to add additionnal popups for each <code>Marker</code> already defined in another <code>LayerGroup</code>. These <code>Popups</code> should then be controlled through a Leaflet <code>LayerControl</code>, displaying / hiding all the additionnal popups at the same time.</p>
  
  <p><a href="https://i.stack.imgur.com/k8XY0.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/k8XY0.png" alt=""></a></p>
  
  <p>As you can see in the linked image, it works great. My issue is that I now want to <strong>reduce</strong> the size of these popups, because they are quite big for the little information they contain.</p>
  
  <p>Here is my attempt using the function adding the Popups to another <code>LayerGroup</code>, and using the Leaflet <code>PopupOptions</code> : <code>maxWidth</code> and <code>maxHeight</code>, but it doesn't work at all.</p>
  
  <p>I noticed that <strong>it works as intended if I add the new Popups to the map directly</strong>, but <strong>I need to be able to control the <code>LayerGroup</code> from the <code>LayerControl</code></strong>. Do I have to use hacks through CSS to achieve my goal ? Isn't there a simple solution with my existing code ? </p>
  
  <p><strong>layers.conf.ts</strong></p>
  
  <pre><code>  const markers: L.Marker[] = GlobalMapService.jsonToArray(globalMapService.markersLayer.getLayers());
    const labelsLayer = L.layerGroup(null); // LayerGroup containing my Popups
  
    markers.forEach((marker, index) =&gt; {
      L.popup({
        offset: [2, -25],   // This works (needed for Angular integration).
        closeButton: false, // This works (as you can see).
        maxWidth: 30,       // This doesn't work at all with a LayerGroup.
        maxHeight: 25       // Same as above.
      })
        .setLatLng(marker.getLatLng())
        .setContent('ID : ' + (index + 1))
        .addTo(labelsLayer);
    });
  
    return labelsLayer;
  </code></pre>
  
  <p><strong>layers.conf.ts</strong></p>
  
  <pre><code>  const overlays: L.Control.LayersObject = {
      'Labels': labelsLayer
    };
    globalMapService.overlays = overlays;
  </code></pre>
  
  <p><strong>LeafletMapComponent.ts</strong></p>
  
  <pre><code>  const map = L.map(this.mapEl.nativeElement, {
      center: [51.505, -0.09],
      zoom: 7,
      layers: [
        this.leafletService.baseLayers['Standard'], // BaseLayer
      ]
    });
  
    L.control.layers(this.leafletService.baseLayers, this.globalMapService.overlays)
    .addTo(map);
  </code></pre>