3

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');

2 Answers 2

4

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
3
  • Aw interesting..that does remove it, thanks.. but how did you keep the image tile server control still visible or move it elsewhere?
    – vis
    Commented Jun 4, 2014 at 12:40
  • Sorry, which tile server are you using? maybe you could post a new question with more info.
    – neogeomat
    Commented Jun 4, 2014 at 16:42
  • for now i used this to remove it, thanks for help
    – yussan
    Commented Nov 5, 2019 at 5:08
0

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]);

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.