Leaflet Layer Control appended to panel but duplicated

Question

So I've used jquery append to attempt to move my leaflet group layer controls on to a panel. This was successful, however the original still exists on the right side of the map object. I've tried to remove this using jquery and css with no luck. I think my problem is I have set an id to the control but the id is only applied to the second instance of it, so the original control remains...Any ideas?

$("<input type='button' name='layercontrol' value='EMEA' id='buttonstyle' /><br />").click(function() {
$("#emealayer").toggle("slow");
}).appendTo(".panel");

var EMEA = {
"EMEA":object
};
var layerControlEMEA = L.control.groupedLayers({},EMEA, {collapsed:false} );

layerControlEMEA.addTo(edit.map);
$('.panel').append(layerControlEMEA.onAdd(edit.map));

layerControlEMEA._container.setAttribute('id','emealayer');

Answer 1

This is my solution

layersControlSettings = L.control.groupedLayers(baseLayers, overlays, {
    collapsed: false
});
layersControlSettings.addTo(map);
$('#layersControl').append(layersControlSettings.onAdd(map));  // layersControl is the div i want to add it to

I Added this line after adding to the panel

$('.leaflet-top.leaflet-right').hide(); // temporary solution for hiding layers control

Answer 2

I am using React and I had the same issue. It was actually caused by placing the L.control.layers inside the descendant (MyComponent) of a MapContainer.

function MyComponent() {
  const map = useMap()
  console.log('map center:', map.getCenter())

//DO not place L.control.layers HERE!!!

  return null
}

function MyMapComponent() {
  return (
    <MapContainer center={[50.5, 30.5]} zoom={13}>
      <MyComponent />
    </MapContainer>
  )
}

https://react-leaflet.js.org/docs/api-map/

The proper way to prevent duplication of leaflet control is by using the State Hook to save and return the stateful value of map.

const [omap, setOMap] = useState<L.Map>();

then, save the map value inside your descendant function:

function MyComponent() {
      const map = useMap()
      console.log('map center:', map.getCenter())
    
    //DO not place L.control.layers HERE!!!
    
      //Save map 
      useEffect(() => {
                setOMap(map);
        }, [map]);

      return null
    }
    

And finally, add the leaflet layer control inside the Effect Hook.

 useEffect(() => {

        if (omap) {
          //Create all the GroupLayers and add those to the map.
          L.control.layers(baseLayers, mixed, { collapsed: false }).addTo(omap);
        }

    }, [omap]);